jspdf + html2canvas with many pages - performance issue

[quentinsierocki]

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.

[quentinsierocki]

I change the jpeg.
I try to improve my version of jspdf to 1.5.2 to access to the html method but I have "undefined" in the jsPDF variable when I load it with require.
I did not see in the documentation the possibility to load this version with require but is it possible ?

I dont use this code from a long time so I think I am going to follow your advise and update to the last version as soon as possible.

[Uzlopak]

Yes the issue is known, see #2176
In the next release, which should be today or the coming days, you should be able to use the dist.

[quentinsierocki]

I improved the version of JSPDF to 1.5.2 and html2canvas to 1.0.0-alpha.12. I use the html method.
But it is always very slow and the rendering is vert far compared with the previous method...
I am waiting my boss to send you a zip with all the information. It will be easier for you to make a good estimation if we could have good performance or not with this type of complex PDF.
Thx a lot for your fast reply.
During this time I will jspdf with node.

[Uzlopak]

v 1.5.3 got released

[quentinsierocki]

I pass to v 1.5.3 but I have kink of problems with require to load the jspdfdebug file.
Here is my code with all the dependancies in the same file :

require(["./filesaver.js","./html2canvas2.js","./jspdf.debug.js"],function(coco,html2canvas,jsPDF2){
			window.html2canvas=html2canvas;
			console.log(jsPDF2);
        });

But jsPDF2 is always undefined.
Do you have an idea why it don't work?

[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");
});

};