Exporting Inline Appearances for Annotations

Annotations inside a PDF document have a number of different properties that define how they are rendered. For example their fill and stroke color, opacity, stroke thickness, etc. Annotations can also define an appearance (AP key in the PDF spec). An appearance is basically a set of drawing instructions that should be used to render an annotation’s appearance and any properties (other than the position) should be ignored.

Note that appearances are drawn by default, but they are not always present and can sometimes be different than how we expect an annotation to appear based on the properties alone.

By default WebViewer will export an appearance as a reference to the object number in the PDF that the annotation exists in. Since it doesn't include the entire appearance data this means the XFDF string is much shorter. However this also means that if you try to import this XFDF into a different document then the appearance reference will no longer exist and the appearance will not be shown.

WebViewer provides an option to exportAnnotations called generateInlineAppearances. When this option is used then the entire appearance data will be included inline in the XFDF string. This means that if you import the string into another PDF file it will work just fine. However this also means that the XFDF string will be quite a bit longer.

The following code snippet can be used to export annotations with inline appearances.

JavaScript
const xfdfString = await instance.Core.annotationManager.exportAnnotations({ generateInlineAppearances: true });
Copy

As an example if you only wanted to export the XFDF for callout annotations and include the inline appearances you could do it like this.

JavaScript
var annotList = await instance.Core.annotationManager.getAnnotationsList();
const result = annotList.filter((annot) => annot.IT === 'FreeTextCallout');

const xfdfString = await instance.Core.annotationManager.exportAnnotations({ annotationList: result,generateInlineAppearances: true });
Copy

If you are using the full API with a PDFDoc object then inline appearances can be generated using the code below.

JavaScript
const pdfDoc = await instance.Core.documentViewer.getDocument().getPDFDoc();
const fdfDoc = await pdfDoc.fdfExtract(1);
const exportOptions = await Core.PDFNet.FDFDoc.createXFDFExportOptions();
exportOptions.setWriteAnnotationAppearance(true);
const xfdfStr = await fdfDoc.saveAsXFDFAsStringWithOptions(exportOptions);
Copy

After exporting the XFDF it can be imported back into WebViewer using any of the normal importing functions. For example you can use importAnnotations as shown below

JavaScript
await instance.Core.annotationManager.importAnnotations(xfdfString);
Copy

Note that custom appearances can't currently be exported inline. See guide for more information about custom appearances .