Pdf export in Vue Treegrid component
16 Mar 20236 minutes to read
PDF export allows exporting TreeGrid data to PDF document. You need to use the pdfExport
method for exporting. To enable PDF export in the treegrid, set the allowPdfExport
as true.
To use PDF export, inject the PdfExport
module in treegrid.
To get start quickly with Pdf export feature, you can check on this video:
<template>
<div id="app">
<ejs-treegrid ref='treegrid' :dataSource='data' height='220' childMapping='subtasks' :treeColumnIndex='1' :allowPaging='true' :pageSettings='pageSettings' :allowPdfExport='true' :toolbar='toolbarOptions' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='160'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin, Page, Toolbar, PdfExport } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
Vue.use(TreeGridPlugin);
export default {
data () {
return {
data: sampleData,
toolbarOptions: ['PdfExport'],
pageSettings: { pageSize: 7 }
};
},
methods: {
toolbarClick(args) {
if (args['item'].text === 'PDF Export') {
this.$refs.treegrid.pdfExport();
}
}
},
provide: {
treegrid: [ Page, Toolbar, PdfExport ]
}
}
</script>
Custom data source
PDF export provides an option to define datasource dynamically before exporting. To export data dynamically, define the dataSource
in exportProperties
.
<template>
<div id="app">
<ejs-treegrid ref='treegrid' :dataSource='data' height='220' childMapping='subtasks' :treeColumnIndex='1' :allowPaging='true' :pageSettings='pageSettings' :allowPdfExport='true' :toolbar='toolbarOptions' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='160'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin, Page, Toolbar, PdfExport } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
Vue.use(TreeGridPlugin);
export default {
data () {
return {
data: sampleData,
toolbarOptions: ['PdfExport'],
pageSettings: { pageSize: 7 }
};
},
methods: {
toolbarClick(args) {
if (args['item'].text === 'PDF Export') {
let pdfExportProperties = {
dataSource: sampleData,
}
this.$refs.treegrid.pdfExport(pdfExportProperties);
}
}
},
provide: {
treegrid: [ Page, Toolbar, PdfExport ]
}
}
</script>