如何发送带请求体的POST请求并在新标签页打开返回的二进制文件？

当然可行！我刚好做过类似的需求，给你两种靠谱的实现方式，看哪种更适配你的后端情况：

方案一：动态创建表单提交（适合后端支持表单参数传递JSON的场景） #

如果你的后端可以接受表单格式的请求（比如从指定参数里读取JSON字符串），可以用这种无AJAX的方式，直接通过表单提交打开新窗口：

// 你的JSON对象
const myJson = { name: "test", data: [1,2,3] };

// 创建动态表单
const form = document.createElement('form');
form.method = 'POST';
form.action = '你的REST端点URL';
form.target = '_blank'; // 关键：在新窗口打开

// 创建隐藏字段存放JSON字符串
const input = document.createElement('input');
input.type = 'hidden';
input.name = 'payload'; // 后端要从这个参数取JSON
input.value = JSON.stringify(myJson);

form.appendChild(input);
document.body.appendChild(form);

// 提交表单
form.submit();

// 清理DOM
document.body.removeChild(form);

方案二：Fetch API获取Blob后打开新窗口（适合后端要求请求体为纯JSON的场景） #

如果你的REST端点要求请求体是原生JSON（Content-Type为application/json），那用Fetch先拿到PDF的Blob，再生成临时URL打开是更合适的方式：

const myJson = { name: "test", data: [1,2,3] };

fetch('你的REST端点URL', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    // 如果需要认证，这里可以加Authorization头
  },
  body: JSON.stringify(myJson)
})
.then(response => {
  if (!response.ok) {
    throw new Error('请求失败');
  }
  return response.blob(); // 把响应转为Blob对象
})
.then(blob => {
  // 创建临时URL
  const blobUrl = URL.createObjectURL(blob);
  // 在新窗口打开
  const newWindow = window.open(blobUrl);
  
  // 窗口加载完成后释放临时URL，避免内存泄漏
  newWindow.onload = () => {
    URL.revokeObjectURL(blobUrl);
  };
})
.catch(error => {
  console.error('出错了:', error);
  // 这里可以加错误提示，比如alert('生成PDF失败')
});

关于JSON的处理 #

不管用哪种方案，你都需要用JSON.stringify()把JavaScript对象转换成JSON字符串——这一步是必须的，因为HTTP请求只能传递文本或二进制数据，不能直接传JS对象。

另外要注意后端的响应头：确保后端返回的PDF设置了正确的Content-Type: application/pdf，这样浏览器才能正确识别并渲染PDF内容。

内容的提问来源于stack exchange，提问作者Thomas