Split PDF pages in React
Let users select pages from a PDF and save them as a separate file without uploading the document to a processing service. Build the workflow with React hooks and receive the result as standard PDF bytes.
Works with vanilla JavaScript and most popular frameworks
Build page extraction into your React app
Use the SDK’s page hooks to select what stays in the document, remove everything else, and serialize the remaining pages as a standard PDF.
Select pages and ranges
Read the document’s ordered page list and map a user’s selection to stable page IDs instead of relying on indexes that change after an edit.
- usePages()
- PageCanvas
Keep only selected pages
Delete every page outside the selected range in one operation. The deletion becomes one undoable document change.
- usePageDelete()
- useUndoRedo()
Save the extracted PDF
Serialize the remaining pages as a Uint8Array for uploading, storing, or turning into your own browser download.
- useDocumentSaving()
- prepareDocument()
How to extract pages from a PDF in React
Load one PDF, keep the selected pages, and save that page range as a new file. The document stays in the browser unless your application uploads the result.
Load the source PDF
Load the source bytes once and render the document in your own interface. PDFSDK works with one loaded document at a time.
import { useEffect } from 'react';
import { PdfProviders, Viewport, useLoadPdf } from '@sdk-pdf/react';
import '@sdk-pdf/react/style.css';
type Props = { file: Uint8Array };
function PageExtractor({ file }: Props) {
const [state, loadPdf] = useLoadPdf();
useEffect(() => {
void loadPdf(file);
}, [file, loadPdf]);
if (state.status !== 'ready') return null;
return (
<div style={{ height: '100vh' }}>
<Viewport />
</div>
);
}
export function App({ file }: Props) {
return (
<PdfProviders>
<PageExtractor file={file} />
</PdfProviders>
);
}
Extract a PDF page range from React
Compose page extraction from the page list, one multi-page deletion, and document saving. Each save produces one PDF, so call useExtractPageRange once per range.
import {
useDocumentSaving,
usePageDelete,
usePages,
useUndoRedo,
} from '@sdk-pdf/react';
export function useExtractPageRange() {
const pages = usePages();
const deletePages = usePageDelete();
const { prepareDocument } = useDocumentSaving();
const { undo } = useUndoRedo();
return async (firstPage: number, lastPage: number) => {
if (firstPage < 1 || firstPage > lastPage || lastPage > pages.length) {
throw new RangeError('Page range outside the document');
}
const otherPageIds = [
...pages.slice(0, firstPage - 1),
...pages.slice(lastPage),
].map((page) => page.id);
const pagesWereDeleted = otherPageIds.length > 0;
if (pagesWereDeleted) deletePages(otherPageIds);
try {
return await prepareDocument({ returnOriginalIfUnchanged: false });
} finally {
if (pagesWereDeleted) undo();
}
};
}Browser-side PDF page extraction
The source PDF and extracted pages are processed in the browser. Your application decides whether to download the result, store it locally, or upload the returned bytes.
'use client';
import dynamic from 'next/dynamic';
const PageExtractor = dynamic(() => import('./page-extractor'), { ssr: false });
export default function Page() {
return <PageExtractor />;
}- Framework
- React 19, with react and react-dom as peer dependencies
- Module format
- ESM only; use a bundler (Vite, Next.js, or equivalent)
- Runtime
- Browser only. In Next.js, use a client component with ssr: false
- Bundle
- 277 KB gzipped; CJK character maps are code-split and lazy
- Assets to host
- None. Everything the engine needs is in the module graph
- Bundler
- Alias the unused canvas require once (see config snippets)
- Strict Mode
- Off for now. The simulated unmount kills the engine
- Encrypted files
- Pass { password } to loadPdf
- Input
- PDF, one document loaded at a time
- Output
- Uint8Array with the saved PDF, or a browser download
- Split output
- One PDF per save; no built-in multi-file or ZIP output
Where to go next
Questions engineers ask
Not in one call. PDFSDK can keep a selected page range and save it as one PDF. To create several parts, your application must repeat that workflow for each range, restoring or reloading the source document between saves. There is no built-in batch splitter or ZIP output.
Still have questions? Book 30 minutes
A short call with the engineering team and a straight answer instead of a pitch