I'm trying to render PDF file in my web application in React using PDF.js library. There is so much different information out there, even in the official git, so I'm stuck with trying to render the whole pdf document and also have the function to go to particular page. This is what I have for now:
import * as pdfWorker from 'pdfjs-dist/build/pdf.worker'
import PdfJsLib from 'pdfjs-dist';
import 'pdfjs-dist/web/pdf_viewer.css';
import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';
...
componentDidMount() {
let container = this.viewerContainer.current;
let viewer = this.viewer.current;
PdfJsLib.GlobalWorkerOptions.workerSrc = pdfWorker;
PdfJsLib.getDocument(this.props.file).then((pdf) => {
this.setState({numPages: pdf.numPages});
this.pdfLinkService = new pdfjsViewer.PDFLinkService();
this.pdfFindController = new pdfjsViewer.PDFFindController({
linkService: this.pdfLinkService,
});
this.pdfViewer = new pdfjsViewer.PDFViewer({
container,
viewer,
linkService: this.pdfLinkService,
findController: this.pdfFindController
});
this.pdfLinkService.setViewer(this.pdfViewer);
this.pdfViewer.setDocument(pdf);
this.pdfLinkService.setDocument(pdf, null);
this.pdfViewer.onePageRendered.then(() => {
pdf.getOutline().then((outline) => {
this.outline = outline || null;
if (!outline) {
return;
}
this.setState({bookmarkItems: outline});
});
});
});
}
...
onNextPageClick = () => {
if(this.state.numPages > this.state.pageNumber) {
this.setState({pageNumber: this.state.pageNumber + 1});
this.setState({pageNumberInput: this.state.pageNumber + 1});
this.pdfViewer.currentPageNumber++;
}
}
onPreviousPageClick = () => {
if(this.state.pageNumber > 1) {
this.setState({pageNumber: this.state.pageNumber - 1});
this.setState({pageNumberInput: this.state.pageNumber - 1});
this.pdfViewer.currentPageNumber--;
}
}
...
render() {
return(
...
<div className="splitToolbarButton hiddenSmallView">
<button className="toolbarButton pageUp" title="Previous Page" id="previous" tabIndex="13" data-l10n-id="previous" onClick={this.onPreviousPageClick}>
<span data-l10n-id="previous_label">Previous</span>
</button>
<div className="splitToolbarButtonSeparator" />
<button className="toolbarButton pageDown" title="Next Page" id="next" tabIndex="14" data-l10n-id="next" onClick={this.onNextPageClick}>
<span data-l10n-id="next_label">Next</span>
</button>
</div>
...
<div id="viewerContainer" ref={this.viewerContainer}>
<div id="viewer" ref={this.viewer} className="pdfViewer" />
</div>
)
}
So with all this code I was able to render my pdf document in full but I'm having problem with jumping to particular page. The strange thing is that I can't jump to page only when I'm rendering my whole document with new pdfjsViewer.PDFViewer
, but when I'm using new pdfjsViewer.PDFSinglePageViewer
for rendering just one page at the time I can normally jump to page. So does anybody knows what am I missing, this is giving me a headache for weeks now? Thanks.
I found where my problem was. I wasn't aware that div
element with id viewerContainer
has to have position: absolute
so that scrollIntoView
actually do something. The same goes for the div
element mainContainer
. Of course it make sense now but I was looking at the wrong places all the time thinking it has to do something with React or services like PDFLinkService
.