vue中由 window.open转为二进制流下载 遇到下载之后无法打开或乱码的坑 (responseType: ‘blob‘ 无效) |
您所在的位置：网站首页 › excel提示文件格式无效 › vue中由 window.open转为二进制流下载 遇到下载之后无法打开或乱码的坑 (responseType: ‘blob‘ 无效) |
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注释掉就可以了.
|
【本文地址】
今日新闻 |
推荐新闻 |