一个所有 AI 都无法提供的前端 PDF 生成方案

[lmq1919]

目前的前端生成 pdf 方案

方案	缺点
html2canvas + jspdf	图片式的 pdf,文件体积大，无法选中编辑文字，模糊
jspdf / pdfmake 等	学习成本高，使用复杂

我的方案

1. 修改了 html2canvas 的 renderCanvas 方法，将绘制 canvas 的 api 换成了 jspdf 的 api 。
2. 开发者不再需要手动计算 pdf 的布局，就可以直接将 html 转化成可编辑的矢量 pdf 。
3. 使用方法和 html2canvas 基本一样，上手难度非常低

1. 在线体验

https://dompdfjs.lisky.com.cn

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

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

[weixind]

这种实现方案边缘 case 会比较多吧，牛的牛的，已 star 。

报个 bug ，demo 里面 table 直接生成会有偏差。

[pike0002]

先关注一下，有机会在我们的插件中尝试一下 https://www.pixelstech.net/application/pagesaver/

[lmq1919]

@weixind 感谢大佬！！应该是和屏幕分辨率有关系，我晚上回去把宽度写死应该就可以了

[ssb4]

试了下 demo ，没一个正常的...

Microsoft Edge
版本 138.0.3351.109 (正式版本) (64 位)

[ssb4]

https://filebin.net/5ba8hxjk0vr7w9wb

[lmq1919]

@pike0002 很棒的产品

[lmq1919]

@ssb4 感谢反馈

[guansixu]

跨页问题有好的处理方法吗？之前用 html2canvas + jspdf ，跨页怎么不好处理

[lmq1919]

@guansixu 目前在开发分页的功能

[ersic]

官方提供的例子，生成都不正常。win + edge

[lmq1919]

@ersic 感谢大佬反馈

[kokerkov]

没看懂。你这个跟 wkhtmltopdf 有啥区别？

[lmq1919]

@kokerkov wkhtmltopdf 需要服务器，我这个是纯前端浏览器运行的

[xhawk]

我用 pdfkit 也挺简单的

[lmq1919]

@xhawk 如何要绘制图表就复杂了，所以会有 jsPDF-AutoTable 这种库，还只能绘制简单的表格

[imaple]

@ssb4 #5 基本和你一样，win+edge

[lmq1919]

@imaple 很有可能是 edge 用了 IE 内核，可以用 chrome 试一下

[Felix96]

官网例子提一个上面没说到过的 bug 吧，macOS + Chrome 环境 MacBook 窗口小的情况下，滚动一段距离，点击 Generate PDF 会截断。同为前端，非常希望 OP 能做成，先收藏了，顺便分享我的：纯前端实现列印就 jsPDF ， 因为中文字体需要下载几十兆的资源，解决方法是将各种塞 indexedDB 里。如果超级复杂且可靠能高保真， @page + size 调好交给 puppeteer ，100% 没问题，多复杂都能实现，可以复制，当然 puppeteer 优化的压力就给后端了。

[imaple]

@lmq1919 #17 换了 chrome 一切正常, 效果很好。

[lmq1919]

@Felix96 感谢大佬的支持和分享

[lmq1919]

@lmq1919 ヽ(￣▽￣)ﾉ

[lmq1919]

@imaple ヾ(◍°∇°◍)ﾉﾞ

[pike0002]

@guansixu 可能这个能给你一点灵感 https://www.pixelstech.net/article/1741242294-create-multiple-page-pdf-with-top-and-bottom-margins-using-jspdf-addimage?lang=chinese