文件下载文件下载 乱码乱码 文件损坏文件损坏 打开打开undefind等几个坑点等几个坑点
前端请求二进制文件流,返回的是乱码,如下图:
这个时候先别急着找后端,只要能下载生成想要的文件,文件打开内容是正确的都好说.下面总结几种生成导出的写法:
一一. a标签点击下载标签点击下载
let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
let link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "导出文件.xls";
link.click();
window.URL.revokeObjectURL(link.href);
二二.浏览器浏览器url下载下载
let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
let url = window.URL.createObjectURL(blob);
window.location.href = url;
三三.插件下载插件下载
第一步:安装模块包
npm install file-saver
第二步:文件里引用
import * as FileSaver from 'file-saver';
第三步:请求返回函数
let blob = new Blob([res.data], {type: "application/vnd.ms-excel;charset=utf-8"});
FileSaver.saveAs(blob, "案件列表.xls");
这个时候点击导出或者下载,文件就下下来了,重点在于打开可能会出现文件损坏文件损坏,文件打开undefind.
两个点:
前后端分别检查前后端分别检查,返回的形式是否为返回的形式是否为blob形式形式.
解决办法解决办法
前端用原生axios写,否则responseType会设置无效.
axios的Authorization需要配置的别忘记:
axios.defaults.headers.common["Authorization"] =token;
axios({
method: 'POST',
url: `${link}/case/message/excel/export`,
data: selectedRowKeys,