Show or hide annotations in PDF Viewer

13 Feb 20262 minutes to read

Overview

This guide shows how to temporarily hide annotations and restore them later in the JavaScript PDF Viewer. This is useful for presenting a clean view of the document while preserving annotation data for later use.

How to Toggle Annotation Visibility

Step 1: Follow the steps in the Get started with JavaScript ES5 PDF Viewer guide to create a sample.

Step 2: Create Toggle Buttons in Your HTML File

Add button elements in your HTML file that will trigger the show and hide functionality.

<button id="hideBtn">Hide Annotations</button>
<button id="unhideBtn">Unhide Annotations</button>
<div id="PdfViewer" style="height:500px;width:100%;"></div>

Step 3: Initialize the PDF Viewer with Required Modules

In your JavaScript file, initialize the PDF Viewer with necessary modules including the Annotation module.

let exportObject = null;
var pdfviewer = new ej.pdfviewer.PdfViewer({
    resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
});
ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print,
    ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation,
    ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
pdfviewer.appendTo('#PdfViewer');

Step 4: Implement the Show/Hide Annotation Functionality

Add the code to handle the show and hide functionality of annotations by exporting and importing them as needed.

// Function to hide annotations
function HideAnnotations() {
    pdfviewer.exportAnnotationsAsObject().then(function(value) {
        exportObject = value;
        pdfviewer.deleteAnnotations();
    });
}

// Function to unhide annotations
function UnHideAnnotations() {
    pdfviewer.importAnnotation(JSON.parse(exportObject));
}

// Add event listeners to buttons
document.getElementById('hideBtn').addEventListener('click', HideAnnotations);
document.getElementById('unhideBtn').addEventListener('click', UnHideAnnotations);

Conclusion

These steps add the ability to toggle annotation visibility in a PDF Viewer application for selective viewing.

View sample in GitHub