Foxit PDF SDK for Web

Advanced Annotation Handling with Foxit PDF SDK for Web

Foxit PDF SDK for Web provides two methods to set annotation flags; annotManager.setViewerAnnotFlag() and annot.setFlags(). These two options meet different use cases.

  • annotManager.setViewerAnnotFlag() sets annotation flags to lock the annotations of other users at the application level. No settings or changes will be saved to the PDF.
  • annot.setFlags(): sets annotation flags at document level. Any settings or changes will be saved to the PDF.

In terms of choosing one of these methods, this depends entirely on your demands. If you have a user system and need to lock the annotations of other users and grant part/full annotation access to some users, application level flags are your best choice. Document level flags are globally-based settings, which restrict all users based on the flag’s rules.

When both annotation flags are set at application and document level, PDF SDK for Web will combine the two settings and use a union set.

Please follow the instructions below to use the different annotation functionality.

1) How to set up annotation flag constants:

var AnnotFlagEnum = {
            invisible: 1,
            hidden: 2,
            print: 4,
            noZoom: 8,
            noRotate: 16,
            noView: 32,
            readOnly: 64,
            locked: 128,
            toggleNoView: 256,
            lockedContents: 512,
        };

2) How to hide all annotations:

pdfui.getAnnotManager().then(function(annotManager) {
    annotManager.setViewerAnnotFlag(function(annot) {
        return AnnotFlagEnum.hidden;
    });
    pdfui.redraw(true);
})

3) How to hide annotations on specific pages:

pdfui.getAnnotManager().then(function(annotManager) {
    annotManager.setViewerAnnotFlag(function(annot) {
        if(annot.page.getIndex() === 0) { //the judgement here can be edited by actual situation.
            return 0;
        }
        return AnnotFlagEnum.hidden;
    });
    pdfui.redraw(true);
})

4) How to hide a specific annotation:

pdfui.getAnnotManager().then(function(annotManager) {
    annotManager.setViewerAnnotFlag(function(annot) {
        if(annot.getId() === 'your annotation id ') {
            return AnnotFlagEnum.hidden;
        }
        return 0;
    });
    pdfui.redraw(true);
})

5) How to hide only existing annotations (It will not hide newly added annotations):

var newAnnotationIds = [];
pdfui.getAnnotManager().then(function(annotManager) {
    annotManager.setViewerAnnotFlag(function(annot) {
        if(newAnnotationIds.indexOf(annot.getId()) > -1) {
            return 0;
        }
        return AnnotFlagEnum.hidden;
    });
    pdfui.redraw(true);
})
pdfui.addViewerEventListener(PDFViewCtrl.Events.annotationAdd, function(newAnnotations) {
    newAnnotations.forEach(function(annot) {
        newAnnotationIds.push(annot.getId());
    });
})

Updated on August 16, 2021

Was this article helpful?
Thanks for your feedback. If you have a comment on how to improve the article, you can write it here: