vue 下载 流文件 导出表格

vue 下载 流文件 导出表格

我们在有时候会接到导出的任务，这里如果是后端给你下载地址的话，这样会好很多，但是也有很多是后端返回的流文件，这个时候 后台返回的

然后我们需要转码

方法一：

通过插件https://github.com/kennethjiang/js-file-download

然后

安装

npm install js-file-download --save

在需要使用的地方

var fileDownload = require("js-file-download");

接口文件部分

//以下fileName是取后台的文件名,如果没有'content-disposition',可以直接略过这一步,自己定：如fileName="xxx.xlsx"。
exportExport(参数).then(res => {
  	let fileName = res.headers['content-disposition'].match(/fushun(\S*)xls/)[0];
　　 fileDownload(res.data,fileName);
}).catch(error => {
	console.log(error)
})

方法二

通过Blob实现

exportExport(参数).then(res => {
	let blob = new Blob([res], {type: "application/vnd.ms-excel"}); 
	let objectUrl = URL.createObjectURL(blob); 
	window.location.href = objectUrl;
}).catch(error => {
	console.log(error)
})

更新 方法三

其实方法三和方法二也是很像的，不过这里要自己创建a标签
我们在接口管理文件中

export function exportList(data) {
  return request({
    url: "/api/demo/result/exportResult",
    method: "post",
    responseType: "blob", // 看到这个没有，重点
    data,
  });
}

exportList(xxxx).then(res => {
      const aEle = document.createElement("a"); // 创建a标签
      const href = window.URL.createObjectURL(res); // 创建下载的链接
      aEle.href = href;
      aEle.download = "信用报告模型.xlsx"; // 下载后文件名
      document.body.appendChild(aEle);
      aEle.click(); // 点击下载
      document.body.removeChild(aEle); // 下载完成移除元素
      window.URL.revokeObjectURL(href); // 释放掉blob对象
})

使用这个也可以下载出来你想要的文件