How to use PDF.js in React Next.js Application
React with Next.js is becoming more popular nowadays. There are some awesome features Next.js is providing like SSG, SSR, directory-based routing, and many more. Most of the applications are using Next.js rapidly and showing PDF documents in the web applications is a very common feature as well.
What is my objective here?
- Show PDF documents in a web application (React Component) by leveraging PDF.js using canvas.
- Show PDF document by using PDF.js express viewer.
Show PDF document in a web application (React Component) by leveraging PDF.js using canvas
I am considering you have already set up React with Next.js application, and on top of it, you are going to add PDF.js to show your PDF document. If you have not set up any React with Next.js application so far, please use the below link to set up the project.
Once you set up the React with Next.js project, you need to install the pdf-dist npm package.
Then create a React function component and import the library -
import * as PDFJS from 'pdfjs-dist/build/pdf';
PDFJS.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJS.version}/pdf.worker.min.js`;
Using PDF.js you can either pass local PDF file URL (Access from assets) or web URL or base64 data. PDF.js can accept any of one.
- get the PDF file URL
- Convert it to base64 data
- Create a canvas with each page data
- Render it to HTML
Demo Time:
Show PDF document by using PDF.js express viewer
You can also use PDF.js express viewer to show your PDF. For that as well you need to install few npm packages.
- npm install @pdftron/pdfjs-express
In my application, it looks like as below -
{
"name": "pdf-demo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 4500",
"build": "next build && next export",
"start": "next start -p 4500",
"export": "next export",
"postinstall": "node tools/copy-webviewer-files.js",
"serve": "http-server -a localhost -p 4500 ./out"
},
"dependencies": {
"@pdftron/pdfjs-express": "^7.3.2",
"next": "^10.1.3",
"pdfjs-dist": "^2.7.570",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"@types/node": "14.14.37",
"@types/react": "17.0.3",
"btoa": "^1.2.1",
"download": "^8.0.0",
"fs-extra": "^10.0.0",
"html-webpack-plugin": "^5.3.1",
"node-sass": "^5.0.0",
"typescript": "4.2.3",
"webpack": "^5.31.0",
"webpack-dev-server": "^3.11.2"
}
}
Once you install the above-required npm packages, you need to copy static assets, for that, if you run npm install once again, the post-install command will copy all the required files and place them in the public folder.
Lastly you need to import Webviewer to load the PDF file in express viewer.
const showPDFInViewer = async (url: any) => {
const WebViewer = (await (import('@pdftron/pdfjs-express'))).default;
WebViewer(
{
path: '/webviewer/lib',
initialDoc: url
}, pageRenderRef.current).then((instance) => {
const { docViewer, Annotations } = instance;
var FitMode = instance.FitMode;
// remove all header
instance.setHeaderItems((header) => {
header.update([]);
});
var iframeWindow = instance.iframeWindow;
const headerItems = iframeWindow.document.querySelector('.HeaderToolsContainer');
headerItems.style.display = 'none';
docViewer.on('documentLoaded', () => {
instance.setFitMode(FitMode.FitWidth);
});
});
}
Now you are done, run the application, you will get the PDF gets loaded in the express viewer. If you have any suggestions, please comments below.
Happy Coding!
- LP
Loading comments...