jsPDF

jsPDF总结

1 jsPDF的学习

1.1 学习的内容

jsPDF 是一个基于 HTML5 的客户端解决方案，用于生成各种用途的 PDF 文档。使用方法很简单，只要引入 jsPDF 库，然后调用内置的方法就可以了。

浏览器兼容性：

E 10（未测试）, Firefox 3+（未测试）, Safari 3+（未测试）, Opera（未测试）,

Chrome  60.0.3112.101（正式版本）（32 位）（已测试），360安全浏览器7（已测试），IE9（已测试，未能使用）

安装：

主要需要依赖三个库：

jsPDF.debug.js

html2canvas.js(调用jsPDF的addHTML（）接口必须的js库)

jquery.js

<scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

因为jsPDF不支持中文，所以正常是把html页面先转成图片，再将图片转成PDF。有两种方式可以实现，第一种jsPDF提供了一个接口，可以调用html2canvas。第二种是先用html2canvas转成图片，再用jsPDF转成pdf。下面是具体实现方式：

第一种：

function toPDF() {

var pdf = new jsPDF('p', 'pt', 'a4');

pdf.internal.scaleFactor = 1;

var options = {

pagesplit: true

};

var printhtml = $("#hhh").get(0);

pdf.addHTML(printhtml, options, function() {

pdf.save('web1111.pdf');

});

}

第二种：

 

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('content.pdf');

}

})

第二种方式实现效果比较好。

1.2 成果

1.3 遇到的问题和解决方法

1、经过fis编译后，无法使用该插件。

原因：未知

解决方法：暂无