Control PDF Annotations Visibility in PDF Viewer

1 Jan 20258 minutes to read

Overview

This guide demonstrates how to control the visibility of PDF annotations in documents loaded and saved using the Syncfusion PDF Viewer. This process allows the annotations to be visible only in specific viewers, such as the Syncfusion PDF Viewer.

How to Control Annotation Visibility

Step 1: Follow the steps provided in the link to create a simple PDF Viewer sample.

Step 2: Set Up Your Angular Component

Create an Angular component and update the template to include a button that triggers the download operation. Additionally, create a function to save the document with the PDF annotation flag set to noView.

Standalone

import { Component, OnInit} from '@angular/core';
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  FormFieldsService,
  FormDesignerService,
  PrintService,
  StickyNotesSettings,
  InkAnnotationSettings,
  HandWrittenSignatureSettings,
  DisplayMode,
  CustomStampSettings,
  StampSettings,
  StandardBusinessStampItem,
  SignStampItem,
  DynamicStampItem,
  FreeTextSettings,
  HighlightSettings,
  UnderlineSettings,
  StrikethroughSettings,
  LineSettings,
  ArrowSettings,
  RectangleSettings,
  CircleSettings,
  PolygonSettings,
  VolumeSettings,
  RadiusSettings,
  AreaSettings,
  PerimeterSettings,
  DistanceSettings,
  LoadEventArgs,
  PdfViewerComponent,

} from '@syncfusion/ej2-angular-pdfviewer';

// Import PdfAnnotationFlag and PdfDocument from the Syncfusion PDF library. 
import { PdfAnnotationFlag, PdfDocument, PdfPage } from '@syncfusion/ej2-pdf';

@Component({
  selector: 'app-root',
  template: `
    <div class="content-wrapper">
      <button (click)="save()" style="margin-bottom: 20px;">Download</button>
      <ejs-pdfviewer 
        id="pdfViewer"
        [documentPath]="document" 
        [resourceUrl]="resourceUrl"
        (documentLoad)='documentLoaded($event)' 
        style="height: 640px; display: block;">
      </ejs-pdfviewer>
    </div>
  `,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    FormFieldsService,
    FormDesignerService,
    PrintService
  ]
})
export class AppComponent implements OnInit {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/annotations-v1.pdf';
  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib';

  documentLoaded(e: LoadEventArgs): void {
    var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];
    
    //Code snippet to add basic annotations. You can also include other annotations as needed.
        viewer.annotation.addAnnotation("Highlight", {
            bounds: [{ x: 97, y: 610, width: 350, height: 14 }],
            pageNumber: 1
        } as HighlightSettings);
        viewer.annotation.addAnnotation("Underline", {
            bounds: [{ x: 97, y: 723, width: 353.5, height: 14 }],
            pageNumber: 1
        } as UnderlineSettings);
        viewer.annotation.addAnnotation("Strikethrough", {
            bounds: [{ x: 97, y: 836, width: 376.5, height: 14 }],
            pageNumber: 1
        } as StrikethroughSettings);
    }

ngOnInit(): void { 

}
save() {
  // Get the PDF viewer instance from the DOM element
  var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];

  // Save the PDF document as a Blob
  viewer.saveAsBlob().then((blob: Blob) => {
    const reader = new FileReader();
    
    reader.onload = () => {
      // Convert Blob data to a Base64 encoded string
      let base64data = reader.result as string;

      // Extract the Base64 string from the Data URL
      const base64EncodedData = base64data.split('base64,')[1];

      // Create a PdfDocument instance with the Base64 data
      const document1 = new PdfDocument(base64EncodedData);

      // Iterate over each page and annotation to modify the annotation flags
      for (let i = 0; i < document1.pageCount; i++) {
        const page = document1.getPage(i);
        for (let j = 0; j < page.annotations.count; j++) {
          const annot = page.annotations.at(j);
          
          // Set the annotation flag to noView
          annot.flags |= PdfAnnotationFlag.noView;
        }
      }

      // Save the modified document as a Blob
      document1.saveAsBlob().then((modifiedBlob: { blobData: Blob }) => {
        const internalReader = new FileReader();
        
        internalReader.onload = () => {
          // Convert the modified Blob data to a Base64 encoded string
          const modifiedBase64 = internalReader.result as string;
          
          // Create a link to download the modified PDF
          const downloadLink = document.createElement('a');
          downloadLink.href = modifiedBase64;
          downloadLink.download = 'modified.pdf';
          downloadLink.click();
        };

        // Read the modified Blob data as a Data URL
        internalReader.readAsDataURL(modifiedBlob.blobData);
      });
    };

    // Read the original Blob data as a Data URL
    reader.readAsDataURL(blob);
  });
}
}

By following these steps, the annotations in a PDF document can be set to be visible in the Syncfusion PDF Viewer, providing control over annotation visibility based on different platforms.

View sample in GitHub