1.资源
<script type="text/javascript" src="./js/canvg2.js"></script>
<script type="text/javascript" src="./js/html2canvas-0.4.1.js"></script>
<script type="text/javascript" src="./js/jspdf.min.js"></script>
<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
2.主要代码
function changeImg(target) {
$(‘body‘).find(‘canvas‘).each(function (i, v) {
var imgSrc = v.toDataURL("image/png");
$(v).prop(‘outerHTML‘, ‘<img src="‘ + imgSrc + ‘" /> ‘);
});
var targetDom = $(target);
var copyDom = targetDom.clone();
copyDom.width(targetDom.width() + "px");
copyDom.height(targetDom.height() + "px");
$(‘body‘).append(copyDom);
svg2canvas(copyDom);
html2canvas(copyDom, {
onrendered: function (canvas) {
var imgData = canvas.toDataURL(‘image/jpeg‘);
var img = new Image();
img.src = imgData;
img.onload = function () {
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(getQueryString(‘name‘, decodeURIComponent(location.href)) + ‘.pdf‘);
};
copyDom.remove();
},
background: "#fff",
allowTaint: true
});
}
function svg2canvas(targetElem) {
???var svgElem = targetElem.find(‘svg‘);
???svgElem.each(function (index, node) {
???????var parentNode = node.parentNode;
???????var tempNode = document.createElement(‘div‘);
???????tempNode.appendChild(node);
???????var svg = tempNode.innerHTML;
???????var canvas = document.createElement(‘canvas‘);
???????canvg(canvas, svg);
???????parentNode.appendChild(canvas);
???});
}
3.参考资源
Javascript 将html转成pdf,下载,支持多页哦（html2canvas 和 jsPDF）
纯js实现html转pdf
指定html转pdf文档
原文地址：https://www.cnblogs.com/justSmile2/p/9816658.html