vue中由 window.open转为二进制流下载 遇到下载之后无法打开或乱码的坑 (responseType: ‘blob‘ 无效)

我项目中 request.js文件用的是 axios请求的.

如果使用 window.open 下载的话没有太多要求了,但是安全性不行.

如果使用 二进制流的话就需要设置: responseType: 'blob' (设置请求返回类型)

function exportData(orgId, personName, gender) {
    return request({
        url: '/console/export/personal?orgId=' + orgId + '&personName=' + personName + '&gender=' + gender,
        method: 'get',
        responseType: 'blob',
    })
}

封装一个模拟超链接下载的方法  reagentData.js 文件 :

// 导出文件前端处理
function exportExcelIN(data,fileName){
    var blob = new Blob([data], {
        type: "application/vnd.ms-excel;charset=utf-8",
    });
    const URL = window.URL || window.webkitURL;
    const downloadElement = document.createElement("a");
    const href = URL.createObjectURL(blob); // 创建下载的链接
    downloadElement.href = href;
    downloadElement.download = fileName; // 下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); // 点击下载
    document.body.removeChild(downloadElement); // 下载完成移除元素
    URL.revokeObjectURL(href); // 释放掉blob对象
}

export default {
    exportExcelIN
}

 当我调用接口获取后台数据,把后台数据和文件名给 reagentData.js文件中的exportExcelIN 进行超链接下载后,下载的文件打不开.

当我打印下载的数据时发现什么东西?

 返回的data是乱码而不是blob类型的. 通过不断地采坑发现是 mockjs影响的! ! !

由于这个项目不是我自己写的,不知是谁安装了一个mockjs模块用来模拟接口数据.

因为 mockjs 会拦截axios, 初始化的时候给拦截响应设置了 responseType: ' ', 只需要把 mockjs注释掉就可以了.