如何使用react-pdf渲染并下载浏览器中修改后的PDF？

下面分两种常见场景给出可行方案：

场景1：基于PDF.js生态渲染并修改PDF #

如果你的React组件是用PDF.js（或是封装了PDF.js的第三方库）做的PDF渲染和修改（比如加批注、高亮），可以这么实现：

1. 获取修改后的PDF文档实例：PDF.js的PDFDocument对象会记录所有修改操作，调用它的save()方法即可导出文档的二进制数据。
2. 将二进制数据转为Blob，再通过临时URL触发下载。

示例代码：

async function downloadModifiedPdf(pdfDoc) {
  // 导出修改后的PDF二进制数据
  const pdfBytes = await pdfDoc.save();
  // 转换为Blob对象
  const blob = new Blob([pdfBytes], { type: 'application/pdf' });
  // 创建临时下载链接
  const tempUrl = URL.createObjectURL(blob);
  
  // 用a标签触发下载动作
  const downloadLink = document.createElement('a');
  downloadLink.href = tempUrl;
  downloadLink.download = '修改后的文档.pdf';
  downloadLink.click();
  
  // 释放临时URL，避免内存泄漏
  URL.revokeObjectURL(tempUrl);
}

场景2：在Canvas上修改了PDF渲染内容 #

如果你的修改是直接在渲染PDF的Canvas上完成的（比如手绘标注、添加文字），可以借助jsPDF把Canvas内容转成PDF下载：

注意：这种方式默认仅能导出单页内容，如果是多页PDF，需要循环处理每一页的Canvas再合并到同一个PDF文件中。

示例代码：

import jsPDF from 'jspdf';

function downloadCanvasPdf(canvas) {
  const pdf = new jsPDF('p', 'mm', 'a4');
  const pageWidth = 210; // A4纸宽度，单位mm
  const scaleRatio = pageWidth / canvas.width;
  const pageHeight = canvas.height * scaleRatio;
  
  // 将Canvas内容添加到PDF中
  pdf.addImage(canvas, 'PNG', 0, 0, pageWidth, pageHeight);
  // 触发下载
  pdf.save('修改后的Canvas版PDF.pdf');
}

额外提示 #

• 如果你使用的是第三方PDF编辑组件，优先查看组件文档，很多组件自带exportPdf()这类导出修改后文档的API，这是最省心的实现方式。
• 无论采用哪种方案，都要确保修改内容已正确同步到待导出的对象中，避免下载后丢失修改痕迹。

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