企业官网建设流程全解析

pdfcn Theme Builder实操教程：可视化定制PDF主题，实时预览、撤销重做、一键导出代码

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

pdfcn 是一款 100% 免费、零配置的 PDF 组件库，内置Theme Builder（主题构建器）：通过可视化界面定制 PDF 主题的颜色、字体与页面布局，改动即时反映在实时 PDF 预览中，支持撤销/重做，最后可一键导出主题代码直接用于项目。本教程面向新手，带你 5 分钟上手这套"所见即所得"的 PDF 主题定制工作流。

一、pdfcn Theme Builder 是什么？

Theme Builder 是 pdfcn 官方提供的可视化 PDF 主题编辑工具，发布说明见 2026-08-30-theme-builder.mdx/changelog/2026-08-30-theme-builder.mdx)。它的核心能力：

• 🎨实时 PDF 预览—— 调整颜色、字体、间距、页面设置时，预览区同步渲染
• 📚9 套内置预设—— Professional、Modern、Minimal、Executive、Corporate、Elegant、Vivid、Forest、Blueprint，一键切换
• 🔄撤销 / 重做—— 完整历史（最多 30 步，见 theme-builder.ts），支持 ⌘Z / ⌘⇧Z 快捷键
• 📦一键导出代码—— 复制为 TypeScript 主题文件，或直接下载.ts文件
• 🔗可分享 URL—— 主题状态编码进地址，发给同事即可还原你的配置

它同时提供Takumi 与 Forme 两套渲染底座的独立构建器，入口分别为/theme-builder/takumi与/theme-builder/forme（页面实现见 page.tsx/theme-builder/[base]/page.tsx)）。

二、快速上手：5 步完成一个自定义 PDF 主题

1️⃣ 打开 Theme Builder 页面

访问项目内的theme-builder路由即可进入，页面采用「左侧实时预览 + 右侧控制面板」的双栏布局，核心交互逻辑在 theme-builder.tsx。

2️⃣ 选择基础预设主题

在控制面板顶部：

• 通过Theme Picker从 9 套预设中选择起点（默认 Professional）
• 点击旁边的 🎲随机按钮可以盲抽一个预设，适合寻找灵感

预设定义位于 themes 目录，每个.ts文件即一套完整主题。

3️⃣ 微调颜色、字体与版式

右侧面板分三个标签页，所有改动立即渲染到预览区（控件实现见 theme-controls.tsx）：

💡 小提示：颜色既可以用取色器点选，也可以直接输入 Hex 值；字体支持 Inter、Playfair Display、JetBrains Mono 等 12 种选项，并会在实际字号下预览效果。

4️⃣ 改错了？撤销重做随时兜底

顶部工具栏提供 Undo / Redo 按钮，也可直接按⌘Z（撤销）、⌘⇧Z或⌘Y（重做）。状态管理采用完整的快照历史栈，实现见 use-theme-builder.ts。另有Reset 按钮可一键回到当前预设的默认值。

5️⃣ 一键导出主题代码

点击右上角Code按钮，弹出代码导出对话框（见 theme-code-dialog.tsx），提供两种模式：

• Full theme—— 完整主题对象，直接保存为src/lib/你的主题名.ts即可使用
• Delta from preset—— 只导出你相对基础预设改动过的部分，代码更精简，适合只改了几个颜色的场景

你可以：

• 点击Copy复制到剪贴板
• 点击Download .ts直接下载以主题名命名的文件

代码由 generate-code.ts 自动生成，diff 算法会智能对比预设差异。

三、实用技巧：分享与下载预览 PDF

• Share（分享链接）：当前主题状态会自动编码到 URL 并持久化到本地（存储键见 theme-builder.ts 的pdfcn-theme-builder），点击 Share 即复制链接，团队成员打开即可看到完全相同的配置
• Open / Download：预览生成真实 PDF 后，可在新标签页打开或直接下载主题名-preview.pdf，方便发给客户确认最终效果
• 移动端友好：窄屏下控制面板收起为抽屉，点击右下角Customize按钮即可展开

四、相关源码与文档路径

五、常见问题

Q：导出的主题文件怎么用？A：把生成的.ts文件放入项目（如src/lib/my-theme.ts），将其传给任意 pdfcn 主题化文档即可，用法可参考 theming 文档。

Q：使用网络字体（如 Inter、Playfair Display）有什么注意事项？A：导出对话框会给出提醒：这些字体运行时从 CDN 加载，离线或受限环境下建议自托管字体文件，或改用内置字体（Helvetica、Times-Roman、Courier）。

Q：Takumi 和 Forme 有什么区别？A：两者是 pdfcn 的两套渲染底座，Theme Builder 为它们提供独立路由与独立状态，导出代码可分别用于对应底座。

掌握 pdfcn Theme Builder 后，你就拥有了"可视化定制 + 实时预览 + 一键导出"的完整 PDF 主题工作流——无需手写任何配置，即可让发票、报告等 PDF 文档拥有统一的品牌风格 🚀

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