一、前言

在uniapp的APP日常开发中，我们时常遇到一些兼容性问题，正如本文所提到的图片的预览和下载。在此功能的开发中，我常遇到以下四个问题：

图片预览功能实现，但是PDF,word,xls文件无法打开。
安卓的图片预览和文件查看功能正常，ios系统的手机却问题频出，时不时的无法打开文件。
图片第一次可以打开，第二次就报404，找不到文件。
预览不仅要满足安卓和ios系统，也要使浏览器也可以打开文件预览。

二、图片预览功能实现，但是PDF,word,xls文件无法打开

uni.previewImage()是uniapp的图片预览API,经常与uni.chooseImage()一起使用，不过本文中我们只用到uni.previewImage()即可。注：此API只支持打开图片类型文件。

根据官网文档所说，他只有一个必填参数，那就是urls，也就是图片的路径，因为这个参数是一个数组，我用时，直接把路径放到了一个数组里用,current这个参数是url的索引值，不写就默认是0。

         // 预览图片let url = 'https://www.123.com/'uni.previewImage({current: 0,urls: [url],success: function(data) {console.log('预览成功');},fail: function(err) {console.log(‘预览失败+’+err.errMsg);}    });

三、安卓的图片预览和文件查看功能正常，ios系统的手机却问题频出，时不时的无法打开文件。

uni.downloadFile()：把文件下载到本地，返回的是文件下载后的临时路径。必传参数url，string类型。
uni.saveFile(OBJECT)：把文件保存到本地。
uni.openDocument()：在新页面打开打开文件，支持doc, xls, ppt, pdf, docx, xlsx, pptx格式，常常与文件下载连用。

使用简例如下：

uni.downloadFile({url: url,success: function(res) {var filePath = res.tempFilePath;uni.saveFile({tempFilePath:filePath,success:function(res){//保存成功并打开文件uni.openDocument({filePath: filePath,success: (res) => console.log('成功打开文档'),fail:(res)=>{uni.showToast({icon:'none',title:'文件打开失败',duration:2000})}})}})}
});

在此功能是初始版本中，因为我发现此方法jpg,png等图片格式也都可以打开，抱着侥幸心理，我就不管是什么类型，就都用的这一套代码下载预览，后来安卓的图片预览和文件查看功能正常，ios系统的手机却问题频出，时不时的无法打开文件，改了好几个版本，都没从根本上解决问题。

后来我发现，每次打开图片，安卓手机都是直接打开到相册，但是ios的却是在app页面基础上直接打开，我怀疑是ios系统下载缓存机制与安卓不同，才会出现这样的问题，后来想了一套更加完善的方法(在第六章中展现)。

四、图片第一次可以打开，第二次就报404，找不到文件

这个问题好像是因为我们后端的原因，根据后端要求，让我在每次访问图片链接时，后面都拼接上时间戳，保证每次访问的链接结尾都不一样即可解决。

五、预览不仅要满足安卓和ios系统，也要使浏览器也可以打开文件预览

浏览器使用window.open(url,'_blank')即可打开，_blank是规定在新开页面打开文件，_self是在当前页面打开文件。

六、最终版本-兼容安卓、ios、浏览器

下面便是我屡败屡战，实践出来的最终结果，既满足了安卓、ios、浏览器三端的兼容问题，又满足了不管图片还是文件都可以预览的条件。

知识补充：通过使用#ifdef、#endif、#ifdef指示符，我们可以区隔一些特定的代码。

let url = data.url
let type = data.type//如果是app走这里
//#ifdef APP-PLUS
let times = Date.parse(new Date());//拼接时间戳
uni.downloadFile({url: url+'?code='+times,success: function(res) {var filePath = res.tempFilePath;if (type=== 'jpg' || type === 'jpeg' || type === 'png' || type === 'gif' ) {//如果是图片走这里uni.previewImage({current: 0,urls: [url],})}else{//如果是文件走这里uni.openDocument({filePath: filePath,success: (res) => console.log('成功打开文档'),fail:(res)=>{uni.showToast({icon:'none',title:'文件打开失败',duration:2000})}})}
}
});
//#endif
//#ifdef H5
//如果是浏览器走这里
window.open(url,'_blank');
//#endif

创作不易，可以朝我竖一个大拇指嘛~

uniapp图片或文件的预览和下载，兼容ios+安卓+浏览器相关推荐

Java 实现图片或文件在线预览及下载
效果图图片 pdf 代码 @GetMapping("/downFile")public void downFile(HttpServletResponse response, H ...
vue自定义组件实现文件列表预览与下载
由于ant-design-vue自带的a-upload组件与JeecgBoot封装的j-upload组件在查看上传文件列表时都不太满足项目需要,就自定义了文件列表查看组件,主要仿a-upload组件l ...
SpringBoot 图片上传，预览与下载
引言记录一下图片上传本地,并能在浏览器进行访问的方法配置文件yml # 开发环境配置 server:# 服务器的HTTP端口,默认为8080port: 8099 spring:# IO文件上传配置 ...
【预览pdf】:uniapp在微信小程序预览pdf，兼容安卓/IOS
前言提示:因最近项目需求,项目需要用uniapp来开发微信小程序预览pdf的功能, 后端以链接形式返回pdf地址. 一.方法概述开始用uniapp提供微信自带方法:wx.downloadFile( ...
使用Iframe打印预览pdf，兼容谷歌火狐浏览器
功能场景: 点击页面的打印按钮,可以调用浏览器的打印功能,并预览打印pdf文件. 解决火狐浏览器出现about:blank问题. 功能实现: 实现思路: 使用接口获取pdf文件的二进制流,响应类型为b ...
前端实现pdf文件的在线预览与下载
前言在项目中我们经常会出现各种各样的法律文件.免责说明等文件需要用户阅读,很多文件除了阅读外还要支持用户下载.为了快速开发,一些变动不大的文件,或者是项目中不想开发富文本的时候我们可以选择直接使用p ...
Springboot实现PDF预览、下载、读取
背景:项目中实现pdf文件的预览以及下载环境:jdk1.8.SpringBoot2.0 PDF.js下载地址将下载的源码拷入项目中修改viewer.js: 将defaultUrl: {value: ...
doc文件在线预览 vue_跨平台（uniapp）文件在线预览解决方案
一.前言之前写过一篇文章关于上传目录文件:uni-app系统目录文件上传(非只图片和视频)解决方案,这次来解决文件预览问题. uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者 ...
uni-app知识点整理（5）- 网络请求、数据缓存、图片上传和预览
目录一.网络请求 1.1 发送get请求二.数据缓存 2.1 uni.setStorage(OBJECT) 2.2 uni.setStorageSync(KEY,DATA) 2.3 uni.get ...

uniapp图片或文件的预览和下载，兼容ios+安卓+浏览器

一、前言

二、图片预览功能实现，但是PDF,word,xls文件无法打开

三、安卓的图片预览和文件查看功能正常，ios系统的手机却问题频出，时不时的无法打开文件。

四、图片第一次可以打开，第二次就报404，找不到文件

五、预览不仅要满足安卓和ios系统，也要使浏览器也可以打开文件预览

六、最终版本-兼容安卓、ios、浏览器

uniapp图片或文件的预览和下载，兼容ios+安卓+浏览器相关推荐

最新文章

热门文章

uniapp图片或文件的预览和下载，兼容ios+安卓+浏览器

一、前言

二、 图片预览功能实现，但是PDF,word,xls文件无法打开

三、安卓的图片预览和文件查看功能正常，ios系统的手机却问题频出，时不时的无法打开文件。

四、图片第一次可以打开，第二次就报404，找不到文件

五、预览不仅要满足安卓和ios系统，也要使浏览器也可以打开文件预览

六、最终版本-兼容安卓、ios、浏览器

uniapp图片或文件的预览和下载，兼容ios+安卓+浏览器相关推荐

最新文章

热门文章

二、图片预览功能实现，但是PDF,word,xls文件无法打开