React/NextJS打开服务端生成PDF字节数组新标签页遭弹窗拦截

核心原因 #

你的代码里window.open是在异步请求（await post）完成后执行的，此时已经脱离了用户点击事件的同步上下文，浏览器会判定这是非用户主动触发的弹窗，因此被拦截。

解决方案 #

在用户点击的同步阶段先打开空白标签，之后再把PDF的Blob URL赋值给这个标签的地址：

1. 修改点击触发代码

<a href="javascript:void(0)" onClick={(e) => {
  e.preventDefault();
  // 同步打开空白标签，此操作属于用户直接触发，不会被拦截
  const newTab = window.open('', '_blank');
  handlePrint(data, newTab);
}} title="Print PDF">Print PDF</a>

2. 更新handlePrint函数

const handlePrint = async (data: DataBean, newTab: Window | null) => {
  if (!newTab) return; // 兜底处理极端情况（如浏览器提前阻止空白标签）

  // 构造请求payload
  const payload = { /* 你的payload逻辑 */ };

  // 发起请求获取PDF字节数组
  const response = await post<any, typeof payload>("/create-pdf", payload);

  // 转换为Blob并生成URL
  const blob = new Blob([response], { type: "application/pdf" });
  const url = URL.createObjectURL(blob);

  // 将空白标签的地址设置为PDF的Blob URL
  newTab.location.href = url;

  // 可选：标签关闭时释放Blob URL，避免内存泄漏
  newTab.addEventListener('unload', () => {
    URL.revokeObjectURL(url);
  });
};

额外说明 #

• 不要在异步操作后调用window.open，必须保证打开标签的操作在用户点击的同步流程内。
• 若需要兼容旧浏览器，可补充判断window.open是否返回有效对象（部分浏览器在隐私模式下可能禁止）。

内容的提问来源于stack exchange，提问作者gene b.