How to Programmatically Edit PDFs Using React

npx create-react-app react-pspdfkit # Replace `react-pspdfkit` with your project name.

cd react-pspdfkit
cd src
mkdir components
cd components
touch PDFViewer.js # Will render your document to the client's browser.
cd .. # Go back to the `src` directory.

npm install pspdfkit

cd .. # Navigate to the root directory.

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib

async function loadPDF({ PSPDFKit, container, document, baseUrl }) {
	const instance = await PSPDFKit.load({
		// Container where PSPDFKit should be mounted.
		container,
		// The document to open.
		document,
		baseUrl,
	});
	return instance;
}
export { loadPDF }; // Link this function with your project.

import { useEffect, useRef } from "react";

export default function PDFViewer(props) {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    let PSPDFKit;

    (async function () {
      PSPDFKit = await import("pspdfkit");

      if (PSPDFKit) {
        PSPDFKit.unload(container); // Ensure that there's only one PSPDFKit instance.
      }
      const instance = await PSPDFKit.load({
        container,
        document: props.document,
        baseUrl: `${window.location.protocol}//${window.location.host}/${process.env.PUBLIC_URL}`,
      });
    })();

    return () => {
      // Unload PSPDFKit instance when the component is unmounted
      PSPDFKit && PSPDFKit.unload(container);
    };
  }, [props.document]);

  return <div ref={containerRef} style={{ width: "100%", height: "100vh" }} />;
}

import PDFViewer from './components/PDFViewer';

function App() {
	return (
		<div className="App">
			<PDFViewer document={'Document.pdf'} />{' '}
			{/*Render the Document.pdf file*/}
		</div>
	);
}
export default App;

npm start

import mergingPDF from './examplePDF.pdf'; // Bring in your PDF file.

async function mergePDF({ instance }) {
	fetch(mergingPDF) // Fetch the contents of the file to merge.
		.then((res) => {
			if (!res.ok) {
				throw res; // If an error occurs, use the `console.log()` function.
			}
			return res;
		})
		.then((res) => res.blob()) // Return its blob data.
		.then((blob) => {
			instance.applyOperations([
				{
					type: 'importDocument', // Tell the program that you'll merge a document.
					beforePageIndex: 0, // Merge the document at the first page.
					document: blob, // Use the document's blob data for merging.
					treatImportedDocumentAsOnePage: false,
				},
			]);
		});
}
export { mergePDF };

// components/PDFViewer.js

import { mergePDF } from '../helperFunctions.js';

useEffect(() => {
	// More code...
	mergePDF({ instance }); // Merge the PDF with your current instance.
}, []);

function flipPage({ pageIndexes, instance }) {
	instance.applyOperations([
		{
			type: 'rotatePages', // Tell PSPDFKit to rotate the page.
			pageIndexes, // Page number(s) to select and rotate.
			rotateBy: 180, // Rotate by 180 degrees. This will flip the page.
		},
	]);
}
export { flipPage };

// components/PDFViewer.js
import { flipPage } from '../helperFunctions.js';
//..
useEffect(() => {
	// More code...
	// Flip the first, second, and third page of the PDF:
	flipPage({ pageIndexes: [0, 1, 2], instance });
}, []);

function removePage({ pageIndexes, instance }) {
	instance.applyOperations([
		{
			type: 'removePages', // Tell PSPDFKit to remove the page.
			pageIndexes, // Page(s) to remove.
		},
	]);
}
export { removePage };

import { removePage } from '../helperFunctions.js';

useEffect(() => {
	// More code.
	// Only remove the first page from this document:
	removePage({ pageIndexes: [0], instance });
}, []);

// helperFunctions.js
function addPage({ instance, PSPDFKit }) {
	instance.applyOperations([
		{
			type: 'addPage', // Add a page to the document.
			afterPageIndex: instance.totalPageCount - 1, // Append the page at the end.
			backgroundColor: new PSPDFKit.Color({
				r: 100,
				g: 200,
				b: 255,
			}), // Set the new page background color.
			pageWidth: 750, // Dimensions of the page:
			pageHeight: 1000,
		},
	]);
}
export { addPage };

// components/PDFViewer.js

import { addPage } from '../helperFunctions.js';

useEffect(() => {
	// More code...
	addPage({ instance, PSPDFKit });
}, []);

// helperFunctions.js
async function splitPDF({ instance }) {
	// Export the `ArrayBuffer` data of the first half of the document.
	const firstHalf = await instance.exportPDFWithOperations([
		{
			type: 'removePages',
			pageIndexes: [0, 1, 2], // Split the first, second, and third page.
		},
	]);
	// Export the `ArrayBuffer` data of the second half of the document.
	const secondHalf = await instance.exportPDFWithOperations([
		{
			type: 'removePages',
			pageIndexes: [3, 4], // Extract the fourth and fifth pages.
		},
	]);
	// Log the `ArrayBuffer` data of both of these files:
	console.log('First half of the file:', firstHalf);
	console.log('Second half of the file:', secondHalf);
}
export { splitPDF };

// components/PDFViewer.js

import { splitPDF } from '../helperFunctions.js';

useEffect(() => {
	// More code...
	splitPDF({ instance });
}, []);