1. 程式人生 > >html2canvas + jsPDF 實現儲存網頁為圖片

html2canvas + jsPDF 實現儲存網頁為圖片

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