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.
