Quick start

This guide opens a PDF, shows its first page, searches it, highlights a match and saves the result.

1. Install#

npm install @embedpdf/engine@next

2. Create the engine#

Create one engine for your whole app and reuse it.

import { localEngine } from '@embedpdf/engine';
 
const engine = localEngine();

Creating it is instant. The engine starts PDFium in a Web Worker the first time you use it, so you don’t have to wait for anything here.

3. Open a PDF#

Give the engine the file’s bytes. Here we fetch them from a URL; a file the user picked works the same way (await file.arrayBuffer()).

const response = await fetch('/invoice.pdf');
const doc = await engine.open({ kind: 'bytes', bytes: await response.arrayBuffer() });

doc is your handle to the open document. Everything else starts from it.

4. Show the first page#

List the pages, then render the first one as an image:

const { pages } = await doc.pages.list();
const firstPage = doc.page(pages[0].ref);
 
const image = await firstPage.render.image({ viewport: { kind: 'width', width: 800 } });
const { url } = await image.objectUrl();
 
document.querySelector('img')!.src = url;

Each page has a ref: its address in the document. doc.page(ref) gives you a handle for that page, and you pass the same ref to anything that works on pages.

5. Read the text#

const { text } = await firstPage.text.get();
console.log(text);

6. Search#

Search the whole document. Each match says which page it’s on and where it is:

const { matches } = await doc.search.query({ text: 'total' });
 
console.log(`${matches.length} matches`);

7. Highlight a match#

A match carries one segment per line it covers, each with the four corners of that piece of text. A highlight takes exactly those corners:

const match = matches[0];
 
await doc.page(match.page).annotations.create({
  subtype: 'highlight',
  quadPoints: match.segments.map((segment) => segment.quad),
  color: '#ffd700',
});

Render the page again and the highlight is there. See Highlights & text markup for underlines, strikeouts and the other fields.

8. Save#

download() returns the PDF with your changes, as bytes:

const bytes = await doc.download();

To let the user save it, wrap the bytes in a Blob:

const link = document.createElement('a');
link.href = URL.createObjectURL(new Blob([bytes], { type: 'application/pdf' }));
link.download = 'invoice-highlighted.pdf';
link.click();

9. Clean up#

Close the document when you’re done with it. Keep the engine for the next one.

await doc.close();

Next steps#