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

1. 配置downloadFile域名

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

3. 微信小程序下载文件ios无法预览-完整方案

微信小程序上传文件可查看这篇文章：微信小程序上传文件response的内容返回格式需要转变为json对象

1. 配置downloadFile域名

登录小程序平台，找到【开发管理】-【开发设置】，在服务器域名模块设置downloadFile域名

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

注意事项：

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

downFile.wxml:

<view class="cell-list-wrap"><view class="cell-list-file" wx:for="{{lists}}" wx:key="index"><text class="title">{{item.name}}</text><text class="down topZindex" bindtap="onDown" data-fileurl="{{item.fileUrl}}">下载</text></view>
</view>

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.filedwx.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即可预览，忽略了保存文件方法

欢迎点赞并收藏，可以的话关注一下吧！（一键三连～）

光收藏不点赞的同学就不地道了哦！

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

微信小程序预览服务器图片,微信小程序实现图片选择并预览功能
本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textar ...
微信小程序在开发者工具和预览下边跳转都好好的真机预览就找不到页面，报错 {“errMsg“:“navigateTo:fail page \“***\“ is not found“}
微信小程序开发有这么一种情况: 在开发者工具里边随便点随便跳转,页面都能找到点击预览,手机扫码来回点来回跳,页面都能找到点击真机预览,来回点来回跳,偶尔页面就找不到了报错:(in promise ...
微信小程序图片上传和预览以及取消上传图片案例
前言: 做小程序项目遇到一个需求,就是上传图片和预览,以及取消指定的图片,其实这个功能挺好搞的,借助微信官方的API结合实现,只不过注意一点细节.不多说了直接上代码和效果图.大家可以直接复制我的代码进 ...
微信小程序做一个文档预览
文档预览首先展示效果 js页面 wxml页面首先展示效果图片预览: 视频预览 js页面首先在data中定义变量 itemId:null,saveTopList:[],//存储顶层文件列表fol ...
微信小程序开发者工具升级自动预览功能，福利啊
原来的预览方式,每次都得扫码! 现在的预览方式,只要点击预览,选择"自动预览",点击编译并预览,手机端会自动同步,是相当的不错哦.
微信小程序 - 商城项目 - 图片详情预览
要实现点击图片后进行一个全屏图片的详细预览功能点击图片后使用wx自带的 wx.previewImage({ }) // 点击详情轮播图事件handleTap(e){// 全屏预览wx.previe ...
微信小程序之wx.previewImage图片预览(多张图片预览)
wxml部分代码如下: <block wx:for="{{pictures}}" wx:for-item='item' wx:for-index='idx'><i ...
微信小程序云开发上传图片无法预览显示
这是图片无法预览显示的情况,而且文件格式显示也不显示为图片格式不要忘记要在起完名字后加上你希望的图片格式后缀名加完之后就可以正常显示了
微信小程序点击图片放大预览，新页面中全屏预览图片
第一步:在wxml中定义image组件,并设置绑定事件. <image src="{{priceUrl}}" bindtap="imgClick"> ...
微信小程序现实点击图片预览功能
html部分 <image bindtap="showPic"></image> js部分 showPic: function () {// 预览图片,放大 ...

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

1. 配置downloadFile域名

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

3. 微信小程序下载文件ios无法预览-完整方案

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

最新文章

热门文章