本文介绍前端如何接收后端返回的二进制流文件并导出为Excel。通过封装GET接口指定responseType为blob，利用URL.createObjectURL生成临时链接触发下载，并结合确认对话框优化用户体验。
首先，需要接收后端返回的二进制流文件数据。
在导出Excel功能中，直接调用showConfirm函数即可触发相应的处理逻辑。
最终实现的界面效果如下图所示。
以下是具体的代码实现示例。
export function getExport(param) {
get('/api/xdata/v1/basic/auth/excel', { ...param }).then((res) => {
// let name = getFileName(url);
let name = 'export.xlsx';
console.log('res', res);
// let u = window.URL.createObjectURL(new Blob([res]));
const type = 'application/vnd.ms-excel;charset=utf-8'; //excel文件
let u = window.URL.createObjectURL(new Blob([res], { type: type }));
let a = document.createElement('a');
a.download = name;
a.href = u;
console.log(a);
a.style.display = 'none';
document.body.appendChild(a);
a.click();
a.remove();
// setTimeout(myDlWarn, 0);
});
}
export function showConfirm(text, exportParams) {
confirm({
title: `您确认要导出${text}吗`,
icon: <ExclamationCircleOutlined />,
content: '',
okText: '确认',
okType: 'primary',
cancelText: '取消',
onOk() {
getExport(exportParams);
},
onCancel() {
console.log('Cancel');
},
});
}其中，get接口为项目自行封装，具体封装逻辑如下所示。
/**
* 从 cookie 中获取数据
* @param {string} cname cname
*/
export const getCookie = (cname) => {
var name = cname + '=';
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return '';
};
const ajax = (method, url, data, options = {}) => {
const isPost = method === 'post';
const isPut = method === 'put';
const isPatch = method === 'patch';
const isGet = method === 'get';
const sentOptions = {
url,
method,
withCredentials: true, // 允许跨域
credentials: 'include',
headers: {
'X-Request-By': 'ERApplication',
'X-Requested-With': 'XMLHttpRequest',
'X-Region': 'bj',
'X-From': 'web',
},
...options,
};
if (isPost || isPatch) {
sentOptions.headers['Content-Type'] = 'application/x-www-form-urlencoded';
sentOptions.data = JSON.stringify(data);
} else if (isPut) {
sentOptions.data = JSON.stringify(data);
} else if (isGet) {
sentOptions.headers['Content-Type'] = 'utf-8';
sentOptions.params = data;
}
return new Promise((resolve, reject) => {
axios(sentOptions)
.then((response) => {
resolve(response.data);
.catch((error) => {
console.log('catch');
reject(error);
});
});
};
export const get = (url, data = {}) => {
return ajax('get', BASE_URL + url, data, { responseType: 'blob' });
};最后进行简要总结。
至此，关于前端处理二进制流文件导出为Excel表的文章介绍完毕。如需了解更多相关技术内容，可搜索本站历史文章或继续浏览后续内容，感谢支持。