前端关于页面导出 PDF 的问题

244 天前
 Forviler

网上找到了三个方案 各有优缺点吧;

第一个:window.print()

优点:导出速度较快、文件内容可复制; 缺点:需要手动确认、没有找到能在点击确认后能执行的回调。afterprint 确认和取消都会执行;

第二个:jsPDF + html2canvas

优点:不需要再点击确认框,可以一次性导出多个 pdf ; 缺点:导出需要等待页面转为图片,导致页面内容过多等待时间较长并且由于是图片无法复制;

第三个:pdfmake + html-to-pdfmake

优点:没有手动确认框、并且文件内容可复制、速度方面应该是比不上第一个,可能比第二个要快; 缺点:由于 pdfmake 好像不能直接传入 DOM 需要使用 html-to-pdfmake 来将标签转为 pdfmake需要的数据,但是它需要的是 字符串形式的 html 代码 ( <div>Hello Word</div> ),也是不能直接传入DOM;

各位老哥有做过类似的业务么,有没有别的更好的办法么

PS:我 所了解 相关知识比较片面,如果有出入请各位老哥不吝赐教

963 次点击
所在节点    前端开发
7 条回复
chenliangngng
244 天前
以前做过,node 做中台处理成 pdf ,处理完直接给浏览器丢文件
omi4399
244 天前
你说的这几个问题,https://github.com/diegomura/react-pdf#readme 应该都可以解决
Forviler
244 天前
@chenliangngng 想着在前端直接实现,而且目前没有中台,倒是可以考虑在后台 用 Puppeteer 来实现
Forviler
244 天前
@omi4399 感谢, 这个看起来确实能解决我的问题, 不过有没有 Vue 的 版本,这个 React 的可以留待后用
MRG0
244 天前
@Forviler #4 FranckFreiburger/vue-pdf 还真有
Forviler
244 天前
@MRG0 #5 这个是用来预览 pdf 文件的, 我用过,他这个 print 应该是也是调用 window.print()
MRG0
244 天前
@Forviler #6 不行就让后台生成吧

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1024769

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX