html页面转成PDF，PDF下载

先说要完成的功能：把填写好的信息转换成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显示不完整的时候，新增一页；