开源了一个 html 转 pdf 的 js 库，这应该是 html 转 pdf 最正确的思路了

[lmq1919]

大概的实现步骤：

1.解析 html 页面，生成一个包含节点位置信息，样式，层级，内容等信息的 DOM 树。

2.递归 DOM 树，根据节点据顶部的高度和生成页面规格的高度，将节点分配到不同的页面。

3.调用 jspdf.js 的 api,将节点绘制到 PDF 文件上。

优点：

1.生成的是矢量的 PDF ，可以对 PDF 的文本进行搜索，选中，编辑。

2.生成的文件体积很小

3.使用简单，一行代码即可将 html 页面转成 pdf

4.精准的分页，避免元素被切割。

5.如果文件体积不大，而且电脑性能支持，可以生成几千页的 PDF

1. 具体的说明

https://juejin.cn/post/7583912637470769203

1. 在线体验

https://dompdfjs.lisky.com.cn

1. Git 仓库地址 (欢迎 Star⭐⭐⭐)

https://github.com/lmn1919/dompdf.js

[54xavier]

不错不错，好活，当赏

[ion1ze]

Edge 官网的直接下载都是空白页

[ysc3839]

是正确的思路，但是是错误的做法。
解析 html 及生成 PDF 已经有现成的工具了，那就是浏览器。
正确的做法应该是直接使用浏览器转换，因为自己实现的 html 解析很难媲美浏览器。

[visper]

感觉样式肯定有些情况不对。如果需要完美方案，还是得无头浏览器。

[lmq1919]

@ysc3839 浏览器转 pdf 不能实现所有需求，不然就不会有那么多相关的库。你用浏览器打印一下这个页面看看效果就知道了

[lmq1919]

@visper 是会有误差，不会所有的 css 属性都支持。不过我这个方案不需要服务器支持，看需求再取舍😂

[lmq1919]

@54xavier 感恩❤️

[archean]

相比 CloudFlare 的 Browser Rendering 有何优势？

[lmq1919]

@archean 我的方案是纯前端实现 html 转 pdf 的哈，不需要服务器，可以很方便的集成到你的网址。个人项目何德何能和巨头的项目比😂

[archean]

@lmq1919 #29 了解了，我会去看一下

[lynan]

star 支持一下，说不定哪天就用得到了

[otakustay]

我有个疑问，这样生成的 PDF ，再用做下游的消费，比如 PDF 转到 Markdown ，还能保留最原始 HTML 里的信息层级结构吗

[ulyssess]

mark 一下，明天试一试你这个。现在用的就是 html2pdf 这个库，有几个问题：1. 页数多了会出现空白，因为 canvas 太大了 2. 分页的时候会切割元素。

[Irisviel]

感谢分享，之前搞 Mermaid 导出截图一直渲染不了，试试你这个方案~

[lizhenda]

官网打开有点慢哦，Edge 打开该 pdf 文件确实会是空白，使用别的本地 pdf 查看工具看就是正常的。

[lmq1919]

@ulyssess 我的方案在努力解决这些问题，不是基于 canvas 的，页数多也不会出现空白

[spritecn]

用过 java Itext 版本的，坑很多

[xuying]

看着不错 要是有油猴插件就更好了

[xmdbb]

不知道啥问题，我直接在线体验导出是六页空白的 PDF

[lmq1919]

@xmdbb 有开发的计划