项目场景：uniapp预览pdf安卓打不开，可以直接新建commonwebview来跳转外部链接浏览pdf

例如：uniapp里跳转外部链接

问题描述

例如：uniapp打开pdf安卓打不开，网上看了很多方法，都说安卓需要先下载再预览，但是本地测试调用uni.downloadFile访问生产服务器的文件会报错跨域，直接打包放生产运行控制台能返回success里的’下载成功‘，但实际上并没有下载文件

解决方案：

提示：不使用uni.downloadFile下载文件；进入资讯详情页A面先判断平台，如果是安卓直接通过外部链接方式打开pdf的url预览；如果是ios，则直接点击预览。

新建一个view页面commonwebview：

<template><web-view :src="url"></web-view>
</template><script>export default {data() {return {url:''}},onLoad(item) {this.url = item.url}}
</script><style lang="scss"></style>

资讯详情页A：
method里添加方法判断平台：

initPlatform(){uni.getSystemInfo({success: res => {console.log(res.platform);if (res.platform === 'android') {this.iOS = false;}else{this.iOS = true;}}});},

created()里调用initPlatform():

created() {this.initPlatform();},

在进入详情页方法中添加跳转（我这里是在init方法里，然后在onLoad里调用）：

onLoad(e) {this.init();},init() {if (this.iOS == false) {uni.navigateTo({url:'/pages/talent/commonwebview/commonwebview?url=' + this.htmlStr2})}}

注：我这里的页面是通过接口查询出html页面的代码(articleCon.content 也就是接口中的content )，然后通过div的v-html属性加载出页面，所以会存在截取pdf的url字符串的问题，下面附上截取方法：

<div v-html="articleCon.content" v-if="iOS"></div>

接口内容：

截取字符串：

     getCaption(str) {//获取某个字符串后面的字符串var index = str.lastIndexOf("ef="); //获取"ef="字符串首次出现的下标(这里的字符串可以根据自己的需要来写)str = str.substring(index + 4, str.length);return str;},getFront(str) {//获取前边的字符串var index = str.indexOf(".pdf"); str = str.substring(0, index + 4);return str;},

这样，将上面接口获取到的html代码前后截取，就可以获得自己想要的pdf链接了

后续：

上面的方法过了两天之后，发现部分安卓机型仍然无法打开。那就直接给用户个链接，让用户复制去浏览器打开；或者将pdf转成png。附上uniapp弹框复制的代码，看下面这篇文章
https://blog.csdn.net/weixin_49524349/article/details/124734937?spm=1001.2014.3001.5502

uniapp预览pdf安卓打不开，可以直接新建commonwebview来跳转外部链接浏览pdf相关推荐

PHP 使用微信JSSDK 拍照选择图片接口利用localid预览时安卓手机正常显示 iOS手机不显示
最近使用微信JSSDK文档的拍照和相册选择图片接口,通过给img标签设置获取到的localid实现图片预览,安卓手机中可以正常显示,而iOS手机中图片无法正常显示. 图像接口拍照或从手机相册中选图接 ...
uni-app 预览并使用模板
一.预览 1.作者是使用Hbuilder X 编辑器 2.文件---新建---项目---uni-app---Hello uni-app 3.找到App.vue---运行---运行到小程序模拟器(就可预 ...
前端预览word文件_2020国开形考计算机练习题Word练习
选择 1.在Word文档中要设置"页边距",则应该使用 . "文件|打印"选项卡中的"页面设置"命令 2.若要在打印文档之前预览应使用的命令 ...
uniapp预览图片不显示的问题
1.不能预览本地图片. 2.不能http开头. 3.只能是https开头才能预览图片. 4.本地图片生成url链接:生成url网址:https://sm.ms/ 5.把本地地址换成url链接就可以预览 ...
uniapp跳转外部链接和跳转内部网页的方法
1.打开外部链接使用内置组件web-view <template><view><web-view src="https://www.baidu.com&quo ...
xmind在线预览，编辑，保存，本地xmind读取、远程xmind文件流链接读取
https://github.com/xlzy520/Xminder 基于百度脑图,移除百度验证,在edit.html中配置远程链接与保存文件时调用的接口与方法.
Android PDF原生实现 PDF阅读、PDF手势伸缩、PDF目录、PDF预览缩略图 PDF方案选择 google doc android-pdfview mupdf pdf.js x5
##1.背景近期,公司希望实现安卓原生端的PDF功能,要求:高效.实用. 经过两天的调研.编码,实现了一个简单Demo,如上图所示. 关于安卓原生端的PDF功能实现,技术点还是很多的,为了咱们安卓开 ...
Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html
今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html ...
java代码编辑器 pdf文件预览主流SSM 代码生成器 shrio redis websocket即时通讯
获取[下载地址] QQ: 313596790 官网 http://www.fhadmin.org/ A 代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码 B 集成代码生成器 [ ...
uniapp实现图片预览功能
点击图片实现预览功能如下:  <view class="ms_shops"><swiper class="ms_swi ...

uniapp预览pdf安卓打不开，可以直接新建commonwebview来跳转外部链接浏览pdf

项目场景：uniapp预览pdf安卓打不开，可以直接新建commonwebview来跳转外部链接浏览pdf

问题描述

解决方案：

注：我这里的页面是通过接口查询出html页面的代码(articleCon.content 也就是接口中的content )，然后通过div的v-html属性加载出页面，所以会存在截取pdf的url字符串的问题，下面附上截取方法：

后续：

uniapp预览pdf安卓打不开，可以直接新建commonwebview来跳转外部链接浏览pdf相关推荐

最新文章

热门文章