最简洁兼容的前端导出方式是fetch获取Excel二进制流后用Blob创建下载链接：先fetch请求后端返回的application/vnd.openxmlformats-officedocument.spreadsheetml.sheet流，再调用response.blob()生成Blob对象，结合URL.createObjectURL()和a标签触发下载，并注意处理Content-Disposition中的中文文件名及非法字符。
用 fetch 请求后端返回的 Excel 文件流（如 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet），再通过 Blob 创建本地可下载的文件，是目前最简洁、兼容性良好的前端导出方式。
确保后端返回的是二进制流（不是 JSON）
后端必须直接返回 Excel 文件的原始字节流（如 Node.js 的 res.sendFile() 或 Spring Boot 的 ResponseEntity<resource></resource>），且响应头中包含：
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet-
Content-Disposition: attachment; filename="report.xlsx"（可选，但建议提供）
⚠️ 注意：不要让后端把 Excel 转成 base64 或 JSON 包裹——那样会增加前端解析负担，也容易出错。
用 fetch + response.blob() 获取并创建下载链接
关键点：设置 responseType 为 blob（实际是靠 response.blob() 方法实现），再用 URL.createObjectURL() 生成临时 URL 触发下载：
async function downloadExcel() {
try {
const res = await fetch('/api/export-excel', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ filters: { date: '2024-01' } }),
});
<pre class="brush:php;toolbar:false;">if (!res.ok) {
throw new Error(`HTTP ${res.status}: ${res.statusText}`);
}
// ✅ 关键：读取为 Blob
const blob = await res.blob();
// 从响应头中提取推荐文件名（更可靠）
const contentDisposition = res.headers.get('content-disposition');
let filename = 'export.xlsx';
if (contentDisposition) {
const match = contentDisposition.match(/filename[^;=
]*=([^;]*)/i);
if (match && match[1]) {
filename = match[1].trim().replace(/["']/g, '');
}
}
// 创建下载链接
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
// 清理内存（重要！）
URL.revokeObjectURL(url);} catch (err) { console.error('下载失败：', err); alert('导出失败，请重试'); } }
处理中文文件名乱码（常见坑）
如果后端用 UTF-8 编码文件名但未做 RFC 5987 格式化，浏览器可能解析失败。稳妥做法是：
- 后端推荐：用
filename*=UTF-8''xxx.xlsx格式（如 Python Flask 可用werkzeug.utils.secure_filename+ 手动拼接） - 前端兜底：若解析失败或没 header，可 fallback 到固定中文名，例如
filename = '数据报表_' + new Date().toISOString().slice(0,10) + '.xlsx';
不依赖后端文件名时，手动指定安全文件名
如果后端不返回 Content-Disposition，或你希望完全控制命名逻辑，可直接写死或按业务规则生成：
const now = new Date().toISOString().slice(0, 10);
const filename = `销售汇总_${now}.xlsx`;
a.download = filename;
注意：文件名中避免 / : * ? " | 等非法字符，可用正则简单清洗：filename.replace(/[/\:*?"|]/g, '_')。
整个过程不依赖第三方库，纯原生 JS，兼容 Chrome、Edge、Firefox、Safari（iOS 15.4+）。只要后端吐的是标准 Excel 二进制流，前端就稳稳能下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
