uniapp——App下载文件，打开文档（一）

uniapp如何下载文件、打开文件

相关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;
},