直接上代码
// 接口请求我们用的是axios的插件
import axios from "axios";
import { Message } from 'element-ui'; // Message为element-ui的弹窗提示组件
// url为后端接口地址
//data为请求接口携带的数据
//methods为请求方法
async function exportXls(url,data, name, method=get){
await axiox( {
method,
url,
data,
params:data,
responseType: 'blob', // 关键点在这
timeout: 30000
}).then(res => {
if(res.type === 'application/json'){ // 返回的数据为json格式
const fileReader = new FileReader();
fileReader.onload = ()=> {
try {
const jsonData = JSON.parse(fileReader.result); // 说明是普通对象数据,后台转换失败
if(jsonData.code === 0){
Message.success( '操作成功');
} else {
Message.error(jsonData.msg ? jsonData.msg : '导出失败');
}
} catch (err) { // 解析成对象失败,说明是正常的文件流
console.log(err);
toFile(res,name);
}
}
fileReader.readAsText(res);
} else { // 返回二进制流数据 就转成xls文件下载
toFile(res,name);
}
})
}
toFile方法在这.
toFile是把后端返回的二进制流数据转成xls文件并下载
function toFile(res, name=‘返回文件名’){
if(!res || !(res instanceof Blob))return;
const link = document.createElement('a')
let blob = new Blob([res],{type: 'application/vnd.ms-excel;charset=UTF-8'});
link.style.display = 'none'
link.href = window.URL.createObjectURL(blob);
link.setAttribute('download', name);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(blob);
}
版权声明:本文为w807139809原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。