Build a React.js PDF Viewer & Editor With Controls Using pdfjs-dist Library in Browser Using JSX

npm i pdfjs-dist@3.11.17

App.jsx

import React, { useState, useRef, useEffect } from 'react';
import * as pdfjsLib from 'pdfjs-dist';

// Set the PDF.js worker path
pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

const PDFJSViewer = () => {
  const [pdfDoc, setPdfDoc] = useState(null);
  const [pageNum, setPageNum] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const [scale, setScale] = useState(1.0);
  const [rotation, setRotation] = useState(0);
  const canvasRef = useRef(null);
  const fileInputRef = useRef(null);

  const renderPage = async (pageNumber) => {
    if (!pdfDoc) return;

    const page = await pdfDoc.getPage(pageNumber);
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');
    
    // Apply rotation
    const viewport = page.getViewport({ scale, rotation: rotation });
    
    // Set canvas dimensions to match the viewport
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    
    // Render the PDF page
    const renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    
    await page.render(renderContext).promise;
  };

  // Handle file selection
  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (!file || file.type !== 'application/pdf') {
      alert('Please select a valid PDF file');
      return;
    }

    const reader = new FileReader();
    reader.onload = async (e) => {
      const typedArray = new Uint8Array(e.target.result);
      try {
        const loadingTask = pdfjsLib.getDocument(typedArray);
        const pdf = await loadingTask.promise;
        
        setPdfDoc(pdf);
        setTotalPages(pdf.numPages);
        setPageNum(1);
      } catch (error) {
        console.error('Error loading PDF:', error);
        alert('Error loading PDF file');
      }
    };
    reader.readAsArrayBuffer(file);
  };

  // Navigation functions
  const goToPrevPage = () => {
    if (pageNum > 1) {
      setPageNum(prevPageNum => prevPageNum - 1);
    }
  };

  const goToNextPage = () => {
    if (pageNum < totalPages) {
      setPageNum(prevPageNum => prevPageNum + 1);
    }
  };

  // Zoom functions
  const zoomIn = () => {
    setScale(prevScale => Math.min(prevScale + 0.2, 3));
  };

  const zoomOut = () => {
    setScale(prevScale => Math.max(prevScale - 0.2, 0.5));
  };

  // Rotation functions
  const rotateClockwise = () => {
    setRotation(prevRotation => (prevRotation + 90) % 360);
  };

  const rotateCounterClockwise = () => {
    setRotation(prevRotation => (prevRotation - 90 + 360) % 360);
  };

  // Re-render when page number, scale or rotation changes
  useEffect(() => {
    if (pdfDoc) {
      renderPage(pageNum);
    }
  }, [pdfDoc, pageNum, scale, rotation]);

  return (
    <div className="pdf-viewer">
      <div className="pdf-header">
        <h2>PDF Viewer</h2>
        <input
          type="file"
          ref={fileInputRef}
          onChange={handleFileChange}
          accept="application/pdf"
          className="file-input"
        />
      </div>

      {pdfDoc && (
        <div className="controls-container">
          <div className="page-controls">
            <button onClick={goToPrevPage} disabled={pageNum <= 1}>
              Previous
            </button>
            <span>
              Page {pageNum} of {totalPages}
            </span>
            <button onClick={goToNextPage} disabled={pageNum >= totalPages}>
              Next
            </button>
          </div>

          <div className="zoom-controls">
            <button onClick={zoomOut}>Zoom Out</button>
            <span>{Math.round(scale * 100)}%</span>
            <button onClick={zoomIn}>Zoom In</button>
          </div>

          <div className="rotation-controls">
            <button onClick={rotateCounterClockwise}>Rotate Left</button>
            <button onClick={rotateClockwise}>Rotate Right</button>
          </div>
        </div>
      )}

      <div className="pdf-container">
        {pdfDoc ? (
          <canvas ref={canvasRef} />
        ) : (
          <div className="placeholder">Select a PDF file to view</div>
        )}
      </div>
    </div>
  );
};

export default PDFJSViewer;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

import React, { useState, useRef, useEffect } from 'react';

import * as pdfjsLib from 'pdfjs-dist';

// Set the PDF.js worker path

pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

const PDFJSViewer = () => {

const [pdfDoc, setPdfDoc] = useState(null);

const [pageNum, setPageNum] = useState(1);

const [totalPages, setTotalPages] = useState(0);

const [scale, setScale] = useState(1.0);

const [rotation, setRotation] = useState(0);

const canvasRef = useRef(null);

const fileInputRef = useRef(null);

const renderPage = async (pageNumber) => {

if (!pdfDoc) return;

const page = await pdfDoc.getPage(pageNumber);

const canvas = canvasRef.current;

const context = canvas.getContext('2d');

// Apply rotation

const viewport = page.getViewport({ scale, rotation: rotation });

// Set canvas dimensions to match the viewport

canvas.height = viewport.height;

canvas.width = viewport.width;

// Render the PDF page

const renderContext = {

canvasContext: context,

viewport: viewport

};

await page.render(renderContext).promise;

};

// Handle file selection

const handleFileChange = (event) => {

const file = event.target.files[0];

if (!file || file.type !== 'application/pdf') {

alert('Please select a valid PDF file');

return;

}

const reader = new FileReader();

reader.onload = async (e) => {

const typedArray = new Uint8Array(e.target.result);

try {

const loadingTask = pdfjsLib.getDocument(typedArray);

const pdf = await loadingTask.promise;

setPdfDoc(pdf);

setTotalPages(pdf.numPages);

setPageNum(1);

} catch (error) {

console.error('Error loading PDF:', error);

alert('Error loading PDF file');

}

};

reader.readAsArrayBuffer(file);

};

// Navigation functions

const goToPrevPage = () => {

if (pageNum > 1) {

setPageNum(prevPageNum => prevPageNum - 1);

}

};

const goToNextPage = () => {

if (pageNum < totalPages) {

setPageNum(prevPageNum => prevPageNum + 1);

}

};

// Zoom functions

const zoomIn = () => {

setScale(prevScale => Math.min(prevScale + 0.2, 3));

};

const zoomOut = () => {

setScale(prevScale => Math.max(prevScale - 0.2, 0.5));

};

// Rotation functions

const rotateClockwise = () => {

setRotation(prevRotation => (prevRotation + 90) % 360);

};

const rotateCounterClockwise = () => {

setRotation(prevRotation => (prevRotation - 90 + 360) % 360);

};

// Re-render when page number, scale or rotation changes

useEffect(() => {

if (pdfDoc) {

renderPage(pageNum);

}

}, [pdfDoc, pageNum, scale, rotation]);

return (

<h2>PDF Viewer</h2>

<input

type="file"

ref={fileInputRef}

onChange={handleFileChange}

accept="application/pdf"

className="file-input"

</div>

{pdfDoc && (

</button>

<span>

Page {pageNum} of {totalPages}

</span>

<button onClick={goToNextPage} disabled={pageNum >= totalPages}>

</button>

</div>

<span>{Math.round(scale * 100)}%</span>

</div>

<button onClick={rotateCounterClockwise}>Rotate Left</button>

<button onClick={rotateClockwise}>Rotate Right</button>

</div>

)}

{pdfDoc ? (

) : (

<div className="placeholder">Select a PDF file to view</div>

)}

</div>

);

};

export default PDFJSViewer;

index.css

.pdf-viewer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.pdf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.file-input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.controls-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
  padding: 12px;
  background-color: #f5f5f5;
  border-radius: 6px;
}

.page-controls,
.zoom-controls,
.rotation-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

button {
  padding: 8px 12px;
  background-color: #0078d7;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

button:hover {
  background-color: #0063b1;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.pdf-container {
  border: 1px solid #ddd;
  min-height: 500px;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: #525659;
  padding: 20px;
}

canvas {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  background-color: white;
}

.placeholder {
  color: white;
  font-size: 18px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .controls-container {
    flex-direction: column;
    align-items: flex-start;
  }
}

.pdf-viewer {

max-width: 1200px;

margin: 0 auto;

padding: 20px;

font-family: Arial, sans-serif;

}

.pdf-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 20px;

}

.file-input {

padding: 8px;

border: 1px solid #ccc;

border-radius: 4px;

}

.controls-container {

display: flex;

flex-wrap: wrap;

gap: 15px;

margin-bottom: 20px;

padding: 12px;

background-color: #f5f5f5;

border-radius: 6px;

}

.page-controls,

.zoom-controls,

.rotation-controls {

display: flex;

align-items: center;

gap: 10px;

}

button {

padding: 8px 12px;

background-color: #0078d7;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

font-size: 14px;

}

button:hover {

background-color: #0063b1;

}

button:disabled {

background-color: #cccccc;

cursor: not-allowed;

}

.pdf-container {

border: 1px solid #ddd;

min-height: 500px;

overflow: auto;

display: flex;

justify-content: center;

align-items: flex-start;

background-color: #525659;

padding: 20px;

}

canvas {

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

background-color: white;

}

.placeholder {

color: white;

font-size: 18px;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

}

@media (max-width: 768px) {

.controls-container {

flex-direction: column;

align-items: flex-start;

}

Build a React.js PDF Viewer & Editor With Controls Using pdfjs-dist Library in Browser Using JSX

Comments

Leave a Reply Cancel reply

Archives