javascript - plugin - jspdf autotable

Generando pdfs con problemas de compatibilidad con jsPDF en Firefox?

Question

perdón por la inundación de preguntas de generación de PDF. He estado trabajando en un proyecto que convierte una página en un PDF de varias páginas (con jsPDF) usando los saltos de página. Yo (¡por fin!) Hice que el proyecto funcionara en Google Chrome, pero luego de probarlo en Firefox, pude generar la primera página, pero las dos páginas restantes aparecieron completamente en negro. Aquí está el código:

$(document).ready(function() 
{
    $("#runpdf").click(function(event) 
    {
        var partsec = $("main_body page1");
        html2canvas(document.body,
        {
            logging: true,
            profile: true,
            allowTaint: true,
            letterRendering: true,
            onrendered: function(canvas) 
            {
                var sectionHeight = $("section").height();
                var sectionWidth = $("#width").width();

                var doc = new jsPDF();
                var image = new Image();
                var imageData = canvas.toDataURL("image/jpeg");
                image = Canvas2Image.convertToJPEG(canvas);
                doc.addImage(imageData,''JPEG'', -115, 5, 440, 875);


                doc.addPage();

                var canvas1 = document.createElement(''canvas'');
                canvas1.setAttribute(''height'', sectionHeight);
                canvas1.setAttribute(''width'', sectionWidth);
                var ctx = canvas1.getContext("2d");
                ctx.drawImage(image, 0, 1025, sectionWidth, 1250, 0, 0, 1800, 950);
                var image2 = new Image();
                image2 = Canvas2Image.convertToJPEG(canvas1);
                image2Data = image2.src;
                doc.addImage(image2Data, ''JPEG'', -105, 5, 440, 325);


                doc.addPage();                  
                var canvas2 = document.createElement(''canvas'');
                canvas2.setAttribute(''height'', sectionHeight);
                canvas2.setAttribute(''width'', sectionWidth);
                var ctx1 = canvas2.getContext("2d");
                ctx1.drawImage(image, 0, 2050, sectionWidth, 1250, 0, 0, 1800, 1000);
                var image3 = new Image();
                image3 = Canvas2Image.convertToJPEG(canvas2);
                image2Data = image3.src;
                doc.addImage(image2Data, ''JPEG'', -105, 5, 440, 325);




                doc.save(''test.pdf'');
            }
        });
    });
});         

Como puede ver, cada página se genera por separado, y como la primera página está funcionando, pero no las dos segundas, asumo que el problema está en las funciones getContext o drawImage. ¿Cómo podría cambiar esto o agregar algo que permita que esto funcione correctamente en Firefox? Gracias de nuevo.

Answer 1

En lugar de usar directamente el doc.save, puede intentar guardar el blob en el pdf, aquí está el código modificado

$(document).ready(function() 
{
    $("#runpdf").click(function(event) 
    {
        var partsec = $("main_body page1");
        html2canvas(document.body,
        {
            logging: true,
            profile: true,
            allowTaint: true,
            letterRendering: true,
            onrendered: function(canvas) 
            {
                var sectionHeight = $("section").height();
                var sectionWidth = $("#width").width();

                var doc = new jsPDF();
                var image = new Image();
                var imageData = canvas.toDataURL("image/jpeg");
                image = Canvas2Image.convertToJPEG(canvas);
                doc.addImage(imageData,''JPEG'', -115, 5, 440, 875);


                doc.addPage();

                var canvas1 = document.createElement(''canvas'');
                canvas1.setAttribute(''height'', sectionHeight);
                canvas1.setAttribute(''width'', sectionWidth);
                var ctx = canvas1.getContext("2d");
                ctx.drawImage(image, 0, 1025, sectionWidth, 1250, 0, 0, 1800, 950);
                var image2 = new Image();
                image2 = Canvas2Image.convertToJPEG(canvas1);
                image2Data = image2.src;
                doc.addImage(image2Data, ''JPEG'', -105, 5, 440, 325);


                doc.addPage();                  
                var canvas2 = document.createElement(''canvas'');
                canvas2.setAttribute(''height'', sectionHeight);
                canvas2.setAttribute(''width'', sectionWidth);
                var ctx1 = canvas2.getContext("2d");
                ctx1.drawImage(image, 0, 2050, sectionWidth, 1250, 0, 0, 1800, 1000);
                var image3 = new Image();
                image3 = Canvas2Image.convertToJPEG(canvas2);
                image2Data = image3.src;
                doc.addImage(image2Data, ''JPEG'', -105, 5, 440, 325);

                var data = doc.output();
                var buffer = new ArrayBuffer(data.length);
                var array = new Uint8Array(buffer);
                for (var i = 0; i < data.length; i++) {
                  array[i] = data.charCodeAt(i);
                }

                var blob = new Blob(
                  [array],
                  {type: ''application/pdf'', encoding: ''raw''}
                );
                saveAs(blob, "test.pdf");

            });
    });
});

Los javascript que se usan aquí aparte de jspdf son canvas-toBlob.js y FileSaver.js