Skip to content

Commit a910142

Browse files
vinoth-Kumar-Svinoth-Kumar-S
authored
Vue TreeGrid PDF Export sample
1 parent 59ce631 commit a910142

File tree

13 files changed

+323
-1
lines changed

13 files changed

+323
-1
lines changed

‎README.md‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,23 @@
1-
# exporting-vue-tree-grid-to-pdf-with-customization
1+
# Exporting Vue Tree Grid to Pdf with Customization
2+
23
A quick-start project that helps you export Syncfusion Vue TreeGrid records to PDF file format. This project contains code to customize the file name, theme, header, and footer of the exported PDF document.
4+
5+
Download an example from GitHub:
6+
https://github.com/SyncfusionExamples/exporting-vue-tree-grid-to-pdf-with-customization
7+
8+
Refer to the following documentation for all the PDF export options available in the Syncfusion Vue TreeGrid:
9+
https://ej2.syncfusion.com/vue/documentation/treegrid/pdf-export/pdf-export/
10+
11+
Check out this online example of exporting in the Syncfusion Vue TreeGrid:
12+
https://ej2.syncfusion.com/vue/demos/#/material/tree-grid/export.html
13+
14+
Refer to the following Syncfusion Vue TreeGrid getting started video:
15+
https://www.youtube.com/watch?v=FEMyOHKjjao
16+
17+
## Project prerequisites
18+
19+
Make sure that you have the latest versions of Vue, Node, Vue Class Component, and Visual Studio Code in your machine before starting to work on this project.
20+
21+
### How to run this application?
22+
23+
To run this application, you need to clone the `exporting-vue-tree-grid-to-pdf-with-customization` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `npm run serve` command.

‎babel.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎jsconfig.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"module": "esnext",
5+
"baseUrl": "./",
6+
"moduleResolution": "node",
7+
"paths": {
8+
"@/*": [
9+
"src/*"
10+
]
11+
},
12+
"lib": [
13+
"esnext",
14+
"dom",
15+
"dom.iterable",
16+
"scripthost"
17+
]
18+
}
19+
}

‎package.json‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "myvueproject",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"@syncfusion/ej2-vue-grids": "^20.2.45",
12+
"@syncfusion/ej2-vue-treegrid": "^20.2.45",
13+
"core-js": "^3.8.3",
14+
"vue": "^3.2.13",
15+
"vue-class-component": "^8.0.0-rc.1"
16+
},
17+
"devDependencies": {
18+
"@babel/core": "^7.12.16",
19+
"@babel/eslint-parser": "^7.12.16",
20+
"@vue/cli-plugin-babel": "~5.0.0",
21+
"@vue/cli-plugin-eslint": "~5.0.0",
22+
"@vue/cli-service": "~5.0.0",
23+
"eslint": "^7.32.0",
24+
"eslint-plugin-vue": "^8.0.3"
25+
},
26+
"eslintConfig": {
27+
"root": true,
28+
"env": {
29+
"node": true
30+
},
31+
"extends": [
32+
"plugin:vue/vue3-essential",
33+
"eslint:recommended"
34+
],
35+
"parserOptions": {
36+
"parser": "@babel/eslint-parser"
37+
},
38+
"rules": {}
39+
},
40+
"browserslist": [
41+
"> 1%",
42+
"last 2 versions",
43+
"not dead",
44+
"not ie 11"
45+
]
46+
}

‎public/favicon.ico‎

4.19 KB
Binary file not shown.

‎public/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎src/App.vue‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<template>
2+
<ejs-treegrid ref="treegrid" :dataSource="data" childMapping="subtasks"
3+
:treeColumnIndex="1" :height='450' :allowPaging="true"
4+
:allowPdfExport="true" :toolbar="toolbarOptions" :toolbarClick="toolbarBtnClick">
5+
<e-columns>
6+
<e-column field='ID' headerText='S.No' width='90' textAlign='Right'></e-column>
7+
<e-column field='Name' headerText='ShipMent Name' width='220'></e-column>
8+
<e-column field='category' headerText='Category' width='220'></e-column>
9+
<e-column field='unitPrice' headerText='Unit Price($)' format='c2' width='120' textAlign='Right'></e-column>
10+
<e-column field='price' headerText='Price($)' width='100' format='c' textAlign='Right'></e-column>
11+
</e-columns>
12+
</ejs-treegrid>
13+
</template>
14+
<script>
15+
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page, PdfExport, Toolbar } from "@syncfusion/ej2-vue-treegrid";
16+
import {summaryData} from './data.js';
17+
18+
export default{
19+
name: 'App',
20+
components: {
21+
'ejs-treegrid': TreeGridComponent,
22+
'e-columns': ColumnsDirective,
23+
'e-column': ColumnDirective
24+
},
25+
data: () => {
26+
return {
27+
data: summaryData,
28+
toolbarOptions: ['PdfExport']
29+
}
30+
},
31+
methods:{
32+
toolbarBtnClick:function(args){
33+
var treegridObj = this.$refs.treegrid.ej2Instances;
34+
if(args['item'].text ==='PDF Export'){
35+
treegridObj.pdfExport({
36+
fileName: "SummaryData.pdf",
37+
theme:{
38+
header:{
39+
fontColor: "#64FA50",
40+
fontName: "Calibri",
41+
fontSize: 10,
42+
bold: true
43+
},
44+
record:{
45+
fontSize: 8,
46+
fontName: "Calibri",
47+
fontColor: "#0000FF"
48+
}
49+
},
50+
header:{
51+
fromTop: 0,
52+
height: 130,
53+
contents: [
54+
{
55+
type: "Text",
56+
value: "Shipment Details",
57+
position: {x:0, y:50},
58+
style:{fontSize:20}
59+
}
60+
]
61+
},
62+
footer:{
63+
fromBottom: 130,
64+
height: 130,
65+
contents:[
66+
{
67+
type: 'Line',
68+
style: {penColor:"#000080", penSize:2, dashStyle:"Solid"},
69+
points: { x1: 0, y1: 4, x2: 685, y2: 4}
70+
}
71+
]
72+
}
73+
});
74+
}
75+
}
76+
},
77+
provide:{
78+
treegrid: [Page, PdfExport, Toolbar]
79+
}
80+
}
81+
</script>
82+
83+
<style>
84+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
85+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
86+
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
87+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
88+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
89+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
90+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
91+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
92+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
93+
@import "../node_modules/@syncfusion/ej2-vue-treegrid/styles/material.css";
94+
</style>

‎src/__VLS_template.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { TreeGridComponent } from '@syncfusion/ej2-vue-treegrid';
2+
3+
export default (await import('vue')).defineComponent({
4+
name: 'App',
5+
components: {
6+
'ejs-treegrid': TreeGridComponent
7+
}
8+
});
9+
const __VLS_template = () => ({});

‎src/assets/logo.png‎

6.69 KB
Loading

‎src/components/HelloWorld.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div class="hello">
3+
<h1>{{ msg }}</h1>
4+
<p>
5+
For a guide and recipes on how to configure / customize this project,<br>
6+
check out the
7+
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
8+
</p>
9+
<h3>Installed CLI Plugins</h3>
10+
<ul>
11+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13+
</ul>
14+
<h3>Essential Links</h3>
15+
<ul>
16+
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17+
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18+
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19+
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20+
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21+
</ul>
22+
<h3>Ecosystem</h3>
23+
<ul>
24+
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25+
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26+
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27+
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28+
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29+
</ul>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
name: 'HelloWorld',
36+
props: {
37+
msg: String
38+
}
39+
}
40+
</script>
41+
42+
<!-- Add "scoped" attribute to limit CSS to this component only -->
43+
<style scoped>
44+
h3 {
45+
margin: 40px 0 0;
46+
}
47+
ul {
48+
list-style-type: none;
49+
padding: 0;
50+
}
51+
li {
52+
display: inline-block;
53+
margin: 0 10px;
54+
}
55+
a {
56+
color: #42b983;
57+
}
58+
</style>

0 commit comments

Comments
 (0)