I'm trying to generate a PDF from a React component. In my scenario it is a MaterialUI table but it could be anything. The problem I'm facing is not with generating the PDF but the produced PDF itself which is too heavy and unusable.

I have a function like this:

createPdf = async (html: HTMLElement, pdfName: string = "report.pdf") => {
    const doc = new jsPDF("p", "pt", "a4", true);

    await doc.html(html, {
      margin: 10,
      html2canvas: {
        scale: 0.65
      },
    });
    doc.save(pdfName);
    return doc.output("blob");
  };

I insert an HTMLElement which is the DOM content for my React component and it generates the PDF correctly. However this pdf is very big and extremely slow to load. Mind that I have an i9 with 32GB of RAM and it easily takes 15secs to render one page of the pdf...

Initially it was generating a 150MB pdf but then I set compressed to true and it's now around 600KB. That changes the size but it didn't improve the performance somehow. I've tried multiple computers and browsers and I've tinkered with the options for html2canvas and nothing seems to fix this.

Does anyone have any insight on this?

Thanks in advance.