Skip to content

Commit d2b7740

Browse files
vinoth-Kumar-Svinoth-Kumar-S
authored
Adding Vue Spreadsheet Open and Save sample
Adding Vue Spreadsheet Open and Save the sample
1 parent 1dbf933 commit d2b7740

File tree

11 files changed

+334
-1
lines changed

11 files changed

+334
-1
lines changed

‎README.md‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,35 @@
1-
# How-to-Open-and-Save-Excel-Files-in-the-Vue-Spreadsheet
1+
# How to Open and Save Excel Files in the Vue Spreadsheet
2+
23
A quick-start project that shows you how to open and save Excel files using the Vue spreadsheet component. This project contains simple code to load an Excel file when the application loads, configure a server, and send custom parameters.
4+
5+
The open and save documentation for the Syncfusion Vue Spreadsheet component:
6+
https://ej2.syncfusion.com/vue/documentation/spreadsheet/open-save
7+
8+
Check out this online example of open and save excel file in the Syncfusion Vue Spreadsheet component:
9+
https://ej2.syncfusion.com/vue/demos/#/material/spreadsheet/default.html
10+
11+
The getting started documentation for the Syncfusion Vue Spreadsheet component:
12+
https://ej2.syncfusion.com/vue/documentation/spreadsheet/vue-3-getting-started
13+
14+
The Vue Spreadsheet Getting Started video:
15+
https://www.youtube.com/watch?v=d9ZoSNNinpQ
16+
17+
Server Project: https://github.com/SyncfusionExamples/EJ2-Spreadsheet-WebServices/tree/main/WebAPI
18+
19+
Tutorial video: https://www.syncfusion.com/tutorial-videos
20+
21+
## Project prerequisites
22+
23+
### Vue 3 + Vite
24+
25+
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
26+
27+
### Recommended IDE Setup
28+
29+
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
30+
31+
32+
## How to run this application?
33+
34+
To run this application, you need to clone the `How-to-Open-and-Save-Excel-Files-in-the-Vue-Spreadsheet` repository and then open it in Visual Studio Code. Now, simply install all the necessary packages into your current project using the `npm install` command and run your project using the `npm run dev` command.
35+

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "myvueapp",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-vue-buttons": "^24.2.7",
13+
"@syncfusion/ej2-vue-spreadsheet": "^24.2.8",
14+
"vue": "^3.3.11"
15+
},
16+
"devDependencies": {
17+
"@vitejs/plugin-vue": "^4.5.2",
18+
"vite": "^5.0.8"
19+
}
20+
}

‎public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.vue‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<script>
2+
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective,
3+
RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-vue-spreadsheet';
4+
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
5+
import datasource from './default.json';
6+
export default{
7+
components: {
8+
'ejs-spreadsheet': SpreadsheetComponent,
9+
'e-sheets': SheetsDirective,
10+
'e-sheet': SheetDirective,
11+
'e-ranges': RangesDirective,
12+
'e-range': RangeDirective,
13+
'e-columns': ColumnsDirective,
14+
'e-column': ColumnDirective,
15+
'ejs-button': ButtonComponent
16+
},
17+
data(){
18+
return{
19+
data: datasource.defaultData,
20+
customWidth: 130,
21+
openUrl: 'https://services.syncfusion.com/vue/production/api/spreadsheet/open',
22+
saveUrl: 'https://services.syncfusion.com/vue/production/api/spreadsheet/save'
23+
//Download and run server project - link provided in the readme file
24+
// openUrl: 'https://localhost:44354/api/spreadsheet/open',
25+
// saveUrl: 'https://localhost:44354/api/spreadsheet/save'
26+
}
27+
},
28+
methods: {
29+
created: function() {
30+
var spreadsheet = this.$refs.spreadsheet;
31+
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:F1');
32+
fetch('https://cdn.syncfusion.com/scripts/spreadsheet/Sample.xlsx')
33+
.then((response)=>{
34+
response.blob().then((fileBlob) => {
35+
var file = new File([fileBlob], "Sample.xlsx");
36+
spreadsheet.open({file: file});
37+
})
38+
})
39+
},
40+
onSave(args){
41+
args.customParams = { customParams: 'format:Csv' }
42+
},
43+
btnClk(){
44+
this.$refs.spreadsheet.save({
45+
url: 'https://services.syncfusion.com/vue/production/api/spreadsheet/save',
46+
fileName: 'SpreadsheetData',
47+
saveType: 'Pdf'
48+
})
49+
}
50+
}
51+
}
52+
</script>
53+
54+
<template>
55+
<div>
56+
<ejs-button style="margin: 5px;" v-on:click="btnClk">Save</ejs-button>
57+
<ejs-spreadsheet ref="spreadsheet" :created="created" :openUrl="openUrl"
58+
:saveUrl="saveUrl" :beforeSave="onSave">
59+
<!-- <e-sheets>
60+
<e-sheet>
61+
<e-columns>
62+
<e-column :width="customWidth"></e-column>
63+
<e-column :width="customWidth"></e-column>
64+
<e-column :width="customWidth"></e-column>
65+
<e-column :width="customWidth"></e-column>
66+
<e-column :width="customWidth"></e-column>
67+
<e-column :width="customWidth"></e-column>
68+
</e-columns>
69+
<e-ranges>
70+
<e-range></e-range>
71+
</e-ranges>
72+
</e-sheet>
73+
</e-sheets> -->
74+
</ejs-spreadsheet>
75+
</div>
76+
</template>
77+
78+
<style>
79+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
80+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
81+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
82+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
83+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
84+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
85+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
86+
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
87+
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
88+
</style>

‎src/assets/vue.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/HelloWorld.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String,
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<div class="card">
15+
<button type="button" @click="count++">count is {{ count }}</button>
16+
<p>
17+
Edit
18+
<code>components/HelloWorld.vue</code> to test HMR
19+
</p>
20+
</div>
21+
22+
<p>
23+
Check out
24+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25+
>create-vue</a
26+
>, the official Vue + Vite starter
27+
</p>
28+
<p>
29+
Install
30+
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
31+
in your IDE for a better DX
32+
</p>
33+
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
34+
</template>
35+
36+
<style scoped>
37+
.read-the-docs {
38+
color: #888;
39+
}
40+
</style>

‎src/default.json‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
{
2+
"defaultData": [
3+
{
4+
"Customer Name": "Romona Heaslip",
5+
"Model": "Taurus",
6+
"Color": "Aquamarine",
7+
"Payment Mode": "Debit Card",
8+
"Delivery Date": "07/11/2015",
9+
"Amount": "8529.22"
10+
},
11+
{
12+
"Customer Name": "Clare Batterton",
13+
"Model": "Sparrow",
14+
"Color": "Pink",
15+
"Payment Mode": "Cash On Delivery",
16+
"Delivery Date": "7/13/2016",
17+
"Amount": "17866.19"
18+
},
19+
{
20+
"Customer Name": "Eamon Traise",
21+
"Model": "Grand Cherokee",
22+
"Color": "Blue",
23+
"Payment Mode": "Net Banking",
24+
"Delivery Date": "09/04/2015",
25+
"Amount": "13853.09"
26+
},
27+
{
28+
"Customer Name": "Julius Gorner",
29+
"Model": "GTO",
30+
"Color": "Aquamarine",
31+
"Payment Mode": "Credit Card",
32+
"Delivery Date": "12/15/2017",
33+
"Amount": "2338.74"
34+
},
35+
{
36+
"Customer Name": "Jenna Schoolfield",
37+
"Model": "LX",
38+
"Color": "Yellow",
39+
"Payment Mode": "Credit Card",
40+
"Delivery Date": "10/08/2014",
41+
"Amount": "9578.45"
42+
},
43+
{
44+
"Customer Name": "Marylynne Harring",
45+
"Model": "Catera",
46+
"Color": "Green",
47+
"Payment Mode": "Cash On Delivery",
48+
"Delivery Date": "7/01/2017",
49+
"Amount": "19141.62"
50+
},
51+
{
52+
"Customer Name": "Vilhelmina Leipelt",
53+
"Model": "7 Series",
54+
"Color": "Goldenrod",
55+
"Payment Mode": "Credit Card",
56+
"Delivery Date": "12/20/2015",
57+
"Amount": "6543.30"
58+
},
59+
{
60+
"Customer Name": "Barby Heisler",
61+
"Model": "Corvette",
62+
"Color": "Red",
63+
"Payment Mode": "Credit Card",
64+
"Delivery Date": "11/24/2014",
65+
"Amount": "13035.06"
66+
},
67+
{
68+
"Customer Name": "Karyn Boik",
69+
"Model": "Regal",
70+
"Color": "Indigo",
71+
"Payment Mode": "Debit Card",
72+
"Delivery Date": "05/12/2014",
73+
"Amount": "18488.80"
74+
},
75+
{
76+
"Customer Name": "Jeanette Pamplin",
77+
"Model": "S4",
78+
"Color": "Fuscia",
79+
"Payment Mode": "Net Banking",
80+
"Delivery Date": "12/30/2014",
81+
"Amount": "12317.04"
82+
},
83+
{
84+
"Customer Name": "Cristi Espinos",
85+
"Model": "TL",
86+
"Color": "Aquamarine",
87+
"Payment Mode": "Credit Card",
88+
"Delivery Date": "12/18/2013",
89+
"Amount": "6230.13"
90+
},
91+
{
92+
"Customer Name": "Issy Humm",
93+
"Model": "Club Wagon",
94+
"Color": "Pink",
95+
"Payment Mode": "Cash On Delivery",
96+
"Delivery Date": "02/02/2015",
97+
"Amount": "9709.49"
98+
},
99+
{
100+
"Customer Name": "Tuesday Fautly",
101+
"Model": "V8 Vantage",
102+
"Color": "Crimson",
103+
"Payment Mode": "Debit Card",
104+
"Delivery Date": "11/19/2014",
105+
"Amount": "9766.10"
106+
},
107+
{
108+
"Customer Name": "Rosemaria Thomann",
109+
"Model": "Caravan",
110+
"Color": "Violet",
111+
"Payment Mode": "Net Banking",
112+
"Delivery Date": "02/08/2014",
113+
"Amount": "7685.49"
114+
},
115+
{
116+
"Customer Name": "Lyell Fuentez",
117+
"Model": "Bravada",
118+
"Color": "Violet",
119+
"Payment Mode": "Debit Card",
120+
"Delivery Date": "08/05/2016",
121+
"Amount": "18012.45"
122+
}
123+
]
124+
}

‎src/main.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
import { registerLicense } from '@syncfusion/ej2-base';
5+
registerLicense("Enter your license");
6+
createApp(App).mount('#app')

‎src/style.css‎

Whitespace-only changes.

0 commit comments

Comments
 (0)