React-PDF Slow Performance with large PDF

Question

I am using React-PDF from npm, with the PDFDownloadLink function to download a large pdf. But the PDF is being created on my app load created a long lag time.

I have tried timers, lazy loading the component, changing the document data with a useState.

I just need to load the document data once the PDF Button is clicked and not on every page render.

have a look at sample solution (answer) otherwise post your code — EugenSunic, Nov 08 '19 at 20:10
My solution was to convert the pdf to svg. You can pass an svg into an the same way you would an image — Mondo Duke, Jun 07 '23 at 19:53

EugenSunic · Answer 1 · 2019-11-10T21:53:18.617

Try something like this (documentGenerated is a property which toggles the button which generates the PDFDownloadLink component.

If you keep rendering your pdf document multiple times you app performance will get affected and thereby decline. Make sure to toggle the PDFDonwloadLink component properly.

 {!documentGenerated ? (
            <button
              className="btn"
              onClick={generatePDF}
            >
              Generate PDF
            </button>
          ) : (
            <PDFDownloadLink
              document={<YourComponent {...state} />}
              fileName={outputFilename}
              className="btn btn-primary"
            >
              {({ blob, url, loading, error }) =>
                loading
                  ? 'Loading document...'
                  : 'Document is ready!'
              }
            </PDFDownloadLink>
          )}

score -2 · Answer 2 · answered Jun 27 '20 at 08:10

CloudPDF offers a React PDF viewer. It is basically pdf.js but then pre-rendered on the server. This gives the possibility for lazy loading of large pdf files and still keeping performance

import CloudPdfViewer from '@openbook/cloudpdf-viewer';

export default function () {
  return (
    <CloudPdfViewer documentId="346467a6-fa61-43ad-b45a-d1fdc3da0007" width="100%" height="500px" />
  );
};

Disclamer: I am working for CloudPDF and it is still a beta version.

React-PDF Slow Performance with large PDF

2 Answers2