Unload document in Vue Pdfviewer component

8 Sep 20234 minutes 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 id="app">
     <button v-on:click="unload">Unload Document</button>
      <ejs-pdfviewer
        id="pdfViewer"
        ref="pdfviewer"
        :documentPath="documentPath">
      </ejs-pdfviewer>
  </div>
</template>

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

export default {
  name: 'app',
  data () {
    return {
      documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation, 
                 ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]},

  methods: {
    unload: function() {
      var viewer = document.getElementById('pdfViewer').ej2_instances[0];
      // Unload the PDF document.
      viewer.unload();
    }
  }
}
</script>
<template>
  <div id="app">
     <button v-on:click="unload">Unload Document</button>
      <ejs-pdfviewer
        id="pdfViewer"
        ref="pdfviewer"
        :documentPath="documentPath"
        :serviceUrl="serviceUrl">
      </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, 
         LinkAnnotation, BookmarkView, Annotation, ThumbnailView, 
         Print, TextSelection, TextSearch, 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:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation, 
                 ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]},

  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