In this article, we'll focus on the most favored open-source libraries for crafting a PDF Viewer in React.js. Specifically, we're going to guide you through the process of creating a React.js PDF Viewer by leveraging the capabilities of the renowned open-source library — react-pdf. Through this walkthrough, you'll gain the insights needed to implement a fully functional PDF viewer within your React.js application, enhancing the document-handling experience for your users.
Open Source PDF Libraries for React.js PDF Viewer
In React.js development, various open-source libraries like react-pdf and @react-pdf/renderer, facilitate PDF viewing. react-pdf is with react-pdf garnering 700K npm weekly downloads and offers ready-to-use components for displaying PDFs as images. Custom interfaces are needed and text selection may pose issues. You can see some features of react-pdf before your integration:
- Render by PDF.js on the web and server.
- View PDFs.
- Some annotation tools.
- All features of PDF.js.
- Basic UI.
Build a React.js PDF Viewer with react-pdf
Requirements:
- Node.js version 14 or later.
- A package manager is compatible with npm. This guide contains usage examples for Yarn and the npm client (installed with Node.js by default). Make sure the npm version is 5.6 or greater.
Create a Project
1. Start by creating a React.js project with create-react-app:
npx create-react-app react-pdf-example
2. After the project is created, change the directory into the project folder:
cd react-pdf-example
Add react-pdf
1. Install and add react PDF library: From the terminal in your React app location, run the following command to pull down all the necessary components.
npm i react-pdf
2. Then, follow the code below to create a Webviewer in ”src/components/Webviewer.js”.
import { useState } from "react"
import { Document, Page, pdfjs } from "react-pdf"
import "react-pdf/dist/esm/Page/AnnotationLayer.css"
import 'react-pdf/dist/Page/TextLayer.css';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
export default function PDFViewer(props) {
const [numPages, setNumPages] = useState();
const [pageNumber, setPageNumber] = useState(1);
function prevPage() {
setPageNumber(pageNumber - 1 <= 1 ? 1 : pageNumber - 1);
}
function nextPage() {
setPageNumber(pageNumber + 1 >= numPages ? numPages : pageNumber + 1);
}
function onLoadSuccess({ numPages }) {
setNumPages(numPages);
}
return (
<div>
<nav>
<button onClick={prevPage}>Previous Page</button>
<button onClick={nextPage}>Next Page</button>
</nav>
<div className="pages">{pageNumber} of {numPages}</div>
<div className="page">
<Document
file='ComPDFKit_Sample_File_Web.pdf'
onLoadSuccess={onLoadSuccess}
renderMode="canvas"
>
<Page
key={pageNumber}
pageNumber={pageNumber}
/>
</Document>
</div>
</div>
)
}
Display a PDF
Run the PDF Viewer in your React App in your terminal by running the following command, the PDF successfully displayed:
npm start
Build a React.js PDF Viewer with ComPDFKit
Enhance your React project's PDF capabilities by integrating ComPDFKit for Web. We will provide a detailed guide on how to seamlessly integrate ComPDFKit for Web into your React project, step by step.
Create a New React Project
1. Use create-react-app to scaffold out a simple React application:
npx create-react-app compdfkit-react-example
2. Change to the created project directory:
cd compdfkit-react-example
Add ComPDFKit for Web to Your Project
1. Import the “@compdfkit” folder into the root of your project.
2. Initialize the ComPDFKit for Web in your project by calling ComPDFKitViewer.init().
Display a PDF
Pass the PDF address you want to display and your license key into the init function.
import ComPDFKitViewer from "/@compdfkit/webviewer";
export default function Home() {
let init = false
const viewer = useRef(null);
let docViewer = null
useEffect(() => {
if (init) return
init = true
ComPDFKitViewer.init({
pdfUrl: 'Your PDF Url',
license: 'Input your license here'
}, viewer.current).then((core) => {
docViewer = core.docViewer
})
});
return ( )
}
The PDF file will be opened and displayed.
Conclusion
After building your React.js PDF viewer, You can enhance your proficiency and streamline your workflow. Integrate ComPDFKit for Web and add any PDF SDK features you want:
- PDF page handling.
- PDF editing.
- PDF commenting & replying.
- Signing PDF documents.
- Comparing PDF versions.
- Form filling.
- Sensitive information redacting.
- …
ComPDFKit provides ComPDFKit Web Demo for you to try the features online. If you have any questions about implementing ComPDFKit for Web in your project, please contact us.
