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

pdfcn 24个PDF组件全解析用表格、表单、图表和二维码构建专业文档【免费下载链接】pdfcnBeautiful pdf components, built on Takumi and Forme. 100% Free, Zero config, one command setup.项目地址: https://gitcode.com/gh_mirrors/pd/pdfcnpdfcn 是一个完全免费、零配置的 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 shadcnlatest add pdfcn/forme/tableTakumi 版本只需把forme换成takumi。更多安装细节可参考 apps/web/content/docs/installation.mdx/installation.mdx?utm_sourcegitcode_repo_files)。24个PDF组件分类速览分类组件用途排版Heading、Text、Link、Badge、Divider标题、正文、链接、标签、分隔线布局Stack、Section、Card、KeepTogether、PageBreak垂直堆叠、分区、卡片、防跨页、强制分页数据Table、DataTable、KeyValue、List低层表格原语、列式数据表、键值对、有序/无序列表图表Graph柱状、折线、面积、饼图、环形图SVG 绘制表单Form、Signature分组表单字段、签名栏图像PdfImage、QrCode、Watermark、Alert图片嵌入、二维码、水印、提示框页级PageHeader、PageFooter、PageNumber重复页眉、页脚、页码标记每个组件都有独立的文档页和实时预览如表格文档 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 variantstriped 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 titleContact 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 variantbar data{[{ label: Q1, value: 30 }]} /一张季度经营报告里的营收趋势 结构占比用两个 Graph 加一段 Text 就能完成无需再导出图片插入。属性全表见 apps/web/content/docs/components/forme/graph.mdx。二维码、水印与图片专业文档的细节加分项QrCode——从任意字符串直接生成二维码付款码、活动入场码、发票查验码都可以放进去源码apps/web/registry/bases/forme/components/qrcode/qrcode.tsxWatermark——对角或居中的水印覆盖层机密 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 个文档块Blocks6 种风格发票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 生成需求排版Heading/Text/Link/Badge/Divider解决字怎么排布局Stack/Section/Card/KeepTogether/PageBreak解决内容怎么摆数据Table/DataTable/KeyValue/List解决数据怎么呈现图表Graph解决趋势怎么画表单与签名Form/Signature解决文档怎么落地细节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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考