vue 后端返回文件流,前端下载后无法打开

Question

后端接口返回文件流，文件可以下载，但是打不开，显示“文件无法打开”，postman可以下载并打开。

封装的通用下载接口

export function download(url, params, filename) {
    downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)" })
    return service
        .post(url, params, {
            transformRequest: [
                (params) => {
                    return tansParams(params)
                },
            ],
            headers: { "Content-Type": "application/octet-stream" },
            responseType: "blob",
        })
        .then(async (data) => {
            const isLogin = await blobValidate(data)
            if (isLogin) {
                const blob = new Blob([data], { type: "application/vnd.ms-excel" })
                console.log(blob, "blob")
                saveAs(blob, filename)
            } else {
                const resText = await data.text()
                const rspObj = JSON.parse(resText)
                const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode["default"]
                Message.error(errMsg)
            }
            downloadLoadingInstance.close()
        })
        .catch((r) => {
            console.error(r)
            Message.error("下载文件出现错误，请联系管理员！")
            downloadLoadingInstance.close()
        })
}

点击按钮下载方法:传入接口地址,参数,文件名称

this.download(
                        `/keyLedgerExportExcel`,
                        { ids: this.ids },
                        `台账_${new Date().getTime()}.xlsx`
                    )

控制台打印的接口返回值,和最后的blob

接口返回值

能下载,但是打不开

Answer 1

试一下修改blob的类型

export function download(url, params, filename) {
    downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)" })
    return service
        .post(url, params, {
            transformRequest: [
                (params) => {
                    return tansParams(params)
                },
            ],
            headers: { "Content-Type": "application/octet-stream" },
            responseType: "blob",
        })
        .then(async (data) => {
            const isLogin = await blobValidate(data)
            if (isLogin) {
                const blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" }) // 修改了Blob的type
                console.log(blob, "blob")
                saveAs(blob, filename)
            } else {
                const resText = await data.text()
                const rspObj = JSON.parse(resText)
                const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode["default"]
                Message.error(errMsg)
            }
            downloadLoadingInstance.close()
        })
        .catch((r) => {
            console.error(r)
            Message.error("下载文件出现错误，请联系管理员！")
            downloadLoadingInstance.close()
        })
}