You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
While using the module, I have come across a UI where I need to show all pages of the pdf in a scrollable fashion. Currently what I do is along the lines of :
Create a hidden div, load first page, save total number of pages to state.
Map from [1...this.state.totalPages] and render <ReactPDF ... /> with relevant page number.
Here's what the map code looks like :
{(Array.from({length: this.state.totalPages},(v,k)=>k+1)).map((i)=>{console.log(i)return(<divclassName='w-100 center tc mt3'key={i}><ReactPDFwidth={screen.width*0.6}file={'http://localhost:5000/assets/dance.pdf'}pageIndex={i}loading={this.renderLoader()}/></div>);})}
This works, but sends out multiple requests (number of pages + 1) to the resource file. This leads to poor experience as the load time is too much.
Is there a cleaner solution for this ?
Thanks.
The text was updated successfully, but these errors were encountered:
Initialise component state with {pdf: null, initialised: false, totalPages: null}
Load pdf file using xhr and save it to state.
Have a component which renders only if pdf is not null and initialises by reading the pdf and setting initialised to true and totalPages. This div is inside a hidden container.
Map over 0 to totalPages if totalPages !== null and render each page using the pdf in state
Hey! @shivekkhurana! Just so you know, newest v2.0.0 (alpha) supports multiple pages within one <Document /> component - no need for weird workarounds! :) Let me know what you think!
Hi @wojtekmaj, community,
Thanks for building and maintaining this lib !
While using the module, I have come across a UI where I need to show all pages of the pdf in a scrollable fashion. Currently what I do is along the lines of :
[1...this.state.totalPages]
and render<ReactPDF ... />
with relevant page number.Here's what the map code looks like :
This works, but sends out multiple requests (number of pages + 1) to the resource file. This leads to poor experience as the load time is too much.
Is there a cleaner solution for this ?
Thanks.
The text was updated successfully, but these errors were encountered: