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