Build a React.js PDF Document Custom Viewer With Validation & Controls Using pdfjs-dist in JS

Welcome folks today in this blog post we will be using the pdfjs-dist library to build the custom pdf document viewer in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to create the react.js project using the below command as shown below

npx create-react-app sampleapp

cd sampleapp

After that you need to install the below libraries using the below command as shown below

npm i pdfjs-dist

npm i @react-pdf-viewer/core

npm i @react-pdf-viewer/default-layout

And now you need to copy paste the below code inside the App.js file as shown below

App.js

import {useState} from 'react'
 
import { Worker } from '@react-pdf-viewer/core';
import { Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
 
function App() {
 
  // creating new plugin instance
  const defaultLayoutPluginInstance = defaultLayoutPlugin();
 
  // pdf file onChange state
  const [pdfFile, setPdfFile]=useState(null);
 
  // pdf file error state
  const [pdfError, setPdfError]=useState('');
 
 
  // handle file onChange event
  const allowedFiles = ['application/pdf'];
  const handleFile = (e) =>{
    let selectedFile = e.target.files[0];
    // console.log(selectedFile.type);
    if(selectedFile){
      if(selectedFile&&allowedFiles.includes(selectedFile.type)){
        let reader = new FileReader();
        reader.readAsDataURL(selectedFile);
        reader.onloadend=(e)=>{
          setPdfError('');
          setPdfFile(e.target.result);
        }
      }
      else{
        setPdfError('Not a valid pdf: Please select only PDF');
        setPdfFile('');
      }
    }
    else{
      console.log('please select a PDF');
    }
  }
 
  return (
    <div className="container">
 
      <form>
 
        <label><h5>Upload PDF</h5></label>
        <br></br>
 
        <input type='file' className="form-control"
        onChange={handleFile}></input>
 
        {pdfError&&<span className='text-danger'>{pdfError}</span>}
 
      </form>
 
      <h5>View PDF</h5>
      <div className="viewer">
 
        {pdfFile&&(
          <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.12.313/build/pdf.worker.min.js">
            <Viewer fileUrl={pdfFile}
            plugins={[defaultLayoutPluginInstance]}></Viewer>
          </Worker>
        )}
 
        {!pdfFile&&<>No file is selected yet</>}
 
      </div>
 
    </div>
  );
}
 
export default App;

import {useState} from 'react'

import { Worker } from '@react-pdf-viewer/core';

import { Viewer } from '@react-pdf-viewer/core';

import '@react-pdf-viewer/core/lib/styles/index.css';

import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';

import '@react-pdf-viewer/default-layout/lib/styles/index.css';

function App() {

// creating new plugin instance

const defaultLayoutPluginInstance = defaultLayoutPlugin();

// pdf file onChange state

const [pdfFile, setPdfFile]=useState(null);

// pdf file error state

const [pdfError, setPdfError]=useState('');

// handle file onChange event

const allowedFiles = ['application/pdf'];

const handleFile = (e) =>{

let selectedFile = e.target.files[0];

// console.log(selectedFile.type);

if(selectedFile){

if(selectedFile&&allowedFiles.includes(selectedFile.type)){

let reader = new FileReader();

reader.readAsDataURL(selectedFile);

reader.onloadend=(e)=>{

setPdfError('');

setPdfFile(e.target.result);

}

else{

setPdfError('Not a valid pdf: Please select only PDF');

setPdfFile('');

}

else{

console.log('please select a PDF');

}

return (

<form>

<label><h5>Upload PDF</h5></label>

<input type='file' className="form-control"

onChange={handleFile}></input>

{pdfError&&<span className='text-danger'>{pdfError}</span>}

</form>

{pdfFile&&(

<Viewer fileUrl={pdfFile}

plugins={[defaultLayoutPluginInstance]}></Viewer>

</Worker>

)}

{!pdfFile&&<>No file is selected yet</>}

</div>

);

}

export default App;

As you can see in the above code we are importing the pdfjs-dist libraries and then inside the html we have the select html input field where we allow the user to select the pdf document and we have attached the onChange event handler where we display the pdf document using the pdf viewer and also we are attaching the pdfjs-dist cdn. And also we have validation also if you don’t select the pdf file then we are showing the error message.

And also you need to copy paste the below css code inside the app.component.css file as shown below

app.component.css

form{
  margin: 30px 0px;
}
 
.viewer{
  background-color: #e4e4e4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 800px;
  overflow-y: auto;
  margin-bottom: 10px;
}
 
span{
  margin-top: 3px;
}

form{

margin: 30px 0px;

}

.viewer{

background-color: #e4e4e4;

display: flex;

justify-content: center;

align-items: center;

height: 800px;

overflow-y: auto;

margin-bottom: 10px;

}

span{

margin-top: 3px;

}