使用js将HTML页面转成pdf

生成pdf文件

    var downPdf = document.getElementById("renderPdf");
    downPdf.crossOrigin = "Anonymous";
    downPdf.onclick = function () {
        html2canvas(
        //转换id为export_content的div中的所有内容为pdf
            document.getElementById("export_content"),
            {
                dpi: 172,//导出pdf清晰度
                onrendered: function (canvas) {
                    var contentWidth = canvas.width;
                    var contentHeight = canvas.height;

                    //一页pdf显示html页面生成的canvas高度;
                    var pageHeight = contentWidth / 592.28 * 841.89;
                    //未生成pdf的html页面高度
                    var leftHeight = contentHeight;
                    //pdf页面偏移
                    var position = 0;
                    //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
                    var imgWidth = 595.28;
                    var imgHeight = 592.28 / contentWidth * contentHeight;
                    console.log(canvas);

                    var pageData = canvas.toDataURL('image/jpeg', 1.0);

                    console.log(pageData);
                    var pdf = new jsPDF('', 'pt', 'a4');

                    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                    //当内容未超过pdf一页显示的范围，无需分页
                    if (leftHeight < pageHeight) {
                        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                    } else {
                        while (leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            //避免添加空白页
                            if (leftHeight > 0) {
                                pdf.addPage();
                            }
                        }
                    }
                    pdf.save('content.pdf');
                },
                //背景设为白色（默认为黑色）
                background: "#fff"
            })
    }

图片转base64方法：

//url转base
    function changeUrl(){
        //这是网上的一张图片链接
        var url="http://localhost:8099/smartsite1_war_exploded/core/shell/images/background.png";
        alert(url);
        //这是一个异步方法，需要等图片执行完毕才会转换
        getBase64(url)
            .then(function(base64){

                console.log(base64);//处理成功打印在控制台

            },function(err){
                console.log(err);//打印异常信息
            });
    }

    //传入图片路径，返回base64
    function getBase64(img){
        function getBase64Image(img,width,height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
            var canvas = document.createElement("canvas");
            canvas.width = width ? width : img.width;
            canvas.height = height ? height : img.height;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            var dataURL = canvas.toDataURL();
            return dataURL;
        }
        var image = new Image();
        image.crossOrigin = 'Anonymous';
        image.src = img;
        var deferred=$.Deferred();
        if(img){
            image.onload =function (){
                deferred.resolve(getBase64Image(image));//将base64传给done上传处理
            }
            return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
        }
    }

注：

1.导出为pdf文件时表格线没有，可以在下载pdf前按一下Ctrl+0
2.网页上的图片在pdf中没有展示出来，可以在网页加载的时候，将图片转换成base64格式放到src=“”处，这个方法采用的是异步方法，无法实时加载，在进入网页的时候，需要加载一段时间。
代码如下：

function changeUrl1(url){
        //这是网上的一张图片链接
        // var url="http://localhost:8099/smartsite1_war_exploded/core/shell/images/background.png";
        var imgObj1 = [];
        getBase64(url)
            .then(function(base64){
                console.log(base64);//处理成功打印在控制台
                将转换完成的图片放到地址上
                imgObj1.push('<div class="imgClass"><img style="width:280px;height:300px" src="' + base64 + '"></div>');
                var imgStr1 = imgObj1.join("");
                //将图片放到id为IMG1的div处
                $("#IMG1").html(imgStr1);
            },function(err){
                console.log(err);//打印异常信息
            });
    }

3.在转换图片的时候，可能会遇到跨域问题，需要配置服务器的Nginx设置：

http {
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}