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);
})()