用途:使用 React-PDF(@react-pdf/renderer)配合 TypeScript 与 JSX 生成 PDF 文档,适用于报告、发票、简历、表单、证书,以及需要多栏、网格、卡片等复杂布局或内联 SVG 图形、图表、图标的场景。若需读取或提取已有 PDF 文本、填写已有 PDF 表单、将 HTML 转为 PDF,或只需简单纯文本 PDF,则不适合使用本技能。
主要能力:提供 Document、Page、View、Text、Image、Link、Note、Canvas、Svg、StyleSheet 等核心组件;支持 flexbox 布局、多种单位(pt、in、mm、cm、%、vw、vh)、自定义字体、Google Fonts、emoji、页眉页脚固定、页码、分页控制、超链接与内部跳转、文档元数据等。
使用方式:先安装依赖 npm install react @react-pdf/renderer 与 npm install -D tsx @types/react;用 JSX 编写文档组件,通过 renderToFile 或 renderToBuffer 渲染,并用 npx tsx my-document.tsx 运行。异步渲染必须包在 IIFE 中,避免顶层 await。自定义字体必须使用本地文件路径,远程 URL 无效,注册后需调用 Font.registerHyphenationCallback((word) => [word]) 关闭连字符。预览可用 pdftoppm -png -r 200 document.pdf preview,或回退到 PyMuPDF。
限制:远程字体 URL 不可用;SVG 文件不能直接作为 Image 源,需用 Svg 组件重建;emoji 需注册本地 Twemoji 资源;图片建议本地或压缩后嵌入。资料未提供收费、价格与平台支持等细节。