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', // 下载资源的 url
        header,
        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;
},