Блог

извините за наводнение вопросов о генерации PDF. Я работал над проектом, который преобразует страницу в многостраничный PDF (с jsPDF), используя разрывы страниц. Я (наконец-то!) получил проект, работающий в Google Chrome, но после его тестирования в Firefox я смог сгенерировать первую страницу, но вторые две страницы оказались полностью черными. Вот код:

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

Как вы можете видеть, каждая страница генерируется отдельно, и поскольку первая страница функционирует, но не вторые две, я предполагаю, что проблема связана с функциями getContext или drawImage . Как я могу изменить это или добавить что-то, что позволит этому работать должным образом в Firefox.
Еще раз спасибо.

Вместо прямого использования doc.save вы можете попытаться сохранить большой двоичный объект в формате pdf, вот измененный код

 $(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");

            });
    });
});
  

Javascript, используемый здесь, помимо jspdf, является canvas-toBlob.js и FileSaver.js