关于这个 Skill
通过 @react-pdf/renderer 直接生成 PDF。工作流覆盖可复用的 React 布局、本地字体、表格与 SVG 图形、固定页眉页脚和分页控制。安装时保留完整 react-pdf 目录,以便读取模板与参考资料。
为什么推荐
专注 PDF 生成,提供组件参考、可运行的 TSX 模板,以及渲染成图片后检查版式的流程。
适合用来做什么
- 根据结构化数据生成定期 PDF 报告。
- 把发票或文档版式写成可复用的 React 组件。
- 交付前检查分页、字体和图形。
工作流程
从模板开始
参考 assets/example-template.tsx 与组件说明,按文档内容调整页面结构。
组织内容并渲染
使用 React-PDF 组件、本地字体与明确的分页规则,再通过 tsx 渲染。
逐页复核
将 PDF 渲染为图片,检查换行、溢出、字体及固定元素。
安装与运行环境
先安装 Skill 指令,再按文档配置运行时依赖后执行任务。
| 命令 | 用途与使用时机 |
|---|---|
npm install react @react-pdf/renderer | 安装渲染运行时。 |
npm install -D tsx @types/react | 安装 TSX 运行器及 React 类型。 |
npx tsx my-document.tsx | 运行文档生成脚本。 |
适用范围与限制
此 Skill 用于生成 PDF;OCR 和已有 PDF 的通用编辑需要其它工具。
许可证与来源
项目采用 MIT 许可证;Agent 订阅、外部服务和可选集成另有各自要求。
使用前需要了解
- 需要 Node.js、react、@react-pdf/renderer,并使用 tsx 运行 TSX。
- 自定义字体需下载并在本地注册;使用 Poppler 或 PyMuPDF 检查渲染页面。
支持的 Agent
Claude Code
资料与来源
原始资料见下方链接;文中的上手建议由 SkillHey 编辑整理。
