React-pdf: View first page before entire document is loaded - support range header
Before you start - checklist
- [x] I have read documentation in README
- [x] I have checked sample and test suites to see real life basic implementation
- [X] I have checked if this question is not already asked
What are you trying to achieve? Please describe.
In our project (issue, demo), I'd like to load only the pages that I'm viewing, and render the first page before the entire document is loaded.
From my understanding, PDF.js supports Range headers and the react-pdf API describes that it's possible to include a PDFDataRangeTransport object in the file property. I fail to see what to do to actually send these Range headers, though!
Describe solutions you've tried
- [x] Check if the source PDF is optimized for the web
- [x] Check if the hosting service supports HTTP Range headers
Environment
- Chrome 75
- MacOS 10.14.5
- React-PDF 4.0.5
- React-scripts 3.0.1
- React 16.8.6
joepio
All 3 comments
Hi,
Yeah, PDFDataRangeTransport should be supported, as React-PDF just passes it to pdf.js, does not much else with it. I found this topic on PDFDataRangeTransport objects creation.
It seems like the easiest way to get the behavior you want is to simply pass an URL as file prop. This should work just fine: https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#range
wojtekmaj
on 4 Jul 2019
Thanks for the reply (and the awesome library, for that matter) @wojtekmaj!
Unfortunately, I do pass the URL as a file prop (source, demo), but it only renders after the entire document has been fetched.
Also, the request for the PDF file does not appear have any range headers.
Perhaps this conditional is never actually true if I pass a string?
// File is PDFDataRangeTransport
if (file instanceof PDFDataRangeTransport) {
return { range: file };
}
According to PDF.js developers, PDF.js does not support gzip encoding of range responses, so it needs to be set explicitly. According to the PDF.js docs, you can set custom headers. Since Document passes the options object to PDFjs.getDocument, this should work:
<Document
options={{
httpHeaders: {
'Accept-Encoding': 'Identity',
}
}}
file={"https://example.com/some.pdf"}
>
However, it does not, so I'm still investigating what is going on. It seems likely that it's a pdf.js issue.
joepio
on 5 Aug 2019
Related issues
webguru103
·
3Comments
varand-pez
·
3Comments
nnnikolay
·
4Comments
SandMoshi
·
3Comments
saadq
·
3Comments
Most helpful comment
According to PDF.js developers, PDF.js does not support
gzipencoding of range responses, so it needs to be set explicitly. According to the PDF.js docs, you can set custom headers. Since Document passes theoptionsobject toPDFjs.getDocument, this should work:However, it does not, so I'm still investigating what is going on. It seems likely that it's a pdf.js issue.