.com data com change creat one his cat div

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文檔