Skip to content

Commit 71a408c

Browse files
jayachandran-jayasankarjayachandran-jayasankar
committed
891499: Added code sample and UG content for Save as json feature.
1 parent a5e1dda commit 71a408c

File tree

2 files changed

+76
-53
lines changed

2 files changed

+76
-53
lines changed

‎ej2-asp-core-mvc/code-snippet/spreadsheet/save-as-json/razor

Lines changed: 39 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,20 @@
1111
<input type="checkbox" id="chart"><label for="chart">Ignore Chart</label>
1212
<input type="checkbox" id="image"><label for="image">Ignore Image</label>
1313
<input type="checkbox" id="note"><label for="note">Ignore Note</label>
14-
<button id="save" onclick="saveFile()">Save with JSON Serialization</button>
1514
</div>
15+
@Html.EJS().Button("save").Content("Save with JSON Serialization").Render();
1616
@Html.EJS().Spreadsheet("spreadsheet").OpenUrl("Open").AllowOpem(true).Render()
1717

1818
<style>
1919
#Saveasjson {
2020
margin-top: 10px;
2121
margin-bottom: 20px;
2222
}
23-
23+
2424
#Saveasjson input[type="checkbox"] {
2525
margin: 7px;
2626
}
27+
2728
#Saveasjson label {
2829
font-size: 14px;
2930
}
@@ -61,31 +62,42 @@
6162
return options;
6263
}
6364

64-
function saveFile() {
65-
let valueOnlyCheckbox = document.getElementById("valueOnly").checked;
66-
let options = valueOnlyCheckbox ? { onlyValues: true } : createOptions();
67-
var spreadsheetObj = document.getElementById("spreadsheet").ej2_instances[0];
68-
spreadsheetObj.saveAsJson(options).then((response) => {
69-
let formData = new FormData();
70-
formData.append('JSONData', JSON.stringify(response.jsonObject.Workbook));
71-
formData.append('fileName', 'Sample');
72-
formData.append('saveType', 'Xlsx');
73-
formData.append('pdfLayoutSettings', JSON.stringify({ fitSheetOnOnePage: false, orientation: 'Portrait' }));
74-
fetch('https://services.syncfusion.com/js/production/api/spreadsheet/save', {
75-
method: 'POST',
76-
body: formData,
77-
}).then((response) => {
78-
response.blob().then((data) => {
79-
let anchor = document.createElement('a');
80-
anchor.download = 'Sample.xlsx';
81-
let url = URL.createObjectURL(data);
82-
anchor.href = url;
83-
document.body.appendChild(anchor);
84-
anchor.click();
85-
URL.revokeObjectURL(url);
86-
document.body.removeChild(anchor);
87-
});
65+
var saveElement = document.getElementById("save");
66+
if (saveElement) {
67+
// Save button click event listener
68+
saveElement.onclick = () => {
69+
var valueOnlyCheckbox = document.getElementById("valueOnly").checked;
70+
var options = valueOnlyCheckbox ? { onlyValues: true } : createOptions();
71+
var spreadsheetObj = document.getElementById("spreadsheet").ej2_instances[0];
72+
spreadsheetObj.saveAsJson(options).then((response) => {
73+
var formData = new FormData();
74+
formData.append(
75+
'JSONData',
76+
JSON.stringify(response.jsonObject.Workbook)
77+
);
78+
formData.append('fileName', 'Sample');
79+
formData.append('saveType', 'Xlsx');
80+
formData.append('pdfLayoutSettings', JSON.stringify({ fitSheetOnOnePage: false, orientation: 'Portrait' })),
81+
fetch(
82+
'https://services.syncfusion.com/aspnet/production/api/spreadsheet/save',
83+
{
84+
method: 'POST',
85+
body: formData,
86+
}
87+
).then((response) => {
88+
response.blob().then((data) => {
89+
var anchor = ej.base.createElement('a', {
90+
attrs: { download: 'Sample.xlsx' },
91+
});
92+
var url = URL.createObjectURL(data);
93+
anchor.href = url;
94+
document.body.appendChild(anchor);
95+
anchor.click();
96+
URL.revokeObjectURL(url);
97+
document.body.removeChild(anchor);
98+
});
99+
});
88100
});
89-
});
101+
};
90102
}
91103
</script>

‎ej2-asp-core-mvc/code-snippet/spreadsheet/save-as-json/tagHelper

Lines changed: 37 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<input type="checkbox" id="chart"><label for="chart">Ignore Chart</label>
1212
<input type="checkbox" id="image"><label for="image">Ignore Image</label>
1313
<input type="checkbox" id="note"><label for="note">Ignore Note</label>
14-
<button id="save" onclick="saveFile()">Save with JSON Serialization</button>
14+
<button id="save">Save with JSON Serialization</button>
1515
</div>
1616
<ejs-spreadsheet id="spreadsheet" openUrl="Open" allowOpen="true"> </ejs-spreadsheet>
1717

@@ -62,31 +62,42 @@
6262
return options;
6363
}
6464

65-
function saveFile() {
66-
let valueOnlyCheckbox = document.getElementById("valueOnly").checked;
67-
let options = valueOnlyCheckbox ? { onlyValues: true } : createOptions();
68-
var spreadsheetObj = document.getElementById("spreadsheet").ej2_instances[0];
69-
spreadsheetObj.saveAsJson(options).then((response) => {
70-
let formData = new FormData();
71-
formData.append('JSONData', JSON.stringify(response.jsonObject.Workbook));
72-
formData.append('fileName', 'Sample');
73-
formData.append('saveType', 'Xlsx');
74-
formData.append('pdfLayoutSettings', JSON.stringify({ fitSheetOnOnePage: false, orientation: 'Portrait' }));
75-
fetch('https://services.syncfusion.com/js/production/api/spreadsheet/save', {
76-
method: 'POST',
77-
body: formData,
78-
}).then((response) => {
79-
response.blob().then((data) => {
80-
let anchor = document.createElement('a');
81-
anchor.download = 'Sample.xlsx';
82-
let url = URL.createObjectURL(data);
83-
anchor.href = url;
84-
document.body.appendChild(anchor);
85-
anchor.click();
86-
URL.revokeObjectURL(url);
87-
document.body.removeChild(anchor);
88-
});
65+
var saveElement = document.getElementById("save");
66+
if (saveElement) {
67+
// Save button click event listener
68+
saveElement.onclick = () => {
69+
var valueOnlyCheckbox = document.getElementById("valueOnly").checked;
70+
var options = valueOnlyCheckbox ? { onlyValues: true } : createOptions();
71+
var spreadsheetObj = document.getElementById("spreadsheet").ej2_instances[0];
72+
spreadsheetObj.saveAsJson(options).then((response) => {
73+
var formData = new FormData();
74+
formData.append(
75+
'JSONData',
76+
JSON.stringify(response.jsonObject.Workbook)
77+
);
78+
formData.append('fileName', 'Sample');
79+
formData.append('saveType', 'Xlsx');
80+
formData.append('pdfLayoutSettings', JSON.stringify({ fitSheetOnOnePage: false, orientation: 'Portrait' })),
81+
fetch(
82+
'https://services.syncfusion.com/aspnet/production/api/spreadsheet/save',
83+
{
84+
method: 'POST',
85+
body: formData,
86+
}
87+
).then((response) => {
88+
response.blob().then((data) => {
89+
var anchor = ej.base.createElement('a', {
90+
attrs: { download: 'Sample.xlsx' },
91+
});
92+
var url = URL.createObjectURL(data);
93+
anchor.href = url;
94+
document.body.appendChild(anchor);
95+
anchor.click();
96+
URL.revokeObjectURL(url);
97+
document.body.removeChild(anchor);
98+
});
99+
});
89100
});
90-
});
101+
};
91102
}
92103
</script>

0 commit comments

Comments
 (0)