如何将react-pdf渲染生成的文件存入state后上传至服务器

你当前使用的<PDFDownloadLink>是用于直接触发浏览器本地下载的组件，要实现上传到服务器留存历史记录的需求，需要先获取生成的PDF的Blob格式数据，再调用上传接口即可，具体实现步骤如下：

• 第一步：从@react-pdf/renderer中引入pdf工具方法

import { pdf } from '@react-pdf/renderer';

• 第二步：修改导出按钮的点击逻辑，不再直接用PDFDownloadLink做下载，而是先生成PDF blob，同时可以兼顾本地下载+上传服务器两个需求：

// 把之前的PDFDownloadLink替换成普通按钮，自己处理点击事件
<Button 
  onClick={this.handleExportAndUpload}
  disabled={loading}
>
  {loading ? LN[language].loadingDocument : LN[language].report_export_btn}
</Button>

// 对应的处理方法
handleExportAndUpload = async () => {
  try {
    // 1. 生成PDF实例，传入你原本的DailyAssetPDF组件配置
    const pdfInstance = pdf(
      <DailyAssetPDF
        information={{ title, subtitle, locationName, today, selectedAssetName }}
        tableData={tableData}
        image1={{
          chart1, chart2, chart4 // donut chart
        }}
        image2={
          this.chartRef3.current.chartInstance.toBase64Image() || // chart bar
          ""
        }
        LN={LN}
        language={language}
      />
    );
    // 2. 转为Blob格式
    const pdfBlob = await pdfInstance.toBlob();
    const fileName = `${title}.pdf`;

    // 可选：保留原本的本地下载功能
    const url = URL.createObjectURL(pdfBlob);
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    link.click();
    URL.revokeObjectURL(url);

    // 3. 构造FormData上传到服务器
    const formData = new FormData();
    formData.append('pdfFile', pdfBlob, fileName);
    // 额外传需要的参数，比如用户id、文件分类之类的，根据你后端接口要求调整
    formData.append('userId', 当前登录用户id);

    // 调用你的上传接口
    const uploadRes = await fetch('/你的后端上传接口地址', {
      method: 'POST',
      body: formData
    });
    if (uploadRes.ok) {
      console.log('PDF上传成功，可刷新历史列表展示最新记录');
      // 这里可以添加成功提示，然后刷新你的用户文件历史列表
    }
  } catch (err) {
    console.error('PDF生成或上传失败', err);
  }
}

• 注意事项：
  • 类组件中需要确保用到的title、tableData、chartRef3等变量可以从state或props中正常取值，避免出现 undefined 报错
  • 后端接口要支持multipart/form-data格式的文件上传，返回的文件存储地址可以存入用户文件关联表，用于后续历史列表的跳转预览
  • 如果PDF生成耗时较长，可以添加全局loading状态控制按钮不可点击，避免用户重复提交

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