Skip to content
Open
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ Now the Spreadsheet server Docker instance runs on localhost with the provided p
<div id='Spreadsheet'></div>
<script>
// Initialize Spreadsheet component.
const spreadsheet = new ej.spreadsheet.Spreadsheet({
var spreadsheet = new ej.spreadsheet.Spreadsheet({
openUrl: 'http://localhost:6002/api/spreadsheet/open',
saveUrl: 'http://localhost:6002/api/spreadsheet/save'
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ Compared to Excel, the date, time, currency, and accounting formats vary across
The code below illustrates how culture-based format codes are mapped to their corresponding number format ID for the `German (de)` culture.

```js
const deLocaleFormats = [
var deLocaleFormats = [
{ id: 14, code: 'dd.MM.yyyy' },
{ id: 15, code: 'dd. MMM yy' },
{ id: 16, code: 'dd. MMM' },
Expand Down
60 changes: 30 additions & 30 deletions Document-Processing/Excel/Spreadsheet/Javascript-ES5/open-save.md
Original file line number Diff line number Diff line change
Expand Up @@ -130,8 +130,8 @@ By default, the Spreadsheet control provides an option to browse files from the
},
body: JSON.stringify({ FileName: 'Sample' }),
})
.then((response) => response.json())
.then((data) => {
.then(function (response){ response.json()})
.then(function(data) {
// Load the JSON data into spreadsheet.
spreadsheet.openFromJson({ file: data });
})
Expand Down Expand Up @@ -163,14 +163,14 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
sheets: [
],
openUrl: 'https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open',
beforeOpen: (eventArgs) => {
beforeOpen: function (eventArgs) {
eventArgs.cancel = true; // To prevent the default open action.
if (eventArgs.file) {
const reader = new FileReader();
var reader = new FileReader();
reader.readAsDataURL(eventArgs.file);
reader.onload = () => {
reader.onload = function () {
// Removing the xlsx file content-type.
const base64Data = reader.result.replace('data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,', '');
var base64Data = reader.result.replace('data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,', '');
openExcel({
file: base64Data,
extension: eventArgs.file.name.slice(eventArgs.file.name.lastIndexOf('.') + 1),
Expand All @@ -180,7 +180,7 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
}
}
});
const openExcel = (requestData) => {
function openExcel(requestData) {
// Fetch call to AWS server for open processing.
fetch('https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open', {
method: 'POST',
Expand All @@ -189,16 +189,16 @@ const openExcel = (requestData) => {
'Content-Type': 'application/json;charset=UTF-8'
},
body: JSON.stringify(requestData)
}).then((response) => {
}).then(function (response) {
if (response.ok) {
return response.json();
}
}).then((data) => {
}).then(function (data) {
// Loading the JSON data into our spreadsheet.
if (data.Workbook && data.Workbook.sheets) {
spreadsheet.openFromJson({ file: data });
}
}).catch((error) => {
}).catch(function (error) {
console.log(error);
});
};
Expand Down Expand Up @@ -344,7 +344,7 @@ The following code example demonstrates the client-side and server-side configur
**Client Side**:

```javascript
const spreadsheet = new ej.spreadsheet.Spreadsheet({
var spreadsheet = new ej.spreadsheet.Spreadsheet({
openSettings: {
// Specifies the size (in bytes) of each chunk for the server response when opening a document.
chunkSize: 1000000,
Expand Down Expand Up @@ -496,8 +496,8 @@ By default, the Spreadsheet control saves the Excel file and downloads it to the
```js

// Convert the spreadsheet workbook to JSON data.
spreadsheet.saveAsJson().then((json) => {
const formData = new FormData();
spreadsheet.saveAsJson().then(function (json) {
var formData = new FormData();
formData.append('FileName', "Sample");
formData.append('saveType', 'Xlsx');
// Passing the JSON data to perform the save operation.
Expand All @@ -507,7 +507,7 @@ By default, the Spreadsheet control saves the Excel file and downloads it to the
fetch('https://localhost:{Your port number}/Home/Save', {
method: 'POST',
body: formData
}).then((response) => {
}).then(function (response) {
console.log(response);
});
});
Expand Down Expand Up @@ -573,19 +573,19 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
sheets: [
],
saveUrl:'https://xxxxxxxxxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/save',
beforeSave: (eventArgs) => {
beforeSave: fucntion (eventArgs) {
if (!saveInitiated) {
eventArgs.cancel = true; // Preventing default save action.
saveInitiated = true; // The "beforeSave" event will trigger for "saveAsJson" action also, so we are preventing for the "saveAsJson".
saveAsExcel(eventArgs);
}
}
});
const saveAsExcel = (eventArgs) => {
var saveAsExcel = function (eventArgs) {
// Convert the spreadsheet workbook to JSON data.
spreadsheet.saveAsJson().then(Json => {
spreadsheet.saveAsJson().then(function (Json) {
saveInitiated = false;
const formData = new FormData();
var formData = new FormData();
// Passing the JSON data to server to perform save operation.
formData.append('JSONData', JSON.stringify(Json.jsonObject.Workbook));
formData.append('saveType', 'Xlsx');
Expand All @@ -594,28 +594,28 @@ const saveAsExcel = (eventArgs) => {
// Using fetch API to invoke the server for save processing.
fetch('https://xxxxxxxxxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/save', {
method: 'POST', body: formData
}).then(response => {
}).then(function (response) {
if (response.ok) {
return response.blob();
}
}).then(data => {
const reader = new FileReader();
}).then(function (data) {
var reader = new FileReader();
reader.onload = function () {
//Converts the result of the file reading operation into a base64 string.
const textBase64Str = reader.result.toString();
var textBase64Str = reader.result.toString();
//Converts the base64 string into a Excel base64 string.
const excelBase64Str = atob(textBase64Str.replace('data:text/plain;base64,', ''));
var excelBase64Str = atob(textBase64Str.replace('data:text/plain;base64,', ''));
//Converts the Excel base64 string into byte characters.
const byteCharacters = atob(excelBase64Str.replace('data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,', ''));
const byteArrays = [];
for (let i = 0; i < byteCharacters.length; i++) {
var byteCharacters = atob(excelBase64Str.replace('data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,', ''));
var byteArrays = [];
for (var i = 0; i < byteCharacters.length; i++) {
byteArrays.push(byteCharacters.charCodeAt(i));
}
const byteArray = new Uint8Array(byteArrays);
var byteArray = new Uint8Array(byteArrays);
//creates a blob data from the byte array with xlsx content type.
const blobData = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const blobUrl = URL.createObjectURL(blobData);
const anchor = document.createElement('a');
var blobData = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
var blobUrl = URL.createObjectURL(blobData);
var anchor = document.createElement('a');
anchor.download = 'Sample.xlsx';
anchor.href = blobUrl;
document.body.appendChild(anchor);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ The following code example shows how to set `isFullPost` to **false** in the Spr

```js
var spreadsheet = new ej.spreadsheet.Spreadsheet({
beforeSave: (args) => {
beforeSave: function (args) {
args.isFullPost = false;
}
});
Expand Down
4 changes: 2 additions & 2 deletions Document-Processing/Excel/Spreadsheet/Javascript-ES5/sort.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ You can also enable or disable this property using `beforeSort` event arguments,

```ts

let spreadsheet: Spreadsheet = new Spreadsheet({
var spreadsheet: Spreadsheet = new Spreadsheet({

beforeSort: function (args) {
args.sortOptions.containsHeader = true;
Expand All @@ -79,7 +79,7 @@ You can also enable or disable this property using `beforeSort` event arguments,

```ts

let spreadsheet: Spreadsheet = new Spreadsheet({
var spreadsheet: Spreadsheet = new Spreadsheet({

beforeSort: function (args) {
args.sortOptions.caseSensitive = true;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

var base64String;

var spreadsheet = new ej.spreadsheet.Spreadsheet({
Expand All @@ -12,17 +11,17 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
]
}],

created: () => {
//Applies cell and number formatting to specified range of the active sheet
created: function () {
// Applies cell and number formatting to specified range of the active sheet
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
},

beforeSave: (args) => {
beforeSave: function (args) {
args.needBlobData = true; // To trigger the saveComplete event.
args.isFullPost = false; // Get the spreadsheet data as blob data in the saveComplete event.
},

saveComplete: (args) => {
saveComplete: function (args) {
// Convert blob data to base64 string.
var reader = new FileReader();
reader.readAsDataURL(args.blobData);
Expand All @@ -36,22 +35,24 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
// Render initialized Spreadsheet.
spreadsheet.appendTo('#spreadsheet');

document.getElementById("import").onclick = () => {
document.getElementById("import").onclick = function () {
// Open the file based on saved base64 string.
fetch(base64String)
.then((response) => response.blob())
.then((fileBlob) => {
.then(function (response) {
return response.blob();
})
.then(function (fileBlob) {
var file = new File([fileBlob], 'Sample.xlsx');
spreadsheet.open({ file: file });
});
}
};

document.getElementById("export").onclick = () => {
document.getElementById("export").onclick = function () {
spreadsheet.save({
url: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',
fileName: 'Worksheet',
saveType: 'Xlsx',
saveType: 'Xlsx'
}); // Specifies the save URL, file name, file type need to be saved.
// Logs base64 string into the console.
console.log('Base64 String - ', base64String);
}
};
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
ej.base.enableRipple(true);

let spreadsheet = new ej.spreadsheet.Spreadsheet({
var spreadsheet = new ej.spreadsheet.Spreadsheet({
openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',
openComplete: function() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
spreadsheet.numberFormat(ej.spreadsheet.getFormatFromType('Currency'), 'B4:F8');
spreadsheet.merge('A1:F1');
},
actionBegin: (args) => {
actionBegin: function (args) {
if (args.action === 'beforeInsertChart' && args.args.eventArgs.type.includes('Line')) {
args.args.eventArgs.markerSettings.shape = 'Triangle';
args.args.eventArgs.markerSettings.isFilled = false;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
//Initialize action items.
let items = [
var items = [
{
text: "Copy"
},
Expand All @@ -12,10 +12,10 @@ let items = [
];

// Initialize the DropDownButton component.
let drpDownBtn = new ej.splitbuttons.DropDownButton({
var drpDownBtn = new ej.splitbuttons.DropDownButton({
items: items,
cssClass: "e-round-corner",
select: (args) => {
select: function (args) {
if (args.item.text === 'Copy')
spreadsheet.copy();
if (args.item.text === 'Cut')
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
//Initialize action items.
let items = [
var items = [
{
text: "Copy"
},
Expand All @@ -12,10 +12,10 @@ let items = [
];

// Initialize the DropDownButton component.
let drpDownBtn = new ej.splitbuttons.DropDownButton({
var drpDownBtn = new ej.splitbuttons.DropDownButton({
items: items,
cssClass: "e-round-corner",
select: (args) => {
select: function (args) {
if (args.item.text === 'Copy')
spreadsheet.copy();
if (args.item.text === 'Cut')
Expand All @@ -32,22 +32,22 @@ drpDownBtn.appendTo("#element");
// Initialize the Spreadsheet component.

var columns = [
{
width: 130
},
{
width: 92
},
{
width: 96
}
{
width: 130
},
{
width: 92
},
{
width: 96
}
];

var spreadsheet = new ej.spreadsheet.Spreadsheet({
sheets: [{ ranges: [{ dataSource: defaultData }], columns: columns }],
enableClipboard: true,
// Triggers before the action begins.
actionBegin: (pasteArgs) => {
actionBegin: function (pasteArgs) {
// To cancel the paste action.
if (pasteArgs.action === 'clipboard' && pasteArgs.args.eventArgs.requestType === 'paste') {
pasteArgs.args.eventArgs.cancel = true;
Expand All @@ -57,7 +57,4 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({


// Render initialized Spreadsheet.
spreadsheet.appendTo('#spreadsheet');



spreadsheet.appendTo('#spreadsheet');
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
ej.base.enableRipple(true);

let spreadsheet = new ej.spreadsheet.Spreadsheet({
var spreadsheet = new ej.spreadsheet.Spreadsheet({
beforeCellRender: function (args) {
if (
args.colIndex >= 0 &&
args.colIndex <= 10 &&
args.element.classList.contains('e-header-cell')
) {
let text = 'custom header ' + args.colIndex.toString();
var text = 'custom header ' + args.colIndex.toString();
args.element.innerText = text;
}
},
Expand Down
Loading