html несколько холст в PDF - PullRequest
Новая
       6

html несколько холст в PDF

0 голосов
/ 02 апреля 2020

У меня есть страница с несколькими холстами, и я использую jspdf и html2canvas 

<canvas id="chart-area0"></canvas>
<canvas id="chart-area1"></canvas>

Вся страница завернута в 

<div class="canvas_div_pdf">all content... <button type="button" class="downloadbtn">Download PDF</button></div>

Затем я запускаю 

    $(".downloadbtn").on("click", function() {
        getPDF();
    });

    function getPDF(){

        var HTML_Width = $(".canvas_div_pdf").width();
        var HTML_Height = $(".canvas_div_pdf").height();
        var top_left_margin = 15;
        var PDF_Width = HTML_Width+(top_left_margin*2);
        var PDF_Height = (PDF_Width*1.5)+(top_left_margin*2);
        var canvas_image_width = HTML_Width;
        var canvas_image_height = HTML_Height;

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


        html2canvas($(".canvas_div_pdf")[0],{allowTaint:true}).then(function(canvas) {
            canvas.getContext('2d');

            console.log(canvas.height+"  "+canvas.width);

            var imgData = canvas.toDataURL("image/jpeg", 1.0);
            var 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 (var 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("my.pdf");
        });
    };

Мне нужно скачать всю страницу, со всеми холстами и элементами div. Но он генерирует только первую часть страницы.

...