uniapp如何下载文件、打开文件
文章目录
- uniapp如何下载文件、打开文件
- 下载文件
- 下载文件成功返回数据格式
- 打开文档
- 处理` iOS` 打开文件可能失败问题
相关API:
- uni.downloadFile
- uni.openDocument
注意:
- 只支持 GET 请求,需要 POST的,可以看另一篇文章;
- 打开文档:不支持H5;
- 为了方便测试,这里没有封装,自行抽取即可;
- 只测试APP Android端,其他设备没有细测;
下载文件
在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。在h5上是跨域的,用户需要处理好跨域问题。
- 通过
uni.downloadFile
结合uni.openDocument
实现; - 下载成功后,直接打开文档,没有做保存操作;
- 如需监听下载进度:调用
onProgressUpdate
downloadFile() {// 头部信息根据实际情况填写let header = {Authorization: getToken()}uni.downloadFile({url: 'xxx/export', // 下载资源的 urlheader,success: (res) => {const { statusCode, tempFilePath } = res;console.log('下载成功--->', res);if (statusCode == 200) {this.openDocument(tempFilePath);}},fail: (err) => {uni.showToast({title: '下载失败',icon: 'error'})}})
}
下载文件成功返回数据格式
- 返回文件的本地临时路径
{"tempFilePath": "_doc/uniapp_temp_1735636109698/download/export","statusCode": 200,"errMsg": "downloadFile:ok"
}
打开文档
openDocument(filePath) {filePath = this.fileNameEscape(filePath)uni.openDocument({filePath,showMenu: true, // 右上角是否有可以转发分享的功能fileType: 'xlsx', // 文件类型,有效值 doc, xls, ppt, pdf, docx, xlsx, pptx,success: (res) => {uni.showToast({title: '打开文档成功'})},fail: (err) => {uni.showToast({title: '打开文档失败',icon: 'error'})}})
},
处理 iOS
打开文件可能失败问题
- 下载文件名中包含中文字符时会失败情况
fileNameEscape(filename) {if (uni.getSystemInfoSync().platform == "ios") {filename = escape(filename);}return filename;
},