- Overview
- How to Control Annotation Visibility
Contact Support
Control PDF Annotations Visibility in PDF Viewer
7 May 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
.
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.