PdfViewerComponent
23 Sep 202524 minutes to read
ejs-pdfviewer represents the Angular PdfViewer Component.
<ejs-pdfviewer></ejs-pdfviewer>Properties
DropdownFieldSettings DropdownFieldSettingsModel
Get or set the dropdown field settings.
accessibilityTags AccessibilityTags
Gets the Accessibility Tags object of the pdf viewer.
ajaxRequestSettings AjaxRequestSettingsModel
Defines the ajax Request settings of the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[ajaxRequestSettings]="ajaxSettings"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public ajaxSettings = {
// HTTP header "X-Custom-Header": "Custom header value" // Custom HTTP header
ajaxHeaders: [
{
headerName: "Authorization",
headerValue: "Bearerabcdefghijklmnopqrstuvwxyz",
},
],
withCredentials: false,
};
ngOnInit(): void {}
}annotation Annotation
Gets the annotation object of the pdf viewer.
annotationCollection any[]
Get the Loaded document annotation Collections in the PdfViewer control.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<button #btn1 (click)="annotCollection()">Log Annotation Collection</button>
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource= "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
annotCollection() {
let viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
// Logs the annotation collection.
console.log(viewer.annotationCollection);
}
}annotationDrawingOptions AnnotationDrawingOptionsModel
Options for configuring line type annotation drawing behavior.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[annotationDrawingOptions]="annotationDrawingOptions"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
public annotationDrawingOptions = {
enableLineAngleConstraints: true,
restrictLineAngleTo: 90
};
ngOnInit(): void {}
}annotationSelectorSettings AnnotationSelectorSettingsModel
Defines the settings of annotation selector.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
CursorType,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[annotationSelectorSettings]="annotationSelection"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Change the annotation selection settings.
public annotationSelection = {
selectionBorderColor: '#0000ff',
resizerBorderColor: '#ff0000',
resizerFillColor: '#4070ff',
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: 'Circle',
selectorLineDashArray: [5, 6],
resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab
};
ngOnInit(): void {}
}annotationSettings AnnotationSettingsModel
Defines the settings of the annotations.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[annotationSettings]="annotation"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Change the annotation settings.
public annotation = {
author: "XYZ",
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
skipPrint: false,
skipDownload: false,
allowedInteractions: ["Resize"],
};
ngOnInit(): void {}
}areaSettings AreaSettingsModel
Defines the settings of area annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
CursorType,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[areaSettings]="area"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Change the area annotation settings.
public area = {
opacity: 1,
fillColor: "#ffffff00",
strokeColor: "#ff0000",
author: "XYZ",
thickness: 1,
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
annotationSelectorSettings: {
selectionBorderColor: "#0000ff",
resizerBorderColor: "#000000",
resizerFillColor: "#4070ff",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Circle",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab,
},
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}arrowSettings ArrowSettingsModel
Defines the settings of arrow annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
CursorType,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[arrowSettings] = "arrow"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Change the arrow annotation settings.
public arrow = {
opacity: 1,
fillColor: "#9c2592",
strokeColor: "#ff0000",
author: "XYZ",
thickness: 1,
borderDashArray: 1,
lineHeadStartStyle: "Closed",
lineHeadEndStyle: "Closed",
annotationSelectorSettings: {
selectionBorderColor: "#0000ff",
resizerBorderColor: "#000000",
resizerFillColor: "#FF4081",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Square",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab,
},
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}bookmark BookmarkView
Gets the bookmark view object of the pdf viewer.
checkBoxFieldSettings CheckBoxFieldSettingsModel
Get or set the check box field settings.
circleSettings CircleSettingsModel
Defines the settings of circle annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
CursorType,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[circleSettings] = "circle"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Change the circle annotation settings.
public circle = {
opacity: 1,
fillColor: "#9c2592",
strokeColor: "#ff0000",
author: "XYZ",
thickness: 1,
annotationSelectorSettings: {
selectionBorderColor: "#0000ff",
resizerBorderColor: "#ff0000",
resizerFillColor: "#FF4081",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Square",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab,
},
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}commandManager CommandManagerModel
Defines a set of custom commands and binds them with a set of desired key gestures.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
PdfKeys,
ModifierKeys
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
resourceUrl="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
style="height:640px;display:block"
(keyboardCustomCommands)="keyboardCustomCommands($event)"
[commandManager]="commandManager"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
// Command manager for custom keyboard shortcuts
public commandManager = {
keyboardCommand: [
{
name: 'customCopy',
gesture: {
pdfKeys: PdfKeys.G,
modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
}
},
{
name: 'customPaste',
gesture: {
pdfKeys: PdfKeys.H,
modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
}
}
]
};
public keyboardCustomCommands(args: any): void {
console.log(args);
}
ngOnInit(): void {}
}
``
Defaults to *{}*
<h3 class="doc-prop-wrapper" id="contextmenuoption" data-Path="contextmenuoption-contextMenuOption"><span class='doc-prop-name'>contextMenuOption</span>
<span class="doc-prop-type"><span class="exclude-righttoc"><a href="./contextmenuaction" class="doc-type-link exclude-righttoc">ContextMenuAction</a></span></span>
</h3>
Specifies the state of the ContextMenu in the PDF document.
```ts
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[contextMenuOption]="openContext"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Change the settings of the context menu option.
public openContext = "None";
ngOnInit(): void {}
}Defaults to RightClick
contextMenuSettings ContextMenuSettingsModel
Defines the context menu settings.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
ContextMenuItem,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[contextMenuSettings]="contextMenu"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
public contextMenu = {
contextMenuAction: "RightClick",
contextMenuItems: [
ContextMenuItem.Comment,
ContextMenuItem.Copy,
ContextMenuItem.Cut,
ContextMenuItem.Delete,
ContextMenuItem.Highlight,
ContextMenuItem.Paste,
ContextMenuItem.Properties,
ContextMenuItem.ScaleRatio,
ContextMenuItem.Strikethrough,
ContextMenuItem.Underline,
],
};
ngOnInit(): void {}
}currentPageNumber number
Returns the current page number of the document displayed in the PdfViewer control.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<button #btn1 (click)="currentPage()">Current Page Number</button>
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
currentPage() {
var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];
// Get the current page number of the PDF viewer
const currentPage = viewer.currentPageNumber;
console.log('Current page number:' + currentPage);
}
ngOnInit(): void {}
}Defaults to 0
customFonts string[]
Specifies a collection of font names as strings. These fonts must be located in the resourceUrl folder.
Defaults to []
customStamp CustomStampModel[]
Defines the stamp items of the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[customStampSettings]="customStampSettings"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Add your custom stamp image source as base64 image.
// Simple custom stamp configuration
public customStampSettings = {
isAddToMenu: true,
enableCustomStamp: true,
customStamps:[
{
customStampName: "SampleSignature",
customStampImageSource: "data:image/png;base64, Syncfusion pdf viewer",
}
],
}
ngOnInit(): void {}
}customStampSettings CustomStampSettingsModel
Defines the settings of customStamp annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[customStampSettings]="customStamp"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Change the custom stamp settings.
public customStamp = {
opacity: 1,
author: "XYZ",
width: 100,
height: 100,
left: 200,
top: 200,
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
enableCustomStamp: true,
allowedInteractions: ["None"],
isPrint: true,
};
ngOnInit(): void {}
}dateTimeFormat string
Customize desired date and time format
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[dateTimeFormat]="dateTime"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Change the date time format.
public dateTime = "yyyy-MM-dd HH:mm:ss";
ngOnInit(): void {}
}designerMode boolean
Enable or disable the interaction of form fields in the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[designerMode]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
disableContextMenuItems ContextMenuItem[]
Disables the menu items in the context menu.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
ContextMenuItem,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[disableContextMenuItems]="disableContext"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Show or hide the context menu items.
public disableContext = [ContextMenuItem.Copy, ContextMenuItem.Highlight];
ngOnInit(): void {}
}Defaults to []
distanceSettings DistanceSettingsModel
Defines the settings of distance annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
CursorType,
AnnotationResizerLocation,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[distanceSettings]="distance"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Change the distance annotation settings.
public distance = {
opacity: 1,
fillColor: "#ffffff00",
strokeColor: "#ff0000",
author: "Guest",
thickness: 1,
borderDashArray: 1,
lineHeadStartStyle: "Closed",
lineHeadEndStyle: "Closed",
annotationSelectorSettings: {
selectionBorderColor: "#0000ff",
resizerBorderColor: "#000000",
resizerFillColor: "#FF4081",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Square",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab,
},
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
leaderLength: 40,
resizeCursorType: CursorType.move,
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}documentPath string
Sets the PDF document path for initial loading.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}downloadFileName string
Gets or sets the download file name in the PdfViewer control.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[downloadFileName]="DownloadDocument"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
public DownloadDocument = "documentDownloaded";
ngOnInit(): void {}
}enableAccessibilityTags boolean
Determines whether accessibility tags are enabled or disabled.
Accessibility tags can help make web content more accessible to users with disabilities.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AccessibilityTagsService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[enableAccessibilityTags]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AccessibilityTagsService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableAnnotation boolean
Enable or disable the annotation in the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableAnnotation]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableAnnotationToolbar boolean
Enable or disable the annotation toolbar and the PDF document is loaded with annotations in the PDF Viewer control initially.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableAnnotationToolbar]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableAutoComplete boolean
Enable or disables the auto complete option in form documents.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableAutoComplete]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableBookmark boolean
Enables or disables the bookmark view in the PDF viewer
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableBookmark]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableBookmarkStyles boolean
Enables or disables the bookmark styles in the PDF viewer
Defaults to false
enableCommentPanel boolean
Enable or disables the Comment Panel of PdfViewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableCommentPanel]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableDesktopMode boolean
Gets or sets a boolean value to show or hide desktop toolbar in mobile devices.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableDesktopMode]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
enableDownload boolean
Enable or disables the download option of PdfViewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableDownload]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableFormDesigner boolean
Show or hide the form designer tool in the main toolbar of the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableFormDesigner]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableFormDesignerToolbar boolean
Enable or disable the form designer toolbar and the PDF document is loaded with from fields in the PDF Viewer control initially.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableFormDesignerToolbar]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableFormFields boolean
Enable or disable the form fields in the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableFormFields]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableFormFieldsValidation boolean
Enable or disable the form fields validation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableFormFieldsValidation]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
enableFreeText boolean
Enable or disable the free text annotation in the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableFreeText]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableHandwrittenSignature boolean
Enables or disables the handwritten signature in PDF document.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableHandwrittenSignature]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableHyperlink boolean
Enables or disables the hyperlinks in PDF document.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableHyperlink]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableImportAnnotationMeasurement boolean
Enable or disable the customization of measure values in PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableImportAnnotationMeasurement]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableInkAnnotation boolean
If it is set as false, then the ink annotation support in the PDF Viewer will be disabled. By default it is true.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableInkAnnotation]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableLocalStorage boolean
Enable or disable session storage for PDF Viewer data.
When true, the PDF Viewer stores data in an internal collection instead of session storage.
When false, the default session storage mechanism is used.
Remarks:
- Setting
enableLocalStoragetotruestores all session-specific data (e.g., form fields, annotations, signatures) in memory, increasing memory usage based on the document size and content complexity. - Larger documents or those with more interactive elements will consume more memory.
- Ensure proper cleanup by destroying the PDF Viewer instance when no longer needed to avoid memory leaks.
Defaults to false
enableMagnification boolean
Enable or disable the Magnification module of PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableMagnification]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableMeasureAnnotation boolean
Enable or disable the calibrate annotation in the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableMeasureAnnotation]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableMultiLineOverlap boolean
Enable or disable the multi line text markup annotations in overlapping collections.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="service"
[documentPath]="document"
[enableMultiLineOverlap]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
enableMultiPageAnnotation boolean
Enables or disables the multi-page text markup annotation selection in UI.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableMultiPageAnnotation]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
enableNavigation boolean
Enable or disable the Navigation module of PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableNavigation]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableNavigationToolbar boolean
Enable or disables the Navigation toolbar of PdfViewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableNavigationToolbar]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enablePageOrganizer boolean
add or remove the page organizer in the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
PageOrganizerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enablePageOrganizer]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
PageOrganizerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enablePersistence boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
enablePinchZoom boolean
Enable or disable the pinch zoom option in the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enablePinchZoom]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enablePrint boolean
Enable or disables the print option of PdfViewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enablePrint]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enablePrintRotation boolean
If it is set as FALSE, will suppress the page rotation of Landscape document on print action. By default it is TRUE.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enablePrintRotation]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableRtl boolean
Enable or disable rendering component in right to left direction.
Defaults to false
enableShapeAnnotation boolean
Enable or disable the shape annotation in the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableShapeAnnotation]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableShapeLabel boolean
Enable or disable the Label for shapeAnnotations of PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableShapeLabel]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
enableStampAnnotations boolean
Enables and disable the stamp annotations when the PDF viewer control is loaded initially.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableStampAnnotations]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableStickyNotesAnnotation boolean
Enables and disable the stickyNotes annotations when the PDF viewer control is loaded initially.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableStickyNotesAnnotation]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableTextMarkupAnnotation boolean
Enable or disable the text markup annotation in the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableTextMarkupAnnotation]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableTextMarkupResizer boolean
Enable or disable the text markup resizer to modify the bounds in UI.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableTextMarkupResizer]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
enableTextSearch boolean
Enable or disable the text search in the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableTextSearch]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableTextSelection boolean
Enable or disable the text selection in the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableTextSelection]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableThumbnail boolean
Enables or disables the thumbnail view in the PDF viewer
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableThumbnail]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableToolbar boolean
Enable or disables the toolbar of PdfViewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[enableToolbar]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
enableZoomOptimization boolean
Enable or disable the zoom optimization mode in PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[enableZoomOptimization]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
exportAnnotationFileName string
Gets or sets the export annotations JSON file name in the PdfViewer control.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[exportAnnotationFileName]="exportAnnotFileName"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
public exportAnnotFileName = "exportedAnnotation";
ngOnInit(): void {}
}extractTextOption ExtractTextOption
Enables different levels of extract text for the Standalone PDF Viewer.
The choice of extractTextCompleted determines the content of the textData.
Options:
-
ExtractTextOption.TextAndBounds: Indicates that both plain text and text with bounds (layout information) are returned.
This is the default behavior, providing both the extracted text and its positional data.
Use this option when you need both the textual content and its layout information for further processing or analysis. -
ExtractTextOption.TextOnly: Indicates that only plain text is extracted and returned.
This option does not include any additional bounds information. -
ExtractTextOption.BoundsOnly: Indicates that text is returned along with layout information, such as bounds or coordinates.
This option does not include plain text and is useful when only positional data is required. -
ExtractTextOption.None: Indicates that no text information is returned. This option is not applicable for the ExtractText method and is only used in the extractTextCompleted event when no text data is available.
This property is used to determine how textData should be managed during the extractTextCompleted event.
Defaults to ‘TextAndBounds’
fileName string
Gets or sets the document name loaded in the PdfViewer control.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<button #btn1 (click)="name()">Log file name</button>
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
name() {
let viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
// Logs the file name.
console.log(viewer.fileName);
}
}formDesigner FormDesigner
Gets the FormDesigner object of the pdf viewer.
formFieldCollections FormFieldModel[]
Gets the form fields present in the loaded PDF document. It used to get the form fields id, name, type and it’s values.
freeTextSettings FreeTextSettingsModel
Defines the settings of free text annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
FontStyle
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[freeTextSettings]="freetext"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Change the freetext annotation settings.
public freetext = {
opacity: 1,
fillColor: "#ffffff00",
borderColor: "#4070ff",
author: "XYZ",
borderWidth: 1,
width: 151,
fontSize: 16,
height: 24.6,
fontColor: "#000",
fontFamily: "Helvetica",
defaultText: "Type Here",
textAlignment: "Right",
fontStyle: FontStyle.Italic,
allowTextOnly: false,
annotationSelectorSettings: {
selectionBorderColor: "#03497C",
resizerBorderColor: "#000000",
resizerFillColor: "#FF4081",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Circle",
selectorLineDashArray: [],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: null,
},
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
allowedInteractions: ["None"],
isPrint: true,
isReadonly: false,
enableAutoFit: false,
};
ngOnInit(): void {}
}handWrittenSignatureSettings HandWrittenSignatureSettingsModel
Defines the settings of handWrittenSignature.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
DisplayMode,
CursorType,
AnnotationResizerLocation
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[handWrittenSignatureSettings]="handWritten"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Change the hand written signature settings.
public handWritten = {
signatureItem: ["Signature", "Initial"],
saveSignatureLimit: 1,
saveInitialLimit: 1,
opacity: 1,
strokeColor: "#000000",
width: 150,
height: 100,
thickness: 1,
annotationSelectorSettings: {
selectionBorderColor: "#03497C",
resizerBorderColor: "#000000",
resizerFillColor: "#FF4081",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Circle",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab,
},
allowedInteractions: ["Resize"],
signatureDialogSettings: {
displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
hideSaveSignature: false,
},
initialDialogSettings: {
displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
hideSaveSignature: false,
},
};
ngOnInit(): void {}
}height string|number
Defines the scrollable height of the PdfViewer control.
Defaults to ‘auto’
hideSaveSignature boolean
Gets or sets a boolean value to show or hide the save signature check box option in the signature dialog.
FALSE by default
Defaults to false
highlightSettings HighlightSettingsModel
Defines the settings of highlight annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[highlightSettings]="highlight"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
public highlight = {
opacity: 1,
color: "#DAFF56",
author: "XYZ",
annotationSelectorSettings: {
selectionBorderColor: "#03497C",
resizerBorderColor: "#000000",
resizerFillColor: "#FF4081",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Square",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
},
isLock: false,
enableMultiPageAnnotation: false,
enableTextMarkupResizer: false,
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}hyperlinkOpenState LinkTarget
Specifies the open state of the hyperlink in the PDF document.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[hyperlinkOpenState]="openLink"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
public openLink = "NewWindow";
ngOnInit(): void {}
}Defaults to CurrentTab
initialDialogSettings SignatureDialogSettingsModel
Get or set the signature dialog settings for initial field.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
DisplayMode,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[handWrittenSignatureSettings]="handWrittenSignatureSettings"
[initialFieldSettings]="initialFieldSettings"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Change the initial dialog settings.
public handWrittenSignatureSettings = {
initialDialogSettings: {
displayMode: DisplayMode.Draw | DisplayMode.Text,
hideSaveSignature: true,
},
};
public initialFieldSettings = {
initialDialogSettings: {
displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
hideSaveSignature: true,
},
};
ngOnInit(): void { }
}initialFieldSettings InitialFieldSettingsModel
Get or set the initial field settings.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
DisplayMode,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allura">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sacramento">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inspiration">
<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[initialFieldSettings]="initialSettings"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Change the signature dialog settings.
public initialSettings = {
typeInitialFonts: ['Allura', 'Tangerine', 'Sacramento', 'Inspiration']
};
ngOnInit(): void {}
}initialRenderPages number
Initially renders the first N pages of the PDF document when the document is loaded.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[initialRenderPages]="4"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
}Defaults to 2
inkAnnotationSettings InkAnnotationSettingsModel
Defines the ink annotation settings for PDF Viewer.It used to customize the strokeColor, thickness, opacity of the ink annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
DisplayMode,
CursorType,
AnnotationResizerLocation,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[inkAnnotationSettings]="inkAnnotation"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
// Change the ink annotation settings.
public inkAnnotation = {
author: "XYZ",
opacity: 1,
strokeColor: "#ff0000",
thickness: 1,
annotationSelectorSettings: {
selectionBorderColor: "#03497C",
resizerBorderColor: "#000000",
resizerFillColor: "#FF4081",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Circle",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab,
},
isLock: false,
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}interactionMode InteractionMode
Sets the interaction mode of the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[interactionMode]="interactMode"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
public interactMode = "Pan";
ngOnInit(): void {}
}Defaults to TextSelection
isAnnotationToolbarVisible boolean
Opens the annotation toolbar when the PDF document is loaded in the PDF Viewer control initially
and get the annotation Toolbar Visible status.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[isAnnotationToolbarVisible]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
isBookmarkPanelOpen boolean
Gets or sets a boolean value to show or hide the bookmark panel while loading a document.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[isBookmarkPanelOpen]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
isCommandPanelOpen boolean
If it set as true, then the command panel show at initial document loading in the PDF viewer
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[isCommandPanelOpen]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
isDocumentEdited boolean
Checks whether the PDF document is edited.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<button #btn1 (click)="documentEdited()">Is document edited</button>
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
documentEdited() {
let viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
// Logs whether the PDF document is edited.
console.log("Is the document edited - " + viewer.isDocumentEdited);
}
}isExtractText boolean
Enable or disable the text extract from the PDF viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[isExtractText]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
isFormDesignerToolbarVisible boolean
Opens the form designer toolbar when the PDF document is loaded in the PDF Viewer control initially
and get the form designer Toolbar Visible status.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
[isFormDesignerToolbarVisible]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
isFormFieldDocument boolean
Enable if the PDF document contains form fields.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<button #btn1 (click)="isFormFieldDocument()">
Show whether form fields present in the document
</button>
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resource"
[documentPath]="document"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resource =
"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
isFormFieldDocument() {
let viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
// Logs the presence of form fields in a document.
console.log(
"Is form fields exist in the document - " + viewer.isFormFieldDocument
);
}
}Defaults to false
isMaintainSelection boolean
Maintain the selection of text markup annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[isMaintainSelection]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
isPageOrganizerOpen boolean
Specifies whether the page organizer dialog will be displayed upon the initial document loading in the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
PageOrganizerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[isPageOrganizerOpen]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
PageOrganizerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
isSignatureEditable boolean
Enables or disable saving Hand Written signature as editable in the PDF.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[isSignatureEditable]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
isThumbnailViewOpen boolean
If it set as true, then the thumbnail view show at initial document loading in the PDF Viewer
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[isThumbnailViewOpen]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
isValidFreeText boolean
Checks if the freeText value is valid or not.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<button #btn1 (click)="freeText()">
Show is free text is valid or not
</button>
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
freeText() {
let viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
// Logs the signature collection.
console.log(viewer.isValidFreeText);
}
}Defaults to false
lineSettings LineSettingsModel
Defines the settings of line annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
CursorType,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[lineSettings] = "line'
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the line annotation settings.
public line = {
opacity: 1,
color: "#9c2592",
fillColor: '#ffffff00',
strokeColor: '#ff0000',
author: "XYZ",
thickness: 1,
borderDashArray: 1,
lineHeadStartStyle: 'None',
lineHeadEndStyle: 'None',
annotationSelectorSettings: {
selectionBorderColor: "blue",
resizerBorderColor: "black",
resizerFillColor: "#FF4081",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Square",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab
},
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
allowedInteractions: ['Resize'],
isPrint: true
};
ngOnInit(): void {}
}listBoxFieldSettings ListBoxFieldSettingsModel
Get or set the listbox field settings.
locale string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ’’
magnification Magnification
Gets the magnification object of the pdf viewer.
maxZoom number
Specifies the maximum allowable zoom level for the control, with a default value of 400.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[maxZoom]="maxZoom"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public maxZoom = 270;
ngOnInit(): void {}
}Defaults to 400
measurementSettings MeasurementSettingsModel
Defines the settings of measurement annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[measurementSettings]="measurement"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the measurement settings.
public measurement = {
conversionUnit: "cm",
displayUnit: "cm",
scaleRatio: 1,
depth: 96,
};
ngOnInit(): void {}
}minZoom number
Specifies the minimum acceptable zoom level for the control, with a default value of 10.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[minZoom]="minZoom"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public minZoom = 45;
ngOnInit(): void {}
}Defaults to 10
navigation Navigation
Gets the navigation object of the pdf viewer.
pageCount number
gets the page count of the document loaded in the PdfViewer control.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<button #btn1 (click)="count()">Page Count</button>
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
count() {
let viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
// Logs the total page count of the loaded document.
console.log("Total page count is - " + viewer.pageCount);
}
}Defaults to 0
pageOrganizer PageOrganizer
Gets the page organizer object of the PDF Viewer.
pageOrganizerSettings PageOrganizerSettingsModel
This property allows for control over various page management functionalities within the PDF Viewer. By setting it to true, users will be able to delete, insert, rotate pages, rearrange pages. Conversely, setting it to false will disable these actions.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
PageOrganizerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[pageOrganizerSettings]="organizerSettings"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
PageOrganizerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the page organizer settings.
public organizerSettings = {
canInsert: true,
canRotate: false,
canDelete: true,
canCopy: true,
canRearrange: true,
canImport: true,
showImageZoomingSlider: true,
imageZoomMin: 1,
imageZoomMax: 5,
imageZoom: 1
};
ngOnInit(): void {}
}passwordFieldSettings PasswordFieldSettingsModel
Get or set the password field settings.
perimeterSettings PerimeterSettingsModel
Defines the settings of perimeter annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
CursorType,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[perimeterSettings]="perimeter"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the perimeter annotation settings.
public perimeter = {
opacity: 1,
fillColor: "#ffffff00",
strokeColor: "#ff0000",
author: "XYZ",
thickness: 1,
borderDashArray: 1,
lineHeadStartStyle: "Open",
lineHeadEndStyle: "Open",
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
annotationSelectorSettings: {
selectionBorderColor: "",
resizerBorderColor: "black",
resizerFillColor: "#4070ff",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Circle",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab,
},
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}polygonSettings PolygonSettingsModel
Defines the settings of polygon annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
CursorType,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[polygonSettings]="polygon"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the polygon annotation settings.
public polygon = {
opacity: 1,
fillColor: "#ffffff00",
strokeColor: "#ff0000",
author: "XYZ",
thickness: 1,
annotationSelectorSettings: {
selectionBorderColor: "blue",
resizerBorderColor: "black",
resizerFillColor: "#FF4081",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Square",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab,
},
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}print Print
Gets the print object of the pdf viewer.
printMode PrintMode
Specifies the print mode in the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[printMode]="print"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public print = "NewWindow";
ngOnInit(): void {}
}Defaults to Default
printScaleFactor number
Specifies the document printing quality. The default printing quality is set to 1.0. This limit varies from 0.5 to 5.0. If an invalid value is specified, the default value of 1.0 will be used. For documents with smaller page dimensions, a higher print quality is recommended.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[printScaleFactor]="printScaleFactor"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public printScaleFactor = 2;
ngOnInit(): void {}
}Defaults to 1.0
radioButtonFieldSettings RadioButtonFieldSettingsModel
Get or set the radio button field settings.
radiusSettings RadiusSettingsModel
Defines the settings of radius annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
CursorType,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[radiusSettings]="radius"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the radius annotation settings.
public radius = {
opacity: 1,
fillColor: "#ffffff00",
strokeColor: "#ff0000",
author: "XYZ",
thickness: 1,
annotationSelectorSettings: {
selectionBorderColor: "blue",
resizerBorderColor: "red",
resizerFillColor: "#4070ff",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Circle",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab,
},
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}rectangleSettings RectangleSettingsModel
Defines the settings of rectangle annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
CursorType,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[rectangleSettings] = "rectangle'
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public rectangle = {
opacity: 1,
fillColor: "#9c2592",
strokeColor: "#ff0000",
author: "XYZ",
thickness: 1,
annotationSelectorSettings: {
selectionBorderColor: "",
resizerBorderColor: "black",
resizerFillColor: "#FF4081",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Square",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab,
},
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}resourceUrl string
Set the resource URL for assets or the public directory. The standalone PDF Viewer will load its custom resources from this URL.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[resourceUrl]="resourceUrl"
[documentPath]="document"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public resourceUrl = "http://localhost:4200/assets/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
ngOnInit(): void {}
}Defaults to ’’
restrictZoomRequest boolean
restrict zoom request.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[restrictZoomRequest]="true"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
}Defaults to false
retryCount number
Specifies the retry count for the failed requests.
Defaults to 1
retryStatusCodes number[]
Specifies the response status codes for retrying a failed request with a “3xx”, “4xx”, or “5xx” response status code.
The value can have multiple values, such as [500, 401, 400], and the default value is 500.
Defaults to [500]
retryTimeout number
Gets or sets the timeout for retries in seconds.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AccessibilityTagsService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[retryCount]="5"
[retryTimeout]="10"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AccessibilityTagsService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
}Defaults to 0
scrollSettings ScrollSettingsModel
Defines the scroll settings.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[scrollSettings]="scrollSet"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the scroll settings.
public scrollSet = {
delayPageRequestTimeOnScroll: 150,
};
ngOnInit(): void {}
}selectedItems SelectorModel
Defines the collection of selected items, size and position of the selector
Defaults to {}
serverActionSettings ServerActionSettingsModel
Defines the settings of the PDF Viewer service.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[serverActionSettings]="serverAction"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public serverAction = {
load: "Load",
renderPages: "RenderPdfPages",
unload: "Unload",
download: "Download",
renderThumbnail: "RenderThumbnailImages",
print: "PrintImages",
renderComments: "RenderAnnotationComments",
importAnnotations: "ImportAnnotations",
exportAnnotations: "ExportAnnotations",
importFormFields: "ImportFormFields",
exportFormFields: "ExportFormFields",
renderTexts: "RenderPdfTexts",
};
ngOnInit(): void {}
}serviceUrl string
Defines the service url of the PdfViewer control.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
}shapeLabelSettings ShapeLabelSettingsModel
Defines the settings of shape label.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[shapeLabelSettings] = 'shapeLabel'
[enableShapeLabel] = 'true';
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public shapeLabel = {
opacity: 1,
fillColor: "#9c2592",
borderColor: "#ff0000",
fontColor: "#000",
fontSize: 16,
labelHeight: 24.6,
labelMaxWidth: 151,
labelContent: "XYZ",
};
ngOnInit(): void {}
}showDigitalSignatureAppearance boolean
Show or hide the digital signature appearance in the document.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[showDigitalSignatureAppearance]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
showNotificationDialog boolean
If it is set as false then error message box is not displayed in PDF viewer control.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[showNotificationDialog]="false"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
}Defaults to true
signatureCollection any[]
Get the Loaded document signature Collections in the PdfViewer control.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<button #btn1 (click)="signCollection()">Log Signature Collection</button>
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
signCollection() {
let viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
// Logs the signature collection.
console.log(viewer.signatureCollection);
}
}signatureDialogSettings SignatureDialogSettingsModel
Get or set the signature dialog settings for signature field.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
DisplayMode,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[signatureDialogSettings]="signatureDialog"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the signature dialog settings.
public signatureDialog = {
displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
hideSaveSignature: true,
};
ngOnInit(): void {}
}signatureFieldSettings SignatureFieldSettingsModel
Get or set the signature field settings.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
DisplayMode,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[signatureFieldSettings]="signatureSettings"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the signature dialog settings.
public signatureSettings = {
typeSignatureFonts: ['Allura', 'Tangerine', 'Sacramento', 'Inspiration']
};
ngOnInit(): void {}
}signatureFitMode SignatureFitMode
Specifies the signature mode in the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[signatureFitMode]="fitMode"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public fitMode = "Stretch";
ngOnInit(): void {}
}Defaults to Default
squigglySettings SquigglySettingsModel
Defines the settings of squiggly annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[squigglySettings] = "squiggly'
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public squiggly = {
opacity: 1,
color: "#ff0000",
author: "XYZ",
annotationSelectorSettings: {
selectionBorderColor: "blue",
resizerBorderColor: "black",
resizerFillColor: "#FF4081",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Square",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
},
isLock: false,
enableMultiPageAnnotation: false,
enableTextMarkupResizer: false,
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}stampSettings StampSettingsModel
Defines the settings of stamp annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
CursorType,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[stampSettings]="stamp"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the stamp annotation settings.
public stamp = {
opacity: 1,
author: "XYZ",
annotationSelectorSettings: {
selectionBorderColor: "blue",
resizerBorderColor: "red",
resizerFillColor: "#FF4081",
resizerSize: 8,
selectionBorderThickness: 5,
resizerShape: "Circle",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab,
},
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
dynamicStamps: [
DynamicStampItem.Revised,
DynamicStampItem.Reviewed,
DynamicStampItem.Received,
DynamicStampItem.Confidential,
DynamicStampItem.Approved,
DynamicStampItem.NotApproved,
],
signStamps: [
SignStampItem.Witness,
SignStampItem.InitialHere,
SignStampItem.SignHere,
SignStampItem.Accepted,
SignStampItem.Rejected,
],
standardBusinessStamps: [
StandardBusinessStampItem.Approved,
StandardBusinessStampItem.NotApproved,
StandardBusinessStampItem.Draft,
StandardBusinessStampItem.Final,
StandardBusinessStampItem.Completed,
StandardBusinessStampItem.Confidential,
StandardBusinessStampItem.ForPublicRelease,
StandardBusinessStampItem.NotForPublicRelease,
StandardBusinessStampItem.ForComment,
StandardBusinessStampItem.Void,
StandardBusinessStampItem.PreliminaryResults,
StandardBusinessStampItem.InformationOnly,
],
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}stickyNotesSettings StickyNotesSettingsModel
Defines the settings of stickyNotes annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
CursorType,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[stickyNotesSettings]="sticky"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the sticky annotation settings.
public sticky = {
author: "XYZ",
opacity: 1,
annotationSelectorSettings: {
selectionBorderColor: "blue",
resizerBorderColor: "red",
resizerFillColor: "#4070ff",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Circle",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab,
},
isLock: false,
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}strikethroughSettings StrikethroughSettingsModel
Defines the settings of strikethrough annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[strikethroughSettings] = "strikeThrough'
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public strikeThrough = {
opacity: 1,
color: "#DAFF56",
author: "XYZ",
annotationSelectorSettings: {
selectionBorderColor: "blue",
resizerBorderColor: "black",
resizerFillColor: "#FF4081",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Square",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
},
isLock: false,
enableMultiPageAnnotation: false,
enableTextMarkupResizer: false,
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}textFieldSettings TextFieldSettingsModel
Get or set the text field settings.
textSearch TextSearch
Gets the text search object of the pdf viewer.
textSearchColorSettings TextSearchColorSettingsModel
Sets the settings for the color of the text search highlight.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[textSearchColorSettings]="textSearch"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the text search settings.
public textSearch = {
searchHighlightColor: "#4070ff",
searchColor: "#FF4081",
};
ngOnInit(): void {}
}textSelection TextSelection
Gets the TextSelection object of the pdf viewer.
thumbnailView ThumbnailView
Gets the thumbnail-view object of the pdf viewer.
tileRenderingSettings TileRenderingSettingsModel
Defines the tile rendering settings.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[tileRenderingSettings]="tileRendering"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the tile rendering settings.
public tileRendering = {
enableTileRendering: false,
x: 0,
y: 0
};
ngOnInit(): void {}
}toolbar Toolbar
Gets the toolbar object of the pdf viewer.
toolbarSettings ToolbarSettingsModel
Defines the settings of the PDF Viewer toolbar.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[toolbarSettings]="toolSettings"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public toolSettings = {
showTooltip: false,
toolbarItems: [
"OpenOption",
"UndoRedoTool",
"PageNavigationTool",
"MagnificationTool",
"PanTool",
"SelectionTool",
"CommentTool",
"SubmitForm",
"AnnotationEditTool",
"FormDesignerEditTool",
"FreeTextAnnotationOption",
"InkAnnotationOption",
"ShapeAnnotationOption",
"StampAnnotation",
"SignatureOption",
"SearchOption",
"PrintOption",
"DownloadOption",
],
annotationToolbarItems: [
"HighlightTool",
"UnderlineTool",
"StrikethroughTool",
"ColorEditTool",
"OpacityEditTool",
"AnnotationDeleteTool",
"StampAnnotationTool",
"HandWrittenSignatureTool",
"InkAnnotationTool",
"ShapeTool",
"CalibrateTool",
"StrokeColorEditTool",
"ThicknessEditTool",
"FreeTextAnnotationTool",
"FontFamilyAnnotationTool",
"FontSizeAnnotationTool",
"FontStylesAnnotationTool",
"FontAlignAnnotationTool",
"FontColorAnnotationTool",
"CommentPanelTool",
],
formDesignerToolbarItems: [
"TextboxTool",
"PasswordTool",
"CheckBoxTool",
"RadioButtonTool",
"DropdownTool",
"ListboxTool",
"DrawSignatureTool",
"DeleteTool",
],
};
ngOnInit(): void {}
}underlineSettings UnderlineSettingsModel
Defines the settings of underline annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[underlineSettings] = "underLine'
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public underLine = {
opacity: 1,
color: "#9c2592",
author: "XYZ",
annotationSelectorSettings: {
selectionBorderColor: "blue",
resizerBorderColor: "black",
resizerFillColor: "#FF4081",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Square",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
},
isLock: false,
enableMultiPageAnnotation: false,
enableTextMarkupResizer: false,
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}volumeSettings VolumeSettingsModel
Defines the settings of volume annotation.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
AnnotationResizerLocation,
CursorType,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[volumeSettings]="volume"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the volume annotation settings.
public volume = {
opacity: 1,
fillColor: "#ffffff00",
strokeColor: "#ff0000",
author: "XYZ",
thickness: 1,
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
annotationSelectorSettings: {
selectionBorderColor: "blue",
resizerBorderColor: "black",
resizerFillColor: "#4070ff",
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: "Circle",
selectorLineDashArray: [5, 6],
resizerLocation:
AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab,
},
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
}width string|number
Defines the scrollable width of the PdfViewer control.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[width]="width"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public width = 300;
ngOnInit(): void {}
}Defaults to ‘auto’
zoomMode ZoomMode
Specifies the rendering mode in the PDF Viewer.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[zoomMode]="defaultZoom"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public defaultZoom = "FitToWidth";
ngOnInit(): void {}
}Defaults to Default
zoomPercentage number
Returns the current zoom percentage of the PdfViewer control.
zoomValue number
Sets the initial loading zoom value from 10 to 400 in the PDF Viewer Control.
import { Component, OnInit } from "@angular/core";
import {
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
} from "@syncfusion/ej2-angular-pdfviewer";
@Component({
selector: "app-root",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[serviceUrl]="service"
[documentPath]="document"
[zoomValue]="zoom"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>`,
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
AnnotationService,
TextSearchService,
TextSelectionService,
PrintService,
FormFieldsService,
FormDesignerService,
],
})
export class AppComponent implements OnInit {
public service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public zoom = 75;
ngOnInit(): void {}
}Defaults to 0
Methods
addAnnotation
Perform to add annotations in the PDF Viewer
| Parameter | Type | Description |
|---|---|---|
| annotation | any |
Specifies the annotation |
Returns void
addCustomMenu
Adds a custom menu item to the existing menu, with optional configurations.
| Parameter | Type | Description |
|---|---|---|
| menuItems | MenuItemModel[] |
The custom menu item to be added. |
| disableDefaultItems (optional) | boolean |
Optional. When set to true, this parameter disables the inclusion of default items in the menu. Defaults to false, meaning default items will be included. |
| appendToEnd (optional) | boolean |
Optional. When set to true, the custom menu item will be added at the bottom of the existing menu list. If false or not provided, the item will be added at the default position. |
Returns void
clearFormFields
Clears data from the form fields.
Parameter - Specifies the form field object.
| Parameter | Type | Description |
|---|---|---|
| formField (optional) | any |
It describes about the form field |
Returns void
convertClientPointToPagePoint
Convert user coordinates to the PDF page coordinates.
| Parameter | Type | Description |
|---|---|---|
| clientPoint | Point |
The user should provide a x, y coordinates. |
| pageNumber | number |
We need to pass pageNumber. |
Returns Point
convertPagePointToClientPoint
Convert page coordinates to the user coordinates.
| Parameter | Type | Description |
|---|---|---|
| pagePoint | Point |
The user should provide a page x, y coordinates. |
| pageNumber | number |
We need to pass pageNumber. |
Returns Point
convertPagePointToScrollingPoint
Convert page coordinates to the scrolling coordinates.
| Parameter | Type | Description |
|---|---|---|
| pagePoint | Point |
The user should provide a page x, y coordinates. |
| pageNumber | number |
We need to pass pageNumber. |
Returns Point
deleteAnnotations
To delete the annotation Collections in the PDF Document.
Returns void
destroy
Destroys all managed resources used by this object.
Returns void
download
Downloads the PDF document being loaded in the ejPdfViewer control.
Returns void
exportAnnotation
Perform export annotations action in the PDF Viewer
| Parameter | Type | Description |
|---|---|---|
| annotationDataFormat (optional) | AnnotationDataFormat |
-Gets the annotation data format |
Returns void
exportAnnotationsAsBase64String
Export annotations and returns a base64 string for both Json and XFDF formats
| Parameter | Type | Description |
|---|---|---|
| annotationDataFormat | AnnotationDataFormat |
Gets the annotation data format |
Returns Promise
exportAnnotationsAsObject
Perform export annotations action in the PDF Viewer
| Parameter | Type | Description |
|---|---|---|
| annotationDataFormat (optional) | AnnotationDataFormat |
Export the annotation based on the format. |
Returns Promise
exportFormFields
Exports the form field data in the specified data format.
| Parameter | Type | Description |
|---|---|---|
| data (optional) | string |
The path for exporting the fields. |
| formFieldDataFormat (optional) | FormFieldDataFormat |
Form field data format |
Returns void
exportFormFieldsAsObject
Returns an object which represents the form field data in the specified data format.
| Parameter | Type | Description |
|---|---|---|
| formFieldDataFormat (optional) | FormFieldDataFormat |
Form field data format |
Returns Promise
extractText
Extracts text from a specific page of the PDF document based on the supplied options.
| Parameter | Type | Description |
|---|---|---|
| pageIndex | number |
The index of the page from which text will be extracted. The first page is indexed as 0. |
| options | ExtractTextOption |
A configuration option specifying the type of text extraction, such as layout preferences. |
Returns Promise
focusFormField
Focus a form field in a document by its field name or the field object.
| Parameter | Type | Description |
|---|---|---|
| field | any |
It describes about the field value |
Returns void
getPageInfo
Retrieves the information of a specified page in the viewer.
| Parameter | Type | Description |
|---|---|---|
| pageIndex | number |
The page index to get the details. The first page is 0. |
Returns PageInfoModel
getPageNumberFromClientPoint
Get page number from the user coordinates x and y.
| Parameter | Type | Description |
|---|---|---|
| clientPoint | Point |
The user will provide a x, y coordinates. |
Returns number
importAnnotation
Perform imports annotations action in the PDF Viewer
| Parameter | Type | Description |
|---|---|---|
| importData | any |
Specifies the data for annotation imports |
| annotationDataFormat (optional) | AnnotationDataFormat |
Specifies the annotation data format |
Returns void
importFormFields
Imports the form fields data into the current PDF document.
| Parameter | Type | Description |
|---|---|---|
| data (optional) | string |
The path for importing the fields. |
| formFieldDataFormat (optional) | FormFieldDataFormat |
Gets the form field data format |
Returns void
load
Loads the given PDF document in the PDF viewer control
| Parameter | Type | Description |
|---|---|---|
| document |
string | Uint8Array
|
Specifies the document name for load |
| password | string |
Specifies the Given document password |
Returns void
redo
Perform redo action for the edited annotations
Returns void
resetFormFields
reset all form fields data
Returns void
retrieveFormFields
To retrieve the form fields in the PDF Document.
Returns FormFieldModel[]
saveAsBlob
Saves the PDF document being loaded in the PDF Viewer control as blob.
Returns Promise
setJsonData
To modify the Json Data in ajax request.
Returns void
showNotificationPopup
Specifies the message to be displayed in the popup.
| Parameter | Type | Description |
|---|---|---|
| errorString | string |
It describes about the error string value |
Returns void
undo
Perform undo action for the edited annotations
Returns void
unload
Unloads the PDF document being displayed in the PDF viewer.
Returns void
updateFormFields
To update the form fields within a PDF document, but only when the FormDesigner module is either not injected or has been disabled.
| Parameter | Type | Description |
|---|---|---|
| formFields | any |
It describes about the form field |
Returns void
updateFormFieldsValue
Update the form field values from externally.
| Parameter | Type | Description |
|---|---|---|
| fieldValue | any |
It describes about the field value |
Returns void
updateViewerContainer
updates the PDF Viewer container width and height from externally.
Returns void
zoomToRect
Brings the given rectangular region to view and zooms in the document to fit the region in client area (view port).
| Parameter | Type | Description |
|---|---|---|
| rectangle | Rect |
Specifies the region in client coordinates that is to be brought to view. |
Returns void
Events
addSignature EmitType<AddSignatureEventArgs>
Triggers when a signature is added to a page of a PDF document.
ajaxRequestFailed EmitType<AjaxRequestFailureEventArgs>
Triggers when the AJAX request is failed.
ajaxRequestInitiate EmitType<AjaxRequestInitiateEventArgs>
Triggers before the data is sent to the server.
ajaxRequestSuccess EmitType<AjaxRequestSuccessEventArgs>
Triggers on successful AJAX request.
annotationAdd EmitType<AnnotationAddEventArgs>
Triggers when an annotation is added to a PDF document’s page.
annotationDoubleClick EmitType<AnnotationDoubleClickEventArgs>
Triggers when the annotation is double clicked.
annotationMouseLeave EmitType<AnnotationMouseLeaveEventArgs>
Triggers when the user mouse moves away from the annotation object.
annotationMouseover EmitType<AnnotationMouseoverEventArgs>
Triggers when the mouse is moved over the annotation object.
annotationMove EmitType<AnnotationMoveEventArgs>
Triggers when an annotation is moved over the page of the PDF document.
annotationMoving EmitType<AnnotationMovingEventArgs>
Triggers while moving an annotation.
annotationPropertiesChange EmitType<AnnotationPropertiesChangeEventArgs>
Triggers when the annotation’s property is modified on a PDF document page.
annotationRemove EmitType<AnnotationRemoveEventArgs>
Triggers when an annotation is removed from a PDF document’s page.
annotationResize EmitType<AnnotationResizeEventArgs>
Triggers when an annotation is resized over the page of a PDF document.
annotationSelect EmitType<AnnotationSelectEventArgs>
Triggers when an annotation is selected over the page of the PDF document.
annotationUnSelect EmitType<AnnotationUnSelectEventArgs>
Triggers when an annotation is unselected over the page of the PDF document.
beforeAddFreeText EmitType<BeforeAddFreeTextEventArgs>
Triggers before adding a text in the freeText annotation.
bookmarkClick EmitType<BookmarkClickEventArgs>
Triggers when the bookmark is clicked in the PDF Viewer’s bookmark panel.
commentAdd EmitType<CommentEventArgs>
Triggers when a comment for the annotation is added to the comment panel.
commentDelete EmitType<CommentEventArgs>
Triggers when the comment for the annotation in the comment panel is deleted.
commentEdit EmitType<CommentEventArgs>
Triggers when the comment for the annotation in the comment panel is edited.
commentSelect EmitType<CommentEventArgs>
Triggers when the comment for the annotation in the comment panel is selected.
commentStatusChanged EmitType<CommentEventArgs>
Triggers when the annotation’s comment for status is changed in the comment panel.
created EmitType<void>
Triggers during the creation of the PDF viewer component.
customContextMenuBeforeOpen EmitType<CustomContextMenuBeforeOpenEventArgs>
Fires before the custom context menu option is opened.
customContextMenuSelect EmitType<CustomContextMenuSelectEventArgs>
Fires when a custom context menu option is selected.
documentLoad EmitType<LoadEventArgs>
Triggers while loading document into PDF viewer.
documentLoadFailed EmitType<LoadFailedEventArgs>
Triggers while document loading failed in PdfViewer.
documentUnload EmitType<UnloadEventArgs>
Triggers while closing the document.
downloadEnd EmitType<DownloadEndEventArgs>
Triggers when the download actions are completed.
downloadStart EmitType<DownloadStartEventArgs>
Triggers when the download action is initiated.
exportFailed EmitType<ExportFailureEventArgs>
Triggers when the annotations export in a PDF document fails.
exportStart EmitType<ExportStartEventArgs>
Triggers when an exported annotation started in the PDF Viewer.
exportSuccess EmitType<ExportSuccessEventArgs>
Triggers when the annotations in a PDF document are successfully exported.
extractTextCompleted EmitType<ExtractTextCompletedEventArgs>
Triggers when an text extraction is completed in the PDF Viewer.
formFieldAdd EmitType<FormFieldAddArgs>
Triggers when a form field is added.
formFieldClick EmitType<FormFieldClickArgs>
Triggers when the form field is selected.
formFieldDoubleClick EmitType<FormFieldDoubleClickArgs>
Triggers when the form field is double-clicked.
formFieldFocusOut EmitType<FormFieldFocusOutEventArgs>
Triggers when focus out from the form fields.
formFieldMouseLeave EmitType<FormFieldMouseLeaveArgs>
Triggers when the mouse cursor leaves the form field.
formFieldMouseover EmitType<FormFieldMouseoverArgs>
Triggers when the mouse cursor is over a form field.
formFieldMove EmitType<FormFieldMoveArgs>
Triggers when a form field is moved.
formFieldPropertiesChange EmitType<FormFieldPropertiesChangeArgs>
Triggers when a property of form field is changed.
formFieldRemove EmitType<FormFieldRemoveArgs>
Triggers when a form field is removed.
formFieldResize EmitType<FormFieldResizeArgs>
Triggers when a form field is resized.
formFieldSelect EmitType<FormFieldSelectArgs>
Triggers when a form field is selected.
formFieldUnselect EmitType<FormFieldUnselectArgs>
Triggers when a form field is unselected.
hyperlinkClick EmitType<HyperlinkClickEventArgs>
Triggers when a hyperlink in a PDF document is clicked.
hyperlinkMouseOver EmitType<HyperlinkMouseOverArgs>
Triggers when hyperlink in a PDF document is hovered.
importFailed EmitType<ImportFailureEventArgs>
Triggers when the annotations imports in a PDF document fails.
importStart EmitType<ImportStartEventArgs>
Triggers when an imported annotation started to appear in the PDF document.
importSuccess EmitType<ImportSuccessEventArgs>
Triggers when the annotations in a PDF document are successfully imported.
keyboardCustomCommands EmitType<KeyboardCustomCommandsEventArgs>
Triggers when the customized keyboard command keys are pressed.
moveSignature EmitType<MoveSignatureEventArgs>
Triggers when a signature is moved across the page of a PDF document.
pageChange EmitType<PageChangeEventArgs>
Triggers when there is change in current page number.
pageClick EmitType<PageClickEventArgs>
Triggers when the mouse click is performed over the page of the PDF document.
pageMouseover EmitType<PageMouseoverEventArgs>
Triggers when moving the mouse over the page.
pageOrganizerSaveAs EmitType<PageOrganizerSaveAsEventArgs>
Triggers when the page organizer save as triggered.
pageRenderComplete EmitType<PageRenderCompleteEventArgs>
Triggers upon completion of page rendering.
pageRenderInitiate EmitType<PageRenderInitiateEventArgs>
Triggers upon the initiation of page rendering.
printEnd EmitType<PrintEndEventArgs>
Triggers when the print actions are completed.
printStart EmitType<PrintStartEventArgs>
Triggers when the print action is initiated.
removeSignature EmitType<RemoveSignatureEventArgs>
Triggers when the signature is removed from the page of a PDF document.
resizeSignature EmitType<ResizeSignatureEventArgs>
Triggers when the signature is resized and placed on a page of a PDF document.
resourcesLoaded EmitType<void>
Triggers after loading the Pdfium resources.
signaturePropertiesChange EmitType<SignaturePropertiesChangeEventArgs>
Triggers when the property of the signature is changed in the page of the PDF document.
signatureSelect EmitType<SignatureSelectEventArgs>
Triggers when signature is selected over the page of the PDF document.
signatureUnselect EmitType<SignatureUnselectEventArgs>
Triggers when signature is unselected over the page of the PDF document.
textSearchComplete EmitType<TextSearchCompleteEventArgs>
Triggers when the text search is completed.
textSearchHighlight EmitType<TextSearchHighlightEventArgs>
Triggers when the text search text is highlighted.
textSearchStart EmitType<TextSearchStartEventArgs>
Triggers when the text search is initiated.
textSelectionEnd EmitType<TextSelectionEndEventArgs>
Triggers when the text selection is complete.
textSelectionStart EmitType<TextSelectionStartEventArgs>
Triggers when the text selection is initiated.
thumbnailClick EmitType<ThumbnailClickEventArgs>
Triggers when the thumbnail in the PDF Viewer’s thumbnail panel is clicked.
toolbarClick EmitType<ClickEventArgs>
Triggers when custom toolbar item is clicked.
validateFormFields EmitType<ValidateFormFieldsArgs>
Triggers when validation is failed.
zoomChange EmitType<ZoomChangeEventArgs>
Triggers When the magnification value changes.