后端返回pdf文件流,前端请求返回乱码文件流下载之后pdf文件空白

发布时间 2023-11-07 17:37:59作者: 我的webgis之路

vue项目中遇到个问题:后端返回pdf文件流,前端请求返回乱码文件流下载之后pdf文件空白

解决办法:

在请求接口的时候设置responseType: "blob"。

axios.get(url,{
        responseType: "blob",//这里一定要设置,否则返回的流是乱码,下载之后文件是空白的
    }).then(res => {
        const blob = new Blob([res.data], { type: 'application/pdf' });
        const pdfUrl = window.URL.createObjectURL(blob);
        if (typeof window.navigator.msSaveBlob !== "undefined") {
            window.navigator.msSaveBlob(pdfUrl, fileName.value);
        } else {
            const link = document.createElement('a');
            link.href = pdfUrl;
            link.setAttribute('download', fileName.value);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link) 
            window.URL.revokeObjectURL(pdfUrl) //释放掉blob对象
        }
    })

这样请求之后res.data是一个Blob对象,而不是乱码了。