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.
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<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.
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<ValidateFormFieldsArgs>
Triggers when validation is failed.
Triggers When the magnification value changes.
Get or set the dropdown field settings.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner, ItemModel, FontStyle} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.appendTo("#pdfViewer");
// Add options to the field.
let customOptions : ItemModel[] = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}]
// Change the drop down field settings.
viewer.DropdownFieldSettings = {
name: 'Drop down',
fontFamily: 'Helvetica',
fontSize: 10,
fontStyle: FontStyle.Italic,
color: 'black',
backgroundColor: 'white',
alignment: 'Left',
isReadOnly: false,
visibility: 'visible',
isRequired: false,
isPrint: true,
tooltip: 'Dropdown',
options: customOptions,
thickness: 1,
borderColor: 'black'
}Defines the ajax Request settings of the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// HTTP header "X-Custom-Header": "Custom header value" // Custom HTTP header
viewer.ajaxRequestSettings = {
ajaxHeaders: [
{
headerName : "Authorization",
headerValue : "Bearerabcdefghijklmnopqrstuvwxyz"
}
],
withCredentials: false
};
viewer.appendTo("#pdfViewer"); AnnotationSelectorSettingsModel
Defines the settings of annotation selector.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,AnnotationResizerLocation, CursorType} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the annotation selector settings.
viewer.annotationSelectorSettings = {
selectionBorderColor: 'blue',
resizerBorderColor: 'red',
resizerFillColor: '#4070ff',
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: 'Circle',
selectorLineDashArray: [5, 6],
resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab
};
viewer.appendTo("#pdfViewer");Defines the settings of the annotations.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the annotation settings.
viewer.annotationSettings = {
author: 'XYZ',
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
skipPrint: false,
skipDownload: false,
allowedInteractions: ['Resize']
};
viewer.appendTo("#pdfViewer");Defines the settings of area annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, AnnotationResizerLocation, CursorType} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the area annotation settings.
viewer.areaSettings = {
opacity: 1,
fillColor: '#ffffff00',
strokeColor: '#ff0000',
author: 'XYZ',
thickness: 1,
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
annotationSelectorSettings: {
selectionBorderColor: 'blue',
resizerBorderColor: 'white',
resizerFillColor: '#4070ff',
resizerSize: 8,
selectionBorderThickness: 1,
resizerShape: 'Circle',
selectorLineDashArray: [5, 6],
resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab
},
allowedInteractions: ['Resize'],
isPrint: true
};
viewer.appendTo("#pdfViewer");Defines the settings of arrow annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation, CursorType} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the arrow annotation settings.
viewer.arrowSettings = {
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: 0,
isLock: false,
allowedInteractions: ['Resize'],
isPrint: true
};
viewer.appendTo("#pdfViewer");Get or set the check box field settings.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.appendTo("#pdfViewer");
// Change the check box field settings.
viewer.checkBoxFieldSettings = {
name: 'Check 1',
isChecked: true,
backgroundColor: 'white',
isReadOnly: false,
visibility: 'visible',
isPrint: true,
tooltip: 'Check 1',
isRequired: false,
thickness: 5,
borderColor: 'black'
};Defines the settings of circle annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation, CursorType} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the circle annotation settings.
viewer.circleSettings = {
opacity: 1,
fillColor: '#9c2592',
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
};
viewer.appendTo("#pdfViewer");Specifies the state of the ContextMenu in the PDF document.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the settings of the context menu option.
viewer.contextMenuOption = "None";
viewer.appendTo("#pdfViewer");Defines the context menu settings.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner, ContextMenuItem} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the context menu settings.
viewer.contextMenuSettings = {
contextMenuAction: 'RightClick',
contextMenuItems: [
ContextMenuItem.Comment,
ContextMenuItem.Copy,
ContextMenuItem.Cut,
ContextMenuItem.Delete,
ContextMenuItem.Highlight,
ContextMenuItem.Paste,
ContextMenuItem.Properties,
ContextMenuItem.ScaleRatio,
ContextMenuItem.Strikethrough,
ContextMenuItem.Underline
]
};
viewer.appendTo("#pdfViewer"); number
Returns the current page number of the document displayed in the PdfViewer control.
<body style="margin:0px">
<button id = 'currentPageNumber'>Show Page Count</button>
<div style="height: 100%;width: 100%">
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
</div>
</body>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('FormDesigner.pdf', null);
document.getElementById('currentPageNumber').addEventListener('click', logPageNumber);
function logPageNumber() {
// Logs the current page number.
console.log("Current page number is - " + viewer.currentPageNumber);
}Defines the stamp items of the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Add your custom stamp image source as base64 image.
viewer.customStamp = [
{
customStampName: 'Sample',
customStampImageSource: "data:image/png;base64, Syncfusionpdfviewer"
}
];
viewer.appendTo("#pdfViewer");Defines the settings of customStamp annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the custom stamp settings.
viewer.customStampSettings = {
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
};
viewer.appendTo("#pdfViewer"); string
Customize desired date and time format
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the date time format.
viewer.dateTimeFormat = "yyyy-MM-dd HH:mm:ss";
viewer.appendTo("#pdfViewer"); boolean
Enable or disable the interaction of form fields in the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.designerMode = true;
viewer.appendTo("#pdfViewer");Disables the menu items in the context menu.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,ContextMenuItem} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.documentPath = "PDF_Succinctly.pdf";
// Show or hide the context menu items.
viewer.disableContextMenuItems = [
ContextMenuItem.Copy,
ContextMenuItem.Paste
];
viewer.appendTo("#pdfViewer");Defines the settings of distance annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, CursorType, AnnotationResizerLocation} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the distance annotation settings.
viewer.distanceSettings = {
opacity: 1,
fillColor: '#ffffff00',
strokeColor: '#ff0000',
author: 'Guest',
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,
leaderLength: 40,
resizeCursorType: CursorType.move,
allowedInteractions: ['Resize'],
isPrint: true
};
viewer.appendTo("#pdfViewer"); string
Sets the PDF document path for initial loading.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.appendTo("#pdfViewer"); string
Gets or sets the download file name in the PdfViewer control.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.downloadFileName = 'Document_Downloaded';
viewer.appendTo("#pdfViewer"); boolean
Determines whether accessibility tags are enabled or disabled. Accessibility tags can help make web content more accessible to users with disabilities.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,AccessibilityTags} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,AccessibilityTags);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.enableAccessibilityTags = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disable the annotation in the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable the Add or Edit Annotations tool in the toolbar.
viewer.enableAnnotation = false;
viewer.appendTo("#pdfViewer"); boolean
Opens the annotation toolbar when the PDF document is loaded in the PDF Viewer control initially.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Show or hide the annotation toolbar.
viewer.enableAnnotationToolbar = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disables the auto complete option in form documents.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.enableAutoComplete = false;
viewer.appendTo("#pdfViewer"); boolean
Enables or disables the bookmark view in the PDF viewer
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Show or hide the bookmark tool.
viewer.enableBookmark = false;
viewer.appendTo("#pdfViewer"); boolean
Enables or disables the bookmark styles in the PDF viewer
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable bookmark styles.
viewer.enableBookmarkStyles = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disables the Comment Panel of PdfViewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable comment panel.
viewer.enableCommentPanel = false;
viewer.appendTo("#pdfViewer"); boolean
Gets or sets a boolean value to show or hide desktop toolbar in mobile devices.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable desktop mode.
viewer.enableDesktopMode = true;
viewer.appendTo("#pdfViewer"); boolean
Enable or disables the download option of PdfViewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable download.
viewer.enableDownload = false;
viewer.appendTo("#pdfViewer"); boolean
Show or hide the form designer tool in the main toolbar of the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable form designer.
viewer.enableFormDesigner = false;
viewer.appendTo("#pdfViewer"); boolean
Opens the form designer toolbar when the PDF document is loaded in the PDF Viewer control initially.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable form designer tool bar.
viewer.enableFormDesignerToolbar = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disable the form fields in the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable form fields.
viewer.enableFormFields = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disable the form fields validation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable form fields validation.
viewer.enableFormFieldsValidation = true;
viewer.appendTo("#pdfViewer"); boolean
Enable or disable the free text annotation in the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable free text.
viewer.enableFreeText = false;
viewer.appendTo("#pdfViewer"); boolean
Enables or disables the handwritten signature in PDF document.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable hand written signature.
viewer.enableHandwrittenSignature = false;
viewer.appendTo("#pdfViewer"); boolean
Enables or disables the hyperlinks in PDF document.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable hyper link.
viewer.enableHyperlink = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disable the customization of measure values in PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable import annotation measurement.
viewer.enableImportAnnotationMeasurement = false;
viewer.appendTo("#pdfViewer"); boolean
If it is set as false, then the ink annotation support in the PDF Viewer will be disabled. By default it is true.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable ink annotation.
viewer.enableInkAnnotation = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disable the Magnification module of PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable magnification.
viewer.enableMagnification = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disable the calibrate annotation in the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable measure annotation.
viewer.enableMeasureAnnotation = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disable the multi line text markup annotations in overlapping collections.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
// Enable or disable multi line text markup annotations in overlapping collections.
viewer.enableMultiLineOverlap = true;
viewer.appendTo("#pdfViewer");
viewer.load('FormDesigner.pdf', null); boolean
Enables or disables the multi-page text markup annotation selection in UI.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
// Enable or disable multi-page text markup annotation selection.
viewer.enableMultiPageAnnotation = true;
viewer.appendTo("#pdfViewer");
viewer.load('FormDesigner.pdf', null); boolean
Enable or disable the Navigation module of PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable navigation.
viewer.enableNavigation = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disables the Navigation toolbar of PdfViewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable navigation tool bar.
viewer.enableNavigationToolbar = true;
viewer.appendTo("#pdfViewer"); boolean
Enable or disable persisting component’s state between page reloads.
boolean
Enable or disable the pinch zoom option in the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable pinch zoom.
viewer.enablePinchZoom = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disables the print option of PdfViewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable print.
viewer.enablePrint = false;
viewer.appendTo("#pdfViewer"); boolean
If it is set as FALSE, will suppress the page rotation of Landscape document on print action. By default it is TRUE.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.enablePrintRotation = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disable rendering component in right to left direction.
boolean
Enable or disable the shape annotation in the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable sahpe annotation.
viewer.enableShapeAnnotation = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disable the Label for shapeAnnotations of PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable shape label for shape annotations.
viewer.enableShapeLabel = true;
viewer.appendTo("#pdfViewer"); boolean
Enables and disable the stamp annotations when the PDF viewer control is loaded initially.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable stamp annotations.
viewer.enableStampAnnotations = false;
viewer.appendTo("#pdfViewer"); boolean
Enables and disable the stickyNotes annotations when the PDF viewer control is loaded initially.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable sticky notes annotation.
viewer.enableStickyNotesAnnotation = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disable the text markup annotation in the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable text markup annotation.
viewer.enableTextMarkupAnnotation = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disable the text markup resizer to modify the bounds in UI.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
// Enable or disable text mark up resizer.
viewer.enableTextMarkupResizer = true;
viewer.appendTo("#pdfViewer");
viewer.load('FormDesigner.pdf', null); boolean
Enable or disable the text search in the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable text search.
viewer.enableTextSearch = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disable the text selection in the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable text selection.
viewer.enableTextSelection = false;
viewer.appendTo("#pdfViewer"); boolean
Enables or disables the thumbnail view in the PDF viewer
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable thumb nail.
viewer.enableThumbnail = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disables the toolbar of PdfViewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable tool bar.
viewer.enableToolbar = false;
viewer.appendTo("#pdfViewer"); boolean
Enable or disable the zoom optimization mode in PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable zoom optimization.
viewer.enableZoomOptimization = false;
viewer.appendTo("#pdfViewer"); string
Gets or sets the export annotations JSON file name in the PdfViewer control.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the export annotation file name.
viewer.exportAnnotationFileName = 'Annotation export file_1';
viewer.appendTo("#pdfViewer");Gets the form fields present in the loaded PDF document. It used to get the form fields id, name, type and it’s values.
<body style="margin:0px">
<button id = 'logForms'>Show Form Field Collection</button>
<div style="height: 100%;width: 100%">
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
</div>
</body>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('FormDesigner.pdf', null);
document.getElementById('logForms').addEventListener('click', logFormFieldCollections);
function logFormFieldCollections() {
// Logs the form field collections.
console.log(viewer.formFieldCollections);
}Defines the settings of free text annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, FontStyle, AnnotationResizerLocation} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Changes the free text annotation settings.
viewer.freeTextSettings = {
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
};
viewer.appendTo("#pdfViewer"); HandWrittenSignatureSettingsModel
Defines the settings of handWrittenSignature.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, DisplayMode, AnnotationResizerLocation, CursorType} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Changes the hand written signature settings.
viewer.handWrittenSignatureSettings = {
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
}
};
viewer.appendTo("#pdfViewer"); string | number
Defines the scrollable height of the PdfViewer control.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the height of the PDF viewer.
viewer.height = 500;
viewer.appendTo("#pdfViewer"); 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.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Changes the highlight annotation settings.
viewer.highlightSettings = {
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
};
viewer.appendTo("#pdfViewer");Specifies the open state of the hyperlink in the PDF document.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.hyperlinkOpenState = 'NewTab';
viewer.appendTo("#pdfViewer");Get or set the signature dialog settings for initial field.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, DisplayMode} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Changes the initial dialog settings.
viewer.initialDialogSettings = {
displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
hideSaveSignature: true
};
viewer.appendTo("#pdfViewer");Get or set the initial field settings.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, DisplayMode} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.appendTo("#pdfViewer");
// Changes the initial field settings.
viewer.initialFieldSettings = {
name: "Initial",
isReadOnly: true,
visibility: "visible",
isRequired: true,
isPrint: true,
tooltip: "Intial",
thickness: 1,
initialIndicatorSettings: {
opacity: 1,
backgroundColor: "orange",
width: 19,
height: 10,
fontSize: 10,
text: null,
color: "black"
},
initialDialogSettings: {
displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
hideSaveSignature: false
}
}; number
Initially renders the first N pages of the PDF document when the document is loaded.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,AccessibilityTags} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,AccessibilityTags);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Specifies the maximum number of pages that should be rendered on the document loading.
viewer.initialRenderPages = 4;
viewer.appendTo("#pdfViewer");Defines the ink annotation settings for PDF Viewer.It used to customize the strokeColor, thickness, opacity of the ink annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner, AnnotationResizerLocation, CursorType} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Changes the ink annotation settings.
viewer.inkAnnotationSettings = {
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
};
viewer.appendTo("#pdfViewer");Sets the interaction mode of the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the interaction mode.
viewer.interactionMode = "Pan";
viewer.appendTo("#pdfViewer"); 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.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
// Show or hide the annotation tool bar.
viewer.isAnnotationToolbarVisible = true;
viewer.appendTo("#pdfViewer");
viewer.load('FormDesigner.pdf', null); boolean
Gets or sets a boolean value to show or hide the bookmark panel while loading a document.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Show or hide the bookmark panel.
viewer.isBookmarkPanelOpen = true;
viewer.appendTo("#pdfViewer"); boolean
If it set as true, then the command panel show at initial document loading in the PDF viewer
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Show or hide the command panel.
viewer.isCommandPanelOpen = true;
viewer.appendTo("#pdfViewer"); boolean
Checks whether the PDF document is edited.
<body style="margin:0px">
<button id = 'isDocumentEdited'>Show Document edit status</button>
<div style="height: 100%;width: 100%">
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
</div>
</body>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('FormDesigner.pdf', null);
document.getElementById('isDocumentEdited').addEventListener('click', logDocumentEdit);
function logDocumentEdit() {
// 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.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.isExtractText = true;
viewer.appendTo("#pdfViewer"); boolean
Opens the annotation toolbar when the PDF document is loaded in the PDF Viewer control initially and get the annotation Toolbar Visible status.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
// Show or hide form designer toolbar.
viewer.isFormDesignerToolbarVisible = true;
viewer.appendTo("#pdfViewer");
viewer.load('FormDesigner.pdf', null); boolean
Enable if the PDF document contains form fields.
<body style="margin:0px">
<button id = 'isFormFieldDocument'>Show whether form fields present in the document</button>
<div style="height: 100%;width: 100%">
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
</div>
</body>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('FormDesigner.pdf', null);
document.getElementById('isFormFieldDocument').addEventListener('click', logisFormFieldDocument);
function logisFormFieldDocument() {
// 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.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.isMaintainSelection = true;
viewer.appendTo("#pdfViewer"); boolean
Enables or disable saving Hand Written signature as editable in the PDF.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Enable or disable saving the hand written signature.
viewer.isSignatureEditable = true;
viewer.appendTo("#pdfViewer"); boolean
If it set as true, then the thumbnail view show at initial document loading in the PDF viewer
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Show or hide the thumbnail view.
viewer.isThumbnailViewOpen = true;
viewer.appendTo("#pdfViewer"); boolean
Checks if the freeText value is valid or not.
<body style="margin:0px">
<button id = 'isValidFreeText'>Show is free text is valid or not</button>
<div style="height: 100%;width: 100%">
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
</div>
</body>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('FormDesigner.pdf', null);
document.getElementById('isValidFreeText').addEventListener('click', logisValidFreeText);
function logisValidFreeText() {
// Logs the freeText value is valid or not.
console.log("Is valid FreeText - " + viewer.isValidFreeText);
}Defines the settings of line annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the line annotation settings.
viewer.lineSettings = {
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: null
},
minHeight: 10,
minWidth: 10,
maxWidth: 100,
maxHeight: 100,
isLock: false,
allowedInteractions: ['Resize'],
isPrint: true
};
viewer.appendTo("#pdfViewer");Get or set the listbox field settings.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner, ItemModel, FontStyle} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Add options to the field.
let customOptions : ItemModel[] = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}]
// Change the list box field settings.
viewer.listBoxFieldSettings = {
name: "List 1",
fontFamily: "Helvetica",
fontSize: 5,
fontStyle: FontStyle.Italic,
color: "black",
backgroundColor: "white",
alignment: "Right",
isReadOnly: false,
visibility: "visible",
isRequired: false,
isPrint: false,
tooltip: "List 1",
options: customOptions,
thickness: 1,
borderColor: "black"
};
viewer.appendTo("#pdfViewer"); string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defines the settings of measurement annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the measurement annotation settings.
viewer.measurementSettings = {
conversionUnit: 'cm',
displayUnit: 'cm',
scaleRatio: 1,
depth: 96
};
viewer.appendTo("#pdfViewer"); number
gets the page count of the document loaded in the PdfViewer control.
<body style="margin:0px">
<button id = 'pageCount'>Log Page Count</button>
<div style="height: 100%;width: 100%">
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
</div>
</body>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('FormDesigner.pdf', null);
document.getElementById('pageCount').addEventListener('click', logPageCount);
function logPageCount() {
// Logs the total page count of the loaded document.
console.log("Total page count is - " + viewer.pageCount);
}Get or set the password field settings.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner, FontStyle} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.appendTo("#pdfViewer");
// Change the password field settings.
viewer.passwordFieldSettings = {
name: "Enter Password",
value: "ABCD",
fontFamily: "Helvetica",
fontSize: 10,
fontStyle: FontStyle.Italic,
color: "black",
borderColor: "black",
backgroundColor: "white",
alignment: "Right",
isReadOnly: false,
visibility: "visible",
maxLength: 0,
isRequired: false,
isPrint: true,
tooltip: "Password",
thickness: 1
};Defines the settings of perimeter annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, AnnotationResizerLocation, CursorType} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the perimeter annotation settings.
viewer.perimeterSettings = {
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: "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
};
viewer.appendTo("#pdfViewer");Defines the settings of polygon annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation, CursorType} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the polygon annotation settings.
viewer.polygonSettings = {
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
};
viewer.appendTo("#pdfViewer");Specifies the print mode in the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.printMode = "NewWindow";
viewer.appendTo("#pdfViewer");Get or set the radio button field settings.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the radio button field settings.
viewer.radioButtonFieldSettings = {
name: "Radio",
isSelected: false,
backgroundColor: "white",
isReadOnly: false,
visibility: "visible",
isPrint: true,
tooltip: "Radio",
isRequired: false,
thickness: 1,
borderColor: "black"
};
viewer.appendTo("#pdfViewer");Defines the settings of radius annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, AnnotationResizerLocation, CursorType} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the radius annotation settings.
viewer.radiusSettings = {
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
};
viewer.appendTo("#pdfViewer");Defines the settings of rectangle annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation, CursorType} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the rectangle annotation settings.
viewer.rectangleSettings = {
opacity: 1,
fillColor: "#9c2592",
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
};
viewer.appendTo("#pdfViewer"); string
Set the resource URL for assets or the public directory. The standalone PDF Viewer will load its custom resources from this URL.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.resourceUrl = "http://localhost:3000/src/pdfviewer/ej2-pdfviewer-lib";
viewer.appendTo("#pdfViewer");
viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); boolean
restrict zoom request.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.restrictZoomRequest = true;
viewer.appendTo("#pdfViewer"); number
Specifies the retry count for the failed requests.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.retryCount = 3;
viewer.appendTo("#pdfViewer"); 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.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the retry status code as 405, 503, etc;
viewer.retryStatusCodes = [500, 401, 400];
viewer.appendTo("#pdfViewer"); number
Gets or sets the timeout for retries in seconds.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,AccessibilityTags} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,AccessibilityTags);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.retryCount = 5;
viewer.retryTimeout = 10;
viewer.appendTo("#pdfViewer");Defines the scroll settings.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the scroll settings.
viewer.scrollSettings = {
delayPageRequestTimeOnScroll: 150
};
viewer.appendTo("#pdfViewer");Defines the collection of selected items, size and position of the selector
Defines the settings of the PDF Viewer service.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the server action settings.
viewer.serverActionSettings = {
load: "Load",
renderPages: "RenderPdfPages",
unload: "Unload",
download: "Download",
renderThumbnail: "RenderThumbnailImages",
print: "PrintImages",
renderComments: "RenderAnnotationComments",
importAnnotations: "ImportAnnotations",
exportAnnotations: "ExportAnnotations",
importFormFields: "ImportFormFields",
exportFormFields: "ExportFormFields",
renderTexts: "RenderPdfTexts"
};
viewer.appendTo("#pdfViewer"); string
Defines the service url of the PdfViewer control.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.appendTo("#pdfViewer");
viewer.load('FormDesigner.pdf', null);Defines the settings of shape label.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.enableShapeLabel = true;
// Change the shape label settings.
viewer.shapeLabelSettings = {
opacity: 1,
fillColor: '#9c2592',
borderColor: '#ff0000',
fontColor: '#000',
fontSize: 16,
labelHeight: 24.6,
labelMaxWidth: 151,
labelContent: 'XYZ'
};
viewer.appendTo("#pdfViewer"); boolean
Show or hide the digital signature appearance in the document.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Show or hide the appearence of digital signature.
viewer.showDigitalSignatureAppearance = false;
viewer.appendTo("#pdfViewer"); boolean
If it is set as false then error message box is not displayed in PDF viewer control.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.showNotificationDialog = false;
viewer.appendTo("#pdfViewer");Get or set the signature dialog settings for signature field.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, DisplayMode} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the signature dialog settings.
viewer.signatureDialogSettings = {
displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload, hideSaveSignature: true
};
viewer.appendTo("#pdfViewer");Get or set the signature field settings.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, DisplayMode} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.appendTo("#pdfViewer");
// Change the signature field settings.
viewer.signatureFieldSettings = {
name: "Sign",
isReadOnly: true,
visibility: "visible",
isRequired: true,
isPrint: false,
tooltip: "Sign",
thickness: 1,
signatureIndicatorSettings: {
opacity: 1,
backgroundColor: "orange",
width: 19,
height: 10,
fontSize: 10,
text: null,
color: "black"
},
signatureDialogSettings: {
displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
hideSaveSignature: false
}
};Specifies the signature mode in the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the signature fit.
viewer.signatureFitMode = "Stretch";
viewer.appendTo("#pdfViewer");Defines the settings of stamp annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, AnnotationResizerLocation, DynamicStampItem, SignStampItem, StandardBusinessStampItem, CursorType} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the stamp annotation settings.
viewer.stampSettings = {
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
};
viewer.appendTo("#pdfViewer");Defines the settings of stickyNotes annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation, CursorType} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the sticky note annotation settings.
viewer.stickyNotesSettings = {
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
};
viewer.appendTo("#pdfViewer");Defines the settings of strikethrough annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the strikethrough annotation settings.
viewer.strikethroughSettings = {
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
};
viewer.appendTo("#pdfViewer");Get or set the text field settings.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner, FontStyle} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.appendTo("#pdfViewer");
// Change the text field settings.
viewer.textFieldSettings = {
name: "Enter name",
value: "John",
fontFamily: "Helvetica",
fontSize: 10,
fontStyle: FontStyle.Italic,
color: "black",
borderColor: "black",
backgroundColor: "white",
alignment: "Right",
isReadOnly: false,
visibility: "visible",
maxLength: 0,
isRequired: false,
isPrint: true,
tooltip: "Name",
thickness: 1,
isMultiline: false
};Sets the settings for the color of the text search highlight.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the text search color settings.
viewer.textSearchColorSettings = {
searchHighlightColor: '#4070ff',
searchColor: '#FF4081'
};
viewer.appendTo("#pdfViewer");Defines the tile rendering settings.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the tile rendering settings.
viewer.tileRenderingSettings = {
enableTileRendering: false,
x: 0,
y: 0
};
viewer.appendTo("#pdfViewer");Defines the settings of the PDF Viewer toolbar.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the tool bar settings.
viewer.toolbarSettings = {
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"
]
};
viewer.appendTo("#pdfViewer");Defines the settings of underline annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the underline annotation settings.
viewer.underlineSettings = {
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
};
viewer.appendTo("#pdfViewer");Defines the settings of volume annotation.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation, CursorType} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the volume annotation settings.
viewer.volumeSettings = {
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
};
viewer.appendTo("#pdfViewer"); string | number
Defines the scrollable width of the PdfViewer control.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the width.
viewer.width = 300;
viewer.appendTo("#pdfViewer");Specifies the rendering mode in the PDF Viewer.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
viewer.zoomMode = "FitToWidth";
viewer.appendTo("#pdfViewer"); number
Sets the initial loading zoom value from 10 to 400 in the PDF Viewer Control.
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
viewer.documentPath = "PDF_Succinctly.pdf";
// Change the zoom value.
viewer.zoomValue = 75;
viewer.appendTo("#pdfViewer");