Download in Vue Pdfviewer component
20 Mar 20231 minute to read
The PDF Viewer supports downloading the loaded PDF file. You can enable/disable the download using the following code snippet.
You can invoke download action using following code snippet.,
<template>
<div id="app">
<ejs-button ref="downloadBtn" v-on:click.native="downloadClicked">Download</ejs-button>
<ejs-pdfviewer
id="pdfViewer"
ref="pdfviewer"
:serviceUrl="serviceUrl"
:documentPath="documentPath"
:documentLoad="documentLoad">
</ejs-pdfviewer>
</div>
</template>
<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation,
Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch } from '@syncfusion/ej2-vue-pdfviewer';
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(PdfViewerPlugin);
var viewer;
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, Annotation,
BookmarkView, ThumbnailView, Print, TextSelection, TextSearch ]},
methods: {
downloadClicked: function (args) {
viewer.download();
},
documentLoad: function (args) {
viewer = this.$refs.pdfviewer.ej2Instances;
},
}
}
</script>