浏览器插件形式将html转成pdf，将html转成图片

javascript: (function () {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    var script1 = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "https://hcsy.gitee.io/htest/html2canvas.js?" + Date.now();
    script1.type = 'text/javascript';
    script1.src = "https://hcsy.gitee.io/htest/jsPdf.debug.js?" + Date.now();
    script.onload = script.onreadystatechange = function () {
        if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
            script1.onload = script1.onreadystatechange = function () {
                if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
                    var result = prompt('输入样式ID');
                    var styleId = "article_content";
                    console.log("result>>",result);
                    if (result) {
                        styleId = result;
                    }
                    console.log("styleId",styleId);
                    /**
                     * 具体执行
                     */
                    html2canvas(document.getElementById(styleId), {
                        onrendered: function (canvas) {
                            var contentWidth = canvas.width;
                            var contentHeight = canvas.height;
                           
                            var pageHeight = contentWidth / 595.28 * 841.89;
          
                            var leftHeight = contentHeight;
                   
                            var position = 0;
           
                            var imgWidth = 555.28;
                            var imgHeight = 555.28 / contentWidth * contentHeight;

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

                            var pdf = new jsPDF('', 'pt', 'a4');
   
  
                            if (leftHeight < pageHeight) {
                                pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
                            } else {
                                while (leftHeight > 0) {
                                    pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight);
                                    leftHeight -= pageHeight;
                                    position -= 841.89;
                       
                                    if (leftHeight > 0) {
                                        pdf.addPage();
                                    }
                                }
                            }
                            pdf.save('hcsy' + Date.now() + '.pdf');
                        }
                    })
                }
            };
        }
    };
    head.appendChild(script);
    head.appendChild(script1);
})()

使用：

1.

2.点击保存

3.在需要的页面点击标签即可

 

 

javascript: (function () {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    var script1 = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "https://hcsy.gitee.io/htest/html2canvas.js?" + Date.now();
    script1.type = 'text/javascript';
    script1.src = "https://hcsy.gitee.io/htest/jsPdf.debug.js?" + Date.now();
    script.onload = script.onreadystatechange = function () {

        if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
            script1.onload = script1.onreadystatechange = function () {
                if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
                    var result = prompt('输入样式ID');
                    var styleId = "article_content";
                    console.log("result>>", result);
                    if (result) {
                        styleId = result;
                    }
                    console.log("styleId", styleId);
                    /**
                     * 具体执行
                     */

                    var canvas2 = document.createElement("canvas");
                    var _canvas = document.getElementById(styleId);
                    var w = parseInt(window.getComputedStyle(_canvas).width);
                    var h = parseInt(window.getComputedStyle(_canvas).height);
                    canvas2.width = w * 1;
                    canvas2.height = h * 1;
                    canvas2.style.width = w + "px";
                    canvas2.style.height = h + "px";
                  
                    var context = canvas2.getContext("2d");
                    context.scale(1, 1);
                    html2canvas(document.getElementById(styleId)).then(function (canvas) {
                        var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                        window.location.href=imgUri;
                    });
                }
            };
        }
    };
    head.appendChild(script);
    head.appendChild(script1);
})()

     // if(!this.check()){alert("所有打*号的都是必填项");return}
        //获取节点高度，后面为克隆节点设置高度。
        var height = $("#app").height();
        //克隆节点，默认为false，不复制方法属性，为true是全部复制。
        var cloneDom = $("#app").clone(true);
        //设置克隆节点的css属性，因为之前的层级为0，我们只需要比被克隆的节点层级低即可。
        cloneDom.css({
            "background-color": "#f2f3f5",
            "position": "absolute",
            "top": "0px",
            "z-index": "-1",
            "height": height
        });
        //将克隆节点动态追加到body后面。
        console.log(cloneDom);
        cloneDom.find("#button").remove();
        $("body").append(cloneDom);
        //插件生成base64img图片。
        html2canvas(cloneDom, {
            //Whether to allow cross-origin images to taint the canvas
            allowTaint: true,
            //Whether to test each image if it taints the canvas before drawing them
            taintTest: false,
            onrendered: function (canvas) {
                var contentWidth = canvas.width;
                var contentHeight = canvas.height;
                console.log(contentHeight);
                console.log(contentWidth);
                //一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth / 592.28 * 841.89;
                //未生成pdf的html页面高度
                var leftHeight = contentHeight;
                //页面偏移
                var position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                var imgWidth = 595.28;
                var imgHeight = 592.28 / contentWidth * contentHeight;
                var pageData = canvas.toDataURL('image/jpeg', 1.0);
                //注① var 
                    // pdf = new jsPDF('', 'pt', 'a4');
                var pdf = new jsPDF('', 'pt', 'a4');
                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 10, 10, imgWidth, imgHeight);
                } else {
                    while (leftHeight > 0) {
                        //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight;
                        position -= 841.89; //避免添加空白页
                        if (leftHeight > 0) {
                            //注②
                            pdf.addPage();
                        }
                    }
                }
                pdf.save('业务调查表.pdf');
            }
        });