React+Material UI页面点击打印图标如何打印服务端返回的响应文件

现有代码的核心问题 #

• 存在语法错误：原代码中.then(data)写法不符合Promise语法规则，then方法需要接收一个回调函数作为参数，直接传入变量会导致运行时报错
• 错误配置请求头：手动给GET请求加上Content-Type: application/zip属于冗余配置，GET请求无请求体，这类错误配置会触发浏览器跨域预检，导致请求失败
• 响应解析逻辑错误：后端返回的是二进制文件流，不是JSON格式数据，直接调用response.json()会解析出无效内容，拿到损坏的文件对象
• 缺失核心打印逻辑：目前代码仅完成了接口请求的初步流程，没有将获取到的文件流转为可打印对象，也没有触发浏览器打印流程

可落地的实现流程 #

• 正确获取二进制文件流
  调整响应解析逻辑，将返回内容按Blob格式读取，同时增加请求状态校验，遇到4xx/5xx报错时先解析错误文本，避免把错误返回的内容当成正常文件处理
• 分场景适配打印逻辑

  如果后端返回单个可直接被浏览器识别的文件（PDF、常规格式图片），可以直接生成临时Blob URL，通过隐藏的iframe加载目标文件，待加载完成后调用iframe内部的打印方法，这种方式不会把当前React页面的UI内容带入打印范围
  如果后端返回的是ZIP格式压缩包，需要先在前端对压缩包做解包处理，把包内的可打印文件逐个提取出来后再走单文件打印流程，浏览器原生不支持直接识别打印ZIP包内容

• 打印资源清理
  打印完成后及时移除插入到页面的隐藏iframe，同时调用URL.revokeObjectURL()释放临时生成的Blob地址，避免造成页面内存泄漏

修正后的参考代码 #

const printFiles = async (email: any) => {
  try {
    const response = await fetch(`http://localhost:3030/node/express/companyfiles/download/${email}/`, {
      method: 'GET'
    })

    // 校验接口响应状态
    if (!response.ok) {
      const errorInfo = await response.text()
      throw new Error(`文件获取失败: ${errorInfo}`)
    }

    // 获取Blob格式的文件流
    const targetFileBlob = await response.blob()
    const printTempUrl = URL.createObjectURL(targetFileBlob)

    // 创建用于打印的隐藏iframe
    const printContainer = document.createElement('iframe')
    printContainer.style.cssText = 'position:fixed;width:0;height:0;border:0;right:0;bottom:0;'
    document.body.appendChild(printContainer)

    // 文件加载完成后触发打印
    printContainer.onload = () => {
      printContainer.contentWindow?.focus()
      printContainer.contentWindow?.print()
      // 延迟清理临时资源
      setTimeout(() => {
        document.body.removeChild(printContainer)
        URL.revokeObjectURL(printTempUrl)
      }, 1000)
    }
    printContainer.src = printTempUrl

  } catch (err) {
    console.error('打印流程执行失败', err)
  }
}

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