formtarget属性仅控制表单提交后响应的打开位置（如"_blank"），不支持无刷新提交；原生表单提交必导致跳转或新开页，无刷新需javascript拦截+ajax或动态创建form提交。
formtarget 属性本身不支持无刷新提交
直接说结论：formtarget 只控制表单提交后目标窗口（如 _blank），它和是否“刷新”完全无关——只要走原生 <form></form> 提交，页面必然跳转或新开页，不可能无刷新。所谓“无刷新新窗口提交”，本质是矛盾的：无刷新靠 JavaScript 拦截提交 + AJAX；新窗口打开靠 window.open() 或 formtarget；二者无法同时由一个原生 button 的 formtarget 实现。
想新开窗口又不跳转当前页？用 JavaScript 模拟表单提交
真实可行的做法是：禁用原生提交，用 JS 收集数据，构造隐藏 <form></form> 动态插入 DOM，设置其 target 和 action，再调用 .submit()。这样既新开窗口，又不干扰当前页。
关键点：
-
target设为_blank或自定义窗口名（如my-report-win） - 动态创建的
<form></form>必须append到document.body才能提交 - 提交后可立即
remove()该 form，避免残留 - 注意同源策略：跨域时新窗口可能被浏览器拦截（尤其 Chrome）
function openFormInNewWindow(action, data) {
const form = document.createElement('form');
form.method = 'POST';
form.action = action;
form.target = '_blank'; // ← 这才是真正起作用的 target
Object.entries(data).forEach(([key, value]) => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = key;
input.value = value;
form.appendChild(input);
});
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
}
// 调用示例
openFormInNewWindow('/api/export', { format: 'xlsx', id: '123' });
为什么不用 fetch + window.open？
常见误区是想先 fetch 获取数据，再 window.open() 显示结果。但这样行不通：
-
fetch返回的是响应体（Blob / text），不是可直接打开的 URL -
window.open('data:text/html,...')有长度限制（Chrome 约 2MB），且不支持 POST 数据 - 服务端返回的文件流（如 Excel）无法通过前端 JS 直接“在新窗口渲染”，必须靠表单提交触发浏览器下载逻辑或服务端重定向
所以，绕过表单、纯 JS 实现“新窗口提交并下载”的路径基本不存在；form.submit() 是唯一可靠方式。
button 上写 formtarget 却没反应？检查这三点
如果给 <button type="submit" formtarget="_blank"></button> 加了属性但新开窗口无效，大概率是以下问题：
- 该
<button></button>不在<form></form>内，或未通过form="form-id"显式关联表单 →formtarget仅对关联表单生效 - 表单
method是GET，而目标 URL 过长导致被截断或报错（尤其是带大量参数时） - 浏览器启用了弹窗拦截（比如点击非用户手势触发的 submit），此时新开窗口会被静默阻止 —— 必须确保提交由用户真实点击触发
最稳妥的调试方式：先去掉 formtarget，确认表单能正常提交；再加回来，用 DevTools 的 Network 面板看请求是否发出、响应状态是否 200/302。
真正要兼顾“新窗口”和“无刷新”，就得放弃原生表单提交这个前提。所有看似取巧的方案，最终都会回到动态创建 form 并 submit 这一步——别指望 HTML 属性能绕过浏览器的提交机制约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
