jsPDF - reduce file size

Question

I am using jsPDF to create PDF files from canvas. Issue is, that the created files are too big.

I used to get data from canvas to PNG and after I pasted that PNG data into PDF. If I create file in this way, it has 4.0MB

I found this question about this problem: How to reduce the file size created by JSPDF?

I rewrite my code according the answer there. So now I am using JPEG instead of PNG:

var imgData = canvas.toDataURL({
    format: 'jpeg',
    quality: 0.2
});

var doc = new jsPDF('p', 'mm', "A4");
doc.addImage(imgData, 'JPEG', 10, 10, 190, 190);
doc.save('mandala.pdf');

But the files have still the 4.0MB and it does not matter what quality I set for 'imgData'.

Is there a way how to reduce the size? Or 4.0 MB is the smallest I can get?

Possible duplicate of [Pdf file size too big created using jspdf](http://stackoverflow.com/questions/37677750/pdf-file-size-too-big-created-using-jspdf) — derasd, Jan 31 '17 at 15:46

score 9 · Answer 1 · answered Mar 19 '19 at 10:59

9

This worked for me reducing size from 13.5 MB to 180 kb with a little bit compromise in quality.

function genPDF() {

  html2canvas(document.querySelector(".page"), {scale: "2"}).then(canvas => {

    this.imgFile = canvas.toDataURL("image/jpeg", 0.3);
    var doc = new jsPDF('p', 'mm', 'a4', true);
    doc.addImage(this.imgFile, "JPEG", 5, 0, 210, 297, undefined,'FAST');
    doc.save('Test.pdf');

  });

}

answered Mar 19 '19 at 10:59

Jogesh Ravani

91
1
5

1

For me only the 'FAST' option of addImage function did the trick. Thanks! – fbjorn May 06 '20 at 07:06
1

for me the key parameter was 0.3 (1 is quality max) – Chris Jan 26 '21 at 17:45

score 3 · Accepted Answer · answered Jul 19 '16 at 19:04

3

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

I tried with

canvas.toDataURL( 'image/jpeg', 1.0 );

works well, got size down to 111kb from 2.5Mb.

answered Jul 19 '16 at 19:04

fayzaan

265
3
9

2

It does not help, the size of final pdf is the the same. – matousc Sep 20 '16 at 14:46

jsPDF - reduce file size

2 Answers2