前端html页面打印PDF

2025-10-26 12:50:09

1、首先下载一个jspdf.min.js  

链接  https://github.com/MrRio/jsPDF

页面引用后就可以编写基本的内容了 <script src="jspdf.min.js">

前端html页面打印PDF

2、然后你的页面可能会有table 把jspdf.plugin.autotable.js 下载下来

链接  https://github.com/simonbengtsson/jsPDF-AutoTable

autotable的用法请参照链接  http://www.hangge.com/blog/cache/detail_2208.html

前端html页面打印PDF

3、这个时候你会发现不支持中文 

首先jspdf中文解决办法

参考链接  https://blog.csdn.net/kunga0814/article/details/81869183

前端html页面打印PDF

4、接下来是table中文解决办法

由于antotable 不支持中文 他的源码里设置的默认字体是英文 

我们去源码中改成中文

然后设置table中的字体

参考链接  http://www.hangge.com/blog/cache/detail_2213.html

前端html页面打印PDF

5、接下来 说下一个问题  插入图片

首先引用一个图片转base64的方法

然后页面中 就可以使用jspdf的图片基础用法doc.addImage()

需要注意一点的就是,这个图片一定要在你的页面中用到了,也就是说你页面中有这个图片你才能在jpdf中使用。如果这个图片在你的页面中没有用到你可以把图片在页面中添加上,然后设置样式为display:none

前端html页面打印PDF

前端html页面打印PDF

前端html页面打印PDF

6、换行问题

doc.text(doc.splitTextToSize('内容', 530), leftmargin, 500);

行高问题(lineHeight)

doc.setLineHeightFactor(2)

前端html页面打印PDF

7、页眉页脚的添加

如果你是使用doc.addPage()增加的页面,那么你需要手动添加代码

如果你是表格自动分页 那么你需要修改一下源码

前端html页面打印PDF

前端html页面打印PDF

8、文字被截断的问题

我用的是一个很笨的方法(没想到更好的解决办法)  就是把文字内容用autotable 显示出来

因为他不会被截断 他会自己跳到下一页 

前端html页面打印PDF

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢