PdfViewerComponent

23 Sep 202524 minutes to read

ejs-pdfviewer represents the VueJS PdfViewer Component.

<ejs-pdfviewer></ejs-pdfviewer>

Properties

DropdownFieldSettings DropdownFieldSettingsModel

Get or set the dropdown field settings.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" ref="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :created="onCreated"> </ejs-pdfviewer>
  </div>
</template>

<script>
import {PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, FontStyle} from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
      "ejs-pdfviewer": PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  };
},
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
    onCreated: function () {
      if (this.$refs.pdfViewer) {
      const viewer = this.$refs.pdfViewer.ej2Instances;
      const customOptions = [
        { itemName: 'item1', itemValue: 'item1' },
        { itemName: 'item2', itemValue: 'item2' },
        { itemName: 'item3', itemValue: 'item3' }
      ];
      viewer.DropdownFieldSettings = {
        name: 'DropDown',
        isReadOnly: false,
        visibility: 'visible',
        isRequired: false,
        isPrint: true,
        tooltip: 'DropDown',
        thickness: 4,
        value: 'DropDown',
        fontFamily: 'Courier',
        fontSize: 10,
        fontStyle: FontStyle.None,
        color: 'black',
        borderColor: 'black',
        backgroundColor: '#daeaf7ff',
        alignment: 'Left',
        options: customOptions
      };
    }
  },
}
}
</script>

accessibilityTags AccessibilityTags

Gets the Accessibility Tags object of the pdf viewer.

ajaxRequestSettings AjaxRequestSettingsModel

Defines the ajax Request settings of the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :ajaxRequestSettings='ajaxRequestSettings'> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
      "ejs-pdfviewer": PdfViewerComponent
  },
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  ajaxRequestSettings : {
    // HTTP header "X-Custom-Header": "Custom header value" // Custom HTTP header
    ajaxHeaders: [
      {
        headerName: "Authorization",
        headerValue: "Bearerabcdefghijklmnopqrstuvwxyz",
      },
    ],

    withCredentials: false,
  },
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

annotation Annotation

Gets the annotation object of the pdf viewer.

annotationCollection any[]

Get the Loaded document annotation Collections in the PdfViewer control.

<template>
  <div id="app">
    <button v-on:click="annot">Annotation Collection</button>
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath"> </ejs-pdfviewer>
  </div>
</template>

<script>
import {PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
      "ejs-pdfviewer": PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
  annot: function() {
    var viewer = document.getElementById('pdfViewer').ej2_instances[0];
    console.log(viewer.annotationCollection);
  }
 }
}
</script>

annotationDrawingOptions AnnotationDrawingOptionsModel

Options for configuring line type annotation drawing behavior.

<template>
  <div id="app"><ejs-pdfviewer id="pdfViewer" :annotationDrawingOptions="annotationDrawingOptions" :resourceUrl="resourceUrl" :documentPath="documentPath"> </ejs-pdfviewer>
  </div>
</template>
<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  resourceUrl="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  annotationDrawingOptions : {enableLineAngleConstraints : true, restrictLineAngleTo: 90}
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
 }
}
</script>

annotationSelectorSettings AnnotationSelectorSettingsModel

Defines the settings of annotation selector.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :annotationSelectorSettings='annotationSelectorSettings'> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
   components: {
      "ejs-pdfviewer": PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  // Change the annotation selector settings.
  annotationSelectorSettings:{
    selectionBorderColor: '#0000FF', 
    resizerBorderColor: '#FF0000', 
    resizerFillColor: '#4070FF',
    resizerSize: 8, 
    selectionBorderThickness: 1, 
    resizerShape: 'Square', 
    selectorLineDashArray: [5, 6], 
    resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
    resizerCursorType: null 
  },
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

annotationSettings AnnotationSettingsModel

Defines the settings of the annotations.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :annotationSettings="annotationSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  // Change the annotation settings.
  annotationSettings : {
    author: 'XYZ', 
    minHeight: 10, 
    minWidth: 10, 
    maxWidth: 100, 
    maxHeight: 100, 
    isLock: false, 
    skipPrint: false, 
    skipDownload: false, 
    allowedInteractions: ['Resize'] 
  },
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

areaSettings AreaSettingsModel

Defines the settings of area annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :areaSettings='areaSettings'> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  // Change the area annotation settings.
  areaSettings:{ 
    opacity: 1, 
    fillColor: '#ffffff00', 
    strokeColor: '#ff0000', 
    author: 'XYZ', 
    thickness: 1, 
    minHeight: 10, 
    minWidth: 10, 
    maxWidth: 100, 
    maxHeight: 100, 
    isLock: false, 
    annotationSelectorSettings: { 
      selectionBorderColor: '#0000FF',
      resizerBorderColor: '#000000',
      resizerFillColor: '#4070ff', 
      resizerSize: 8, 
      selectionBorderThickness: 1, 
      resizerShape: 'Circle', 
      selectorLineDashArray: [5, 6], 
      resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
      resizerCursorType: CursorType.grab 
    }, 
    allowedInteractions: ['Resize'], 
    isPrint: true 
  },
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

arrowSettings ArrowSettingsModel

Defines the settings of arrow annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :arrowSettings="arrowSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  // Change the arrow annotation settings.
  arrowSettings:{ 
    opacity: 1, 
    fillColor: '#9c2592', 
    strokeColor: '#ff0000', 
    author: 'XYZ', 
    thickness: 1, 
    borderDashArray: 0, 
    lineHeadStartStyle: 'Closed', 
    lineHeadEndStyle: 'Closed', 
    annotationSelectorSettings: {
      selectionBorderColor: '#0000FF', 
      resizerBorderColor: '#000000', 
      resizerFillColor: '#FF4081', 
      resizerSize: 8, 
      selectionBorderThickness: 1, 
      resizerShape: 'Square', 
      selectorLineDashArray: [5, 6], 
      resizerLocation: 
      AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
      resizerCursorType: CursorType.grab 
    }, 
    minHeight: 10, 
    minWidth: 10, 
    maxWidth: 100, 
    maxHeight: 100, 
    isLock: false, 
    allowedInteractions: ['Resize'], 
    isPrint: true 
  },
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

bookmark BookmarkView

Gets the bookmark view object of the pdf viewer.

checkBoxFieldSettings CheckBoxFieldSettingsModel

Get or set the check box field settings.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" ref="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :created="onCreated"> </ejs-pdfviewer>
  </div>
</template>

<script>
import {PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
      "ejs-pdfviewer": PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  };
},
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
    onCreated: function () {
      if (this.$refs.pdfViewer) {
      const viewer = this.$refs.pdfViewer.ej2Instances;
      viewer.checkBoxFieldSettings = {
        name: 'CheckBox',
        isReadOnly: false,
        visibility: 'visible',
        isRequired: false,
        isPrint: true,
        tooltip: 'CheckBox',
        thickness: 4,
        isSelected: true,
        backgroundColor: '#daeaf7ff',
        borderColor: '#000000',
        value: 'CheckBox'
      };
    }
  },
}
}
</script>

circleSettings CircleSettingsModel

Defines the settings of circle annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :circleSettings="circleSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  // Change the circle annotation settings.
  circleSettings:{    
    opacity: 1, 
    fillColor: '#9c2592', 
    strokeColor: '#ff0000', 
    author: 'XYZ', 
    thickness: 1, 
    annotationSelectorSettings: { 
      selectionBorderColor: '#0000ff',
      resizerBorderColor: '#000000', 
      resizerFillColor: '#FF4081', 
      resizerSize: 8, 
      selectionBorderThickness: 1, 
      resizerShape: 'Square', 
      selectorLineDashArray: [5, 6], 
      resizerLocation: 
      AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
      resizerCursorType: CursorType.grab 
    }, 
    minHeight: 10, 
    minWidth: 10, 
    maxWidth: 100, 
    maxHeight: 100, 
    isLock: false, 
    allowedInteractions: ['Resize'], 
    isPrint: true 
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

commandManager CommandManagerModel

Defines a set of custom commands and binds them with a set of desired key gestures.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :documentLoad="documentLoad"  :commandManager="commandManager" :keyboardCustomCommands="keyboardCustomCommands"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PdfKeys, ModifierKeys } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
    return {
    resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
    documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
    commandManager : {
        keyboardCommand: [{
            name: 'customCopy',
            gesture: {
                pdfKeys: PdfKeys.G,
                modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
            }
        },
        {
            name: 'customPaste',
            gesture: {
                pdfKeys: PdfKeys.H,
                modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
            }
        }]
    },
    };
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
	keyboardCustomCommands: function (args) {
    console.log(args);
	},
  }
}
</script>

Defaults to {}

contextMenuOption ContextMenuAction

Specifies the state of the ContextMenu in the PDF document.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :contextMenuOption="contextMenuOption"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  // Change the settings of the context menu option.
  contextMenuOption : "None"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to RightClick

contextMenuSettings ContextMenuSettingsModel

Defines the context menu settings.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :contextMenuSettings="contextMenuSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, ContextMenuItem } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  // Change the context menu settings.
  contextMenuSettings : { 
    contextMenuAction: 'RightClick', 
    contextMenuItems: [
      ContextMenuItem.Comment, 
      ContextMenuItem.Copy, 
      ContextMenuItem.Cut, 
      ContextMenuItem.Delete, 
      ContextMenuItem.Highlight, 
      ContextMenuItem.Paste, 
      ContextMenuItem.Properties, 
      ContextMenuItem.ScaleRatio, 
      ContextMenuItem.Strikethrough, 
      ContextMenuItem.Underline
    ] 
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

currentPageNumber number

Returns the current page number of the document displayed in the PdfViewer control.

<template>
  <div id="app">
    <button v-on:click="page">Current Page Number</button>
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
  page: function() {
    var viewer = document.getElementById('pdfViewer').ej2_instances[0];
    console.log("Current page number is - " + viewer.currentPageNumber);
  }
 }
}
</script>

Defaults to 0

customFonts string[]

Specifies a collection of font names as strings. These fonts must be located in the resourceUrl folder.

Defaults to []

customStamp CustomStampModel[]

Defines the stamp items of the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :customStampSettings="customStampSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  // Add your custom stamp image source as base64 image.
  customStampSettings: {
    isAddToMenu: true,
    enableCustomStamp: true,
    customStamps: [
    { 
      customStampName: 'SampleSignature', 
      customStampImageSource: "data:image/png;base64, Syncfusion pdf viewer"
    }
    ]
  },
};
},
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

customStampSettings CustomStampSettingsModel

Defines the settings of customStamp annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :customStampSettings="customStampSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  // Change the custom stamp settings.
  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 
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

dateTimeFormat string

Customize desired date and time format

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :dateTimeFormat="dateTimeFormat"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  // Change the date time format.
  dateTimeFormat: "yyyy-MM-dd HH:mm:ss",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

designerMode boolean

Enable or disable the interaction of form fields in the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :designerMode="true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to false

disableContextMenuItems ContextMenuItem[]

Disables the menu items in the context menu.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :disableContextMenuItems="disableContextMenuItems"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, ContextMenuItem } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  // Show or hide the context menu items.
  disableContextMenuItems:[
    ContextMenuItem.Copy,
    ContextMenuItem.Paste
  ]
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to []

distanceSettings DistanceSettingsModel

Defines the settings of distance annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :distanceSettings="distanceSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  // Change the distance annotation settings.
  distanceSettings : { 
    opacity: 1, 
    fillColor: '#ffffff00', 
    strokeColor: '#ff0000', 
    author: 'Guest', 
    thickness: 1, 
    borderDashArray: 0, 
    lineHeadStartStyle: 'Closed', 
    lineHeadEndStyle: 'Closed', 
    annotationSelectorSettings: { 
      selectionBorderColor: '#0000ff', 
      resizerBorderColor: '#000000', 
      resizerFillColor: '#FF4081', 
      resizerSize: 8, 
      selectionBorderThickness: 1, 
      resizerShape: 'Square', 
      selectorLineDashArray: [5, 6], 
      resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
      resizerCursorType: CursorType.grab 
    }, 
    minHeight: 10, 
    minWidth: 10, 
    maxWidth: 100, 
    maxHeight: 100, 
    isLock: false, 
    leaderLength: 40, 
    resizeCursorType: CursorType.move, 
    allowedInteractions: ['Resize'], 
    isPrint: true 
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

documentPath string

Sets the PDF document path for initial loading.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerPlugin
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

downloadFileName string

Gets or sets the download file name in the PdfViewer control.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :downloadFileName="downloadFileName"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  downloadFileName: 'Document_Downloaded',
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

enableAccessibilityTags boolean

Determines whether accessibility tags are enabled or disabled.
Accessibility tags can help make web content more accessible to users with disabilities.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :enableAccessibilityTags=false> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AccessibilityTags} from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AccessibilityTags]
  }
}
</script>

Defaults to true

enableAnnotation boolean

Enable or disable the annotation in the PDF Viewer.

<template>
<div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableAnnotation="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableAnnotationToolbar boolean

Enable or disable the annotation toolbar and the PDF document is loaded with annotations in the PDF Viewer control initially.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableAnnotationToolbar="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableAutoComplete boolean

Enable or disables the auto complete option in form documents.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableAutoComplete="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableBookmark boolean

Enables or disables the bookmark view in the PDF viewer

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableBookmark="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableBookmarkStyles boolean

Enables or disables the bookmark styles in the PDF viewer

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableBookmarkStyles="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to false

enableCommentPanel boolean

Enable or disables the Comment Panel of PdfViewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableCommentPanel="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableDesktopMode boolean

Gets or sets a boolean value to show or hide desktop toolbar in mobile devices.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableDesktopMode="true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to false

enableDownload boolean

Enable or disables the download option of PdfViewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableDownload="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableFormDesigner boolean

Show or hide the form designer tool in the main toolbar of the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableFormDesigner="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableFormDesignerToolbar boolean

Enable or disable the form designer toolbar and the PDF document is loaded with from fields in the PDF Viewer control initially.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableFormDesignerToolbar="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components:{
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableFormFields boolean

Enable or disable the form fields in the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableFormFields="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields} from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields]
  }
}
</script>

Defaults to true

enableFormFieldsValidation boolean

Enable or disable the form fields validation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableFormFieldsValidation="true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to false

enableFreeText boolean

Enable or disable the free text annotation in the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableFreeText="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableHandwrittenSignature boolean

Enables or disables the handwritten signature in PDF document.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableHandwrittenSignature="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableHyperlink boolean

Enables or disables the hyperlinks in PDF document.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableHyperlink="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableImportAnnotationMeasurement boolean

Enable or disable the customization of measure values in PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableImportAnnotationMeasurement="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableInkAnnotation boolean

If it is set as false, then the ink annotation support in the PDF Viewer will be disabled. By default it is true.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableInkAnnotation="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableLocalStorage boolean

Enable or disable session storage for PDF Viewer data.
When true, the PDF Viewer stores data in an internal collection instead of session storage.
When false, the default session storage mechanism is used.
Remarks:

• Setting enableLocalStorage to true stores all session-specific data (e.g., form fields, annotations, signatures) in memory, increasing memory usage based on the document size and content complexity.
• Larger documents or those with more interactive elements will consume more memory.
• Ensure proper cleanup by destroying the PDF Viewer instance when no longer needed to avoid memory leaks.

Defaults to false

enableMagnification boolean

Enable or disable the Magnification module of PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableMagnification="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableMeasureAnnotation boolean

Enable or disable the calibrate annotation in the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableMeasureAnnotation="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableMultiLineOverlap boolean

Enable or disable the multi line text markup annotations in overlapping collections.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :enableMultiLineOverlap = "true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to false

enableMultiPageAnnotation boolean

Enables or disables the multi-page text markup annotation selection in UI.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableMultiPageAnnotation="true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to false

enableNavigation boolean

Enable or disable the Navigation module of PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableNavigation="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableNavigationToolbar boolean

Enable or disables the Navigation toolbar of PdfViewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableNavigationToolbar="true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enablePageOrganizer boolean

add or remove the page organizer in the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enablePageOrganizer="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,  PageOrganizer]
  }
}
</script>

Defaults to true

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enablePinchZoom boolean

Enable or disable the pinch zoom option in the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enablePinchZoom="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,  PageOrganizer]
  }
}
</script>

Defaults to true

enablePrint boolean

Enable or disables the print option of PdfViewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enablePrint="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,  PageOrganizer]
  }
}
</script>

Defaults to true

enablePrintRotation boolean

If it is set as FALSE, will suppress the page rotation of Landscape document on print action. By default it is TRUE.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enablePrintRotation="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,  PageOrganizer]
  }
}
</script>

Defaults to true

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableShapeAnnotation boolean

Enable or disable the shape annotation in the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableShapeAnnotation="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,  PageOrganizer]
  }
}
</script>

Defaults to true

enableShapeLabel boolean

Enable or disable the Label for shapeAnnotations of PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableShapeLabel="true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,  PageOrganizer]
  }
}
</script>

Defaults to false

enableStampAnnotations boolean

Enables and disable the stamp annotations when the PDF viewer control is loaded initially.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableStampAnnotations="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,  PageOrganizer]
  }
}
</script>

Defaults to true

enableStickyNotesAnnotation boolean

Enables and disable the stickyNotes annotations when the PDF viewer control is loaded initially.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableStickyNotesAnnotation="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,  PageOrganizer]
  }
}
</script>

Defaults to true

enableTextMarkupAnnotation boolean

Enable or disable the text markup annotation in the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableTextMarkupAnnotation="false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,  PageOrganizer]
  }
}
</script>

Defaults to true

enableTextMarkupResizer boolean

Enable or disable the text markup resizer to modify the bounds in UI.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :enableTextMarkupResizer="true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,  PageOrganizer]
  }
}
</script>

Defaults to false

enableTextSearch boolean

Enable or disable the text search in the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :enableTextSearch = "false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableTextSelection boolean

Enable or disable the text selection in the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :enableTextSelection = "false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableThumbnail boolean

Enables or disables the thumbnail view in the PDF viewer

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :enableThumbnail = "false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableToolbar boolean

Enable or disables the toolbar of PdfViewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :enableToolbar = "false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

enableZoomOptimization boolean

Enable or disable the zoom optimization mode in PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :enableZoomOptimization = "false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

exportAnnotationFileName string

Gets or sets the export annotations JSON file name in the PdfViewer control.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :exportAnnotationFileName="exportAnnotationFileName"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  exportAnnotationFileName:"Annotation export file_1"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

extractTextOption ExtractTextOption

Enables different levels of extract text for the Standalone PDF Viewer.
The choice of extractTextCompleted determines the content of the textData.
Options:

• ExtractTextOption.TextAndBounds: Indicates that both plain text and text with bounds (layout information) are returned.
  This is the default behavior, providing both the extracted text and its positional data.
  Use this option when you need both the textual content and its layout information for further processing or analysis.
• ExtractTextOption.TextOnly: Indicates that only plain text is extracted and returned.
  This option does not include any additional bounds information.
• ExtractTextOption.BoundsOnly: Indicates that text is returned along with layout information, such as bounds or coordinates.
  This option does not include plain text and is useful when only positional data is required.
• ExtractTextOption.None: Indicates that no text information is returned. This option is not applicable for the ExtractText method and is only used in the extractTextCompleted event when no text data is available.

This property is used to determine how textData should be managed during the extractTextCompleted event.

Defaults to ‘TextAndBounds’

fileName string

Gets or sets the document name loaded in the PdfViewer control.

<template>
  <div id="app">
    <button v-on:click="file">File Name</button>
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
  file: function() {
    var viewer = document.getElementById('pdfViewer').ej2_instances[0];
    console.log("File name - " + viewer.fileName);
  }
 }
}
</script>

formDesigner FormDesigner

Gets the FormDesigner object of the pdf viewer.

formFieldCollections FormFieldModel[]

Gets the form fields present in the loaded PDF document. It used to get the form fields id, name, type and it’s values.

<template>
  <div id="app">
    <button v-on:click="formCollect">Form Fields Collection</button>
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
  formCollect: function() {
    var viewer = document.getElementById('pdfViewer').ej2_instances[0];
    console.log(viewer.formFieldCollections);
  }
 }
}
</script>

freeTextSettings FreeTextSettingsModel

Defines the settings of free text annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :freeTextSettings="freeTextSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
  // Changes the free text annotation settings.
  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
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

handWrittenSignatureSettings HandWrittenSignatureSettingsModel

Defines the settings of handWrittenSignature.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :handWrittenSignatureSettings="handWrittenSignatureSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, DisplayMode, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Changes the hand written signature settings.
  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
    }
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

height string|number

Defines the scrollable height of the PdfViewer control.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :height = "height"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  height = 500,
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to ‘auto’

hideSaveSignature boolean

Gets or sets a boolean value to show or hide the save signature check box option in the signature dialog.
FALSE by default

Defaults to false

highlightSettings HighlightSettingsModel

Defines the settings of highlight annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :highlightSettings="highlightSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner AnnotationResizerLocation } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Changes the highlight annotation settings.
  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
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

hyperlinkOpenState LinkTarget

Specifies the open state of the hyperlink in the PDF document.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :hyperlinkOpenState="hyperlinkOpenState"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  hyperlinkOpenState : 'NewTab',
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to CurrentTab

initialDialogSettings SignatureDialogSettingsModel

Get or set the signature dialog settings for initial field.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :initialDialogSettings="initialDialogSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, DisplayMode } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Changes the initial dialog settings.
  initialDialogSettings :{ 
    displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
    hideSaveSignature: true
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

initialFieldSettings InitialFieldSettingsModel

Get or set the initial field settings.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :initialFieldSettings="initialFieldSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, DisplayMode } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  initialFieldSettings:{
    typeSignatureFonts:['Allura', 'Tangerine', 'Sacramento', 'Inspiration']
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

initialRenderPages number

Initially renders the first N pages of the PDF document when the document is loaded.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :initialRenderPages=4> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AccessibilityTags} from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AccessibilityTags]
  }
}
</script>

Defaults to 2

inkAnnotationSettings InkAnnotationSettingsModel

Defines the ink annotation settings for PDF Viewer.It used to customize the strokeColor, thickness, opacity of the ink annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :inkAnnotationSettings="inkAnnotationSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Changes the ink annotation settings.
  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
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

interactionMode InteractionMode

Sets the interaction mode of the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :interactionMode="interactionMode"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the interaction mode.
  interactionMode = "Pan";
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to TextSelection

isAnnotationToolbarVisible boolean

Opens the annotation toolbar when the PDF document is loaded in the PDF Viewer control initially
and get the annotation Toolbar Visible status.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :isAnnotationToolbarVisible="isAnnotationToolbarVisible"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Show or hide the annotation tool bar.
  isAnnotationToolbarVisible = true;
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to false

isBookmarkPanelOpen boolean

Gets or sets a boolean value to show or hide the bookmark panel while loading a document.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :isBookmarkPanelOpen = "true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to false

isCommandPanelOpen boolean

If it set as true, then the command panel show at initial document loading in the PDF viewer

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :isCommandPanelOpen = "true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to false

isDocumentEdited boolean

Checks whether the PDF document is edited.

<template>
  <div id="app">
    <button v-on:click="isDocument">Is Document Edited</button>
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
  isDocument: function() {
    var viewer = document.getElementById('pdfViewer').ej2_instances[0];
    console.log("Is the document edited - " + viewer.isDocumentEdited);
  }
 }
}
</script>

isExtractText boolean

Enable or disable the text extract from the PDF viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :isExtractText = "true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to false

isFormDesignerToolbarVisible boolean

Opens the form designer toolbar when the PDF document is loaded in the PDF Viewer control initially
and get the form designer Toolbar Visible status.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :isFormDesignerToolbarVisible = "true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to false

isFormFieldDocument boolean

Enable if the PDF document contains form fields.

<template>
  <div id="app">
    <button v-on:click="isFormField">Is Form Field</button>
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
  annot: function() {
    var isFormField = document.getElementById('pdfViewer').ej2_instances[0];
    console.log("Is form fields exist in the document - " + viewer.isFormFieldDocument);
  }
 }
}
</script>

Defaults to false

isMaintainSelection boolean

Maintain the selection of text markup annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :isMaintainSelection = "true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to false

isPageOrganizerOpen boolean

Specifies whether the page organizer dialog will be displayed upon the initial document loading in the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :isPageOrganizerOpen = "true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer]
  }
}
</script>

Defaults to false

isSignatureEditable boolean

Enables or disable saving Hand Written signature as editable in the PDF.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :isSignatureEditable = "true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to false

isThumbnailViewOpen boolean

If it set as true, then the thumbnail view show at initial document loading in the PDF Viewer

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :isThumbnailViewOpen = "true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to false

isValidFreeText boolean

Checks if the freeText value is valid or not.

<template>
  <div id="app">
    <button v-on:click="validText">Is valid FreeText</button>
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
  validText: function() {
    var viewer = document.getElementById('pdfViewer').ej2_instances[0];
    console.log("Is valid FreeText - " + viewer.isValidFreeText);
  }
 }
}
</script>

Defaults to false

lineSettings LineSettingsModel

Defines the settings of line annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :lineSettings="lineSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the line annotation settings.
  lineSettings : {
    opacity: 1,
    color: "#9c2592",
    fillColor: '#ffffff00',
    strokeColor: '#ff0000',
    author: "XYZ",
    thickness: 1,
    borderDashArray: 0, 
    lineHeadStartStyle: 'None', 
    lineHeadEndStyle: 'None',
    annotationSelectorSettings: {
      selectionBorderColor: "blue",
      resizerBorderColor: "black",
      resizerFillColor: "#FF4081",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Square",
      selectorLineDashArray: [5, 6],
      resizerLocation:
      AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
      resizerCursorType: CursorType.grab
    },
    minHeight: 10, 
    minWidth: 10, 
    maxWidth: 100, 
    maxHeight: 100, 
    isLock: false, 
    allowedInteractions: ['Resize'], 
    isPrint: true 
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

listBoxFieldSettings ListBoxFieldSettingsModel

Get or set the listbox field settings.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" ref="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :created="onCreated"> </ejs-pdfviewer>
  </div>
</template>

<script>
import {PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, FontStyle} from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
      "ejs-pdfviewer": PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  };
},
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
    onCreated: function () {
      if (this.$refs.pdfViewer) {
      const viewer = this.$refs.pdfViewer.ej2Instances;
      const customOptions = [
        { itemName: 'item1', itemValue: 'item1' },
        { itemName: 'item2', itemValue: 'item2' },
        { itemName: 'item3', itemValue: 'item3' }
      ];
      viewer.listBoxFieldSettings = {
        name: 'listbox',
        isReadOnly: false,
        visibility: 'visible',
        isRequired: false,
        isPrint: true,
        tooltip: 'listbox',
        thickness: 4,
        value: 'listbox',
        fontFamily: 'Courier',
        fontSize: 10,
        fontStyle: FontStyle.None,
        color: '#000000',
        borderColor: '#000000',
        backgroundColor: '#daeaf7ff',
        alignment: 'Left',
        options: customOptions
      };
    }
  },
}
}
</script>

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

magnification Magnification

Gets the magnification object of the pdf viewer.

maxZoom number

Specifies the maximum allowable zoom level for the control, with a default value of 400.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :zoomValue="zoomValue"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  maxZoom : 270,
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to 400

measurementSettings MeasurementSettingsModel

Defines the settings of measurement annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :measurementSettings="measurementSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the measurement annotation settings.
  measurementSettings : { 
    conversionUnit: 'cm', 
    displayUnit: 'cm', 
    scaleRatio: 1, 
    depth: 96 
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

minZoom number

Specifies the minimum acceptable zoom level for the control, with a default value of 10.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :zoomValue="zoomValue"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  minZoom : 45,
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to 10

navigation Navigation

Gets the navigation object of the pdf viewer.

pageCount number

gets the page count of the document loaded in the PdfViewer control.

<template>
  <div id="app">
    <button v-on:click="count">Page Count</button>
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
  count: function() {
    var viewer = document.getElementById('pdfViewer').ej2_instances[0];
    console.log("Total page count is - " + viewer.pageCount);
  }
 }
}
</script>

Defaults to 0

pageOrganizer PageOrganizer

Gets the page organizer object of the PDF Viewer.

pageOrganizerSettings PageOrganizerSettingsModel

This property allows for control over various page management functionalities within the PDF Viewer. By setting it to true, users will be able to delete, insert, rotate pages, rearrange pages. Conversely, setting it to false will disable these actions.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :pageOrganizerSettings="organizerSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the measurement annotation settings.
  organizerSettings : { 
    canInsert: true, 
    canRotate: false, 
    canDelete: true,
    canCopy: true,
    canRearrange: true,
    canImport: true,
    showImageZoomingSlider: true,
    imageZoomMin: 1,
    imageZoomMax: 5,
    imageZoom: 1
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer]
  }
}
</script>

pageOrganizerZoomChanged EmitType<PageOrganizerZoomChangedEventArgs>

Triggers when the zoom level changes in the Page Organizer view.
This event provides details about the previous and current zoom values

passwordFieldSettings PasswordFieldSettingsModel

Get or set the password field settings.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" ref="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :created="onCreated"> </ejs-pdfviewer>
  </div>
</template>

<script>
import {PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, FontStyle } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
      "ejs-pdfviewer": PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  };
},
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
    onCreated: function () {
      if (this.$refs.pdfViewer) {
      const viewer = this.$refs.pdfViewer.ej2Instances;
      viewer.passwordFieldSettings = {
        name: 'Password',
        isReadOnly: false,
        visibility: 'visible',
        isRequired: false,
        isPrint: true,
        tooltip: 'Password',
        thickness: 4,
        value: 'Password',
        fontFamily: 'Courier',
        fontSize: 10,
        fontStyle: FontStyle.None,
        color: '#000000',
        borderColor: '#000000',
        backgroundColor: '#daeaf7ff',
        alignment: 'Left',
        maxLength: 0
      };
    }
  },
}
}
</script>

perimeterSettings PerimeterSettingsModel

Defines the settings of perimeter annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :perimeterSettings="perimeterSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the perimeter annotation settings.
  perimeterSettings : {
    opacity: 1,
    fillColor: "#ffffff00",
    strokeColor: "#ff0000",
    author: "XYZ",
    thickness: 1,
    borderDashArray: 0,
    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
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

polygonSettings PolygonSettingsModel

Defines the settings of polygon annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :polygonSettings="polygonSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the polygon annotation settings.
  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
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

print Print

Gets the print object of the pdf viewer.

printMode PrintMode

Specifies the print mode in the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :printMode="printMode"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  printMode = "NewWindow",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to Default

printScaleFactor number

Specifies the document printing quality. The default printing quality is set to 1.0. This limit varies from 0.5 to 5.0. If an invalid value is specified, the default value of 1.0 will be used. For documents with smaller page dimensions, a higher print quality is recommended.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :printScaleFactor="printScaleFactor"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  printScaleFactor = 2;
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to 1.0

radioButtonFieldSettings RadioButtonFieldSettingsModel

Get or set the radio button field settings.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" ref="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :created="onCreated"> </ejs-pdfviewer>
  </div>
</template>

<script>
import {PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
      "ejs-pdfviewer": PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  };
},
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
    onCreated: function () {
      if (this.$refs.pdfViewer) {
      const viewer = this.$refs.pdfViewer.ej2Instances;
      viewer.radioButtonFieldSettings = {
        name: 'RadioButton',
        isReadOnly: false,
        visibility: 'visible',
        isRequired: false,
        isPrint: true,
        tooltip: 'RadioButton',
        thickness: 4,
        isSelected: true,
        backgroundColor: '#daeaf7ff',
        borderColor: 'black',
        value: 'RadioButton'
      };
    }
  },
}
}
</script>

radiusSettings RadiusSettingsModel

Defines the settings of radius annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :radiusSettings="radiusSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the radius annotation settings.
  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
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

rectangleSettings RectangleSettingsModel

Defines the settings of rectangle annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :rectangleSettings="rectangleSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the rectangle annotation settings.
  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
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

resourceUrl string

Set the resource URL for assets or the public directory. The standalone PDF Viewer will load its custom resources from this URL.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  resourceUrl:"http://localhost:8080/public/js/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to ’’

restrictZoomRequest boolean

restrict zoom request.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :restrictZoomRequest = "true"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to false

retryCount number

Specifies the retry count for the failed requests.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :retryCount="retryCount"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  retryCount = 3,
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to 1

retryStatusCodes number[]

Specifies the response status codes for retrying a failed request with a “3xx”, “4xx”, or “5xx” response status code.
The value can have multiple values, such as [500, 401, 400], and the default value is 500.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :retryStatusCodes="retryStatusCodes"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the retry status code as 405, 503, etc;
  retryStatusCodes = [500, 401, 400],
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to [500]

retryTimeout number

Gets or sets the timeout for retries in seconds.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :retryCount="5" :retryTimeout="10"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AccessibilityTags} from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AccessibilityTags]
  }
}
</script>

Defaults to 0

scrollSettings ScrollSettingsModel

Defines the scroll settings.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :scrollSettings="scrollSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  scrollSettings : { 
    delayPageRequestTimeOnScroll: 150 
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

selectedItems SelectorModel

Defines the collection of selected items, size and position of the selector

Defaults to {}

serverActionSettings ServerActionSettingsModel

Defines the settings of the PDF Viewer service.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :serverActionSettings="serverActionSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the server action settings.
  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"
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

serviceUrl string

Defines the service url of the PdfViewer control.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

shapeLabelSettings ShapeLabelSettingsModel

Defines the settings of shape label.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :enableShapeLabel = "true" :shapeLabelSettings="shapeLabelSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the shape label settings.
  shapeLabelSettings : { 
    opacity: 1, 
    fillColor: '#9c2592', 
    borderColor: '#ff0000', 
    fontColor: '#000', 
    fontSize: 16, 
    labelHeight: 24.6, 
    labelMaxWidth: 151, 
    labelContent: 'XYZ' 
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

showDigitalSignatureAppearance boolean

Show or hide the digital signature appearance in the document.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :showDigitalSignatureAppearance = "false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

showNotificationDialog boolean

If it is set as false then error message box is not displayed in PDF viewer control.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :showNotificationDialog = "false"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to true

signatureCollection any[]

Get the Loaded document signature Collections in the PdfViewer control.

<template>
  <div id="app">
    <button v-on:click="signature">Signature Collection</button>
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
  signature: function() {
    var viewer = document.getElementById('pdfViewer').ej2_instances[0];
    console.log(viewer.signatureCollection);
  }
 }
}
</script>

signatureDialogSettings SignatureDialogSettingsModel

Get or set the signature dialog settings for signature field.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :signatureDialogSettings="signatureDialogSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, DisplayMode } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the signature dialog settings.
  signatureDialogSettings : { 
    displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload, hideSaveSignature: true
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

signatureFieldSettings SignatureFieldSettingsModel

Get or set the signature field settings.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :signatureFieldSettings="signatureFieldSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, DisplayMode } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  signatureFieldSettings:{
    typeSignatureFonts:['Allura', 'Tangerine', 'Sacramento', 'Inspiration']
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

signatureFitMode SignatureFitMode

Specifies the signature mode in the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :signatureFitMode="signatureFitMode"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the signature fit.
  signatureFitMode : "Stretch"
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to Default

squigglySettings SquigglySettingsModel

Defines the settings of squiggly annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :squigglySettings="squigglySettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the squiggly annotation settings.
  squigglySettings : {
    opacity: 1,
    color: "#ff0000",
    author: "XYZ",
    annotationSelectorSettings: {
      selectionBorderColor: "blue",
      resizerBorderColor: "black",
      resizerFillColor: "#FF4081",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Square",
      selectorLineDashArray: [5, 6],
      resizerLocation:
      AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges
    },
    isLock: false,
    enableMultiPageAnnotation: false,
    enableTextMarkupResizer: false,
    allowedInteractions: ["Resize"],
    isPrint: true
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

stampSettings StampSettingsModel

Defines the settings of stamp annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :stampSettings="stampSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, DynamicStampItem, SignStampItem, StandardBusinessStampItem, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the stamp annotation settings.
  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
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

stickyNotesSettings StickyNotesSettingsModel

Defines the settings of stickyNotes annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :stickyNotesSettings="stickyNotesSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf"
  // Change the sticky note annotation settings.
  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
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

strikethroughSettings StrikethroughSettingsModel

Defines the settings of strikethrough annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :strikethroughSettings="strikethroughSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the strikethrough annotation settings.
  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
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

textFieldSettings TextFieldSettingsModel

Get or set the text field settings.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" ref="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath" :created="onCreated"> </ejs-pdfviewer>
  </div>
</template>

<script>
import {PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, FontStyle } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  name: 'app',
  components: {
      "ejs-pdfviewer": PdfViewerComponent
  },
  data () {
return {
  resourceUrl:"https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
  documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
  };
},
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  },
  methods: {
    onCreated: function () {
      if (this.$refs.pdfViewer) {
      const viewer = this.$refs.pdfViewer.ej2Instances;
      viewer.textFieldSettings = {
        name: 'Textbox',
        isReadOnly: false,
        visibility: 'visible',
        isRequired: false,
        isPrint: true,
        tooltip: 'Textbox',
        thickness: 4,
        value: 'Textbox',
        fontFamily: 'Courier',
        fontSize: 10,
        fontStyle: FontStyle.None,
        color: '#000000',
        borderColor: '#000000',
        backgroundColor: '#daeaf7ff',
        alignment: 'Left',
        maxLength: 0,
        isMultiline: false
      };
    }
  },
}
}
</script>

textSearch TextSearch

Gets the text search object of the pdf viewer.

textSearchColorSettings TextSearchColorSettingsModel

Sets the settings for the color of the text search highlight.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :textSearchColorSettings="textSearchColorSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the text search color settings.
  textSearchColorSettings : { 
    searchHighlightColor: '#4070ff', 
    searchColor: '#FF4081' 
  };
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

textSelection TextSelection

Gets the TextSelection object of the pdf viewer.

thumbnailView ThumbnailView

Gets the thumbnail-view object of the pdf viewer.

tileRenderingSettings TileRenderingSettingsModel

Defines the tile rendering settings.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the tile rendering settings.
    viewer.tileRenderingSettings : {
      enableTileRendering: false, 
      x: 0, 
      y: 0
    }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

toolbar Toolbar

Gets the toolbar object of the pdf viewer.

toolbarSettings ToolbarSettingsModel

Defines the settings of the PDF Viewer toolbar.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :toolbarSettings="toolbarSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the tool bar settings.
  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"
    ]
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

underlineSettings UnderlineSettingsModel

Defines the settings of underline annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :underlineSettings="underlineSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the underline annotation settings.
  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
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

volumeSettings VolumeSettingsModel

Defines the settings of volume annotation.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :volumeSettings="volumeSettings"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  // Change the volume annotation settings.
  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
  }
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

width string|number

Defines the scrollable width of the PdfViewer control.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :width="width"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  width: 300,
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to ‘auto’

zoomMode ZoomMode

Specifies the rendering mode in the PDF Viewer.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :zoomMode="zoomMode"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  zoomMode : "FitToWidth",
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to Default

zoomPercentage number

Returns the current zoom percentage of the PdfViewer control.

zoomValue number

Sets the initial loading zoom value from 10 to 400 in the PDF Viewer Control.

<template>
  <div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :zoomValue="zoomValue"> </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
return {
  serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
  documentPath:"PDF_Succinctly.pdf",
  zoomValue : 75,
};
  },
  provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
  }
}
</script>

Defaults to 0

Methods

addAnnotation

Perform to add annotations in the PDF Viewer

Parameter	Type	Description
annotation	any	Specifies the annotation

Returns void

addCustomMenu

Adds a custom menu item to the existing menu, with optional configurations.

Parameter	Type	Description
menuItems	MenuItemModel[]	The custom menu item to be added.
disableDefaultItems (optional)	boolean	Optional. When set to true, this parameter disables the inclusion of default items in the menu. Defaults to false, meaning default items will be included.
appendToEnd (optional)	boolean	Optional. When set to true, the custom menu item will be added at the bottom of the existing menu list. If false or not provided, the item will be added at the default position.

Returns void

clearFormFields

Clears data from the form fields.
Parameter - Specifies the form field object.

Parameter	Type	Description
formField (optional)	any	It describes about the form field

Returns void

convertClientPointToPagePoint

Convert user coordinates to the PDF page coordinates.

Parameter	Type	Description
clientPoint	Point	The user should provide a x, y coordinates.
pageNumber	number	We need to pass pageNumber.

Returns Point

convertPagePointToClientPoint

Convert page coordinates to the user coordinates.

Parameter	Type	Description
pagePoint	Point	The user should provide a page x, y coordinates.
pageNumber	number	We need to pass pageNumber.

Returns Point

convertPagePointToScrollingPoint

Convert page coordinates to the scrolling coordinates.

Parameter	Type	Description
pagePoint	Point	The user should provide a page x, y coordinates.
pageNumber	number	We need to pass pageNumber.

Returns Point

deleteAnnotations

To delete the annotation Collections in the PDF Document.

Returns void

destroy

Destroys all managed resources used by this object.

Returns void

download

Downloads the PDF document being loaded in the ejPdfViewer control.

Returns void

exportAnnotation

Perform export annotations action in the PDF Viewer

Parameter	Type	Description
annotationDataFormat (optional)	AnnotationDataFormat	-Gets the annotation data format

Returns void

exportAnnotationsAsBase64String

Export annotations and returns a base64 string for both Json and XFDF formats

Parameter	Type	Description
annotationDataFormat	AnnotationDataFormat	Gets the annotation data format

Returns Promise

exportAnnotationsAsObject

Perform export annotations action in the PDF Viewer

Parameter	Type	Description
annotationDataFormat (optional)	AnnotationDataFormat	Export the annotation based on the format.

Returns Promise

exportFormFields

Exports the form field data in the specified data format.

Parameter	Type	Description
data (optional)	string	The path for exporting the fields.
formFieldDataFormat (optional)	FormFieldDataFormat	Form field data format

Returns void

exportFormFieldsAsObject

Returns an object which represents the form field data in the specified data format.

Parameter	Type	Description
formFieldDataFormat (optional)	FormFieldDataFormat	Form field data format

Returns Promise

extractText

Extracts text from a specific page of the PDF document based on the supplied options.

Parameter	Type	Description
pageIndex	number	The index of the page from which text will be extracted. The first page is indexed as 0.
options	ExtractTextOption	A configuration option specifying the type of text extraction, such as layout preferences.

Returns Promise

focusFormField

Focus a form field in a document by its field name or the field object.

Parameter	Type	Description
field	any	It describes about the field value

Returns void

getPageInfo

Retrieves the information of a specified page in the viewer.

Parameter	Type	Description
pageIndex	number	The page index to get the details. The first page is 0.

Returns PageInfoModel

getPageNumberFromClientPoint

Get page number from the user coordinates x and y.

Parameter	Type	Description
clientPoint	Point	The user will provide a x, y coordinates.

Returns number

importAnnotation

Perform imports annotations action in the PDF Viewer

Parameter	Type	Description
importData	any	Specifies the data for annotation imports
annotationDataFormat (optional)	AnnotationDataFormat	Specifies the annotation data format

Returns void

importFormFields

Imports the form fields data into the current PDF document.

Parameter	Type	Description
data (optional)	string	The path for importing the fields.
formFieldDataFormat (optional)	FormFieldDataFormat	Gets the form field data format

Returns void

load

Loads the given PDF document in the PDF viewer control

Parameter	Type	Description
document	string | Uint8Array	Specifies the document name for load
password	string	Specifies the Given document password

Returns void

redo

Perform redo action for the edited annotations

Returns void

resetFormFields

reset all form fields data

Returns void

retrieveFormFields

To retrieve the form fields in the PDF Document.

Returns FormFieldModel[]

saveAsBlob

Saves the PDF document being loaded in the PDF Viewer control as blob.

Returns Promise

setJsonData

To modify the Json Data in ajax request.

Returns void

showNotificationPopup

Specifies the message to be displayed in the popup.

Parameter	Type	Description
errorString	string	It describes about the error string value

Returns void

undo

Perform undo action for the edited annotations

Returns void

unload

Unloads the PDF document being displayed in the PDF viewer.

Returns void

updateFormFields

To update the form fields within a PDF document, but only when the FormDesigner module is either not injected or has been disabled.

Parameter	Type	Description
formFields	any	It describes about the form field

Returns void

updateFormFieldsValue

Update the form field values from externally.

Parameter	Type	Description
fieldValue	any	It describes about the field value

Returns void

updateViewerContainer

updates the PDF Viewer container width and height from externally.

Returns void

zoomToRect

Brings the given rectangular region to view and zooms in the document to fit the region in client area (view port).

Parameter	Type	Description
rectangle	Rect	Specifies the region in client coordinates that is to be brought to view.

Returns void

Events

addSignature EmitType<AddSignatureEventArgs>

Triggers when a signature is added to a page of a PDF document.

ajaxRequestFailed EmitType<AjaxRequestFailureEventArgs>

Triggers when the AJAX request is failed.

ajaxRequestInitiate EmitType<AjaxRequestInitiateEventArgs>

Triggers before the data is sent to the server.

ajaxRequestSuccess EmitType<AjaxRequestSuccessEventArgs>

Triggers on successful AJAX request.

annotationAdd EmitType<AnnotationAddEventArgs>

Triggers when an annotation is added to a PDF document’s page.

annotationDoubleClick EmitType<AnnotationDoubleClickEventArgs>

Triggers when the annotation is double clicked.

annotationMouseLeave EmitType<AnnotationMouseLeaveEventArgs>

Triggers when the user mouse moves away from the annotation object.

annotationMouseover EmitType<AnnotationMouseoverEventArgs>

Triggers when the mouse is moved over the annotation object.

annotationMove EmitType<AnnotationMoveEventArgs>

Triggers when an annotation is moved over the page of the PDF document.

annotationMoving EmitType<AnnotationMovingEventArgs>

Triggers while moving an annotation.

annotationPropertiesChange EmitType<AnnotationPropertiesChangeEventArgs>

Triggers when the annotation’s property is modified on a PDF document page.

annotationRemove EmitType<AnnotationRemoveEventArgs>

Triggers when an annotation is removed from a PDF document’s page.

annotationResize EmitType<AnnotationResizeEventArgs>

Triggers when an annotation is resized over the page of a PDF document.

annotationSelect EmitType<AnnotationSelectEventArgs>

Triggers when an annotation is selected over the page of the PDF document.

annotationUnSelect EmitType<AnnotationUnSelectEventArgs>

Triggers when an annotation is unselected over the page of the PDF document.

beforeAddFreeText EmitType<BeforeAddFreeTextEventArgs>

Triggers before adding a text in the freeText annotation.

bookmarkClick EmitType<BookmarkClickEventArgs>

Triggers when the bookmark is clicked in the PDF Viewer’s bookmark panel.

commentAdd EmitType<CommentEventArgs>

Triggers when a comment for the annotation is added to the comment panel.

commentDelete EmitType<CommentEventArgs>

Triggers when the comment for the annotation in the comment panel is deleted.

commentEdit EmitType<CommentEventArgs>

Triggers when the comment for the annotation in the comment panel is edited.

commentSelect EmitType<CommentEventArgs>

Triggers when the comment for the annotation in the comment panel is selected.

commentStatusChanged EmitType<CommentEventArgs>

Triggers when the annotation’s comment for status is changed in the comment panel.

created EmitType<void>

Triggers during the creation of the PDF viewer component.

customContextMenuBeforeOpen EmitType<CustomContextMenuBeforeOpenEventArgs>

Fires before the custom context menu option is opened.

customContextMenuSelect EmitType<CustomContextMenuSelectEventArgs>

Fires when a custom context menu option is selected.

documentLoad EmitType<LoadEventArgs>

Triggers while loading document into PDF viewer.

documentLoadFailed EmitType<LoadFailedEventArgs>

Triggers while document loading failed in PdfViewer.

documentUnload EmitType<UnloadEventArgs>

Triggers while closing the document.

downloadEnd EmitType<DownloadEndEventArgs>

Triggers when the download actions are completed.

downloadStart EmitType<DownloadStartEventArgs>

Triggers when the download action is initiated.

exportFailed EmitType<ExportFailureEventArgs>

Triggers when the annotations export in a PDF document fails.

exportStart EmitType<ExportStartEventArgs>

Triggers when an exported annotation started in the PDF Viewer.

exportSuccess EmitType<ExportSuccessEventArgs>

Triggers when the annotations in a PDF document are successfully exported.

extractTextCompleted EmitType<ExtractTextCompletedEventArgs>

Triggers when an text extraction is completed in the PDF Viewer.

formFieldAdd EmitType<FormFieldAddArgs>

Triggers when a form field is added.

formFieldClick EmitType<FormFieldClickArgs>

Triggers when the form field is selected.

formFieldDoubleClick EmitType<FormFieldDoubleClickArgs>

Triggers when the form field is double-clicked.

formFieldFocusOut EmitType<FormFieldFocusOutEventArgs>

Triggers when focus out from the form fields.

formFieldMouseLeave EmitType<FormFieldMouseLeaveArgs>

Triggers when the mouse cursor leaves the form field.

formFieldMouseover EmitType<FormFieldMouseoverArgs>

Triggers when the mouse cursor is over a form field.

formFieldMove EmitType<FormFieldMoveArgs>

Triggers when a form field is moved.

formFieldPropertiesChange EmitType<FormFieldPropertiesChangeArgs>

Triggers when a property of form field is changed.

formFieldRemove EmitType<FormFieldRemoveArgs>

Triggers when a form field is removed.

formFieldResize EmitType<FormFieldResizeArgs>

Triggers when a form field is resized.

formFieldSelect EmitType<FormFieldSelectArgs>

Triggers when a form field is selected.

formFieldUnselect EmitType<FormFieldUnselectArgs>

Triggers when a form field is unselected.

hyperlinkClick EmitType<HyperlinkClickEventArgs>

Triggers when a hyperlink in a PDF document is clicked.

hyperlinkMouseOver EmitType<HyperlinkMouseOverArgs>

Triggers when hyperlink in a PDF document is hovered.

importFailed EmitType<ImportFailureEventArgs>

Triggers when the annotations imports in a PDF document fails.

importStart EmitType<ImportStartEventArgs>

Triggers when an imported annotation started to appear in the PDF document.

importSuccess EmitType<ImportSuccessEventArgs>

Triggers when the annotations in a PDF document are successfully imported.

keyboardCustomCommands EmitType<KeyboardCustomCommandsEventArgs>

Triggers when the customized keyboard command keys are pressed.

moveSignature EmitType<MoveSignatureEventArgs>

Triggers when a signature is moved across the page of a PDF document.

pageChange EmitType<PageChangeEventArgs>

Triggers when there is change in current page number.

pageClick EmitType<PageClickEventArgs>

Triggers when the mouse click is performed over the page of the PDF document.

pageMouseover EmitType<PageMouseoverEventArgs>

Triggers when moving the mouse over the page.

pageOrganizerSaveAs EmitType<PageOrganizerSaveAsEventArgs>

Triggers when the page organizer save as triggered.

pageRenderComplete EmitType<PageRenderCompleteEventArgs>

Triggers upon completion of page rendering.

pageRenderInitiate EmitType<PageRenderInitiateEventArgs>

Triggers upon the initiation of page rendering.

printEnd EmitType<PrintEndEventArgs>

Triggers when the print actions are completed.

printStart EmitType<PrintStartEventArgs>

Triggers when the print action is initiated.

removeSignature EmitType<RemoveSignatureEventArgs>

Triggers when the signature is removed from the page of a PDF document.

resizeSignature EmitType<ResizeSignatureEventArgs>

Triggers when the signature is resized and placed on a page of a PDF document.

resourcesLoaded EmitType<void>

Triggers after loading the Pdfium resources.

signaturePropertiesChange EmitType<SignaturePropertiesChangeEventArgs>

Triggers when the property of the signature is changed in the page of the PDF document.

signatureSelect EmitType<SignatureSelectEventArgs>

Triggers when signature is selected over the page of the PDF document.

signatureUnselect EmitType<SignatureUnselectEventArgs>

Triggers when signature is unselected over the page of the PDF document.

textSearchComplete EmitType<TextSearchCompleteEventArgs>

Triggers when the text search is completed.

textSearchHighlight EmitType<TextSearchHighlightEventArgs>

Triggers when the text search text is highlighted.

textSearchStart EmitType<TextSearchStartEventArgs>

Triggers when the text search is initiated.

textSelectionEnd EmitType<TextSelectionEndEventArgs>

Triggers when the text selection is complete.

textSelectionStart EmitType<TextSelectionStartEventArgs>

Triggers when the text selection is initiated.

thumbnailClick EmitType<ThumbnailClickEventArgs>

Triggers when the thumbnail in the PDF Viewer’s thumbnail panel is clicked.

toolbarClick EmitType<ClickEventArgs>

Triggers when custom toolbar item is clicked.

validateFormFields EmitType<ValidateFormFieldsArgs>

Triggers when validation is failed.

zoomChange EmitType<ZoomChangeEventArgs>

Triggers When the magnification value changes.