React如何POST JSON请求体数据跳转外部打印服务页面

不能直接通过window.location系列跳转方法实现携带JSON格式请求体的POST跳转。
你最开始写的window.location.replace(url, jsonData)是无效写法，浏览器完全不会处理第二个传入的参数，只会发起GET请求访问目标URL，根本不会带上你传的JSON数据。

浏览器原生的页面导航行为（修改window.location、点击<a>标签跳转等）仅支持两种传参逻辑：

• GET请求：参数拼接在URL的查询字符串后，也就是你已经试过的?parameter1=xxx的写法
• POST请求：仅支持通过原生<form>表单提交触发，默认编码格式是application/x-www-form-urlencoded，不支持直接提交application/json格式的请求体。

方案1：先请求拿返回内容再替换页面（完美支持JSON POST） #

这是最符合你需求的方案，不需要修改后端接口的JSON参数要求，流程如下：

1. 用fetch或者你常用的请求库，向打印接口发POST请求，把JSON数据放在请求体里，拿到接口返回的可打印HTML文本
2. 把当前页面（或者新开的打印专用窗口）的内容替换成拿到的HTML，即可实现和跳转一样的效果

示例代码：

import { jsonDataModel } from "../Models/jsonDataModel";

const PrintPage = async (jsonData: jsonDataModel) => {
  // 提交POST请求，携带JSON参数
  const printRes = await fetch('https://localhost:7205/api/print', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(jsonData)
  })
  // 读取接口返回的打印页HTML
  const printPageHtml = await printRes.text()
  // 替换当前页面内容为打印页
  document.open()
  document.write(printPageHtml)
  document.close()
  // 可选：页面加载完成后自动唤起打印对话框
  window.addEventListener('load', () => window.print(), { once: true })

  return <div>正在跳转打印页...</div>
}

export default PrintPage

如果不想替换当前页面，也可以新开一个空白窗口，把HTML写到新窗口里，不影响用户当前停留的页面。

方案2：动态创建表单提交POST（不支持原生JSON格式） #

如果你可以调整后端接口的参数接收逻辑，支持读取表单格式的参数，可以通过动态创建隐藏表单的方式触发POST跳转，这种方式提交后会直接跳转到接口返回的页面，不需要手动替换内容。
注意：这种方式没法直接提交application/json格式的 payload，如果后端必须收JSON，可以把整个JSON序列化成字符串放到一个隐藏表单字段里，后端从表单字段读字符串再反序列化。

示例代码：

import { jsonDataModel } from "../Models/jsonDataModel";

const PrintPage = (jsonData: jsonDataModel) => {
  // 创建临时隐藏表单
  const tempForm = document.createElement('form')
  tempForm.method = 'POST'
  tempForm.action = 'https://localhost:7205/api/print'
  tempForm.style.display = 'none'

  // 用法1：把JSON拆成单独的表单字段传递
  Object.entries(jsonData).forEach(([field, val]) => {
    const input = document.createElement('input')
    input.name = field
    input.value = typeof val === 'object' ? JSON.stringify(val) : String(val)
    tempForm.appendChild(input)
  })

  // 用法2：如果后端支持从表单读JSON串，直接塞一个字段即可
  // const jsonInput = document.createElement('input')
  // jsonInput.name = 'jsonData'
  // jsonInput.value = JSON.stringify(jsonData)
  // tempForm.appendChild(jsonInput)

  // 挂载表单、提交、移除临时DOM
  document.body.appendChild(tempForm)
  tempForm.submit()
  document.body.removeChild(tempForm)

  return <div>正在跳转打印页...</div>
}

export default PrintPage

如果你的打印参数数据量很小、没有敏感信息，直接拼接URL查询参数走GET跳转是开发成本最低的方案；如果数据量大、包含敏感内容、或者后端已经固定要求POST传JSON，优先选方案1实现。

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