html2canvas + jsPDF 實現儲存網頁為圖片
阿新 • • 發佈:2018-12-09
<script type="text/javascript" src="js/rgbcolor.min.js"></script> <script type="text/javascript" src="js/canvg.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"> function svg2canvas(targetElem) { var svgElem = targetElem.find('svg'); svgElem.each(function (index, node) { var parentNode = node.parentNode; var canvas = document.createElement('canvas'); var svg = new XMLSerializer().serializeToString(node); canvg(canvas, svg); parentNode.removeChild(node); parentNode.appendChild(canvas); }); } //獲得螢幕的DPI function js_getDPI() { var arrDPI = new Array(); if (window.screen.deviceXDPI != undefined) { arrDPI[0] = window.screen.deviceXDPI; arrDPI[1] = window.screen.deviceYDPI; } else { var tmpNode = document.createElement("DIV"); tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden"; document.body.appendChild(tmpNode); arrDPI[0] = parseInt(tmpNode.offsetWidth); arrDPI[1] = parseInt(tmpNode.offsetHeight); tmpNode.parentNode.removeChild(tmpNode); } return arrDPI; } function pdfexport(){ var targetDom = $('body'); svg2canvas(targetDom);//將svg轉換為canvas //設定時間保證頁面html的svg都轉化為canvas setTimeout(function () { html2canvas(targetDom, { onrendered: function (canvas) { var imgData = canvas.toDataURL('image/jpeg'); var arrDPI = js_getDPI();//獲取顯示器DPI var dpiX = 96; var dpiY = 96; if(arrDPI.length>0){ dpiX = arrDPI[0]; dpiY = arrDPI[1]; } var img = new Image(); img.src = imgData; img.onload = function () { //l:橫向, p:縱向;單位: in:英寸,mm毫米;畫布大小:a3,a4,leter,[](當內容為陣列時,為自定義大小) if (this.width > this.height) { var doc = new jsPDF('l', 'in', [(this.width+10)/dpiX,(this.height+10)/dpiY]); } else { var doc = new jsPDF('p', 'in', [(this.width+10)/dpiX,(this.height+10)/dpiY]); } doc.addImage(imgData, 'png', 7/dpiX,5/dpiY); //根據下載儲存成不同的檔名 doc.save('2018-09-13.pdf'); }; }, taintTest:false, allowTaint:true }); //重新整理頁面,保證匯出後頁面可以正確展示 setTimeout(function () { location.reload(); }, 1000); }, 500); } </script>