目录
一、项目背景
二、实现过程
三、解决图片和表格分割截断以及滚动条的问题
一、项目背景
最近项目中需要实现将html页面的数据导出到pdf文件,并提供给客户端下载。在查找了一些资料之后,打算使用jspdf html2canvas的技术实现,原因在于这种方式主要由客户端完成,可以减少服务器的压力,缺点就是导出pdf的速度不是很快,因为它主要是通过截图的方式实现的。
二、实现过程
1、首先需要在页面上导入相应的js库:
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
主要是需要要用到html2canvas.min.js和jspdf.debug.js这两个js。我们已在线的方式引入,没有直接放到项目中。
2、确定要导出PDF的html节点,可以通过id或者class标识这个节点,然后通过findElementById或者findElementByClass的方式找到这个元素。
3、编写js函数,传入这个要导出的节点对象: