PDF組件全解析：用表格、表單、圖表和二維碼構(gòu)建專業(yè)文檔)
pdfcn 24個(gè)PDF組件全解析用表格、表單、圖表和二維碼構(gòu)建專業(yè)文檔【免費(fèi)下載鏈接】pdfcnBeautiful pdf components, built on Takumi and Forme. 100% Free, Zero config, one command setup.項(xiàng)目地址: https://gitcode.com/gh_mirrors/pd/pdfcnpdfcn 是一個(gè)完全免費(fèi)、零配置的 React PDF 組件庫(kù)基于 Takumi 和 Forme 雙渲染引擎構(gòu)建與 shadcn/ui 采用相同的注冊(cè)表格式和 CLI 工作流。它提供 24 個(gè)開箱即用的 PDF 組件——表格、表單、圖表、二維碼、水印一應(yīng)俱全一條命令即可安裝讓你在 React 應(yīng)用中快速生成發(fā)票、報(bào)告、工單等專業(yè) PDF 文檔。為什么需要 pdfcn 這套 PDF 組件庫(kù)手寫 PDF 布局通常要處理邊距、分頁(yè)、對(duì)齊、配色等繁瑣細(xì)節(jié)。pdfcn 把這些工作封裝成了 24 個(gè)語(yǔ)義化的 React 組件?雙渲染引擎——支持 Takumi 和 Forme 兩套 base同一套組件可切換渲染器零配置——默認(rèn)值合理裝完即用完全可定制——內(nèi)置 9 套共享主題professional、corporate、modern、elegant 等代碼歸你所有可組合——組件像搭積木一樣組合成完整文檔組件源碼統(tǒng)一放在 apps/web/registry/bases/forme/components/ 和 apps/web/registry/bases/takumi/components/ 兩個(gè)目錄官方文檔索引見 apps/web/content/docs/components/meta.json。30秒上手一條命令安裝 PDF 組件pdfcn 沿用了 shadcn/ui 熟悉的 CLI 體驗(yàn)以表格組件為例npx shadcnlatest add pdfcn/forme/tableTakumi 版本只需把forme換成takumi。更多安裝細(xì)節(jié)可參考 apps/web/content/docs/installation.mdx/installation.mdx?utm_sourcegitcode_repo_files)。24個(gè)PDF組件分類速覽分類組件用途排版Heading、Text、Link、Badge、Divider標(biāo)題、正文、鏈接、標(biāo)簽、分隔線布局Stack、Section、Card、KeepTogether、PageBreak垂直堆疊、分區(qū)、卡片、防跨頁(yè)、強(qiáng)制分頁(yè)數(shù)據(jù)Table、DataTable、KeyValue、List低層表格原語(yǔ)、列式數(shù)據(jù)表、鍵值對(duì)、有序/無(wú)序列表圖表Graph柱狀、折線、面積、餅圖、環(huán)形圖SVG 繪制表單Form、Signature分組表單字段、簽名欄圖像PdfImage、QrCode、Watermark、Alert圖片嵌入、二維碼、水印、提示框頁(yè)級(jí)PageHeader、PageFooter、PageNumber重復(fù)頁(yè)眉、頁(yè)腳、頁(yè)碼標(biāo)記每個(gè)組件都有獨(dú)立的文檔頁(yè)和實(shí)時(shí)預(yù)覽如表格文檔 apps/web/content/docs/components/forme/table.mdx二維碼文檔 apps/web/content/docs/components/forme/qrcode.mdx。表格與數(shù)據(jù)組件讓數(shù)據(jù)一目了然Table是低層表格原語(yǔ)提供line、grid、striped、compact等 7 種外觀變體還支持zebraStripe斑馬紋DataTable則面向列 行結(jié)構(gòu)化的數(shù)據(jù)表場(chǎng)景適合財(cái)務(wù)明細(xì)、庫(kù)存清單。Table variantstriped zebraStripe {/* 表頭、表體與單元格 */} /Table配合KeyValue鍵值定義列表和List有序/無(wú)序列表一張發(fā)票的項(xiàng)目-金額-合計(jì)結(jié)構(gòu)即可完整表達(dá)。示例代碼可直接查看 apps/web/examples/forme/invoice-classic.tsx 與 apps/web/examples/takumi/data-table.tsx。表單與簽名組件把 PDF 變成可填寫的文檔Form組件用分組 字段的方式描述表單支持underline下劃線式、box、outlined、ghost四種風(fēng)格標(biāo)簽可置于字段上方或左側(cè)分組支持單列、雙列、三列布局——醫(yī)療登記表、面試申請(qǐng)表這類文檔一步到位PdfForm titleContact groups{[{ fields: [{ label: Email }] }]} /Signature組件則提供簽名欄姓名 角色標(biāo)簽讓合同、工單在 PDF 上依然有正式的落款。實(shí)際用例參見 apps/web/examples/forme/medical-intake-form.tsx 和 apps/web/examples/takumi/signature.tsx。圖表組件在 PDF 里直接畫 SVG 圖表Graph是 24 個(gè)組件中最出彩的一個(gè)——柱狀圖、橫向柱狀圖、折線圖、面積圖、餅圖、環(huán)形圖全部用 SVG 繪制支持平滑曲線、數(shù)據(jù)點(diǎn)、圖例位置、中心標(biāo)簽、網(wǎng)格線等 20 多個(gè)屬性PdfGraph variantbar data{[{ label: Q1, value: 30 }]} /一張季度經(jīng)營(yíng)報(bào)告里的營(yíng)收趨勢(shì) 結(jié)構(gòu)占比用兩個(gè) Graph 加一段 Text 就能完成無(wú)需再導(dǎo)出圖片插入。屬性全表見 apps/web/content/docs/components/forme/graph.mdx。二維碼、水印與圖片專業(yè)文檔的細(xì)節(jié)加分項(xiàng)QrCode——從任意字符串直接生成二維碼付款碼、活動(dòng)入場(chǎng)碼、發(fā)票查驗(yàn)碼都可以放進(jìn)去源碼apps/web/registry/bases/forme/components/qrcode/qrcode.tsxWatermark——對(duì)角或居中的水印覆蓋層機(jī)密 CONFIDENTIAL、草稿 DRAFT一頁(yè)聲明PdfImage——嵌入圖片并支持多種適配方式Alert——info / success / warning / error 四種提示框適合在報(bào)告開頭給出醒目的結(jié)論提示頁(yè)眉、頁(yè)腳與頁(yè)碼讓文檔翻頁(yè)不穿幫PDF 特有的痛點(diǎn)是跨頁(yè)。pdfcn 用三個(gè)頁(yè)級(jí)組件解決PageHeader / PageFooter——在每一頁(yè)重復(fù)渲染的頁(yè)眉頁(yè)腳公司名、文檔編號(hào)始終在場(chǎng)PageNumber——當(dāng)前頁(yè)碼標(biāo)記KeepTogether——強(qiáng)制子內(nèi)容留在同一頁(yè)防止標(biāo)題在頁(yè)尾、正文在下一頁(yè)的尷尬PageBreak——手動(dòng)強(qiáng)制分頁(yè)章節(jié)之間干凈利落9套內(nèi)置主題 預(yù)制文檔塊換皮不費(fèi)力組件之外pdfcn 還內(nèi)置了 9 套共享主題blueprint、corporate、elegant、executive、forest、minimal、modern、professional、vivid主題定義位于 apps/web/registry/themes/例如 apps/web/registry/themes/corporate.ts。換主題只需換一個(gè) ThemeProvider 的配置整套文檔的配色與字體隨之更新。更進(jìn)一步倉(cāng)庫(kù)提供了 19 個(gè)文檔塊Blocks6 種風(fēng)格發(fā)票classic / corporate / creative / minimal / modern / consultant、4 種報(bào)告財(cái)務(wù) / 營(yíng)銷 / 運(yùn)營(yíng) / 安全、課程計(jì)劃、會(huì)議紀(jì)要、新聞稿、活動(dòng)議程與門票、禮品券、裝箱單、快遞面單、工單、醫(yī)療登記表——完整成品文檔直接參考 apps/web/registry/bases/forme/blocks/文檔入口見 apps/web/content/docs/blocks/meta.json。總結(jié)一份組件清單覆蓋 90% 的 PDF 場(chǎng)景pdfcn 用 24 個(gè)組件 9 套主題 19 個(gè)文檔塊覆蓋了從發(fā)票到報(bào)告的大部分專業(yè) PDF 生成需求排版Heading/Text/Link/Badge/Divider解決字怎么排布局Stack/Section/Card/KeepTogether/PageBreak解決內(nèi)容怎么擺數(shù)據(jù)Table/DataTable/KeyValue/List解決數(shù)據(jù)怎么呈現(xiàn)圖表Graph解決趨勢(shì)怎么畫表單與簽名Form/Signature解決文檔怎么落地細(xì)節(jié)QrCode/Watermark/PdfImage/Alert/頁(yè)級(jí)組件解決專業(yè)感從哪來(lái)零配置、可復(fù)制、代碼歸你所有——這就是 pdfcn 讓 Beautiful PDFs made simple 的原因?！久赓M(fèi)下載鏈接】pdfcnBeautiful pdf components, built on Takumi and Forme. 100% Free, Zero config, one command setup.項(xiàng)目地址: https://gitcode.com/gh_mirrors/pd/pdfcn創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 pdfcn 24個(gè)PDF組件全解析：用表格、表單、圖表和二維碼構(gòu)建專業(yè)文檔
pdfcn 24個(gè)PDF組件全解析用表格、表單、圖表和二維碼構(gòu)建專業(yè)文檔【免費(fèi)下載鏈接】pdfcnBeautiful pdf components, built on Takumi and Forme. 100% Free, Zero config, one command setup.項(xiàng)目地址: https://gitcode.com/gh_mirrors/pd/pdfcnpdfcn 是一個(gè)完全免費(fèi)、零配置的 React PDF 組件庫(kù)基于 Takumi 和 Forme 雙渲染引擎構(gòu)建與 shadcn/ui 采用相同的注冊(cè)表格式和 CLI 工作流。它提供 24 個(gè)開箱即用的 PDF 組件——表格、表單、圖表、二維碼、水印一應(yīng)俱全一條命令即可安裝讓你在 React 應(yīng)用中快速生成發(fā)票、報(bào)告、工單等專業(yè) PDF 文檔。為什么需要 pdfcn 這套 PDF 組件庫(kù)手寫 PDF 布局通常要處理邊距、分頁(yè)、對(duì)齊、配色等繁瑣細(xì)節(jié)。pdfcn 把這些工作封裝成了 24 個(gè)語(yǔ)義化的 React 組件?雙渲染引擎——支持 Takumi 和 Forme 兩套 base同一套組件可切換渲染器零配置——默認(rèn)值合理裝完即用完全可定制——內(nèi)置 9 套共享主題professional、corporate、modern、elegant 等代碼歸你所有可組合——組件像搭積木一樣組合成完整文檔組件源碼統(tǒng)一放在 apps/web/registry/bases/forme/components/ 和 apps/web/registry/bases/takumi/components/ 兩個(gè)目錄官方文檔索引見 apps/web/content/docs/components/meta.json。30秒上手一條命令安裝 PDF 組件pdfcn 沿用了 shadcn/ui 熟悉的 CLI 體驗(yàn)以表格組件為例npx shadcnlatest add pdfcn/forme/tableTakumi 版本只需把forme換成takumi。更多安裝細(xì)節(jié)可參考 apps/web/content/docs/installation.mdx/installation.mdx?utm_sourcegitcode_repo_files)。24個(gè)PDF組件分類速覽分類組件用途排版Heading、Text、Link、Badge、Divider標(biāo)題、正文、鏈接、標(biāo)簽、分隔線布局Stack、Section、Card、KeepTogether、PageBreak垂直堆疊、分區(qū)、卡片、防跨頁(yè)、強(qiáng)制分頁(yè)數(shù)據(jù)Table、DataTable、KeyValue、List低層表格原語(yǔ)、列式數(shù)據(jù)表、鍵值對(duì)、有序/無(wú)序列表圖表Graph柱狀、折線、面積、餅圖、環(huán)形圖SVG 繪制表單Form、Signature分組表單字段、簽名欄圖像PdfImage、QrCode、Watermark、Alert圖片嵌入、二維碼、水印、提示框頁(yè)級(jí)PageHeader、PageFooter、PageNumber重復(fù)頁(yè)眉、頁(yè)腳、頁(yè)碼標(biāo)記每個(gè)組件都有獨(dú)立的文檔頁(yè)和實(shí)時(shí)預(yù)覽如表格文檔 apps/web/content/docs/components/forme/table.mdx二維碼文檔 apps/web/content/docs/components/forme/qrcode.mdx。表格與數(shù)據(jù)組件讓數(shù)據(jù)一目了然Table是低層表格原語(yǔ)提供line、grid、striped、compact等 7 種外觀變體還支持zebraStripe斑馬紋DataTable則面向列 行結(jié)構(gòu)化的數(shù)據(jù)表場(chǎng)景適合財(cái)務(wù)明細(xì)、庫(kù)存清單。Table variantstriped zebraStripe {/* 表頭、表體與單元格 */} /Table配合KeyValue鍵值定義列表和List有序/無(wú)序列表一張發(fā)票的項(xiàng)目-金額-合計(jì)結(jié)構(gòu)即可完整表達(dá)。示例代碼可直接查看 apps/web/examples/forme/invoice-classic.tsx 與 apps/web/examples/takumi/data-table.tsx。表單與簽名組件把 PDF 變成可填寫的文檔Form組件用分組 字段的方式描述表單支持underline下劃線式、box、outlined、ghost四種風(fēng)格標(biāo)簽可置于字段上方或左側(cè)分組支持單列、雙列、三列布局——醫(yī)療登記表、面試申請(qǐng)表這類文檔一步到位PdfForm titleContact groups{[{ fields: [{ label: Email }] }]} /Signature組件則提供簽名欄姓名 角色標(biāo)簽讓合同、工單在 PDF 上依然有正式的落款。實(shí)際用例參見 apps/web/examples/forme/medical-intake-form.tsx 和 apps/web/examples/takumi/signature.tsx。圖表組件在 PDF 里直接畫 SVG 圖表Graph是 24 個(gè)組件中最出彩的一個(gè)——柱狀圖、橫向柱狀圖、折線圖、面積圖、餅圖、環(huán)形圖全部用 SVG 繪制支持平滑曲線、數(shù)據(jù)點(diǎn)、圖例位置、中心標(biāo)簽、網(wǎng)格線等 20 多個(gè)屬性PdfGraph variantbar data{[{ label: Q1, value: 30 }]} /一張季度經(jīng)營(yíng)報(bào)告里的營(yíng)收趨勢(shì) 結(jié)構(gòu)占比用兩個(gè) Graph 加一段 Text 就能完成無(wú)需再導(dǎo)出圖片插入。屬性全表見 apps/web/content/docs/components/forme/graph.mdx。二維碼、水印與圖片專業(yè)文檔的細(xì)節(jié)加分項(xiàng)QrCode——從任意字符串直接生成二維碼付款碼、活動(dòng)入場(chǎng)碼、發(fā)票查驗(yàn)碼都可以放進(jìn)去源碼apps/web/registry/bases/forme/components/qrcode/qrcode.tsxWatermark——對(duì)角或居中的水印覆蓋層機(jī)密 CONFIDENTIAL、草稿 DRAFT一頁(yè)聲明PdfImage——嵌入圖片并支持多種適配方式Alert——info / success / warning / error 四種提示框適合在報(bào)告開頭給出醒目的結(jié)論提示頁(yè)眉、頁(yè)腳與頁(yè)碼讓文檔翻頁(yè)不穿幫PDF 特有的痛點(diǎn)是跨頁(yè)。pdfcn 用三個(gè)頁(yè)級(jí)組件解決PageHeader / PageFooter——在每一頁(yè)重復(fù)渲染的頁(yè)眉頁(yè)腳公司名、文檔編號(hào)始終在場(chǎng)PageNumber——當(dāng)前頁(yè)碼標(biāo)記KeepTogether——強(qiáng)制子內(nèi)容留在同一頁(yè)防止標(biāo)題在頁(yè)尾、正文在下一頁(yè)的尷尬PageBreak——手動(dòng)強(qiáng)制分頁(yè)章節(jié)之間干凈利落9套內(nèi)置主題 預(yù)制文檔塊換皮不費(fèi)力組件之外pdfcn 還內(nèi)置了 9 套共享主題blueprint、corporate、elegant、executive、forest、minimal、modern、professional、vivid主題定義位于 apps/web/registry/themes/例如 apps/web/registry/themes/corporate.ts。換主題只需換一個(gè) ThemeProvider 的配置整套文檔的配色與字體隨之更新。更進(jìn)一步倉(cāng)庫(kù)提供了 19 個(gè)文檔塊Blocks6 種風(fēng)格發(fā)票classic / corporate / creative / minimal / modern / consultant、4 種報(bào)告財(cái)務(wù) / 營(yíng)銷 / 運(yùn)營(yíng) / 安全、課程計(jì)劃、會(huì)議紀(jì)要、新聞稿、活動(dòng)議程與門票、禮品券、裝箱單、快遞面單、工單、醫(yī)療登記表——完整成品文檔直接參考 apps/web/registry/bases/forme/blocks/文檔入口見 apps/web/content/docs/blocks/meta.json。總結(jié)一份組件清單覆蓋 90% 的 PDF 場(chǎng)景pdfcn 用 24 個(gè)組件 9 套主題 19 個(gè)文檔塊覆蓋了從發(fā)票到報(bào)告的大部分專業(yè) PDF 生成需求排版Heading/Text/Link/Badge/Divider解決字怎么排布局Stack/Section/Card/KeepTogether/PageBreak解決內(nèi)容怎么擺數(shù)據(jù)Table/DataTable/KeyValue/List解決數(shù)據(jù)怎么呈現(xiàn)圖表Graph解決趨勢(shì)怎么畫表單與簽名Form/Signature解決文檔怎么落地細(xì)節(jié)QrCode/Watermark/PdfImage/Alert/頁(yè)級(jí)組件解決專業(yè)感從哪來(lái)零配置、可復(fù)制、代碼歸你所有——這就是 pdfcn 讓 Beautiful PDFs made simple 的原因?！久赓M(fèi)下載鏈接】pdfcnBeautiful pdf components, built on Takumi and Forme. 100% Free, Zero config, one command setup.項(xiàng)目地址: https://gitcode.com/gh_mirrors/pd/pdfcn創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考