企业官网建设流程全解析

pdfcn 24个PDF组件全解析：用表格、表单、图表和二维码构建专业文档

【免费下载链接】pdfcnBeautiful pdf components, built on Takumi and Forme. 100% Free, Zero config, one command setup.项目地址: https://gitcode.com/gh_mirrors/pd/pdfcn

pdfcn 是一个完全免费、零配置的 React PDF 组件库，基于 Takumi 和 Forme 双渲染引擎构建，与 shadcn/ui 采用相同的注册表格式和 CLI 工作流。它提供 24 个开箱即用的 PDF 组件——表格、表单、图表、二维码、水印一应俱全，一条命令即可安装，让你在 React 应用中快速生成发票、报告、工单等专业 PDF 文档。

为什么需要 pdfcn 这套 PDF 组件库？

手写 PDF 布局通常要处理边距、分页、对齐、配色等繁琐细节。pdfcn 把这些工作封装成了 24 个语义化的 React 组件：

• ⚡双渲染引擎——支持 Takumi 和 Forme 两套 base，同一套组件可切换渲染器
• 🎯零配置——默认值合理，装完即用
• 🎨完全可定制——内置 9 套共享主题（professional、corporate、modern、elegant 等），代码归你所有
• 🧩可组合——组件像搭积木一样组合成完整文档

组件源码统一放在 apps/web/registry/bases/forme/components/ 和 apps/web/registry/bases/takumi/components/ 两个目录，官方文档索引见 apps/web/content/docs/components/meta.json。

30秒上手：一条命令安装 PDF 组件

pdfcn 沿用了 shadcn/ui 熟悉的 CLI 体验，以表格组件为例：

npx shadcn@latest add @pdfcn/forme/table

Takumi 版本只需把forme换成takumi。更多安装细节可参考 apps/web/content/docs/installation.mdx/installation.mdx?utm_source=gitcode_repo_files)。

24个PDF组件分类速览

每个组件都有独立的文档页和实时预览，如表格文档 apps/web/content/docs/components/forme/table.mdx，二维码文档 apps/web/content/docs/components/forme/qrcode.mdx。

表格与数据组件：让数据一目了然

Table是低层表格原语，提供line、grid、striped、compact等 7 种外观变体，还支持zebraStripe斑马纹；DataTable则面向"列 + 行"结构化的数据表场景，适合财务明细、库存清单。

<Table variant="striped" zebraStripe> {/* 表头、表体与单元格 */} </Table>

配合KeyValue（键值定义列表）和List（有序/无序列表），一张发票的"项目-金额-合计"结构即可完整表达。示例代码可直接查看 apps/web/examples/forme/invoice-classic.tsx 与 apps/web/examples/takumi/data-table.tsx。

表单与签名组件：把 PDF 变成"可填写"的文档

Form组件用"分组 + 字段"的方式描述表单，支持underline（下划线式）、box、outlined、ghost四种风格，标签可置于字段上方或左侧，分组支持单列、双列、三列布局——医疗登记表、面试申请表这类文档一步到位：

<PdfForm title="Contact" groups={[{ fields: [{ label: "Email" }] }]} />

Signature组件则提供签名栏（姓名 + 角色标签），让合同、工单在 PDF 上依然有正式的"落款"。实际用例参见 apps/web/examples/forme/medical-intake-form.tsx 和 apps/web/examples/takumi/signature.tsx。

图表组件：在 PDF 里直接画 SVG 图表

Graph是 24 个组件中最出彩的一个——柱状图、横向柱状图、折线图、面积图、饼图、环形图全部用 SVG 绘制，支持平滑曲线、数据点、图例位置、中心标签、网格线等 20 多个属性：

<PdfGraph variant="bar" data={[{ label: "Q1", value: 30 }]} />

一张季度经营报告里的"营收趋势 + 结构占比"，用两个 Graph 加一段 Text 就能完成，无需再导出图片插入。属性全表见 apps/web/content/docs/components/forme/graph.mdx。

二维码、水印与图片：专业文档的细节加分项

• QrCode——从任意字符串直接生成二维码，付款码、活动入场码、发票查验码都可以放进去（源码：apps/web/registry/bases/forme/components/qrcode/qrcode.tsx）
• Watermark——对角或居中的水印覆盖层，"机密 CONFIDENTIAL"、"草稿 DRAFT"一页声明
• PdfImage——嵌入图片并支持多种适配方式
• Alert——info / success / warning / error 四种提示框，适合在报告开头给出醒目的结论提示

页眉、页脚与页码：让文档"翻页不穿帮"

PDF 特有的痛点是跨页。pdfcn 用三个页级组件解决：

• PageHeader / PageFooter——在每一页重复渲染的页眉页脚，公司名、文档编号始终在场
• PageNumber——当前页码标记
• KeepTogether——强制子内容留在同一页，防止"标题在页尾、正文在下一页"的尴尬
• PageBreak——手动强制分页，章节之间干净利落

9套内置主题 + 预制文档块：换皮不费力

组件之外，pdfcn 还内置了 9 套共享主题：blueprint、corporate、elegant、executive、forest、minimal、modern、professional、vivid，主题定义位于 apps/web/registry/themes/，例如 apps/web/registry/themes/corporate.ts。换主题只需换一个 ThemeProvider 的配置，整套文档的配色与字体随之更新。

更进一步，仓库提供了 19 个"文档块（Blocks）"：6 种风格发票（classic / corporate / creative / minimal / modern / consultant）、4 种报告（财务 / 营销 / 运营 / 安全）、课程计划、会议纪要、新闻稿、活动议程与门票、礼品券、装箱单、快递面单、工单、医疗登记表——完整成品文档直接参考 apps/web/registry/bases/forme/blocks/，文档入口见 apps/web/content/docs/blocks/meta.json。

总结：一份组件清单，覆盖 90% 的 PDF 场景

pdfcn 用 24 个组件 + 9 套主题 + 19 个文档块，覆盖了从发票到报告的大部分专业 PDF 生成需求：

1. 排版（Heading/Text/Link/Badge/Divider）解决"字怎么排"
2. 布局（Stack/Section/Card/KeepTogether/PageBreak）解决"内容怎么摆"
3. 数据（Table/DataTable/KeyValue/List）解决"数据怎么呈现"
4. 图表（Graph）解决"趋势怎么画"
5. 表单与签名（Form/Signature）解决"文档怎么落地"
6. 细节（QrCode/Watermark/PdfImage/Alert/页级组件）解决"专业感从哪来"

零配置、可复制、代码归你所有——这就是 pdfcn 让 Beautiful PDFs made simple 的原因。📄

【免费下载链接】pdfcnBeautiful pdf components, built on Takumi and Forme. 100% Free, Zero config, one command setup.项目地址: https://gitcode.com/gh_mirrors/pd/pdfcn