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>