PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

Compare

play_arrow

Advanced Capabilities

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Create file attachment annotation using JavaScript

The following features are available in:

check

PDF.js Express Viewer

help_outline

PDF.js Express Viewer is a free viewer with limited capabilities compared to PDF.js Express Plus

check

PDF.js Express Plus

help_outline

PDF.js Express Plus is a commercial PDF SDK for viewing, annotating, signing, form filling and more

Here is an example of creating a file attachment annotation using JavaScript, but creating other types of annotations are similar.

WebViewer(...)
  .then(instance => {
    const { Annotations, annotManager, docViewer } = instance;

    docViewer.on('documentLoaded', async() => {
      const fileAttachmentAnnot = new Annotations.FileAttachmentAnnotation();
      fileAttachmentAnnot.PageNumber = 1;
      fileAttachmentAnnot.X = 100;
      fileAttachmentAnnot.Y = 150;
      fileAttachmentAnnot.Author = annotManager.getCurrentUser();

      const { data, mimeType, filename } = await getFileData(filePath);
      await fileAttachmentAnnot.setFileData(data, mimeType, filename);

      annotManager.addAnnotation(fileAttachmentAnnot);
      annotManager.redrawAnnotation(fileAttachmentAnnot);
    });
  });


const getFileData = async(filePath) => {
  const response = await fetch(filePath);
  const blob = await response.blob();

  return new Promise((resolve) => {
    const reader = new FileReader();

    reader.addEventListener('load', (e) => {
      const data = e.target.result;

      resolve({
        data,
        mimeType: response.headers.get('Content-Type'),
        filename: 'download.pdf',
      });
    });

    reader.readAsArrayBuffer(blob);
  });
};
WebViewer(...)
  .then(instance => {
    const { 
      Annotations, 
      annotationManager, 
      documentViewer 
    } = instance.Core;

    documentViewer.on('documentLoaded', async() => {
      const fileAttachmentAnnot = new Annotations.FileAttachmentAnnotation();
      fileAttachmentAnnot.PageNumber = 1;
      fileAttachmentAnnot.X = 100;
      fileAttachmentAnnot.Y = 150;
      fileAttachmentAnnot.Author = annotationManager.getCurrentUser();

      const { data, mimeType, filename } = await getFileData(filePath);
      await fileAttachmentAnnot.setFileData(data, mimeType, filename);

      annotationManager.addAnnotation(fileAttachmentAnnot);
      annotationManager.redrawAnnotation(fileAttachmentAnnot);
    });
  });


const getFileData = async(filePath) => {
  const response = await fetch(filePath);
  const blob = await response.blob();

  return new Promise((resolve) => {
    const reader = new FileReader();

    reader.addEventListener('load', (e) => {
      const data = e.target.result;

      resolve({
        data,
        mimeType: response.headers.get('Content-Type'),
        filename: 'download.pdf',
      });
    });

    reader.readAsArrayBuffer(blob);
  });
};

Other examples

Creating rectangle annotations
To create a rectangle annotation.

Creating stamp annotations
To create a stamp annotation.

Creating free text annotations
To create a free text annotation.

Creating highlight annotations
To create a highlight annotation.

Creating custom annotations
To create a customized annotation.