Html To Pdf_设计多媒体 skill-PHP中文网

首页专区 Skill 文章专题 AI工具学习编程手册

Laper 剧本策划到成片协作 AniShort AI短剧协同制作平台剧云中文短剧剧本制作平台 updream 一键生成高质量推广成片

PHP MySQL jquery HTML CSS

Html To Pdf

Polar Sponsor

爱发电赞助

.NET 9.0

立即下载

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

内容ID:fz:skill:2f8e9a7c:wsl lobster:mpc2j3a6. 维西翁:1.0.3 QQ 许可证:MIT-0(ClawHub). 欧纳

功能概述

内容ID:fz:skill:2f8e9a7c:wsl lobster:mpc2j3a6. 维西翁:1.0.3 QQ 许可证:MIT-0(ClawHub). 欧纳是一项面向实际任务的技能，主要用于证明:wsl lobster 初次生成,v1.0.4 克拉夫·胡布发布前优化；注:本 QS Kill 依赖本机。

核心要点

它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。
从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。

使用与执行

实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；

结果检查与注意事项

涉及批量任务时，还应保存进度，避免中断后重复操作。该技能适合用于一次性任务，也可以接入自动化工作流，与其他技能或上层代理配合完成更完整的业务链路；在组合使用时，应明确每一步的输入输出关系，并避免不同步骤之间出现参数冲突。

ContentID: fz:skill:2f8e9a7c:wsl_lobster:mpc2j3a6 Version: 1.0.3 | License: MIT-0 (ClawHub) Owner: 泛智生态 / Ronie & 泛智小龙虾 Provenance: wsl_lobster 初次生成，v1.0.4 ClawHub 发布前优化 Note: 本 Skill 依赖本机已安装的 Chromium，不含浏览器包

html-to-pdf — HTML 页面转 PDF

用法

# 基本（PDF 输出到 HTML 同目录）
node scripts/html-to-pdf.mjs report.html

# 指定输出路径
node scripts/html-to-pdf.mjs input.html /tmp/output.pdf

# 指定 Chromium 路径
CHROME_PATH=/usr/bin/chromium node scripts/html-to-pdf.mjs input.html

不适合此技能的场景

❌ 需要 PDF 文本可选中/可搜索（PDF 内容是图片级的）
❌ HTML 依赖跨域 CDN 资源且网络不通
❌ 页面需要用户交互才能展示内容（如点击"加载更多"）
❌ 需要 A4 标准分页布局（如打印排版文档）

步骤

Step0: 渲染页面 + 等 JS 图表完成
Step1: 展开隐藏内容（.tc tab / .fi 淡入 / 折叠面板）
Step2: 测高度 + 底部 2px 实体 DOM（底色自动检测）
Step3: overflow:hidden 防 Chromium 额外分页 → PDF 生成
Step4: pdf-lib 验证页数

Step0 — 渲染

等待 networkidle0，检测 canvas（ECharts）全部完成后再等 2 秒确保动画。

Step1 — 展开

Headless 模式下 IntersectionObserver 不触发视口外元素。手动展开所有隐藏内容：

隐藏模式	CSS	修复手段
Tab 内容	`.tc { display: none }`	加 `.act` class
淡入动画	`.fi { opacity: 0; transform: translateY(...) }`	加 `.sho` class
折叠面板	`display: none`	`style.display = ''`

Step2 — 白边消除

Chromium PDF 渲染器底层有白色画布。DOM 内容与页面高度有 1px 缝隙时画布透出。

修复：底部加 2px 实体

，背景色自动检测（--bg CSS 变量 → computedStyle → 白色）。

Step3 — 防分页 + 生成

Chromium 对超长页面会切割出空白第二页。修复：生成前注入 overflow: hidden。

Step4 — 验证

输出示例：

✅ report.pdf (1288.7 KB)
   PDF 页数: 1
   页1: 1050 x 3001 pt

预期 1 页，>1 页表示有内容未展开或分页策略需调整。

依赖

npm install puppeteer-core pdf-lib

依赖	用途
`puppeteer-core`	浏览器控制（不含 Chromium 下载）
`pdf-lib`	PDF 页数验证

Chromium

脚本自动检测当前平台，也可通过环境变量覆盖：

# macOS：自动定位 /Applications/Google Chrome.app/...
# Linux/WSL：自动定位 /opt/chrome-linux/chrome
# 手动指定
CHROME_PATH=/usr/bin/chromium node scripts/html-to-pdf.mjs input.html

各平台路径备忘 → references/platforms.md

snap 版 Chromium 因沙箱隔离不可直接使用。

中文字体

本机需安装中文字体，否则 PDF 中文显示为方块。

方法 A：从 Windows 复制（WSL 环境）

mkdir -p ~/.fonts
cp "/mnt/c/Windows/Fonts/Noto Sans SC (TrueType).otf" ~/.fonts/
cp "/mnt/c/Windows/Fonts/msyh.ttc" ~/.fonts/
cp "/mnt/c/Windows/Fonts/seguiemj.ttf" ~/.fonts/
fc-cache -f -v ~/.fonts/

方法 B：直接下载 Noto Sans CJK

mkdir -p ~/.fonts && cd ~/.fonts
wget -O NotoSansSC.ttf "https://github.com/notofonts/noto-cjk/raw/main/Sans/OTF/SimplifiedChinese/NotoSansCJKsc-Regular.otf"
wget -O NotoEmoji.ttf "https://github.com/googlefonts/noto-emoji/raw/main/fonts/NotoEmoji-Regular.ttf"
fc-cache -f -v ~/.fonts/

故障排查

现象	可能原因	修复
`net::ERR_INVALID_URL`	相对路径	传完整路径或用 `$(pwd)/` 前缀
第二页空白	Chromium 内部分页	检查 `overflow:hidden` 注入
中文方块	缺少中文字体	执行"中文字体"节操作
emoji 方块	缺少 emoji 字体	安装 Noto Emoji / Segoe UI Emoji
底部 1px 白边	白色画布透出	确认 filler div 已注入且底色匹配
ECharts 空框架	渲染中改动了 body 样式	用 `addStyleTag` 而非直接改 DOM

首次验证

# 用任意本地 HTML 测试
node scripts/html-to-pdf.mjs path/to/your.html
# 或者生成一个简单测试文件
echo '你好世界 🦞' > /tmp/test.html
node scripts/html-to-pdf.mjs /tmp/test.html

安全性

✅ 输入校验：路径含 <>"|?* 等特殊字符 × 拒绝；仅允许 .html / .htm 文件
✅ 输出安全：指定输出路径时，仅在 HOME / /tmp / 当前目录下允许写入
✅ 异常安全：try/catch/finally 确保浏览器正确关闭，不泄露进程
⚠️ --no-sandbox：单用户环境安全；多租户部署需移除

许可与来源

直接引用：puppeteer-core（Apache-2.0）+ pdf-lib（MIT），通过 npm import 调用 API，不修改上游代码。

方案参考：jsPDF / pdfmake / HTMX / Pico.css / mini.css（仅调研，未引用代码）。

完整许可声明 → references/sources.md

已知问题

CDN 资源（cdn.jsdelivr.net 等）需网络连通，可替换为本地
无限滚动/懒加载不会自动触发，需在 Step1 中手动处理

作者最新文章

MySQL 连接超时问题的终极解决方案（Go 应用实战指南）

JavaFX 中实现响应式矩形布局：保持相对宽度与间距的正确方法

如何在 Flask 中安全比对表单数据与 MySQL 数据库记录是否存在重复

如何精准定位并屏蔽网页中恶意弹窗的 JavaScript 函数

如何让 contentEditable 元素在表单提交时正常传递数据

热门AI工具

Lovart

Hot

蛙蛙写作

Hot

VibeKnow

Hot

AionClaw

Hot

豆包大模型

Laper

Hot

UP简历

Hot

DeepSeek

相关专题

html termux代码合集

本专题整合了html termux相关教程，阅读专题下面的文章了解更多详细内容。

2026.04.02

499

HTML提醒设置合集

本专题整合了HTML提醒设置相关教程，阅读专题下面的文章了解更详细的操作步骤。

2026.03.27

840

php与html混编教程大全

本专题整合了php和html混编相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.13

158

html空格代码怎么写

在网页制作中，HTML空格代码是实现文本排版的常用技巧。本合集详解多种空格写法：如 （不换行空格）、&ensp;（半角空格）、&emsp;（全角空格）等实体编码，及CSS控制空白的white-space属性。覆盖基础用法、场景差异与注意事项，助新手快速掌握不同空格效果的实现逻辑，轻松解决排版对齐难题，提升页面美观度与可读性。

2025.11.27

409

css怎么嵌入到html

本合集聚焦“CSS嵌入HTML”核心技巧，为新手提供清晰指引。教程从基础讲起，详解行内样式（style属性）、内部样式表（<style>标签）与外部样式表（link引入）三种主流嵌入方式，对比其适用场景与优缺点。通过实例演示代码编写与效果呈现，助你快速掌握不同场景下的选择逻辑。内容简洁直观，零基础也能轻松上手，高效实现网页样式控制，开启前端美化第一步。

2025.11.27

288