How to Disable the Context Menu in Vue PDF Viewer

14 Aug 20262 minutes to read

Set contextMenuOption to None to hide all context menu options. The default value is RightClick.

The following example disables the context menu:

<template>
  <div>
    <button @click="disableContextMenu">Disable ContextMenuOption</button>
    <ejs-pdfviewer
      ref="viewer"
      :serviceUrl="serviceUrl"
      :documentPath="documentPath"
      style="height: 640px; display: block;"
    ></ejs-pdfviewer>
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormDesigner,
  FormFields
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: 'DisableContextMenuViewer',
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: {
    PdfViewer: [
      Toolbar,
      Magnification,
      Navigation,
      LinkAnnotation,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormDesigner,
      FormFields
    ]
  },
  data() {
    return {
      serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer',
      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
    };
  },
  methods: {
    disableContextMenu() {
      this.$refs.viewer.ej2Instances.contextMenuOption = 'None';
    }
  }
};
</script>

This hides the context menu and prevents right-click interactions in the viewer.