import { useState } from "react"; import { PDFDocument } from "pdf-lib"; export default function Home() { const [pdfFileData, setPdfFileData] = useState(); function readFileAsync(file) { return new Promise((resolve, reject) => { let reader = new FileReader(); reader.onload = () => { resolve(reader.result); }; reader.onerror = reject; reader.readAsArrayBuffer(file); }); } function renderPdf(uint8array) { const tempblob = new Blob([uint8array], { type: "application/pdf", }); const docUrl = URL.createObjectURL(tempblob); setPdfFileData(docUrl); } function range(start, end) { let length = end - start + 1; return Array.from({ length }, (_, i) => start + i - 1); } async function extractPdfPage(arrayBuff) { const pdfSrcDoc = await PDFDocument.load(arrayBuff); const pdfNewDoc = await PDFDocument.create(); const pages = await pdfNewDoc.copyPages(pdfSrcDoc, range(2, 3)); pages.forEach((page) => pdfNewDoc.addPage(page)); const newpdf = await pdfNewDoc.save(); return newpdf; } // Execute when user select a file const onFileSelected = async (e) => { const fileList = e.target.files; if (fileList?.length > 0) { const pdfArrayBuffer = await readFileAsync(fileList[0]); const newPdfDoc = await extractPdfPage(pdfArrayBuffer); renderPdf(newPdfDoc); } }; return ( <> <h1>Hello world</h1> <input type="file" id="file-selector" accept=".pdf" onChange={onFileSelected} /> <iframe style={{ display: "block", width: "100vw", height: "90vh" }} title="PdfFrame" src={pdfFileData} frameborder="0" type="application/pdf" ></iframe> </> ); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter