
目前前端 html 转 pdf 的主流方案是先用 html2canvas 将 html 转成图片,再将图片绘制到 pdf 上,本质是披着 pdf 外衣的图片,代表 js 库就是 html2pdf.js ,在 npm 周下载量达到了 80 万。
这是我开源的前端 html 生成 pdf 的库,用了和目前主流方案完全不同的思路,可以直接在前端生成可编辑的,非图片式的矢量 pdf
在线体验
Git 仓库地址 (欢迎 Star)
使用简单 - 前端一行代码就可以实现转 PDF 功能
纯前端实现 pdf 生成 - 无需服务器介入
生成的是矢量 PDF- PDF 的文字可以搜索选中编辑,更小的文件体积,文字不会模糊
精准的页面分割处理- 避免页面元素被切割
可生成上千页的 PDF 文件- 对比一般方案( html2canvas+jspdf ),提升了几百倍
自定义页眉页脚- 可以根据需求,自定义页眉页脚
| 指标 | 说明 |
|---|---|
| 生成速度 | 同样的内容,dompdf.js 生成速度更快,耗时基本上只有 html2pdf.js 的 1/2 。 |
| 文件体积 | dompdf.js 生成的 pdf 文件体积更小,同样的内容页数,dompdf.js 生成的 pdf 文件体积是 html2pdf.js 的 1/5 左右。 |
| 文件清晰度 | 文件放大后,html2pdf.js 生成的 pdf 文字会出现明显的锯齿,而 dompdf.js 生成的 pdf 文字则完全没有压力。 |
| 生成页数 | html2pdf.js 在 30 页左右,由于 canvas 高度限制,就会出现空白页,而 dompdf.js 轻松可以生成数百上千页的 pdf ,取决于你的浏览器内存。 |
1 THESDZ 3 月 5 日 PDF generation failed: Error: Invalid arguments passed to jsPDF.context2d.fillText |
2 MyDearFather 3 月 5 日 忒中力,喃试试 |
3 Razio 3 月 5 日 |
4 knva 3 月 5 日 卡了 |
5 chairuosen 3 月 5 日 我感觉主流的还是用 chromium 内核转 pdf 吧?这样 CSS 兼容性最好。你这个方案是重新实现了一遍 CSS 么? CSS3 样式支持怎么样? |
6 wangwen135 3 月 5 日 |
7 korvin 3 月 5 日 试试,刚好前段时间写一个网页转 pdf 的结果出来是图片就放弃了 |
8 hoythan 3 月 5 日 我觉得 PDF 核心是为了解决不同设备样式不统一的问题,编辑功能反而对“前端生成 PDF”需求来说是次要的。 |
9 gigode 3 月 16 日 https://www.pdf24tools.online/ 这个网站可以直接用 |