jquey html转为pdf,纯js实现将html转PDF（html2canvas+jsPdf）

项目中遇到在线生成获奖证书，并支持在线下载，刚开始直接通过html2canvas把证书所在 div 的内容转成图片，提供下载，后来看到也可以生成 PDF 文件提供下载，就研究了一下，使用html2canvas+jsPdf来把证书生成 PDF 文件，共用户下载。

1.需要引入的 js 文件：

html2canvas.js、 jsPdf.debug.js、 jquery.js

html2canvas/

jsPdf.debug：https://www.bootcdn.cn/jspdf/

jquery：https://www.bootcdn.cn/jquery/

2.实现代码：

方式一：

function downloadcertpdf(id) {

html2canvas($('.cert-content'), {

onrendered: function (canvas) {

var imgData = canvas.toDataURL();

var doc = new jsPDF('p', 'px', 'a4');

//第一列 左右边距 第二列上下边距 第三列是图片左右拉伸 第四列 图片上下拉伸

doc.addImage(imgData, 'jpg', 2, 30, 0, 0);

doc.save('cert_' + id + ".pdf");

}

});

}

方式二：(导出为横向 pdf)