微信小程序 - 下载文件到本地、打开文档

前言

需求场景描述：接口获取到服务器的文件地址，然后在小程序中下载文件到本地手机上。根据文件格式，下载类型分为下面四种情况：

下载图片到本地
下载视频到本地
打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx
下载音频到本地，以及其他格式文件

实现

下载图片到相册：saveImageToPhotosAlbum()
下载视频到相册：saveVideoToPhotosAlbum()
打开文档：openDocument()
下载音频到本地：FileSystemManager文件管理器、替代方案。

具体演示代码

1、下载图片到本地

onSavePic() {// #ifdef MP-WEIXINuni.getImageInfo({src: _this.imageUrl, // 图片下载网络地址success: function(e) {// e.type=png/jpg 扩展名// filePathNew: 指定文件下载后存储的路径 (本地路径)var filePathNew = wx.env.USER_DATA_PATH + "/" + new Date().valueOf() +'.'+e.type; uni.downloadFile({url: _this.imageUrl, filePath: filePathNew,success: (res) => {if (res.statusCode === 200) {uni.saveImageToPhotosAlbum({filePath: filePathNew,success: function() {uni.showToast({title: '保存到相册成功'});},fail: function(err){}});}}});},complete: function(e) {}});// #endif
},

2、下载视频到本地

实现方法同下载图片，只不过保存视频需要使用saveVideoToPhotosAlbum()方法。

onSaveVideo() {// #ifdef MP-WEIXINuni.downloadFile({url: this.videoUrl, success: (data) => {if (data.statusCode === 200) {uni.saveFile({tempFilePath: data.tempFilePath, //临时路径success: function(res) {uni.saveVideoToPhotosAlbum({filePath: res.savedFilePath,success:function(){uni.hideLoading()uni.showToast({title:"保存到相册成功"})}})}});}},fail: (err) => {uni.showToast({title: '失败请重新下载'});},});// #endif
},

3、打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx

onOpenDocment() {uni.downloadFile({url: this.fileUrl,// 网络文档地址success: (data) => {if (data.statusCode === 200) {uni.saveFile({tempFilePath: data.tempFilePath, //临时路径success: function(res) {// 保存路径uni.showToast({ title: "文件已保存："+res.savedFilePath,duration:3000 })setTimeout(()=>{//打开文档查看uni.openDocument({filePath:res.savedFilePath,success:function(res){console.log('打开文档成功')}})}, 3000);}});}},fail: (err) => {uni.showToast({title: '失败请重新下载'});},});
},

4、下载音频。

因微信平台限制，除了视频、图片支持下载文件到本地，以及部分文档格式支持直接打开，其他格式的文件不支持下载文件到本地。

微信小程序官网中，提到可以使用FileSystemManager文件管理器下载音频等其他格式文件。

使用FileSystemManager文件管理器下载文件，

文件主要分为两大类：

代码包文件：代码包文件指的是在项目目录中添加的文件。

本地文件：通过调用接口本地产生，或通过网络下载下来，存储到本地的文件。

其中本地文件又分为三种：

本地临时文件：临时产生，随时会被回收的文件。运行时最多存储 4GB，结束运行后，如果已使用超过 2GB，会以文件为维度按照最近使用时间从远到近进行清理至少于2GB。

本地缓存文件：小程序通过接口把本地临时文件缓存后产生的文件，不能自定义目录和文件名。跟本地用户文件共计，小程序（含小游戏）最多可存储 200MB。

本地用户文件：小程序通过接口把本地临时文件缓存后产生的文件，允许自定义目录和文件名。跟本地缓存文件共计，小程序（含小游戏）最多可存储 200MB。

本地用户文件：提供了一个用户文件目录给开发者，开发者对这个目录有完全自由的读写权限。通过 wx.env.USER_DATA_PATH 可以获取到这个目录的路径。解析到手机上的路径为，wxfile://usr/，真实路径：手机/内部存储/tencent/MicroMsg/wxanewfiles/xxxx/abc.mp3。

xxxx：是一个很长的由英文数字组成的文件夹，这个文件夹的明明规则，尚不清楚。所以保存后的文件具体在什么路径，并不知道。而且苹果手机，无法获取到微信内部的文件路径。因此这种方式pass。

要想实现下载音频的功能，就只能找替代方案。

方案1：下载文件保存为图片格式，保存成功后，更改扩展名。实现步骤如下：

①使用wx.downloadFile下载mp3文件后，使用FileSystemManager.save保存mp3文件为图片格式。

②保存成功后，再使用wx.saveImageToPhotosAlbum保存到相册，最后路径为：手机/内部存储/tencent/MicroMsg/WeiXin/mmexport1xxxxxx.jpg。1xxxxxx为时间戳，只能根据文件生成时间判断是哪个文件了。

这种方式比较繁琐，对于用户不适用。pass

方案2：复制音频网络地址，打开系统浏览器，在浏览器中下载音频。亲测有效。

苹果手机：
①、使用safari浏览器下载时，点击下方tab中的分享按钮，选择：‘存储到“文件”’选项，即可保存到手机的“文件”管理中。不支持重命名。
②、使用QQ浏览器，只可以在浏览器中播放音频，无法下载音频。

安卓手机：
①、浏览器中打开链接，可直接进行下载，并支持重命名。

复制网络地址到剪切板方法如下：

// 下载音频到本地
onSaveAudio() {uniCopy({content:this.audioUrl,// 音频下载链接success:(res)=>{uni.showToast({title: res})},error:(e)=>{uni.showToast({title: e,})}})
},
uniCopy({content,success,error}) {if(!content) return error('复制的内容不能为空 !')content = typeof content === 'string' ? content : content.toString() // 复制内容，必须字符串，数字需要转换为字符串/*** 小程序端 和 app端的复制逻辑*///#ifndef H5uni.setClipboardData({data: content,success: function() {success("复制成功~")},fail:function(){success("复制失败~")}});//#endif/*** H5端的复制逻辑*/// #ifdef H5if (!document.queryCommandSupported('copy')) { //为了兼容有些浏览器 queryCommandSupported 的判断// 不支持error('浏览器不支持')}let textarea = document.createElement("textarea")textarea.value = contenttextarea.readOnly = "readOnly"document.body.appendChild(textarea)textarea.select() // 选择对象textarea.setSelectionRange(0, content.length) //核心let result = document.execCommand("copy") // 执行浏览器复制命令if(result){success("复制成功~")}else{error("复制失败，请检查h5中调用该方法的方式，是不是用户点击的方式调用的，如果不是请改为用户点击的方式触发该方法，因为h5中安全性，不能js直接调用！")}  textarea.remove()// #endif
},

5、下载其他格式文件。与下载音频类似，具体有时间再补充。

注意：

下载资源的地址，下载之前必须设置微信公众平台开发设置中的服务器域名的downloadFile合法域名。资源地址必须来自合法域名才可以请求。

PS：图片、视频保存到相册需要获取权限方可保存，获取权限流程

PS：保存图片到相册出现*.unknown错误及saveImageToPhotosAlbum:fail invalid file type错误

微信小程序 - 下载文件到本地、打开文档相关推荐

微信小程序下载文件至本地，并打开文档
微信小程序下载文件至本地,并打开文档 downloadfile(e){var url = e.currentTarget.dataset.url;//下载文件,生成临时地址wx.downloadFil ...
微信小程序下载文件到本地（解决文件名乱码问题）
function loadfile(data){let url = data.file_urllet fileName =data.title;wx.showLoading({title: '正在打开 ...
微信小程序下载文件和转发文件给好友总结
这段时间公司让我负责小程序的一些功能开发,回想上次开发小程序还是在上一次,这次开发小程序主要实现的功能就是转发文件给好友和下载文件,总结一下这次遇到的各种问题和解决方法. 下载文件首先正常下载 wx ...
微信小程序下载文件wx.saveFile
//*注:wx.saveFile下载的文件只可以微信小程序内部访问,不可做外部访问 downloadFile: function(e) {wx.showLoading({title: '下载中...' ...
关于wx.downloadFile的URL 微信小程序下载文件服务器http服务的部署
作为一名学车辆的工科生,毫无计算机知识的情况下做微信小程序前后端的项目,玛德这个问题困扰了三天得以解决.下面总结一下,进行复盘. 一. 理解首先要先理解这个URL,就是下载文件的路径.这个路径需要能 ...
微信小程序 — 保存文件到本地
文章目录 wx.saveFile(Object object) FileSystemManager.saveFile(Object object) 下载文件至本地,并打开文档 wx.saveFile( ...
微信小程序下载文件并重命名，并在微信可以打开、保存并转发给好友
在开发中,遇到一个需求,需要预览.下载并保存PDF文件,实现文件的重命名,可以转发给微信好友开发代码如下 download() {// 判断文件目录是否存在, wx.env.USER_DATA_PA ...
QQ小程序下载文件到本地
通过QQ小程序自带的qq.cloud.downloadFile可将文件从云端下载,并保存至一个临时目录.这时如果我想把文件保存到手机本地怎么办呢? 第一个想法是通过QQ小程序自带的qq.saveFil ...
uniapp微信小程序下载文件，保存文件功能总结
//通用下载文件方法 const download = (attachLink) => {let that = thisuni.downloadFile({url: attachLink , / ...

微信小程序 - 下载文件到本地、打开文档

前言

实现

具体演示代码

微信小程序 - 下载文件到本地、打开文档相关推荐

最新文章

热门文章