2016-06-23

Javascript-HTML to PDF

Background

某个作死的导出PDF的业务需求，要求兼容IE和Chrome

Requirement

jspdf.js¹
- V1.0.272
- 此版本支持 IE10 IE10+ Chrome
- 最新版本可能出现IE10兼容问题

Usage

一开始以为只是简单调用一套代码就行，后来发现根据不同浏览器还需要不同的适配

Chrome

	var pdf = new jsPDF('p', 'mm');
	pdf.addHTML(document.body, function() {
	    pdf.output('datauri');
	});

IE10 IE11

    var pdf = new jsPDF('p', 'mm');
    pdf.addHTML(document.body, function() {
        pdf.save('output.pdf');
    });

IE9?

暂时没有找到IE9可以进行导出PDF的方法，考虑可以使用截图图片进行替代

截图需要另外一个库：html2canvas.js²，注意必须使用版本为V0.4.1才能做到IE9兼容

试过几种自动下载图片的办法，最终发现使用<a>然后JS点击完全没有效果，也有可能和特殊的运行环境相关，最终还是决定显示一张图然后手动下载

	html2canvas($("body"), {
	  onrendered: function(canvas) {
	     var url = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
	     var img = document.createElement('img');
	     img.src = url;
	     img.download = 'output.jpg';
	     $("body").append(img);
	 }
	});

IE8????

特么这年头还有人用IE8的啊？

在IE8总是出现缺少部分方法的兼容错误……应该也可以使用特定的pollyfill来解决……

References

JSPDF ↩
html2canvas ↩