如何在react-pdf生成的PDF中追加外部PDF文件？

仅用react-pdf能否实现？ #

不行。@react-pdf/renderer的核心定位是通过组件语法从头构建PDF内容，它没有原生提供加载、解析并合并外部PDF文件的API，无法直接将外部PDF页面追加到自己生成的PDF末尾。

可行解决办法：结合pdf-lib实现合并 #

可以先通过react-pdf生成目标PDF的二进制数据，再借助pdf-lib这类专门处理PDF操作的库，将外部PDF的页面完整复制到生成的PDF中，最终导出合并后的文件。这种方式能完全保留外部PDF的文本可选中状态，具体步骤如下：

1. 用react-pdf生成基础PDF的二进制数据
   使用react-pdf提供的pdf()工具函数，将你的自定义组件渲染为Uint8Array格式的二进制数据：

import { pdf } from '@react-pdf/renderer';
import MyCustomDocument from './MyCustomDocument'; // 你的react-pdf文档组件

// 生成基础PDF的二进制数据
const generatedPdfBytes = await pdf(<MyCustomDocument />).toUint8Array();

2. 用pdf-lib加载并合并PDF
   安装pdf-lib后，依次加载基础PDF和需要追加的外部PDF，将外部PDF的页面逐个复制到基础PDF中：

import { PDFDocument } from 'pdf-lib';

// 1. 加载react-pdf生成的PDF
const mergedPdf = await PDFDocument.load(generatedPdfBytes);

// 2. 加载外部PDF（示例：本地文件场景）
const externalPdfFile = document.getElementById('external-pdf-input').files[0];
const externalPdfBytes = await externalPdfFile.arrayBuffer();
const externalPdf = await PDFDocument.load(externalPdfBytes);

// 若为远程PDF，可通过fetch获取二进制数据：
// const externalPdfBytes = await fetch('你的外部PDF地址').then(res => res.arrayBuffer());
// const externalPdf = await PDFDocument.load(externalPdfBytes);

// 3. 复制外部PDF的所有页面到合并文档
const externalPages = await mergedPdf.copyPages(externalPdf, externalPdf.getPageIndices());
externalPages.forEach(page => mergedPdf.addPage(page));

// 4. 导出合并后的PDF
const mergedPdfBytes = await mergedPdf.save();

// 可直接下载或预览
const blob = new Blob([mergedPdfBytes], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
window.open(url);

3. 方案优势

• 完全保留外部PDF的原生文本属性（可选中、复制等），无需转为图片
• 分工明确：react-pdf负责生成自定义内容，pdf-lib负责PDF合并操作，流程清晰易维护

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