如何停止在两个页面html2canvas和jspdf中拆分元素?

时间:2019-08-05 10:24:12

标签: vue.js jspdf html2canvas

enter image description here

在这里,一个部分分为两页,我需要在同一页面上保留一个部分。

我正在使用jspdf和html2canvas进行pdf生成,这是代码

getPDF() {
            let HTML_Width = $("#target").width();
            let HTML_Height = $("#target").height();
            let top_left_margin = 15;
            let PDF_Width = HTML_Width + (top_left_margin * 2);
            let PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
            let canvas_image_width = HTML_Width;
            let canvas_image_height = HTML_Height;

            let totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;


            html2canvas($("#target")[0], {allowTaint: true}).then(function (canvas) {
                canvas.getContext('2d');
                console.log(canvas.height + "  " + canvas.width);
                let imgData = canvas.toDataURL("image/jpeg", 1.0);
                let pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
                pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);

                for (let i = 1; i <= totalPDFPages; i++) {
                    pdf.addPage(PDF_Width, PDF_Height);
                    pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
                }
                pdf.save("HTML-Document.pdf");
            });
        }

0 个答案:

没有答案