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

Measurement

play_arrow

PDF.js Express REST API

play_arrow

XFDF format

According to the XFDF specification:

XFDF (XML Forms Data Format) is a format for representing forms data and annotations in a PDF document. XFDF is the XML version of Forms Data Format (FDF), a simplified version of PDF for representing forms data and annotations.

Examples

<?xml version="1.0" encoding="UTF-8" ?>
<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
  <fields>
    <field name="ACombo"><value>Red</value></field>
  </fields>
  <annots>
    <square subject="Rectangle" page="0" rect="306.01,744.85,408.98,775.94" flags="print" name="447c49b7-5e50-4b13-adc8-c291102466e6" title="Guest" date="D:20171226120150-08'00'" color="#000000" width="5" creationdate="D:20171226120147-08'00'">
      <popup flags="print,nozoom,norotate" page="0" rect="0,767,112.5,842" open="no"/>
    </square>
  </annots>
</xfdf>

The fields section contains the names and values of any form fields in the document. In annots all of the annotation data is found.

In PDF.js Express Web Viewer

PDF.js Express provides methods to import annotations into the viewer from their XFDF data as well as export all currently loaded annotations as XFDF using AnnotationManager.

// import synchronously
annotManager.importAnnotations(xfdfData);

// import asynchronously
annotManager.importAnnotationsAsync(xfdfData, function(annotations) {
  console.log('finished loading');
});

// get all annotation and form data
var xfdfData = await annotManager.exportAnnotations();

// only get non-link annotation data
var annotData = await annotManager.exportAnnotations({
  widgets: false,
  fields: false,
  links: false
});

// only get XFDF data for specified annotations
await annotManager.exportAnnotations({
  annotList: [annot1, annot2]
});

PDF.js Express also provides a way to get the XFDF data for annotations that have changed recently in the viewer. AnnotationManager.getAnnotCommand will get the XFDF data for annotations that have been added, modified or deleted since the last time getAnnotCommand was called.

A command looks something like this:

<?xml version="1.0" encoding="UTF-8" ?>
<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
<fields />
<add>
  <text subject="Comment" page="0" rect="262.13,465.90,285.38,489.15" flags="print,nozoom,norotate" name="651eab92-9258-f676-b5c0-9767cb1ab932" title="Guest" date="D:20171226125004-08'00'" color="#FFFF00" opacity="0.5" creationdate="D:20171226125004-08'00'" icon="Comment">
    <popup flags="print,nozoom,norotate" page="0" rect="0,573,112.5,648" open="no"/>
  </text>
</add>
<modify>
  <text subject="Comment" page="0" rect="110.47,367.84,133.72,391.09" flags="print,nozoom,norotate" name="e89d6405-fdcc-aa2b-9ebb-cc9d8a525ca2" title="Guest" date="D:20171226125247-08'00'" color="#FFFF00" opacity="0.5" creationdate="D:20171226125238-08'00'" icon="Comment">
    <popup flags="print,nozoom,norotate" page="0" rect="0,573,112.5,648" open="no"/>
  </text>
</modify>
<delete>
  <id page="0">e2976b7b-075b-cad9-0f9f-fe0de613a543</id>
</delete>
</xfdf>

Commands can be imported using AnnotationManager.importAnnotCommand. This is the technique that is used in the realtime collaboration example.

To merge annotations directly into the document PDF.js Express offers a REST API. This can also be used when importing pre-existing annotation made within a PDF.