HTML转PDF只能逐页截图?
100页研报转PDF从5分钟到10秒
我只用了一行命令
Playwright · CSS分页 · 矢量PDF · 批量转换
锤无双丨网页报告转PDF
📦 5 Parts + Conclusion
👉 滑动
PART 01
旧办法之坑
截图拼PDF的痛点
PART 02
换思路
浏览器原生分页
PART 03
速度对比
5分钟到10秒
PART 04
用法
一行命令
PART ///
写在最后
工具的本质
做研报的人都懂:网页版好看,交付得给PDF。
这中间的搬运工,我用一个Skill彻底干掉了。
我常年做行业研究报告。习惯先用HTML把版式做漂亮——图表、配色、KPI卡片,浏览器里怎么调都行。可真到交付那一步,客户只认PDF。
于是每次都卡在同一个地方:HTML转PDF。
这个环节看着简单,做过的人才知道有多磨人。我把踩过的坑和最后的解法整理成了一个Skill,一行命令搞定,今天完整讲一遍。
01
PART
旧办法为什么让人抓狂
PAIN POINT · THE OLD WAY
最开始我用的是最直觉的方案:逐页截图,再拼成PDF。
思路没错,每个slide截一张图,一张张叠起来导出。但真跑起来,问题全冒出来了。
一份80多页的研报,脚本要一页一页地加载、渲染、截图、保存。一百页跑下来要五到八分钟,我只能盯着进度条发呆。更糟的是导出的文件——全是位图,一份就是15MB起步,发微信都嫌大。
最要命的是:截图出来的文字是图片,不能选中、不能搜索、不能复制。客户想在PDF里搜个关键词,搜不到。这在专业交付里,是硬伤。
我一度以为这就是命,转PDF就得这么慢、这么笨重。直到我换了个思路。

旧方案:一页一页截图,又慢又重
02
PART
换个思路:让浏览器自己分页
CSS PAGING
后来我想明白一件事:浏览器本来就会打印PDF。
Chrome里按Ctrl+P,选「另存为PDF」,出来的文字是矢量的、可搜索的、文件还小。既然浏览器天生就有这个能力,我为什么还要手动截图?
于是新方案的核心就一句话——用Playwright调用浏览器原生的page.pdf(),注入一段CSS控制分页,一次成型。
关键就在这段注入的CSS:
.slide {
page-break-after: always;
}
它告诉浏览器:每个slide结束后强制翻页。这样一份HTML里纵向堆叠的几十个slide,浏览器一次就能干净地切成几十页PDF。不用截图,不用循环,不用等。
从「人肉搬运每一页」,变成「浏览器自己排好版一次交付」。这一步换掉,整个体验就翻天了。

新方案:注入分页CSS,浏览器一次切好
03
PART
快到什么程度
SPEED COMPARISON
上数据最直接。同样一份100页的研报:
五分钟变十秒,15MB变1MB,图片变矢量
实测:4份研报、325页,约40秒跑完

旧方案像背巨石,新方案轻举一张卡片
04
PART
怎么用:真的只有一行
ONE LINE COMMAND
装好依赖,剩下的就是一行命令的事。在WorkbBuddy等AI工具中,只需在对话框中输入,使用网页报告转PDFskill,转PDF即可。
前置条件只需要一句:
CMDpip install playwright
注意,不需要额外去下载浏览器。脚本会自动探测你电脑里的Chrome、Edge、360、QQ、搜狗、Opera、Brave、Vivaldi,找到哪个用哪个。实在一个都没有,才走国内镜像自动装一个Chromium。
单个文件转换:
CMDpython convert_html_to_pdf.py report.html
跑完自动生成同名的report.pdf。想指定输出路径也行:
CMDpython convert_html_to_pdf.py report.html -o 我的报告.pdf
最舒服的是批量。一个通配符,当前目录所有HTML一次转完:
CMDpython convert_html_to_pdf.py *.html
我平时就是这么用的:一堆研报HTML扔进文件夹,一行命令走开喝杯咖啡,回来全是PDF。

一堆HTML进漏斗,一行命令出全部PDF
05
PART
一个容易忽略的细节
DETAIL MATTERS
早期版本有个恶心的小毛病——PDF第一页的字总是有点模糊。
后来定位到是字体还没渲染完就开始导出了。解决办法是三管齐下:开启字体平滑渲染、把视图缩放拉到2倍、导出前等字体真正就绪。
现在首页和后面每一页一样锐利。这种细节,交付给机构客户的时候,就是专业和业余的差别。
06
PART
它适合谁
WHEN TO USE
说清楚适用边界,免得你用错。
这个工具专门吃slide堆叠结构的HTML:每个页面是一个固定尺寸的<div>元素,className为slide,纵向排在一起。行业研报、PPT式网页、任何幻灯片形态的HTML,都能完美还原版式。
自动判断横竖版:读取第一个.slide的实际宽高,宽按横版、高按竖版,无slide默认A4
一行命令通吃:不用指定格式,扔进去就行
如果是A4长文响应式网页,建议直接用Playwright的page.pdf()按A4导出更合适
///
LAST
写在最后
FINAL THOUGHTS
做AIGC工具这两年,我越来越信一件事:真正好用的工具,都是把一个具体的痛点抠到极致。
HTML转PDF听着不起眼,但它卡在我每次交付的最后一米。把它从五分钟压到十秒,省下的不只是时间,是那种「终于不用再等了」的顺畅。
这个Skill我已经开源,github/SKILLHUB均有,需要的自取。如果你也常年被某个重复环节磨得难受,欢迎聊聊——说不定下一个被我干掉的,就是你的那个坑。
我是锤无双,专注AIGC开发与工具实战。
既然看到这里了,如果觉得有用,随手点个赞、在看、转发三连吧。
THANKS FOR READING
夜雨聆风