当前项目需求,PDF/word/PPT格式的文件即可以预览,又可以下载到手机中。小程序中关于预览文件是有现成的API的,代码如下:
// 将文件下载到手机临时内存中,此时文件名为随机字符串
wx.downloadFile({
//文件url
url: 'http://xxxxx.pdf',
success: function(res) {
// 临时路径
const filePath = res.tempFilePath
// 打开本地文件
wx.openDocument({
filePath,
success(res) {
console.log(res)
},
fail(err) {
console.log(err);
}
})
})
})
预览功能的确可以实现了,紧接着又发现了两个问题:
- 当前文件无法下载到手机的真实存储中
- 预览时的文件名为随机字符串,特别长且奇丑无比
针对于以上两个问题,研究了好一会又推出了方案二(终极方案):
// 下载文件到手机内存中,此时文件名为随机字符串
wx.downloadFile({
//文件url
url: 'http://xxxxx.pdf',
success: function(res) {
// 临时路径
const filePath = res.tempFilePath
//将该文件从临时路径 tempFilePath 转移到本地文件 filePath中
const fileSystemManager = wx.getFileSystemManager()
fileSystemManager.saveFile({
// downloadFile的临时路径
tempFilePath: filePath,
// 指定存储位置及文件名
filePath: wx.env.USER_DATA_PATH + '/test.doc',
success(res) {
// 打开本地文件
wx.openDocument({
// 本地文件路径
filePath: res.savedFilePath,
// 右上角的设置按钮,可以有转发、保存到本地等功能
showMenu: true,
success(res) {
console.log(res)
},
fail(err) {
console.log(err);
}
})
},
fail(err) {
console.log(err);
}
})
}
})
}
以上代码完美解决以上两个问题:
- 问题1解决方案:wx.openDocument配置showMenu参数,只有通过微信提供的方法,才会真正下载到手机存储中。
- 问题2解决方案:fileSystemManager.saveFile将文件下载到小程序中,可以指定文件名。
最让我费解的是fileSystemManager.saveFile这个方法,说是将文件下载到本地,其实根本不是手机的存储中,而是专属于小程序的一块特殊空间。
打个比方(个人理解),微信相当于安卓系统,小程序相当于安装的APP:
- fileSystemManager.saveFile相当于 localStorage,关掉小程序后再进入文件依然存在,但删除小程序后就不存在了(卸载APP)。
- wx.downloadFile相当于 sessionStorage,关掉小程序后再进入就不存在了(退出APP)。