Some test text!

Add bookmarkkeyboard_arrow_down

Add a bookmark to PDFs using JavaScript

Only available with the Full API

To add a bookmark or a new outline item in an existing document.

Webviewer(...).then(async instance => {
  const { docViewer, PDFNet } = instance;
  await PDFNet.initialize();

  docViewer.on('documentLoaded', () => {
    const doc = docViewer.getDocument();
    const pdfDoc = await doc.getPDFDoc();

    // create bookmark and add it to the first page
    const myitem = await PDFNet.Bookmark.create(pdfDoc, 'My bookmark');
    await myitem.setAction(await PDFNet.Action.createGoto(await PDFNet.Destination.createFit(await pdfDoc.getPage(1))));
    await pdfDoc.addRootBookmark(myitem);

    // refresh document outline
    const bookmarks = await doc.getBookmarks();

Read, add, edit PDF outlines and bookmarks
Full code sample which illustrates how to read and edit existing outline items and create new bookmarks using the high-level API

linkAbout adding a bookmark

While it's possible to work with outline items or Bookmarks using the SDF API (See section 8.2.2, "Document Outline", in the PDF Reference Manual for more details), PDFTron SDK simplifies the process by providing the high-level utility class PDF.Bookmark.

Note that we obtain the root Bookmark using GetFirstBookmark(). If GetFirstBookmark() returns an invalid Bookmark (where GetFirstBookmark().IsValid() is false), the document has no outline tree.

Sub-items can be added using the Bookmark.AddChild() method:

const sub_item = await myitem.addNewChild('My Sub-Item');

Note that a Bookmark can be associated with different kinds of Actions. The most common action is to move to another location in the current document. This type of Action is called a Go-To action. The following sample creates a new page Destination and sets the Bookmark's action:

myitem.setAction(await PDFNet.Action.createGoto(await PDFNet.Destination.createFit(await doc.getPage(1))));

Using PDFTron SDK, it is also possible to quickly create named destinations. Named destinations have an advantage over explicit destinations — they allow the location of the destination to change without invalidating existing links.

To create a named destination, pass the key (under which the destination will be stored) to the Action.Create() method:

const key = 'blue1';
myitem.setAction(await PDFNet.Action.createGotoWithKey(key, await PDFNet.Destination.createFit(await doc.getPage(1))));

Get the answers you need: Support


Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more