jspdf + html2canvas with many pages - performance issue

JSPDF.debug version : Version 1.4.1 Built on 2018-06-06T07:49:28.721Z html2canvas : html2canvas 1.0.0-alpha.11 https://html2canvas.hertzen.com

I want to generate PDF using this code :

new Promise(function(resolve, reject) {
  try {
    resolve(Controller.getViewPdf(pagePdf));
  } catch (e) {
    reject(e);
  }
})
  .then(function(finished) {
    requirejs.s.contexts.wealth.require(
      [
        "../../../common/vendor/jspdf/jspdf.debug",
        "../../../common/vendor/html2canvas/html2canvas"
      ],
      function(jsPDF, html2canvas) {
        var pdf = new jsPDF({
          orientation: "p",
          unit: "mm",
          format: "a4",
          compression: true
        });
        var promises = $(".wea_pdf").map(function(index, element) {
          return new Promise(function(resolve, reject) {
            html2canvas(element, { scale: 2, logging: true })
              .then(function(canvas) {
                resolve(canvas.toDataURL());
              })
              .catch(function(error) {
                //voir ce qu'on fait si une page est en rerreur
                reject("erreur PDF page : " + index);
              });
          });
        });
        Promise.all(promises).then(function(dataURLs) {
          for (var ind in dataURLs) {
            pdf.addImage(
              dataURLs[ind],
              "PNG",
              0,
              0,
              210,
              297,
              undefined,
              "FAST"
            );
            pdf.addPage();
          }
          pdf.save("botoum");
          App.MainModule.Main.Controller.hideAreaPdf();
        });
      }
    );
  })
  .catch(function(error) {
    console.log(error);
  });

The PDF is exactly what I see in the navigator but it a long time to generate it and the navigator freeze more than 5 minutes. What I need : I want the pdf will be generate the faster as possible without freeze of the navigator . Is any one have an idea to optimize this code ?

[Uzlopak]

Well it is not as the title states a bug. So I will change the title to a proper one.

And secondly, well… I guess you are using this code for longer now?

I made some small performance improvements since 1.4.1 for images. But current version has some issues, which should be fixed with today planned release.

But I think that your code is heavily creating images, which have to be processed further. I would recommend to you, to directly give jsPDF a jpeg and not png by doing canvas.toDataURL("image/jpeg", 1.0)

If you supply a jpeg, jsPDF will not have to convert the png to a jpeg internally and by thus saving time in the first place.

But maybe you try the html method in the new release. Check in examples/html2pdf. It still uses html2canvas but you get pure pdf commands. If you use a font you would have to add the ttf but by this you should get a much better result.

[vijayrajsg]

HI Everyone,

i have question i’m using jspdf and htmltocanvas js files to create pdf from html pages, but when content is more new page is added but it couldn’t start from specified position here is my code

function getPDF(){

var HTML_Width = $(“.canvas_div_pdf”).width(); console.log(HTML_Width); console.log(HTML_Height); var HTML_Height = $(“.canvas_div_pdf”).height(); console.log(HTML_Height); var top_left_margin = 15; var PDF_Width = HTML_Width+(top_left_margin*2); console.log() var PDF_Height = 2000; console.log(PDF_Height); var canvas_image_width = HTML_Width; var canvas_image_height = HTML_Height;

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

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’, 15, 0,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_Heighti+(top_left_margin4),canvas_image_width,canvas_image_height); }

pdf.save(“HTML-Document.pdf”); });

};