欢迎转载文章

在前端开发中，“把网页变成 PDF”是个老生常谈的需求。无论是生成发票、报告还是简历，用户总希望点一下按钮就能带走一份格式完美的文档。 目前主流的前端html转pdf方案是通过html2canvas将网页渲染成canvas，再通过jsPDF将canvas转换为pdf。代表方案就是 html2pdf.js，npm包周下载量达到了80万，为广大开发者所接受。但是因为它基于html2canvas和jsPDF，会有一些无法解决的问题，比如：

• 生成速度慢
• 生成的pdf文件体积大
• 生成的pdf内容会模糊，打印时无法达到清晰度要求
• 文字无法被搜索，选中，编辑，因为它生成的pdf是图片式的，而非矢量pdf

而现在，有一种全新的解决思路，完美的解决了这些问题，那就是作者开源的前端pdf生成库dompdf.js,具体的实现和说明可以查看我上一篇文章 https://juejin.cn/post/7583912637470769203

在线体验

dompdfjs.lisky.com.cn

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

github.com/lmn1919/dom…

gitee.com/liu-facai/d…

dompdf.js的大致原理

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

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

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

可以看出，dompdf.js 跳过了html转图片的步骤，直接将 DOM 树转换为矢量 PDF 文件，避免了图片转换导致的模糊问题，同时也解决了文字无法被搜索，选中，编辑的问题。

下面，我们从pdf生成速度，生成质量，生成数量等方面对两种方案进行对比

测试的内容为生成包含文本和表格的pdf文件

1.文件生成速度对比

同样的内容，dompdf.js 生成速度更快，耗时基本上只有 html2pdf.js 的 1/2。

2.文件体积对比

dompdf.js 生成的 pdf 文件体积更小，同样的内容页数，dompdf.js 生成的 pdf 文件体积是 html2pdf.js 的 1/5左右。

3.清晰度对比

在放大到500%后，html2pdf.js 生成的 pdf 文字会出现明显的锯齿，而 dompdf.js 生成的 pdf 文字则完全没有压力。

html2pdf.js生成的pdf文件，放大后会有锯齿

dompdf.js生成的矢量文件，不会出现模糊的情况

4.生成数量对比

html2pdf.js在30页左右，由于canvas高度限制，就会出现空白页，而 dompdf.js 轻松可以生成数百上千页的pdf。

html2pdf.js生成的pdf文件，内容过多会出现空白页

dompdf.js轻松可以生成数百上千页pdf

总结

通过上述对比可以看出，dompdf.js 在各项指标上都完胜传统的 html2pdf.js 方案。它不仅解决了 html2canvas 带来的模糊、体积大、无法选中文字等痛点，还大幅提升了生成速度和页面承载能力。

对于需要高质量、可编辑、且对性能有要求的前端 PDF 生成场景，dompdf.js 无疑是目前更优的选择。

如果你也被前端生成 PDF 的各种坑所困扰，不妨试一试这个库，希望能够帮助到你！

别忘了去 GitHub 点个 Star 支持一下作者哦！⭐⭐⭐

GitHub: github.com/lmn1919/dom…