vue + axios二进制文件流，导出Excel文件；下载文件；

后端返回的是文件流，需要前端转换成Excel文件并下载到本地，具体写法如下：

 axios.post('/api/export', qs.stringify(params), {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded', //请求的数据类型为form data格式
     },
    'responseType': 'blob'  //设置响应的数据类型为一个包含二进制数据的 Blob 对象，必须设置！！！
}).then(function (response) {
    const blob = new Blob([response.data]); 
    const fileName = 'xxx.xls';
    const linkNode = document.createElement('a');
    linkNode.download = fileName; //a标签的download属性规定下载文件的名称
    linkNode.style.display = 'none';
    linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
    document.body.appendChild(linkNode);
    linkNode.click();  //模拟在按钮上的一次鼠标单击
    URL.revokeObjectURL(linkNode.href); // 释放URL 对象
    document.body.removeChild(linkNode);

}).catch(function (error) {
    console.log(error);
});

按照网上的一些写法，但是请求时都没有加上responseType:blob，出现的错误类型
1、导出的文件乱码
2、
const blob = new Blob([response.data])
写成
const blob = new Blob([response.data],{type: ‘application/vnd.ms-excel’})
导出的文件打开，显示为[object Object]
所以，解决乱码问题的关键就是请求时加上 ‘responseType’: ‘blob’

上文参考链接

直接搬过来用

axios接口必要配置

// 封装axios get方法
export function sendGet(
  url,
  params= {},
  options= {}
){
  return new Promise(async (resolve, reject) => {
    try {
      options["params"] = params;
      let res = await axios.get(url, options);
      if (res) {
        resolve(res);
      }
    } catch (e) {
      reject(e);
    }
  });
}
// 封装的业务接口
export const export = (data) =>
  sendGet(`接口url`, data, { responseType: "blob" }); // responseType: "blob" 必须设置 不然会乱码

Javascript方法

export default (res, fileName) => {
  var blob = new Blob([res], { type: "application/vnd.ms-excel" }); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
  var downloadElement = document.createElement("a");
  var href = window.URL.createObjectURL(blob); //创建下载的链接
  downloadElement.href = href;
  downloadElement.download = fileName; //下载后文件名 `锁定名单.xlsx`
  document.body.appendChild(downloadElement);
  downloadElement.click(); //点击下载
  document.body.removeChild(downloadElement); //下载完成移除元素
  window.URL.revokeObjectURL(href);
};