微信|微信小程序文件实现下载并预览（ios及安卓手机）微信|微信小程序文件下载

【微信|微信小程序文件实现下载并预览（ios及安卓手机）】目录
1. 配置downloadFile域名
2.下载文件-代码实现以及注意事项
3. 微信小程序下载文件ios无法预览-完整方案

微信小程序上传文件可查看这篇文章：微信小程序上传文件response的内容返回格式需要转变为json对象
1. 配置downloadFile域名登录小程序平台，找到【开发管理】-【开发设置】，在服务器域名模块设置downloadFile域名

文章图片

2.下载文件-代码实现以及注意事项注意事项：

后端返回的下载url地址必须是可预览的，不然无法在手机上查看预览
wx.openDocument,注意fileType属性的值
wx.saveFile方法本地文件存储的大小限制为 10M，所以在下载之前先将本地缓存的文件一一删除

downFile.wxml:

{{item.name}} 下载

downFile.js:

// 下载Component({ properties: { lists: { type: Array, value: [] } }, data: {}, ready: function() { }, methods: {// 下载文件 /** * 本地文件存储的大小限制为 10M */ onDown(e){wx.getSavedFileList({// 获取文件列表 success(res) { res.fileList.forEach((val, key) => { // 遍历文件列表里的数据 // 删除存储的垃圾数据 wx.removeSavedFile({ filePath: val.filePath }); }) } })wx.downloadFile({ //下载 url: e.target.dataset.fileurl, // 从后端获取的url地址，赋值在标签的data属性上success: function(res){ const tempFilePath = res.tempFilePath; wx.saveFile({ //保存文件到本地 tempFilePath, success (res) {const savedFilePath = res.savedFilePath; wx.openDocument({ //新开页面打开文档 filePath: savedFilePath, showMenu: true, flieType: 'pdf', success: function (res) { console.log('打开文档成功') }, fail: function(err){ console.log('打开文档失败：', err) } }); }, fail: function (err) { console.log('保存失败：', err) } }) }, fail: function (err) { console.log('下载失败：', err); } }) }} })

产生的问题：
以上经验证，安卓手机上文件或者图片均可预览，唯独ios手机无法打开！！！！
提示以下内容：

文章图片

在ios手机上提示： openDocument:fail filetype not supported
3. 微信小程序下载文件ios无法预览-完整方案针对ios手机，wx.downloadFile方法要设置filePath,指定文件下载后存储的路径 (本地路径), 才可预览文件
完整最新版代码如下：

思路：区分url类型，若为['doc','docx','xls','xlsx','ppt','pptx','pdf']中的一种，则执行wx.openDocument()；若为["jpg", "jpeg", "png"]中的一种，则执行wx.previewImage()

// 下载 Component({ properties: { lists: { type: Array, value: [] } }, data: {}, ready: function() { }, methods: { // 判断文件类型 whatFileType(url){ let sr = url.lastIndexOf('.') //最后一次出现的位置 let fileType = url.substr((sr+1)) // 截取url的类型 return(fileType) },// 下载文件 /** * 本地文件存储的大小限制为 10M */ onDown(e){ let fileTypes = ['doc','docx','xls','xlsx','ppt','pptx','pdf'] let imageTypes = ["jpg", "jpeg", "png"] let fileType = this.whatFileType(e.target.dataset.fileurl) let fileId = e.target.dataset.filed wx.showLoading({ title: '加载中', }) wx.getSavedFileList({// 获取文件列表 success(res) { res.fileList.forEach((val, key) => { // 遍历文件列表里的数据 // 删除存储的垃圾数据 wx.removeSavedFile({ filePath: val.filePath }); }) } }) wx.downloadFile({ url: e.target.dataset.fileurl, filePath: wx.env.USER_DATA_PATH + "/"+ fileId + "."+fileType, method: 'GET', success: function(res){ if(fileTypes.includes(fileType)){ wx.openDocument({ filePath: res.filePath, showMenu: true, flieType: fileType, success: function (res) { wx.hideLoading() console.log('打开文档成功') }, fail: function(err){ wx.hideLoading() console.log('打开文档失败：', err) } }); }else if(imageTypes.includes(fileType)){ wx.hideLoading() wx.previewImage({ showmenu: true, current: res.filePath, // 当前显示图片的http链接 urls: [res.filePath] // 需要预览的图片http链接列表 }) }else{ wx.hideLoading() wx.showModal({ title: '提示', content: "文件类型不支持预览", showCancel: false }) } }, fail: function (err) { wx.hideLoading() wx.showToast({ title: "下载超时", icon: 'none' }) console.log('下载失败：', err); } }) }} })

最新版代码去掉了wx.saveFile方法。直接wx.downloadFile后wx.openDocument即可预览，忽略了保存文件方法

欢迎点赞并收藏，可以的话关注一下吧！（一键三连～）
光收藏不点赞的同学就不地道了哦！