Unload document in Vue Pdfviewer component

16 Mar 20231 minute to read

The PDF Viewer library allows you to unload the PDF document being displayed in the PDF Viewer control programmatically using the unload() method.

The following steps are used to unload the PDF document programmatically.

Step 1: Follow the steps provided in the link to create a simple PDF Viewer sample.

Step 2: Add the following code snippet to perform the unload operation.

<template>
    <div>
        <button v-on:click="unload">Unload Document</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, FormDesigner, FormFields } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);

export default {
  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, FormDesigner, FormFields ]},

  methods: {
    unload: function() {
      var viewer = document.getElementById('pdfViewer').ej2_instances[0];
      // Unload the PDF document.
      viewer.unload();
    }
  }
}
</script>

Find the Sample, how to unload the PDF document programmatically