将html页面导出pdf

将html页面导出pdf 主要用到了 html2canvas + jsPDF 

用的js包：

<script src="js/html2canvas.js"></script>
<script src="js/jspdf.debug.js"></script>

核心代码：

<script>
    var downPdf = document.getElementById("btn");
    downPdf.onclick = function() {
        alert(1);
        html2canvas(document.body, {
            onrendered:function(canvas) {

                //返回图片dataURL，参数：图片格式和清晰度(0-1)
                 var pageData = canvas.toDataURL('image/jpeg', 1.0);
                //方向默认竖直，尺寸ponits，格式a4[595.28,841.89]
                var pdf = new jsPDF('', 'pt', 'a4');

                //addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
                pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );

                pdf.save('stone.pdf');

            },
             //背景设为白色（默认为黑色）
                    background: "#fff"  
        })
    }
</script>

效果图：

 

完整项目源码地址：

https://download.csdn.net/download/kk_bluebule/10895734

tips：不过有一个问题我还没解决，就是服务器环境是可以导出图片的，但是本地打开项目，就导不出图片，希望有知道原因的 同学可以告知

参考链接：

https://github.com/linwalker/render-html-to-pdf

---

---

---

1.6日更新：

如果是想将地图输出成pdf还需要加以下代码：

useCORS : true,
foreignObjectRendering : true,
allowTaint :false,