在React(ES6)中使用jsPDF实现PDF嵌入PDF文档的方案咨询

1. react-pdf #

• 核心能力：直接在React组件中渲染PDF内容，支持分页、缩放、搜索等基础操作，完全适配React生态。
• 适配场景：可嵌入表格单元格内作为预览区域，用户能直接在表格里查看PDF内容，也可搭配按钮实现打开完整PDF的功能。
• 简单示例：

import { Document, Page } from '@react-pdf/renderer';
import { pdfjs } from 'react-pdf';

// 配置PDF Worker
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

// 表格内的PDF预览组件
const PDFPreview = ({ pdfUrl }) => (
  <div style={{ width: '200px', height: '250px' }}>
    <Document file={pdfUrl}>
      <Page pageNumber={1} />
    </Document>
  </div>
);

// 在表格中使用
<table>
  <tr>
    <td><PDFPreview pdfUrl="/path/to/target.pdf" /></td>
  </tr>
</table>

• 注意点：生产环境建议将PDF Worker文件本地化，避免CDN依赖问题；若仅需提供打开PDF的入口，也可结合a标签跳转，该包的预览能力更贴合“嵌入表格”的需求。

2. react-pdf-viewer #

• 核心能力：功能更丰富的PDF交互组件，支持批注、打印、下载、旋转等高级操作，提供开箱即用的UI。
• 适配场景：如果需要在表格内让用户直接操作PDF（比如批注），这个组件更适合，可自定义尺寸嵌入单元格。
• 简单示例：

import { Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

const PDFViewerCell = ({ pdfUrl }) => (
  <div style={{ width: '300px', height: '350px' }}>
    <Viewer fileUrl={pdfUrl} />
  </div>
);

// 在表格中使用
<table>
  <tr>
    <td><PDFViewerCell pdfUrl="/path/to/target.pdf" /></td>
  </tr>
</table>

• 注意点：包体积略大，若仅需基础预览可优先考虑react-pdf；必须引入配套CSS才能正常显示UI。

3. react-embed-pdf #

• 核心能力：基于PDF.js封装的轻量级组件，专注快速嵌入PDF预览，API简洁，无需复杂配置。
• 适配场景：适合对包体积敏感、仅需基础预览功能的场景，嵌入表格单元格非常便捷。
• 简单示例：

import EmbedPDF from 'react-embed-pdf';

const PDFEmbedCell = ({ pdfUrl }) => (
  <EmbedPDF
    url={pdfUrl}
    width="200px"
    height="250px"
    renderLoader={() => <div>加载PDF中...</div>}
  />
);

// 在表格中使用
<table>
  <tr>
    <td><PDFEmbedCell pdfUrl="/path/to/target.pdf" /></td>
  </tr>
</table>

现有PDF下载流程的兼容性提示 #

你当前使用jsPDF+autoTable+html2canvas的下载逻辑，需要注意：嵌入的PDF预览组件被html2canvas捕获时，通常只会渲染当前可见的页面（比如第一页）。如果要在下载的PDF中完整嵌入目标PDF，建议：

• 用jsPDF的addFileToVFS和addPage方法，直接将目标PDF合并到生成的表格PDF中，而非依赖html2canvas捕获预览组件；
• 或者在下载的PDF中保留目标PDF的链接，让用户点击跳转查看完整文件。

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