React-pdf: Crash when load big pdf (100Mb)

[tigercosmos]

Crash when load big pdf (100Mb)
test in latest chrome

[wojtekmaj]

Hi,
are you trying to render all pages of it at once? If so, you might need to build some system around it to lazy-load them, perhaps.

If not - does React-PDF crash even if you don't put any <Page>s into <Document> and it crashes during loading?

[tigercosmos]

I render all pages at once. I don't think it is really a bug. It is more likely a stress testing. Maybe the project can enhance.

[wojtekmaj]

You definitely should not render all pages at once. Rendering PDF is a very costly operation. Please remember that React-PDF is only a bridge between React and PDF.js, to save you from all the hassle of implementing tons of code by yourself. But how you use it, is entirely up to you. If you decide to kill your browser with it, React-PDF will gladly do so. I really suggest you to make some kind of lazy loading. I don't think you need all the pages at once.

[robsco-git]

I've been trying my hand at a "lazy loading" solution. I wrap the Page component as PageWrapper. Each PageWrapper looks at the scroll position of the window to figure out which pdf page the browser is scrolled to. Pages outside of the sliding window of 7 rendered pages are rendered as set height and width divs to space the PDF pages correctly.

I am running into one issue; some PDF documents have pages of different sizes within the document. For example, page 20 may be a landscape page where as all of the other pages are portrait. This messes up the spacing divs I am using for my solution. Is there a way to get the height of a pdf page without rendering it first?

[wojtekmaj]

Hi @robsco-git, you definitely can!

With onLoadSuccess you're getting pdf argument which is a loaded PDF.js file.
Following Mozilla's specs, you can:

• Get number of pages from pdf.pdfInfo.numPages
• Now that you have info about how many pages you have, you can iterate through all pages, starting with 1
• Get a promise for each page: const promise = pdf.getPage(pageNumber)
• Get a page: promise.then(page => { ... })
• Now inside this then() you can get viewport:
  const scale = 1; const viewport = page.getViewport(scale); console.log(viewport.width, viewport.height);