在Firefox中生成带有jsPDF兼容性问题的pdf？ [英] Generating pdfs with jsPDF compatibility issues in Firefox?

问题描述

对于PDF生成问题的淹没，抱歉。我一直在一个项目，使用pagebreaks将页面转换为多页pdf（使用jsPDF）。我（最后！）得到的项目工作在谷歌Chrome，但是要在Firefox中测试，我能够生成第一页，但第二页显示完全黑色。这是代码：

sorry for the inundation of PDF generation questions. I have been working on a project that converts a page into a multipage pdf(with jsPDF) using pagebreaks. I (finally!) got the project working in google Chrome but upon going to test it in Firefox, I was able to generate the first page, but the second two pages showed up entirely black. Here is the code:

$(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中正常工作。
再次感谢。

As you can see, each page is generated separately, and since the first page is functioning, but not the second two, I am assuming that the problem is with the getContext, or drawImage functions. How could I change this or add something that will enable this to work properly in Firefox. Thanks again.

推荐答案

而不是直接使用doc.save，可以尝试将blob保存到pdf，以下是修改后的代码

Instead of directly using the doc.save, you can try to save the blob into the pdf, here is the modified code

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

            });
    });
});

除了jspdf之外，这里使用的javascript是canvas-toBlob.js和FileSaver.js

The javascript being used here apart from jspdf are canvas-toBlob.js and FileSaver.js

这篇关于在Firefox中生成带有jsPDF兼容性问题的pdf？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！