Skip to content

Commit 56d6970

Browse files
abooarulrajabooarulraj
authored
Committed the example project.
0 parents  commit 56d6970

16 files changed

+423
-0
lines changed

‎README.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Exporting Vue Data Grid with Complete Customization
2+
3+
A quick-start project that helps you to enable PDF and Excel exporting in the DataGrid and export grid data to a PDF or Excel document. This project also contains a code snippet for the different customization options available for the PDF and Excel exportation.
4+
5+
Documentation:
6+
PDF export: https://ej2.syncfusion.com/vue/documentation/grid/pdf-export/
7+
Excel export: https://ej2.syncfusion.com/vue/documentation/grid/excel-exporting/
8+
9+
Online examples:
10+
https://ej2.syncfusion.com/vue/demos/#/material/grid/export.html
11+
12+
## Project prerequisites
13+
14+
Make sure that you have the compatible versions of Node and Vue CLI in your machine before
15+
starting to work on this project.
16+
17+
## How to run this application
18+
19+
To run this application, you need to first clone the `exporting-vue-data-grid-with-complete-customization` repository and then navigate to the path where it is located in your system.
20+
21+
To do so, open the command prompt and run the below commands one after the other.
22+
23+
```
24+
git clone https://github.com/SyncfusionExamples/exporting-vue-data-grid-with-complete-customization grid-example
25+
cd grid-example
26+
```
27+
28+
## Installation
29+
30+
Once done with downloading, you need to install the packages required to run this application locally. To do so, run the following command:
31+
32+
```
33+
npm install
34+
```
35+
36+
This will install all the needed Vue packages into your current project.
37+
38+
## Running on development server
39+
40+
Run the `npm run serve` command for a dev server. Navigate to `http://localhost:8080/`. The app will automatically reload if you change any of the source files.
41+
42+
## Further help
43+
44+
To get more help on Vue CLI use, check out the [Vue-Cli README] (https://github.com/vuejs/vue-cli/blob/master/README.md).

‎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+
}

‎dist/css/app.41f54dae.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import url(https://cdn.syncfusion.com/ej2/material.css);

‎dist/favicon.ico

4.19 KB
Binary file not shown.

‎dist/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>vue-grid</title><link href=/css/app.41f54dae.css rel=preload as=style><link href=/js/app.fc0758c2.js rel=preload as=script><link href=/js/chunk-vendors.0e95ec2d.js rel=preload as=script><link href=/css/app.41f54dae.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-grid doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.0e95ec2d.js></script><script src=/js/app.fc0758c2.js></script></body></html>

‎dist/js/app.fc0758c2.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/app.fc0758c2.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/chunk-vendors.0e95ec2d.js

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/chunk-vendors.0e95ec2d.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"name": "vue-grid",
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-dropdowns": "^17.4.39",
12+
"@syncfusion/ej2-vue-grids": "^17.3.28",
13+
"@syncfusion/ej2-vue-inputs": "^17.3.28",
14+
"core-js": "^3.3.2",
15+
"serve": "^11.2.0",
16+
"vue": "^2.6.10"
17+
},
18+
"devDependencies": {
19+
"@vue/cli-plugin-babel": "^4.0.0",
20+
"@vue/cli-plugin-eslint": "^4.0.0",
21+
"@vue/cli-service": "^4.0.0",
22+
"babel-eslint": "^10.0.3",
23+
"eslint": "^5.16.0",
24+
"eslint-plugin-vue": "^5.0.0",
25+
"vue-template-compiler": "^2.6.10"
26+
},
27+
"eslintConfig": {
28+
"root": true,
29+
"env": {
30+
"node": true
31+
},
32+
"extends": [
33+
"plugin:vue/essential",
34+
"eslint:recommended"
35+
],
36+
"rules": {},
37+
"parserOptions": {
38+
"parser": "babel-eslint"
39+
}
40+
},
41+
"postcss": {
42+
"plugins": {
43+
"autoprefixer": {}
44+
}
45+
},
46+
"browserslist": [
47+
"> 1%",
48+
"last 2 versions"
49+
]
50+
}

‎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="en">
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>vue-grid</title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but vue-grid 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: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<template>
2+
<div id="app">
3+
<ejs-grid ref="grid"
4+
:dataSource="data"
5+
:allowPaging="true"
6+
:allowPdfExport="true"
7+
:allowExcelExport ="true"
8+
:pageSettings="pageSettings"
9+
:toolbar="toolbarOptions"
10+
:toolbarClick="gridExport">
11+
<e-columns>
12+
<e-column field="OrderID" headerText="Order ID" textAlign="Right"></e-column>
13+
<e-column field="CustomerID" headerText="Customer ID"></e-column>
14+
<e-column field="ShipCity" headerText="ShipCity"></e-column>
15+
<e-column field="ShipCountry" headerText="ShipCountry"></e-column>
16+
</e-columns>
17+
</ejs-grid>
18+
</div>
19+
</template>
20+
21+
<script>
22+
23+
import Vue from "vue";
24+
import { GridPlugin, Page, Toolbar, PdfExport, ExcelExport } from "@syncfusion/ej2-vue-grids";
25+
import { data } from "./dataSource";
26+
27+
Vue.use(GridPlugin);
28+
29+
export default {
30+
data() {
31+
return {
32+
data: data,
33+
pageSettings:{ pageSize: 6 },
34+
toolbarOptions: ['PdfExport', 'ExcelExport']
35+
};
36+
},
37+
methods:{
38+
gridExport(args){
39+
var girdInst = this.$refs.grid;
40+
if(girdInst){
41+
if(args.item.id.includes('pdfexport')){
42+
girdInst.pdfExport({
43+
fileName: "invoice.pdf",
44+
exportType: "CurrentPage",
45+
theme: {
46+
header: {
47+
bold: true,
48+
fontName: "Calibri",
49+
fontSize: 10
50+
},
51+
record: {
52+
fontColor: "#0000ff",
53+
fontName: "Calibri",
54+
fontSize: 8
55+
}
56+
},
57+
header:{
58+
fromTop: 0,
59+
height: 130,
60+
contents: [{
61+
type: "Text",
62+
value: "Northwind Traders",
63+
position: { x: 0, y: 50 },
64+
style: { fontSize: 20 }
65+
}]
66+
},
67+
footer: {
68+
contents: [{
69+
type: "Text",
70+
value: "Thank You",
71+
position: { x: 0, y: 50 },
72+
style: { fontSize: 20 }
73+
}],
74+
fromBottom: 130,
75+
height: 130
76+
}
77+
});
78+
} else if(args.item.id.includes('excelexport')){
79+
girdInst.excelExport({
80+
fileName: "invoice.xlsx",
81+
exportType: "CurrentPage",
82+
theme: {
83+
header: {
84+
bold: true,
85+
fontName: "Calibri",
86+
fontSize: 10
87+
},
88+
record: {
89+
fontColor: "#0000ff",
90+
fontName: "Calibri",
91+
fontSize: 8
92+
}
93+
},
94+
header: {
95+
headerRows: 1,
96+
rows: [{
97+
cells: [{
98+
colSpan: 4,
99+
value: 'Northwind Traders',
100+
style: { fontSize: 20, hAlign: 'Center', bold: true }
101+
}]
102+
}]
103+
},
104+
footer: {
105+
footerRows: 1,
106+
rows: [{
107+
cells: [{
108+
colSpan: 4,
109+
value: 'Thank You',
110+
style: { fontSize: 20, hAlign: 'Center', bold: true }
111+
}]
112+
}]
113+
}
114+
})
115+
}
116+
}
117+
}
118+
},
119+
provide: {
120+
grid: [ Page, Toolbar, PdfExport, ExcelExport ]
121+
},
122+
};
123+
</script>
124+
125+
<style>
126+
@import url("https://cdn.syncfusion.com/ej2/material.css");
127+
</style>

‎src/assets/logo.png

6.69 KB
Loading

0 commit comments

Comments
 (0)