This sample searches a PDF for a term and rewrites every occurrence with Document Solutions for PDF JS (DsPdfJS).
Unlike drawing a box or new text on top of a page, PdfDocument.replaceText() edits the
document's actual content stream. The change is therefore visible both in the rendered page
and in the text you extract afterwards - the sample confirms this by counting occurrences of
the old and new text once the replacement is done.
- Loading a PDF into a
PdfDocument. - Counting occurrences with
PdfDocument.findText(). - Replacing every occurrence with
PdfDocument.replaceText(), optionally overriding the font size. - Matching case-sensitively or case-insensitively.
- Rendering before/after page previews with
PdfPage.saveAsPng(). - Verifying the edit by re-searching the document for the old and new text.
- Saving the edited PDF entirely in the browser.
npm install
npm run devOpen the local URL printed by Vite. The sample loads public/text-replace-sample.pdf
automatically; you can also upload another PDF.
The predev script copies the DsPdf.wasm file shipped by @mescius/ds-pdf into public
(the copied file is ignored by Git). The same step runs automatically before a production build:
npm run build- Load the PDF and count how many times the search term appears with
findText(). - Call
doc.replaceText({ text, matchCase }, newText, undefined, null, fontSize)to rewrite every occurrence. Passingnullfor the font keeps the current font; passingnullfor the font size keeps the current size. - Render each page to PNG for the "after" preview.
- Search again for the old and new text and report the counts, confirming the replacement.
- Offer the edited PDF for download.
By default the sample replaces Acme Corp with Globex Inc in the bundled quotation.
The bundled PDF is generated by tools/create-sample.mjs and
contains only obvious fictional data. Regenerate it after editing that file with:
npm run make-documentreplaceText() locates text using DsPdfJS's current recognition algorithm
(PdfDocument.recognitionAlgorithm). On complex PDFs the result can depend on how the text is
stored in the content stream, so a match that reads naturally to a human is not always a single
replaceable run. The bundled sample document uses simple, plain text so the demonstration behaves
predictably; when replacing text in arbitrary PDFs, review the output.
Without a license key, DsPdfJS runs in trial mode and adds an evaluation notice to generated or
rendered output. To use a key, call await DsPdfConfig.setLicenseKey("YOUR_KEY") before
connectDsPdf() in src/Demos.ts.