Build a React.js PDF Editor to Render & Export PDF Pages to PNG Images Using react-pdf in Browser

npm i react-pdf

Now we need to make the App.tsx file and copy paste the below code

App.tsx

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';
import { pdfjs } from 'react-pdf';

// Set up PDF.js worker
pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.worker.min.mjs`;

const PDFToImageConverter = () => {
  const [pdfFile, setPdfFile] = useState(null);
  const [numPages, setNumPages] = useState(0);
  const [pageImages, setPageImages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  // Handle file selection
  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file && file.type === 'application/pdf') {
      setPdfFile(file);
      setPageImages([]);
      setError(null);
    } else {
      setPdfFile(null);
      setError('Please select a valid PDF file');
    }
  };

  // Handle document load success
  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };

  // Convert PDF pages to images
  const convertPagesToImages = async () => {
    try {
      setIsLoading(true);
      setPageImages([]);
      
      const images = [];
      
      for (let pageNum = 1; pageNum <= numPages; pageNum++) {
        // Wait for page to render in canvas
        await new Promise(resolve => {
          setTimeout(resolve, 100);
        });
        
        const canvas = document.querySelector(`#page-${pageNum} canvas`);
        if (canvas) {
          // Convert canvas to image
          const image = canvas.toDataURL('image/png');
          images.push({ pageNum, image });
        }
      }
      
      setPageImages(images);
      setIsLoading(false);
    } catch (err) {
      setError('Error converting PDF to images: ' + err.message);
      setIsLoading(false);
    }
  };

  // Handle download of a specific page image
  const downloadImage = (dataUrl, pageNum) => {
    const link = document.createElement('a');
    link.href = dataUrl;
    link.download = `page-${pageNum}.png`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div className="p-6 max-w-6xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">PDF to Image Converter</h1>
      
      {/* File input section */}
      <div className="mb-6">
        <label className="block mb-2 font-medium">
          Select PDF Document:
          <input 
            type="file" 
            accept="application/pdf" 
            onChange={handleFileChange} 
            className="block w-full mt-1 text-sm border rounded p-2"
          />
        </label>
      </div>
      
      {error && <div className="p-4 mb-4 text-red-700 bg-red-100 rounded">{error}</div>}
      
      {/* PDF preview section */}
      {pdfFile && (
        <div className="mb-6">
          <h2 className="text-xl font-semibold mb-4">PDF Preview</h2>
          <Document
            file={pdfFile}
            onLoadSuccess={onDocumentLoadSuccess}
            error={<div>Failed to load PDF document</div>}
          >
            {Array.from(new Array(numPages), (el, index) => (
              <div key={`page-container-${index + 1}`} id={`page-${index + 1}`} className="mb-4 border rounded overflow-hidden">
                <Page 
                  pageNumber={index + 1} 
                  renderTextLayer={false}
                  renderAnnotationLayer={false}
                  scale={1.5}
                />
              </div>
            ))}
          </Document>
          
          {numPages > 0 && (
            <button
              onClick={convertPagesToImages}
              disabled={isLoading}
              className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-blue-300"
            >
              {isLoading ? 'Converting...' : 'Convert All Pages to Images'}
            </button>
          )}
        </div>
      )}
      
      {/* Images section */}
      {pageImages.length > 0 && (
        <div>
          <h2 className="text-xl font-semibold mb-4">Page Images</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {pageImages.map(({ pageNum, image }) => (
              <div key={`image-${pageNum}`} className="border rounded p-4">
                <h3 className="mb-2 font-medium">Page {pageNum}</h3>
                <div className="mb-4">
                  <img 
                    src={image} 
                    alt={`Page ${pageNum}`} 
                    className="max-w-full h-auto border"
                  />
                </div>
                <button
                  onClick={() => downloadImage(image, pageNum)}
                  className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
                >
                  Download PNG
                </button>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default PDFToImageConverter;

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

155

import React, { useState } from 'react';

import { Document, Page } from 'react-pdf';

import { pdfjs } from 'react-pdf';

// Set up PDF.js worker

pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.worker.min.mjs`;

const PDFToImageConverter = () => {

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

const [numPages, setNumPages] = useState(0);

const [pageImages, setPageImages] = useState([]);

const [isLoading, setIsLoading] = useState(false);

const [error, setError] = useState(null);

// Handle file selection

const handleFileChange = (event) => {

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

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

setPdfFile(file);

setPageImages([]);

setError(null);

} else {

setPdfFile(null);

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

}

};

// Handle document load success

const onDocumentLoadSuccess = ({ numPages }) => {

setNumPages(numPages);

};

// Convert PDF pages to images

const convertPagesToImages = async () => {

try {

setIsLoading(true);

setPageImages([]);

const images = [];

for (let pageNum = 1; pageNum <= numPages; pageNum++) {

// Wait for page to render in canvas

await new Promise(resolve => {

setTimeout(resolve, 100);

});

const canvas = document.querySelector(`#page-${pageNum} canvas`);

if (canvas) {

// Convert canvas to image

const image = canvas.toDataURL('image/png');

images.push({ pageNum, image });

}

setPageImages(images);

setIsLoading(false);

} catch (err) {

setError('Error converting PDF to images: ' + err.message);

setIsLoading(false);

}

};

// Handle download of a specific page image

const downloadImage = (dataUrl, pageNum) => {

const link = document.createElement('a');

link.href = dataUrl;

link.download = `page-${pageNum}.png`;

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

};

return (

<h1 className="text-2xl font-bold mb-6">PDF to Image Converter</h1>

{/* File input section */}

Select PDF Document:

<input

type="file"

accept="application/pdf"

onChange={handleFileChange}

className="block w-full mt-1 text-sm border rounded p-2"

</label>

</div>

{error && <div className="p-4 mb-4 text-red-700 bg-red-100 rounded">{error}</div>}

{/* PDF preview section */}

{pdfFile && (

<h2 className="text-xl font-semibold mb-4">PDF Preview</h2>

<Document

file={pdfFile}

onLoadSuccess={onDocumentLoadSuccess}

error={<div>Failed to load PDF document</div>}

{Array.from(new Array(numPages), (el, index) => (

<Page

pageNumber={index + 1}

renderTextLayer={false}

renderAnnotationLayer={false}

scale={1.5}

</div>

))}

</Document>

{numPages > 0 && (

<button

onClick={convertPagesToImages}

disabled={isLoading}

className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-blue-300"

{isLoading ? 'Converting...' : 'Convert All Pages to Images'}

</button>

)}

</div>

)}

{/* Images section */}

{pageImages.length > 0 && (

<div>

<h2 className="text-xl font-semibold mb-4">Page Images</h2>

{pageImages.map(({ pageNum, image }) => (

<h3 className="mb-2 font-medium">Page {pageNum}</h3>

<img

src={image}

alt={`Page ${pageNum}`}

className="max-w-full h-auto border"

</div>

<button

onClick={() => downloadImage(image, pageNum)}

className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"

Download PNG

</button>

</div>

))}

</div>

)}

</div>

);

};

export default PDFToImageConverter;

Build a React.js PDF Editor to Render & Export PDF Pages to PNG Images Using react-pdf in Browser

Comments

Leave a Reply Cancel reply

Archives