大概的实现步骤：
1.解析 html 页面，生成一个包含节点位置信息，样式，层级，内容等信息的 DOM 树。
2.递归 DOM 树，根据节点据顶部的高度和生成页面规格的高度，将节点分配到不同的页面。
3.调用 jspdf.js 的 api,将节点绘制到 PDF 文件上。
优点：
1.生成的是矢量的 PDF ，可以对 PDF 的文本进行搜索，选中，编辑。
2.生成的文件体积很小
3.使用简单，一行代码即可将 html 页面转成 pdf
4.精准的分页，避免元素被切割。
5.如果文件体积不大，而且电脑性能支持，可以生成几千页的 PDF
- 具体的说明
- 在线体验
- Git 仓库地址 (欢迎 Star⭐⭐⭐)
 |
1
yangxiaopeipei 3 天前
 打印不是更快吗 |
 |
2
cpstar 3 天前
@yangxiaopeipei #1 服务器上后台服务咋打印
|
 |
3
kuxuan 3 天前
收藏了。
|
 |
7
jifengg 3 天前
之前关注过，先说一下网站证书过期了。
另外，demo 导出的 pdf ，没有最后的 line chart 。不知道是不是个例。UA:'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36' |
 |
8
evan1 PRO @herbloo #5 是的，我做过这个。当时做了很久，各种方案都尝试了，最后发现还是得无头浏览器。其它 js 方式生成的多多少少都会有转换的问题。比如 table 的高度、边框宽度、二维码清晰度之类的。
无头浏览器缺点就是占内存，不过用线程池+队列轮换处理也还好。 |
 |
11
lmq1919 OP @yangxiaopeipei 打印有的需求满足不了😭
|
 |
12
dbit 3 天前
兼容好像有问题, ubuntu 下载下来, 用 Xreader 打开全部是空白页
|
 |
14
webszy 3 天前  1
点了 star,支持
|
 |
17
xz410236056 3 天前
我之前简历是 HTML 的，但是 BOSS 只让传 PDF ，找了很多都找不到合适的。因为 HTML 并不是纯静态页面，需要加载部分 JS 渲染，这种时候转的 PDF 就有点问题
|
 |
18
zhangyunlu80 3 天前
支持 简单 echart 图表，饼图，柱状图么，支持 一些小的 icon 嘛
|
|
19
lmq1919 OP @zhangyunlu80 必须支持的
|
|
20
lmq1919 OP @xz410236056 我的库支持你这个需求
|
 |
21
54xavier 3 天前 1
不错不错，好活，当赏
|
 |
22
focuxin 3 天前
Edge 官网的直接下载都是空白页
|
 |
23
ysc3839 3 天前 via Android
是正确的思路，但是是错误的做法。
解析 html 及生成 PDF 已经有现成的工具了，那就是浏览器。 正确的做法应该是直接使用浏览器转换，因为自己实现的 html 解析很难媲美浏览器。 |
 |
24
visper 3 天前
感觉样式肯定有些情况不对。如果需要完美方案，还是得无头浏览器。
|
 |
28
archean 3 天前
相比 CloudFlare 的 Browser Rendering 有何优势？
|
 |
31
lynan 3 天前
star 支持一下，说不定哪天就用得到了
|
 |
32
otakustay 3 天前
我有个疑问，这样生成的 PDF ，再用做下游的消费，比如 PDF 转到 Markdown ，还能保留最原始 HTML 里的信息层级结构吗
|
 |
33
ulyssess 3 天前
mark 一下，明天试一试你这个。现在用的就是 html2pdf 这个库，有几个问题：1. 页数多了会出现空白，因为 canvas 太大了 2. 分页的时候会切割元素。
|
 |
34
Irisviel 3 天前
感谢分享，之前搞 Mermaid 导出截图一直渲染不了，试试你这个方案~
|
 |
35
lizhenda 3 天前
官网打开有点慢哦，Edge 打开该 pdf 文件确实会是空白，使用别的本地 pdf 查看工具看就是正常的。
|
 |
37
spritecn 2 天前
用过 java Itext 版本的，坑很多
|
 |
38
xuying 2 天前
看着不错 要是有油猴插件就更好了
|
 |
39
xmdbb 1 天前
不知道啥问题，我直接在线体验导出是六页空白的 PDF
|
|
42
xmdbb 1 天前
|
 |
46
oasis2008f 14 小时 3 分钟前
动态分页的问题真是太头痛了，尝试下你的方案
|
Select Language