先说要完成的功能:把填写好的信息转换成PDF文件,并且下载到本地,类似在智联上下载自己的简历,不过下载下来是PDF文件。
参考了网上的多篇博客,发现有两种方法,但两种方法都各有利弊。下边介绍这两种方法。
一、直接把html页面转化成图片,放到了PDF中,并下载到本地,这种方法实验了一下,导出的效果不好,图片不太清楚,好处就是比较简单,只要引入几个js即可实现:
1、需要进入的三个js:
1. <script src="./js/libs/jquery-2.0.2.js"></script>
2. <script src="./js/exportpdf/jspdf.debug.js"></script>
3. <script src="./js/exportpdf/html2canvas.js"></script>
2、
html页面:
<button id="topdf" type="button" class="btn btn-success btn-sm " style="margin-left:30px" onclick="downPDF()"><i class="icon-edit"></i>下载PDF</button>
3、
js中需要写的代码
/*
* 下载PDF
*/
function downPDF(){
//要转成PDF的标签的范围。
html2canvas($('#pdf'), {
height:3000,
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
var doc = new jsPDF('p', 'px','a3');
//第一列 左右边距 第二列上下边距 第三列是图片左右拉伸 第四列 图片上下拉伸
doc.addImage(imgData, 'PNG', -9, 0,650,1500);
doc.addPage();
doc.addImage(imgData, 'PNG', -9, -900,650,1500);
//test.pdf是下载的pdf的名称
doc.save('test.pdf');
}
});
}
4、
简单的介绍一下代码:
html2canvas 是将当前页面转换成图片;
$('#pdf') 是要转换为图片的页面范围;
height:3000,这个高度要根据页面的大小灵活调整;
var doc = new jsPDF('p', 'px','a3'); p:横向,a3:纸张大小,默认是a4;
doc.addImage(imgData, 'PNG', -9, 0,650,1500);将转换后的图片放到pdf文档上,后面四个参数可根据实际效果灵活调整;
doc.addPage(); 一页pdf显示不完整的时候,新增一页;