Transforming PDF documents into image formats like JPG or PNG is a powerful way to enhance the accessibility and usability of your content. By converting PDF pages into images, you preserve the original layout and design, making it ideal for various applications, from online sharing to incorporation in websites and presentations.
In this article, you will learn how to convert PDF files to images in React using Spire.PDF for JavaScript. We will guide you through the process step-by-step, ensuring you can easily generate high-quality images from your PDF documents.
Install Spire.PDF for JavaScript
To get started with converting PDF to images with JavaScript in a React application, you can either download Spire.PDF for JavaScript from our website or install it via npm with the following command:
npm i spire.pdf
After that, copy the "Spire.Pdf.Base.js" and "Spire.Pdf.Base.wasm" files to the public folder of your project. Additionally, include the required font files to ensure accurate and consistent text rendering.
For more details, refer to the documentation: How to Integrate Spire.PDF for JavaScript in a React Project
Convert PDF to JPG in React
Spire.PDF for JavaScript provides the PdfDocument.SaveAsImage() method to convert a specific page of a PDF into image byte data, which can then be saved as a JPG file using the Save() method. To convert all pages into individual images, iterate through each page.
The following are the steps to convert PDF to JPG in React:
- Load the required font files and the input PDF file into the Virtual File System (VFS).
- Create a PdfDocument object with the wasmModule.PdfDocument.Create() method.
- Load the PDF using the PdfDocument.LoadFromFile() method.
- Iterate through the document's pages:
- Convert each page into image byte data using the PdfDocument.SaveAsImage() method.
- Save the image as a JPG file using the Save() method.
- Trigger the download of the generated JPG file.
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// State to hold the loaded WASM module
const [wasmModule, setWasmModule] = useState(null);
// useEffect hook to load the WASM module when the component mounts
useEffect(() => {
const loadWasm = async () => {
try {
// Access the Module and spirepdf from the global window object
const { Module, spirepdf } = window;
// Set the wasmModule state when the runtime is initialized
Module.onRuntimeInitialized = () => {
setWasmModule(spirepdf);
};
} catch (err) {
// Log any errors that occur during loading
console.error('Failed to load WASM module:', err);
}
};
// Create a script element to load the WASM JavaScript file
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Pdf.Base.js`;
script.onload = loadWasm;
// Append the script to the document body
document.body.appendChild(script);
// Cleanup function to remove the script when the component unmounts
return () => {
document.body.removeChild(script);
};
}, []);
// Function to convert PDF to JPG
const ConvertPdfToJpg = async () => {
if (wasmModule) {
// Load the necessary font files into the virtual file system (VFS)
await wasmModule.FetchFileToVFS('GOTHIC.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
await wasmModule.FetchFileToVFS('GOTHICB.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
await wasmModule.FetchFileToVFS('GOTHICBI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
await wasmModule.FetchFileToVFS('GOTHICI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// Load the input PDF file into the VFS
let inputFileName = 'input.pdf';
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// Create a new document
const doc = wasmModule.PdfDocument.Create();
// Load the PDF file
doc.LoadFromFile(inputFileName);
// Iterate through the pages in the document
for (let i = 0; i < doc.Pages.Count; i++) {
// Specify the output file name
let outputFileName = `ToImage-img-${i}.jpg`;
// Save the specific page to image data
let imageData = doc.SaveAsImage({pageIndex: i});
// Save the image data as a JPG file
imageData.Save(outputFileName);
// Read the generated JPG file
const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
// Create a Blob object from the JPG file
const modifiedFile = new Blob([modifiedFileArray], { type:'image/jpeg' });
// Create a URL for the Blob
const url = URL.createObjectURL(modifiedFile);
// Create an anchor element to trigger the download
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
// Clean up resources
doc.Dispose();
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Convert PDF to JPG in React</h1>
<button onClick={ConvertPdfToJpg} disabled={!wasmModule}>
Convert
</button>
</div>
);
}
export default App;
Run the code to launch the React app at localhost:3000. Click "Convert," and a "Save As" window will appear, prompting you to save the output file in your chosen folder.
Here is a screenshot of the generated JPG files:
Convert PDF to PNG in React
To convert a PDF document into individual PNG files, iterate through its pages and use the PdfDocument.SaveAsImage() method to generate image byte data for each page. Then, save these byte data as PNG files.
The following are the steps to convert PDF to PNG in React:
- Load the required font files and the input PDF file into the Virtual File System (VFS).
- Create a PdfDocument object with the wasmModule.PdfDocument.Create() method.
- Load the PDF using the PdfDocument.LoadFromFile() method.
- Iterate through the document's pages:
- Convert each page into image byte data using the PdfDocument.SaveAsImage() method.
- Save the image as a PNG file using the Save() method.
- Trigger the download of the generated PNG file.
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// State to hold the loaded WASM module
const [wasmModule, setWasmModule] = useState(null);
// useEffect hook to load the WASM module when the component mounts
useEffect(() => {
const loadWasm = async () => {
try {
// Access the Module and spirepdf from the global window object
const { Module, spirepdf } = window;
// Set the wasmModule state when the runtime is initialized
Module.onRuntimeInitialized = () => {
setWasmModule(spirepdf);
};
} catch (err) {
// Log any errors that occur during loading
console.error('Failed to load WASM module:', err);
}
};
// Create a script element to load the WASM JavaScript file
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Pdf.Base.js`;
script.onload = loadWasm;
// Append the script to the document body
document.body.appendChild(script);
// Cleanup function to remove the script when the component unmounts
return () => {
document.body.removeChild(script);
};
}, []);
// Function to convert PDF to PNG
const ConvertPdfToPng = async () => {
if (wasmModule) {
// Load the necessary font files into the virtual file system (VFS)
await wasmModule.FetchFileToVFS('GOTHIC.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
await wasmModule.FetchFileToVFS('GOTHICB.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
await wasmModule.FetchFileToVFS('GOTHICBI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
await wasmModule.FetchFileToVFS('GOTHICI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// Load the input PDF file into the VFS
let inputFileName = 'input.pdf';
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// Create a new document
const doc = wasmModule.PdfDocument.Create();
// Load the PDF file
doc.LoadFromFile(inputFileName);
// Make background of the generated images transparent
// doc.ConvertOptions.SetPdfToImageOptions(0);
// Iterate through the pages in the document
for (let i = 0; i < doc.Pages.Count; i++) {
// Specify the output file name
let outputFileName = `ToImage-img-${i}.png`;
// Save the specific page to image data
let imageData = doc.SaveAsImage({pageIndex: i});
// Save the image data as a PNG file
imageData.Save(outputFileName);
// Read the generated PNG file
const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
// Create a Blob object from the PNG file
const modifiedFile = new Blob([modifiedFileArray], { type:'image/png' });
// Create a URL for the Blob
const url = URL.createObjectURL(modifiedFile);
// Create an anchor element to trigger the download
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
// Clean up resources
doc.Dispose();
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Convert PDF to PNG in React</h1>
<button onClick={ConvertPdfToPng} disabled={!wasmModule}>
Convert
</button>
</div>
);
}
export default App;
Convert PDF to SVG in React
To convert each page of a PDF document into individual SVG files, you can utilize the PdfDocument.SaveToFile() method. Here are the detailed steps:
- Load the required font files and the input PDF file into the Virtual File System (VFS).
- Create a PdfDocument object with the wasmModule.PdfDocument.Create() method.
- Load the PDF using the PdfDocument.LoadFromFile() method.
- Iterate through the pages:
- Convert each page into an SVG file using the PdfDocument.SaveToFile() method.
- Trigger the download of the generated SVG file.
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// State to hold the loaded WASM module
const [wasmModule, setWasmModule] = useState(null);
// useEffect hook to load the WASM module when the component mounts
useEffect(() => {
const loadWasm = async () => {
try {
// Access the Module and spirepdf from the global window object
const { Module, spirepdf } = window;
// Set the wasmModule state when the runtime is initialized
Module.onRuntimeInitialized = () => {
setWasmModule(spirepdf);
};
} catch (err) {
// Log any errors that occur during loading
console.error('Failed to load WASM module:', err);
}
};
// Create a script element to load the WASM JavaScript file
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Pdf.Base.js`;
script.onload = loadWasm;
// Append the script to the document body
document.body.appendChild(script);
// Cleanup function to remove the script when the component unmounts
return () => {
document.body.removeChild(script);
};
}, []);
// Function to convert PDF to SVG
const ConvertPdfToSvg = async () => {
if (wasmModule) {
// Load the necessary font files into the virtual file system (VFS)
await wasmModule.FetchFileToVFS('GOTHIC.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
await wasmModule.FetchFileToVFS('GOTHICB.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
await wasmModule.FetchFileToVFS('GOTHICBI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
await wasmModule.FetchFileToVFS('GOTHICI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// Load the input PDF file into the VFS
let inputFileName = 'input.pdf';
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// Create a new document
const doc = wasmModule.PdfDocument.Create();
// Load the PDF file
doc.LoadFromFile(inputFileName);
// Iterate through the pages in the document
for (let i = 0; i < doc.Pages.Count; i++) {
// Specify the output file name
let outputFileName = `ToSVG_${i}.svg`;
// Save a specfic page to SVG
doc.SaveToFile({fileName: outputFileName, startIndex:i, endIndex:i, fileFormat: wasmModule.FileFormat.SVG});
// Read the generated SVG file
const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
// Create a Blob object from the SVG file
const modifiedFile = new Blob([modifiedFileArray], { type:'image/svg+xml' });
// Create a URL for the Blob
const url = URL.createObjectURL(modifiedFile);
// Create an anchor element to trigger the download
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
// Clean up resources
doc.Dispose();
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Convert PDF to SVG in React</h1>
<button onClick={ConvertPdfToSvg} disabled={!wasmModule}>
Convert
</button>
</div>
);
}
export default App;
Get a Free License
To fully experience the capabilities of Spire.PDF for JavaScript without any evaluation limitations, you can request a free 30-day trial license.
