H5开发html文件转换pdf,将HTML页面转换为PDF文件并导出

目前，在大多数的管理系统中，都会有这样一个功能：根据相关的条件查询相应的数据，并生成可视化报表，然后可导出为PDF文件。本文只展现生成可视化报表之后导出PDF文件的过程，生成可视化的报表可使用Echarts，D3js等框架。

1.需要引入的文件

html2canvas.js(根据实际情况选择相应的版本)

jspdf.min.js(根据实际情况选择相应的版本)

2.实现思路

(1)在body中将需要生成PDF的HTML复制一份，切记：如果元素中含有ID，则必须重新给定

(2)将新的元素设置为position:absolute; 脱离文档流，因为处于文档流中被浏览器遮挡的部分不会生成PDF。

(3)利用html2canvas.js将新的元素生成图片

(4)利用jspdf.min.js将图片生成PDF文件并保存到本地。

3.实现代码

(1)HTML代码

/*将要生成PDF的HTML代码*/

………………………………

(2)JS代码

/*复制元素，注意ID*/

$("body").append('

…………………………………………………………

');

/*设置新元素样式*/

$("#pdf1").css({

"background-color": "#fff",

"position": "absolute",

"top": "0