1.axios ,在页面直接调用
const response = await axios({
method: 'post',
url: url, // 替换为你的后端接口
responseType: 'blob', // 设置响应类型为 blob
data: obj,//接口传值
headers: {
['Authorization']: getToken()//传token
}
});
console.log('response', response);
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'filename.xlsx'); // 替换为你想要的文件名和扩展名
document.body.appendChild(link);
link.click();
link.remove(); // 下载完成后移除链接元素
2.写个方法index.js,页面调用这个方法
2.1index.js
import request from '@/utils/request';
/**
* 导出
*/
export async function exportOrder(params) {
const res = request({
url: url,
method: 'POST',
data: { ...params },
responseType: 'blob',
headers: {
'Content-Type': 'application/json'
}
});
return res;
}
2.2页面调用,这是成功的时候,导出的是文件流
exportOrder({ ...obj })
.then((response) => {
loading.value = false;
EleMessage.success({
message: `导出成功`,
plain: true
});
download(response.data, `${form.name}.xlsx`);
handleCancel();
})
.catch((e) => {
EleMessage.error({ message: '导出失败', plain: true });
});
});
3.当调用失败的时候,需要解析后台返回的JSON数据
exportOrder({ ...obj })
.then((response) => {
loading.value = false;
const { status, data: blob } = response;
if (status >= 400) {
EleMessage.error({ message: '导出失败', plain: true });
return;
}
const contentType = response.headers['content-type'];
if (
contentType &&
(contentType.includes('application/json') ||
contentType.includes('text/plain'))
) {
return handleBlobAsError(blob);
}
EleMessage.success({
message: `导出成功`,
plain: true
});
download(response.data, `${form.name}.xlsx`);
handleCancel();
emit('done');
})
.catch((e) => {
EleMessage.error({ message: '导出失败', plain: true });
});
失败调用的方法handleBlobAsError
/* 导出失败的数据 */
const handleBlobAsError = async (blob) => {
const text = await blob.text(); // 将 Blob 转为文本
try {
const json = JSON.parse(text);
// 如果成功解析为 JSON,说明是后端返回的错误信息
EleMessage.error(
json.message || '导出失败:' + (json.error || '未知错误')
);
return false;
} catch (e) {
// 解析失败,可能是真正的文件(如损坏的 Excel),仍尝试下载
EleMessage.warning('服务器返回异常数据,尝试下载文件...');
download(blob, { headers: {} });
return false;
}
};
这样就可以把导出失败的JSON数据,提示,以便找到错误。

8458

被折叠的 条评论
为什么被折叠?



