笔记簿 - ᴄᴏᴅɪɴɢ ɪs ᴀʀᴛ

html页面通过js生成pdf文档 - JavaScript将html转为pdf

jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档。

最近需求要将征信的结果生成pdf,一开始采用的itext,也是将document对象怼过去,后来考虑到服务器减压问题,就采用jsPDF.

首先引入这俩文件
```JavaScript
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src = "https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js" ></script>
```
```JavaScript
function downloadPDF(target, title) {
	target.style.background = "#FFFFFF";
	html2canvas(target, {
		onrendered : function(canvas) {
			var contentWidth = canvas.width;
			var contentHeight = canvas.height;

//一页pdf显示html页面生成的canvas高度;
                        var pageHeight = contentWidth / 592.28 * 841.89;        
    			 //未生成pdf的html页面高度
                        var leftHeight = contentHeight;        
    			 //页面偏移
                        var position = 0;        
    			 //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                        var imgWidth = 595.28;        
    			var imgHeight = 592.28/contentWidth * contentHeight;   
    			     
    			var pageData = canvas.toDataURL('image/jpeg', 1.0);        
    			var pdf = new jsPDF('', 'pt', 'a4');        
    
    			//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                        //当内容未超过pdf一页显示的范围，无需分页
                        if (leftHeight < pageHeight) {
                            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
                        } else {            
    			        while(leftHeight > 0) {
                                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                                leftHeight -= pageHeight;
                                position -= 841.89;                
    			        //避免添加空白页
                                    if(leftHeight > 0) {
                                      pdf.addPage();
                                    }
                            }
                        }
			pdf.save(title + ".pdf");
		}
	})
}
```
其中target是目标节点的JavaScript对象,title是生成文件的名字
```JavaScript
$(function() {
		$(".download").click(function() {
			$("html,body").animate({scrollTop:0}, 500);
			setTimeout(function(){
				try{
					var title = 
					$("#userBasic").find("td:eq(0)").html() + "_" +
					$("#userBasic").find("td:eq(3)").html() + "_" +
					$("h1").html();
					downloadPDF($(".content")[0],title);
				}catch(err){
					layer.msg("下载失败！",{icon: 2});
				}
				},500);

});
	});
```
但是存在一个问题,就是只有在页面回到顶部的时候,生成的pdf文件才不会有黑块出来,所以只好先拉回顶部,在生成文件.