Interface for a class PdfViewer
EmitType<AddSignatureEventArgs>
Triggers when a signature is added to a page of a PDF document.
EmitType<AjaxRequestFailureEventArgs>
Triggers when the AJAX request is failed.
EmitType<AjaxRequestInitiateEventArgs>
Triggers before the data is sent to the server.
EmitType<AjaxRequestSuccessEventArgs>
Triggers on successful AJAX request.
EmitType<AnnotationAddEventArgs>
Triggers when an annotation is added to a PDF document’s page.
EmitType<AnnotationDoubleClickEventArgs>
Triggers when the annotation is double clicked.
EmitType<AnnotationMouseLeaveEventArgs>
Triggers when the user mouse moves away from the annotation object.
EmitType<AnnotationMouseoverEventArgs>
Triggers when the mouse is moved over the annotation object.
EmitType<AnnotationMoveEventArgs>
Triggers when an annotation is moved over the page of the PDF document.
EmitType<AnnotationMovingEventArgs>
Triggers while moving an annotation.
EmitType<AnnotationPropertiesChangeEventArgs>
Triggers when the annotation’s property is modified on a PDF document page.
EmitType<AnnotationRemoveEventArgs>
Triggers when an annotation is removed from a PDF document’s page.
EmitType<AnnotationResizeEventArgs>
Triggers when an annotation is resized over the page of a PDF document.
EmitType<AnnotationSelectEventArgs>
Triggers when an annotation is selected over the page of the PDF document.
EmitType<AnnotationUnSelectEventArgs>
Triggers when an annotation is unselected over the page of the PDF document.
EmitType<BeforeAddFreeTextEventArgs>
Triggers before adding a text in the freeText annotation.
EmitType<BookmarkClickEventArgs>
Triggers when the bookmark is clicked in the PDF Viewer’s bookmark panel.
EmitType<ButtonFieldClickEventArgs>
Triggers when the button is clicked.
Triggers when a comment for the annotation is added to the comment panel.
Triggers when the comment for the annotation in the comment panel is deleted.
Triggers when the comment for the annotation in the comment panel is edited.
Triggers when the comment for the annotation in the comment panel is selected.
Triggers when the annotation’s comment for status is changed in the comment panel.
EmitType<void>
Triggers during the creation of the PDF viewer component.
EmitType<CustomContextMenuBeforeOpenEventArgs>
Fires before the custom context menu option is opened.
EmitType<CustomContextMenuSelectEventArgs>
Fires when a custom context menu option is selected.
Triggers while loading document into PDF viewer.
Triggers while document loading failed in PdfViewer.
Triggers while closing the document.
EmitType<DownloadEndEventArgs>
Triggers when the download actions are completed.
EmitType<DownloadStartEventArgs>
Triggers when the download action is initiated.
EmitType<ExportFailureEventArgs>
Triggers when the annotations export in a PDF document fails.
EmitType<ExportStartEventArgs>
Triggers when an exported annotation started in the PDF Viewer.
EmitType<ExportSuccessEventArgs>
Triggers when the annotations in a PDF document are successfully exported.
EmitType<ExtractTextCompletedEventArgs>
Triggers when an text extraction is completed in the PDF Viewer.
Triggers when a form field is added.
Triggers when the form field is selected.
EmitType<FormFieldDoubleClickArgs>
Triggers when the form field is double-clicked.
EmitType<FormFieldFocusOutEventArgs>
Triggers when focus out from the form fields.
EmitType<FormFieldMouseLeaveArgs>
Triggers when the mouse cursor leaves the form field.
EmitType<FormFieldMouseoverArgs>
Triggers when the mouse cursor is over a form field.
Triggers when a form field is moved.
EmitType<FormFieldPropertiesChangeArgs>
Triggers when a property of form field is changed.
Triggers when a form field is removed.
Triggers when a form field is resized.
Triggers when a form field is selected.
EmitType<FormFieldUnselectArgs>
Triggers when a form field is unselected.
EmitType<HyperlinkClickEventArgs>
Triggers when a hyperlink in a PDF document is clicked.
EmitType<HyperlinkMouseOverArgs>
Triggers when hyperlink in a PDF document is hovered.
EmitType<ImportFailureEventArgs>
Triggers when the annotations imports in a PDF document fails.
EmitType<ImportStartEventArgs>
Triggers when an imported annotation started to appear in the PDF document.
EmitType<ImportSuccessEventArgs>
Triggers when the annotations in a PDF document are successfully imported.
EmitType<KeyboardCustomCommandsEventArgs>
Triggers when the customized keyboard command keys are pressed.
EmitType<MoveSignatureEventArgs>
Triggers when a signature is moved across the page of a PDF document.
Triggers when there is change in current page number.
Triggers when the mouse click is performed over the page of the PDF document.
EmitType<PageMouseoverEventArgs>
Triggers when moving the mouse over the page.
EmitType<PageOrganizerSaveAsEventArgs>
Triggers when the page organizer save as triggered.
EmitType<PageRenderCompleteEventArgs>
Triggers upon completion of page rendering.
EmitType<PageRenderInitiateEventArgs>
Triggers upon the initiation of page rendering.
Triggers when the print actions are completed.
Triggers when the print action is initiated.
EmitType<RemoveSignatureEventArgs>
Triggers when the signature is removed from the page of a PDF document.
EmitType<ResizeSignatureEventArgs>
Triggers when the signature is resized and placed on a page of a PDF document.
EmitType<SignaturePropertiesChangeEventArgs>
Triggers when the property of the signature is changed in the page of the PDF document.
EmitType<SignatureSelectEventArgs>
Triggers when signature is selected over the page of the PDF document.
EmitType<TextSearchCompleteEventArgs>
Triggers when the text search is completed.
EmitType<TextSearchHighlightEventArgs>
Triggers when the text search text is highlighted.
EmitType<TextSearchStartEventArgs>
Triggers when the text search is initiated.
EmitType<TextSelectionEndEventArgs>
Triggers when the text selection is complete.
EmitType<TextSelectionStartEventArgs>
Triggers when the text selection is initiated.
EmitType<ThumbnailClickEventArgs>
Triggers when the thumbnail in the PDF Viewer’s thumbnail panel is clicked.
EmitType<ClickEventArgs>
Triggers when custom toolbar item is clicked.
EmitType<ValidateFormFieldsArgs>
Triggers when validation is failed.
Triggers When the magnification value changes.
Get or set the dropdown field settings.
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 {}
} 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,
} 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"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the annotation selection settings.
public annotationSelection = {
selectionBorderColor: 'blue',
resizerBorderColor: 'red',
resizerFillColor: '#4070ff',
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: 'Circle',
selectorLineDashArray: [5, 6],
resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab
};
ngOnInit(): void {}
}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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "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 {}
}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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "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: "",
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 {}
}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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "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: "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 {}
}Get or set the check box field settings.
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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the circle annotation settings.
public circle = {
opacity: 1,
fillColor: "#9c2592",
strokeColor: "#ff0000",
author: "XYZ",
thickness: 1,
annotationSelectorSettings: {
selectionBorderColor: "blue",
resizerBorderColor: "red",
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 {}
}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",
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer
id="pdfViewer"
[libraryPath]="libraryPath"
[documentPath]="document"
(documentLoad)='documentLoaded($event)'
(customContextMenuSelect)='customContextMenuSelect($event)'
(customContextMenuBeforeOpen)='customContextMenuBeforeOpen($event)'
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 libraryPath = "http://localhost:4200/assets/ej2-pdfviewer-lib";
public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
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
}
}]
};
ngOnInit(): void {}
public keyboardCustomCommands(e: LoadEventArgs): void {
}
}Specifies the state of the ContextMenu 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the settings of the context menu option.
public openContext = "None";
ngOnInit(): void {}
}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"
[serviceUrl]="service"
[documentPath]="document"
[ContextMenuItem]="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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the context menu settings.
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 {}
} 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"
[serviceUrl]="service"
[documentPath]="document"
[currentPageNumber]="currentPageNumber"
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 {}
}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"
[serviceUrl]="service"
[documentPath]="document"
[customStamp]="custom"
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";
// Add your custom stamp image source as base64 image.
public custom = [
{
customStampName: "Sample",
customStampImageSource: "data:image/png;base64, Syncfusion pdf viewer",
},
];
ngOnInit(): void {}
}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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "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 {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the date time format.
public dateTime = "yyyy-MM-dd HH:mm:ss";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
}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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Show or hide the context menu items.
public disableContext = [ContextMenuItem.Copy, ContextMenuItem.Highlight];
ngOnInit(): void {}
}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,
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"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "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: "",
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,
leaderLength: 40,
resizeCursorType: CursorType.move,
allowedInteractions: ["Resize"],
isPrint: true,
};
ngOnInit(): void {}
} 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"
[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 {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public DownloadDocument = "documentDownloaded";
ngOnInit(): void {}
} 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 {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} boolean
Opens the annotation toolbar when the PDF document is loaded 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[documentPath]="document"
[enableAutoComplete]="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 {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} boolean
Enables or disables the bookmark styles in the PDF viewer
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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} boolean
Opens the form designer toolbar when the PDF document is loaded 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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,
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"
[enableFormFields]="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 {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="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 {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} boolean
Enable or disable 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"
[serviceUrl]="service"
[documentPath]="document"
[enablePageOrganizer]="false"
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 {}
} boolean
Enable or disable persisting component’s state between page reloads.
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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} boolean
Enable or disable rendering component in right to left direction.
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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[documentPath]="document"
[enableShapeLabel]="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 {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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 {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public exportAnnotFileName = "exportedAnnotation";
ngOnInit(): void {}
}Gets the form fields present in the loaded PDF document. It used to get the form fields id, name, type and it’s values.
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,
} 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"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "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: "blue",
resizerBorderColor: "black",
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 {}
} 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
} 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"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "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: "blue",
resizerBorderColor: "black",
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 {}
} string | number
Defines the scrollable height of the PdfViewer control.
boolean
Gets or sets a boolean value to show or hide the save signature check box option in the signature dialog. FALSE by default
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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public highlight = {
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 {}
}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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public openLink = "NewWindow";
ngOnInit(): void {}
}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"
[serviceUrl]="service"
[documentPath]="document"
[initialDialogSettings]="intialDialog"
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 initial dialog settings.
public intialDialog = {
displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
hideSaveSignature: true,
};
ngOnInit(): void {}
}Get or set the initial field settings.
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,
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"
[initialRenderPages]="4"
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 {}
}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,
} 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"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
// Change the ink annotation settings.
public inkAnnotation = {
author: "XYZ",
opacity: 1,
strokeColor: "#ff0000",
thickness: 1,
annotationSelectorSettings: {
selectionBorderColor: "blue",
resizerBorderColor: "black",
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 {}
}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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
public interactMode = "Pan";
ngOnInit(): void {}
} boolean
Opens the annotation toolbar when the PDF document is loaded in the PDF Viewer control initially.
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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[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 {}
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);
}
} 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 {}
} 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"
[serviceUrl]="service"
[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 service =
"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
public document = "PDF_Succinctly.pdf";
ngOnInit(): void {}
} 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"
[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 presence of form fields in a document.
console.log(
"Is form fields exist in the document - " + viewer.isFormFieldDocument
);
}
} 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 {}
} 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 {}
} 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 {}
} 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 {}
} 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);
}
}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 {}
}Get or set the listbox field settings.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
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 {}
} 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);
}
}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 and rotate 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 = {canDelete: true,
canInsert: true,
canRotate: false,
canDelete: true
};
ngOnInit(): void {}
}Get or set the password field settings.
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 {}
}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 {}
}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 {}
}Get or set the radio button field settings.
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 {}
}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 {}
} 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 {}
} 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 {}
} number
Specifies the retry count for the failed requests.
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.
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 {}
}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 {}
}Defines the collection of selected items, size and position of the selector
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 {}
} 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 {}
}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 {}
} 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 {}
} 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 {}
}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 {}
}Get or set the signature field settings.
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 {}
}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 {}
}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 {}
}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 {}
}Get or set the text field settings.
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 {}
}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 {}
}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 {}
}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 {}
}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 {}
} 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 {}
}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 {}
} 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 {}
}