HOW TO CREATE A PDF WITH MULTIPLE PAGES OF A SINGLE LARGE PICTURE

0

I need to take a pdf of a graph that is too large horizontally, and I must do it in several pages of the same pdf using jsPDF and html2canvas

I tried, but it does not work:

<script>
    $(document).ready(function() {

        //Generate PDF
        function generatePDF() {
            window.scrollTo(0, 0);

            var pdf = new jsPDF('p', 'pt', [580, 630]);

            html2canvas($(".page1")[0], {
                onrendered: function(canvas) {
                    document.body.appendChild(canvas);
                    var ctx = canvas.getContext('2d');
                    //ctx.scale(2, 2);
                    var imgData = canvas.toDataURL("image/png", 1.0);
                    var width = canvas.width;
                    var height = canvas.clientHeight;
                    pdf.addImage(imgData, 'PNG', 20, 20, (width - 10), (height));

                }
            });
            html2canvas($(".page2")[0], {
                allowTaint: true,
                onrendered: function(canvas) {
                    var ctx = canvas.getContext('2d');
                    ctx.scale(2, 2);
                    var imgData = canvas.toDataURL("image/png", 1.0);
                    var htmlH = $(".page2").height() + 100;
                    var width = canvas.width;
                    var height = canvas.clientHeight;
                    pdf.addPage(580, htmlH);
                    pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height));
                }
            });
            html2canvas($(".page3")[0], {
                allowTaint: true,
                onrendered: function(canvas) {
                    var ctx = canvas.getContext('2d');
                    ctx.scale(2, 2);
                    var imgData = canvas.toDataURL("image/png", 1.0);
                    var htmlH = $(".page2").height() + 100;
                    var width = canvas.width;
                    var height = canvas.clientHeight;
                    pdf.addPage(580, htmlH);
                    pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height));
                }
            });
            setTimeout(function() {

                //jsPDF code to save file
                pdf.save('sample.pdf');

                //Generate BLOB object
                var blob = pdf.output("blob");

                //Getting URL of blob object
                var blobURL = URL.createObjectURL(blob);

                //Showing PDF generated in iFrame element
                var iframe = document.getElementById('sample-pdf');
                iframe.src = blobURL;

                //Setting download link
                var downloadLink = document.getElementById('pdf-download-link');
                downloadLink.href = "blobURL";
            },2000);


        };
        generatePDF();

    });
    </script>
    
asked by valeria 24.04.2018 в 16:53
source

0 answers