导出PDF实现页头,页脚,页码,可实现水印

简单强大之处,根据前端HTML只需window.print()浏览器调用直接输出,解决了后端输出图片必须绝对链接的问题

只要你懂一点前端,就能轻松实现,对比目前后端输出PDF的功能非常复杂和维护成本极高

Demo实现功能

功能 支持
页头
页脚
页码
图片
超链接
自定义文件名
每页水印 是(可实现,demo未提供)

Demo实现效果截图

未导出前

前端window.print()导出PDF
前端window.print()导出PDF

导出预览

前端window.print()导出PDF
前端window.print()导出PDF
前端window.print()导出PDF

成品文件

由于不能上传文件,图片代替在这里插入图片描述,以下为每页输出的PDF

PS:由于没买WPS会员还给打了非会员水印,个人水印无法打印了
前端window.print()导出PDF

设计思路

1、主要页眉和页脚的开发比较难,需要在打印的时候去计算每页的高度和宽度,让其置顶和置于页脚
2、中间内容块需要根据实际样式稍作调整,每页根据页眉页脚进行间距(前提是页眉页脚高度必须固定),作者小鱼亲测100+页都不会有问题,能够正常按照要求输出PDF
3、以上版本为非完善版

总结,以上是作者网上经过综合多位技术大佬自己研究的纯前端导出PDF的代码,目前该功能在网上即使找破脑袋也未必找到完整的Demo。##### 真需要Demo的小伙伴们需要给3位数的打赏即可,后续可提供该功能技术指导,解决导出上的样式问题,非诚勿扰。联系方式邮箱在图片上

分类:

技术点:

相关文章: