表单提交后下载0MB文件是因响应头缺失导致浏览器fallback为下载空文件。正确方案是用fetch+Blob+a.download，需服务端配置CORS与Content-Disposition头，并前端手动解析响应生成blob URL下载。
为什么表单提交后会下载0MB文件？
这不是前端写错了，而是浏览器在响应头缺失时的默认 fallback 行为。当 form 提交到一个 Webhook 或后端接口（比如 Home Assistant 的 /api/webhook/xxx），而该接口处理完数据后返回空响应体 + 缺失 Content-Type 或 Content-Disposition 头，浏览器就无法判断该响应是“跳转”“刷新”还是“渲染”，于是退化为“下载一个以 URL 路径结尾命名的空文件”。你看到的 xxx（0MB）就是那个 Webhook ID。
不能用 form action 直接跨域下载的原因
HTML 表单天然不支持跨域响应读取——提交后页面跳转或刷新，JS 上下文销毁，根本拿不到响应体。更关键的是：form 无法控制响应头，也无法拦截并解析二进制内容。即使后端返回了 CSV 文件流，只要没配好 Content-Disposition: attachment; filename="data.csv"，且请求是跨域的，浏览器仍可能拒绝自动下载或只打开不保存。
- 表单提交是全页面导航行为，不是 AJAX，
fetch或XMLHttpRequest的响应处理能力完全不可用 - 跨域场景下，
对非同源 URL 无效，会被浏览器静默忽略 - 服务端若未开启 CORS，前端 fetch 会直接被预检（OPTIONS）拦截，连请求都发不出去
可靠方案：fetch + Blob + a.download（必须服务端配合）
这是目前唯一可控、可调试、能处理跨域 + 二进制 + 自定义文件名的路径。核心是绕过表单，改用 JS 发起请求，手动解析响应，生成同源 blob URL。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 后端必须返回
Access-Control-Allow-Origin: https://your-frontend-domain.com（不能是*，如果带凭证） - 后端响应头需包含
Content-Disposition: attachment; filename="report.csv"，否则前端无法可靠提取文件名 - 前端用
response.blob()拿原始二进制，别用response.text()，否则 Excel/PDF 会损坏 - 创建
a标签后必须调用URL.revokeObjectURL(url)，否则 Blob 对象长期驻留内存
示例片段：
form.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(form);
try {
const res = await fetch('https://api.example.com/export', {
method: 'POST',
body: formData,
credentials: 'include' // 如需 Cookie 或 auth header
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const filename = res.headers.get('content-disposition')?.match(/filename[^;=\n]*=(?:'[^']*'|"([^"]*)"|[^;\n]*)/)?.[1] || 'export.csv';
const blob = await res.blob();
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('Download failed:', err);
}
});
容易被忽略的细节
服务端返回的 Content-Disposition 值里，文件名可能被单引号包裹（filename='data.csv'）或双引号（filename="data.csv"），正则提取时漏掉单引号分支会导致 fallback 到硬编码名；iOS Safari 对脚本触发的 a.click() 有严格限制，必须是用户手势（如 click）直接触发，不能包在 setTimeout 或 Promise.then 里延迟执行；另外，如果后端返回的是重定向（302）而非真实文件流，fetch 默认不会跟随，得显式加 redirect: 'follow' 才行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
