一.依赖插件:
1.jquery.js
2.html2canvas-0.4.1.js(注意版本号,不同的版本配置大不相同)
3.jspdf.js (搜索 jsPDF可得)
二.代码:
html2canvas($('#testOptions')[0],{ // 被转换的HTML
onrendered: function(canvas){
// 展示一下获得的canvas
$('#canvas').html(canvas);
// 将canvas转化为PDF
var imgData = canvas.toDataURL('image/jpeg');
var img = new Image();
img.src = imgData;
$('.output-image').attr('src',imgData);
img.onload = function () {
//此处需要注意,pdf横置和竖置两个属性,需要根据宽高的比例来调整,不然会出现显示不完全的问题
if (this.width > this.height) {
var doc = new jsPDF('l', 'mm', [this.width * 0.225, this.height * 0.225]);
} else {
var doc = new jsPDF('p', 'mm', [this.width * 0.225, this.height * 0.225]);
}
doc.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
//根据下载保存成不同的文件名
doc.save('pdf_' + new Date().getTime() + '.pdf');
// 得到base64位的pdf文件。
pdf = doc.output('datauristring');
};
},
backgroundColor: '#ffffff' // pdf 文件背景色为白色
});
三.总体思想:
1.将HTML转化为canvas,再将canvas转化为pdf