Skip to content

Commit a5e1dda

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

File tree

4 files changed

+214
-0
lines changed

4 files changed

+214
-0
lines changed

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<div id="Saveasjson">
2+
<label id="Heading">Save As Json Options:</label> <br>
3+
<input type="checkbox" id="valueOnly" onchange="toggleCheckboxes()"><label for="valueOnly">Only Values</label>
4+
<input type="checkbox" id="style"><label for="style">Ignore Style</label>
5+
<input type="checkbox" id="formula"><label for="formula">Ignore Formula</label>
6+
<input type="checkbox" id="format"><label for="format">Ignore Format</label>
7+
<input type="checkbox" id="cf"><label for="cf">Ignore CF</label>
8+
<input type="checkbox" id="dv"><label for="dv">Ignore Validation</label>
9+
<input type="checkbox" id="freeze"><label for="freeze">Ignore Freezepane</label>
10+
<input type="checkbox" id="wrap"><label for="wrap">Ignore Wrap</label>
11+
<input type="checkbox" id="chart"><label for="chart">Ignore Chart</label>
12+
<input type="checkbox" id="image"><label for="image">Ignore Image</label>
13+
<input type="checkbox" id="note"><label for="note">Ignore Note</label>
14+
<button id="save" onclick="saveFile()">Save with JSON Serialization</button>
15+
</div>
16+
@Html.EJS().Spreadsheet("spreadsheet").OpenUrl("Open").AllowOpem(true).Render()
17+
18+
<style>
19+
#Saveasjson {
20+
margin-top: 10px;
21+
margin-bottom: 20px;
22+
}
23+
24+
#Saveasjson input[type="checkbox"] {
25+
margin: 7px;
26+
}
27+
#Saveasjson label {
28+
font-size: 14px;
29+
}
30+
31+
#Heading {
32+
font-weight: bold;
33+
}
34+
</style>
35+
36+
<script>
37+
38+
function toggleCheckboxes() {
39+
let valueOnlyCheckbox = document.getElementById('valueOnly');
40+
let checkboxes = document.querySelectorAll('#Saveasjson input[type="checkbox"]:not(#valueOnly)');
41+
checkboxes.forEach(checkbox => {
42+
checkbox.disabled = valueOnlyCheckbox.checked;
43+
if (valueOnlyCheckbox.checked) {
44+
checkbox.checked = false;
45+
}
46+
});
47+
}
48+
49+
function createOptions() {
50+
const options = {};
51+
options.ignoreStyle = document.getElementById('style').checked;
52+
options.ignoreFormula = document.getElementById('formula').checked;
53+
options.ignoreFormat = document.getElementById('format').checked;
54+
options.ignoreConditionalFormat = document.getElementById('cf').checked;
55+
options.ignoreValidation = document.getElementById('dv').checked;
56+
options.ignoreFreezePane = document.getElementById('freeze').checked;
57+
options.ignoreWrap = document.getElementById('wrap').checked;
58+
options.ignoreChart = document.getElementById('chart').checked;
59+
options.ignoreImage = document.getElementById('image').checked;
60+
options.ignoreNote = document.getElementById('note').checked;
61+
return options;
62+
}
63+
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+
});
88+
});
89+
});
90+
}
91+
</script>

‎ej2-asp-core-mvc/code-snippet/spreadsheet/save-as-json/saveController.cs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Open(IFormCollection openRequest)
2+
{
3+
OpenRequest open = new OpenRequest();
4+
open.File = openRequest.Files[0];
5+
return Content(Workbook.Open(open));
6+
}

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

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<div id="Saveasjson">
2+
<label id="Heading">Save As Json Options:</label> <br>
3+
<input type="checkbox" id="valueOnly" onchange="toggleCheckboxes()"><label for="valueOnly">Only Values</label>
4+
<input type="checkbox" id="style"><label for="style">Ignore Style</label>
5+
<input type="checkbox" id="formula"><label for="formula">Ignore Formula</label>
6+
<input type="checkbox" id="format"><label for="format">Ignore Format</label>
7+
<input type="checkbox" id="cf"><label for="cf">Ignore CF</label>
8+
<input type="checkbox" id="dv"><label for="dv">Ignore Validation</label>
9+
<input type="checkbox" id="freeze"><label for="freeze">Ignore Freezepane</label>
10+
<input type="checkbox" id="wrap"><label for="wrap">Ignore Wrap</label>
11+
<input type="checkbox" id="chart"><label for="chart">Ignore Chart</label>
12+
<input type="checkbox" id="image"><label for="image">Ignore Image</label>
13+
<input type="checkbox" id="note"><label for="note">Ignore Note</label>
14+
<button id="save" onclick="saveFile()">Save with JSON Serialization</button>
15+
</div>
16+
<ejs-spreadsheet id="spreadsheet" openUrl="Open" allowOpen="true"> </ejs-spreadsheet>
17+
18+
<style>
19+
#Saveasjson {
20+
margin-top: 10px;
21+
margin-bottom: 20px;
22+
}
23+
24+
#Saveasjson input[type="checkbox"] {
25+
margin: 7px;
26+
}
27+
28+
#Saveasjson label {
29+
font-size: 14px;
30+
}
31+
32+
#Heading {
33+
font-weight: bold;
34+
}
35+
</style>
36+
37+
<script>
38+
39+
function toggleCheckboxes() {
40+
let valueOnlyCheckbox = document.getElementById('valueOnly');
41+
let checkboxes = document.querySelectorAll('#Saveasjson input[type="checkbox"]:not(#valueOnly)');
42+
checkboxes.forEach(checkbox => {
43+
checkbox.disabled = valueOnlyCheckbox.checked;
44+
if (valueOnlyCheckbox.checked) {
45+
checkbox.checked = false;
46+
}
47+
});
48+
}
49+
50+
function createOptions() {
51+
const options = {};
52+
options.ignoreStyle = document.getElementById('style').checked;
53+
options.ignoreFormula = document.getElementById('formula').checked;
54+
options.ignoreFormat = document.getElementById('format').checked;
55+
options.ignoreConditionalFormat = document.getElementById('cf').checked;
56+
options.ignoreValidation = document.getElementById('dv').checked;
57+
options.ignoreFreezePane = document.getElementById('freeze').checked;
58+
options.ignoreWrap = document.getElementById('wrap').checked;
59+
options.ignoreChart = document.getElementById('chart').checked;
60+
options.ignoreImage = document.getElementById('image').checked;
61+
options.ignoreNote = document.getElementById('note').checked;
62+
return options;
63+
}
64+
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+
});
89+
});
90+
});
91+
}
92+
</script>

‎ej2-asp-core-mvc/spreadsheet/open-save.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -353,6 +353,31 @@ spreadsheet.saveAsJson({ onlyValues: true });
353353
| ignoreImage | If **true**, excludes images from the JSON output. |
354354
| ignoreNote | If **true**, excludes notes from the JSON output. |
355355

356+
The following code snippet demonstrates how to configure the serialization options and pass them as arguments to the saveAsJson method:
357+
358+
{% if page.publishingplatform == "aspnet-core" %}
359+
360+
{% tabs %}
361+
{% highlight cshtml tabtitle="CSHTML" %}
362+
{% include code-snippet/spreadsheet/save-as-json/tagHelper %}
363+
{% endhighlight %}
364+
{% highlight c# tabtitle="SaveController.cs" %}
365+
{% include code-snippet/spreadsheet/save-as-json/saveController.cs %}
366+
{% endhighlight %}
367+
{% endtabs %}
368+
369+
{% elsif page.publishingplatform == "aspnet-mvc" %}
370+
371+
{% tabs %}
372+
{% highlight razor tabtitle="CSHTML" %}
373+
{% include code-snippet/spreadsheet/save-as-json/razor %}
374+
{% endhighlight %}
375+
{% highlight c# tabtitle="SaveController.cs" %}
376+
{% include code-snippet/spreadsheet/save-as-json/saveController.cs %}
377+
{% endhighlight %}
378+
{% endtabs %}
379+
{% endif %}
380+
356381
### Supported file formats
357382

358383
The following list of Excel file formats are supported in Spreadsheet:

0 commit comments

Comments
 (0)