使用 React 组件生成报告、发票等 PDF

molefrog/skills

使用 React 组件生成报告、发票等 PDF,复用布局与 SVG 图形,并控制跨页与页眉页脚。

最近更新于:

查看 GitHub 项目
npx skills add molefrog/skills --skill react-pdf
170Stars11Forks仓库最近推送

关于这个 Skill

通过 @react-pdf/renderer 直接生成 PDF。工作流覆盖可复用的 React 布局、本地字体、表格与 SVG 图形、固定页眉页脚和分页控制。安装时保留完整 react-pdf 目录,以便读取模板与参考资料。

为什么推荐

专注 PDF 生成,提供组件参考、可运行的 TSX 模板,以及渲染成图片后检查版式的流程。

适合用来做什么

  • 根据结构化数据生成定期 PDF 报告。
  • 把发票或文档版式写成可复用的 React 组件。
  • 交付前检查分页、字体和图形。

工作流程

从模板开始

参考 assets/example-template.tsx 与组件说明,按文档内容调整页面结构。

组织内容并渲染

使用 React-PDF 组件、本地字体与明确的分页规则,再通过 tsx 渲染。

逐页复核

将 PDF 渲染为图片,检查换行、溢出、字体及固定元素。

作者维护的 Skill 指令

安装与运行环境

先安装 Skill 指令,再按文档配置运行时依赖后执行任务。

命令用途与使用时机
npm install react @react-pdf/renderer安装渲染运行时。
npm install -D tsx @types/react安装 TSX 运行器及 React 类型。
npx tsx my-document.tsx运行文档生成脚本。

作者维护的 Skill 指令项目官方 README

适用范围与限制

此 Skill 用于生成 PDF;OCR 和已有 PDF 的通用编辑需要其它工具。

作者维护的 Skill 指令项目官方 README

许可证与来源

项目采用 MIT 许可证;Agent 订阅、外部服务和可选集成另有各自要求。

MIT 许可证

使用前需要了解

  • 需要 Node.js、react、@react-pdf/renderer,并使用 tsx 运行 TSX。
  • 自定义字体需下载并在本地注册;使用 Poppler 或 PyMuPDF 检查渲染页面。

支持的 Agent

Claude Code

资料与来源

原始资料见下方链接;文中的上手建议由 SkillHey 编辑整理。