Print PDF in Vue PDF Viewer

25 Jun 20265 minutes to read

The Vue PDF Viewer includes built-in printing via the toolbar and APIs so users can control how documents are printed and monitor the process.

Select Print in the built-in toolbar to open the browser print dialog.

Enable or Disable Print in Vue PDF Viewer

The Syncfusion Vue PDF Viewer component lets users print a loaded PDF document through the built-in toolbar or programmatic calls. Control whether printing is available by setting the enablePrint property (true enables printing; false disables it).

The following Vue examples render the PDF Viewer with printing disabled.

App.vue

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfviewer"
      :enablePrint="false"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      style="height: 100vh"
    >
    </ejs-pdfviewer>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
      resourceUrl:
        'https://cdn.syncfusion.com/ej2/33.2.13/dist/ej2-pdfviewer-lib',
    };
  },

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

Print programmatically in Vue PDF Viewer

To start printing from code, call the pdfviewer.print.print() method after the document is fully loaded. This approach is useful when wiring up custom UI or initiating printing automatically; calling print before the document finishes loading can result in no output or an empty print dialog.

App.vue

<template>
  <div id="app">
    <button @click="printPdf">Print</button>
    <ejs-pdfviewer
      id="pdfviewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      style="height: 100vh"
    >
    </ejs-pdfviewer>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
      resourceUrl:
        'https://cdn.syncfusion.com/ej2/33.2.13/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    printPdf() {
      this.$refs.pdfviewer.ej2Instances.print.print();
    },
  },

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

Key capabilities

• Enable or disable printing with the enablePrint property
• Start printing from UI (toolbar Print) or programmatically using print.print().
• Control output quality with the printScaleFactor property (0.5–5)
• Auto‑rotate pages during print using enablePrintRotation
• Choose where printing happens with printMode (Default or NewWindow)
• Track the life cycle with printStart and printEnd events

Troubleshooting

• Ensure the resourceUrl value matches the deployed ej2-pdfviewer-lib version.
• Calling print() launches the browser print dialog; behavior varies by browser and may be affected by popup blockers or browser settings.

View Sample in GitHub

See Also

• Print quality
• Enable print rotation
• Print modes
• Print events