如何将@react-pdf/renderer渲染的PDF上传至AWS S3并通过链接下载

你现有后端代码不需要做任何改动，直接复用即可。核心是利用@react-pdf/renderer自带的渲染方法，把PDF组件转成二进制文件对象，按照和手动选文件完全一致的格式提交接口就行，具体实现如下：

前端实现 #

• 从@react-pdf/renderer中导入内置的pdf方法，该方法可以直接将Document组件渲染为二进制数据，不需要额外引入第三方转换库
• 调用pdf(你的文档组件).toBlob()获取PDF对应的Blob对象
• 将Blob包装为File实例，塞入FormData的file字段（和你后端upload.single('file')配置的字段名保持一致）
• 正常发起POST请求提交FormData即可，请求格式和用户手动选文件上传完全一致

完整可运行代码：

import React from 'react';
import { Page, Text, View, Document, StyleSheet, pdf } from '@react-pdf/renderer';

// 原有样式和文档组件保持不变
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4'
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
});

const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

// 生成并上传PDF的方法
const uploadPdfToS3 = async () => {
  // 渲染生成PDF二进制Blob
  const pdfBlob = await pdf(<MyDocument />).toBlob();
  // 构造文件对象，文件名可根据业务需求自定义
  const pdfFile = new File([pdfBlob], 'generated-contract.pdf', { type: 'application/pdf' });
  // 组装FormData
  const formData = new FormData();
  formData.append('file', pdfFile);

  // 发起上传请求，不要手动设置Content-Type请求头，让浏览器自动生成带boundary的multipart头
  const res = await fetch('/uploadContractTos3', {
    method: 'POST',
    body: formData
  });
  const { s3fileurl } = await res.json();
  // 后续直接使用返回的S3地址即可
  console.log('PDF上传成功，访问地址：', s3fileurl);
  return s3fileurl;
}

// 触发方式示例：绑定到按钮点击事件即可
// <button onClick={uploadPdfToS3}>生成并上传合同PDF</button>

关键注意点

• 上传时不要手动添加Content-Type: multipart/form-data请求头，手动设置会丢失浏览器自动生成的boundary参数，导致后端multer解析文件失败
• 如果PDF需要动态数据，直接给组件传props即可，比如pdf(<MyDocument contractInfo={data} />)，和普通React组件传参没有区别
• 如果需要获取ArrayBuffer格式的数据，把toBlob()替换为toBuffer()即可，返回结果可直接用于其他二进制处理场景

后端说明 #

你当前编写的S3上传接口可以直接复用，不需要做任何修改。前端提交的FormData结构和用户手动选择文件上传的结构完全一致，multer-s3会自动处理文件上传逻辑，正常返回S3文件访问地址。

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