解决vue中使用axios来进行文件下载 出现乱码的问题 pk为前缀 (附带解决方案)

我们可以看到浏览器中输出的内容是pk前缀的乱码

我们将其转换为 Blob 格式后 来进行下载 代码如下：

download(page.value).then(res => {
        console.log(res.data);
        const blob = new Blob([res.data], { type: 'application/octet-stream' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'example.docx';
        a.click();
        URL.revokeObjectURL(url);
    });

下载后word文档内容打开后会提示

点击继续打开后 内容为乱码 内容如下

导致这个错误的原因为 我们在提交请求时没有指定返回值的类型

解决方法:

export function download(data){
    return request({
        url:'/question/question/download-word',
        method:'get',
        params:{
            typeId:data.typeId,
            question:data.question,
            subId:data.subId,
        }
    })
}

将其修改为：

// 导出word文件
export function download(data){
    return request({
        url:'/question/question/download-word',
        method:'get',
        responseType: 'blob',
        params:{
            typeId:data.typeId,
            question:data.question,
            subId:data.subId,
        }
    })
}

我们指定了其响应格式为 blob 格式 完美解决了这个问题