[{"id":"528e7c85-ad74-4b92-9f07-1b35686aae11","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"b2467823-b20a-4944-8436-3f4a40c2c3a6","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f9b599ec-cdc1-43e1-9642-54622ec0faf6","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"0c129b8a-7ec0-4a16-8d94-9d4c96121d6b","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"747081eb-5a06-4bac-8e9e-ce86732d168f","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"7d934b01-e977-477a-b989-d25201e93a61","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"62adecb9-3003-4dce-9fa0-33dcdebbd1ed","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e2676e30-9712-47a0-ae38-733003d74c61","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6ef06797-8c4c-4b4b-ab10-bb5049aedeff","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"48e7593f-03b2-454d-a45c-cfebca71f3aa","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"59bb5a92-94c0-471a-bbe7-422ee9c9671d","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"56744168-6aab-46c6-8144-702458dc0030","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6e65ca69-e34b-47ac-a900-df6142d1173a","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"69a3b51b-bbd6-4bf9-b1bf-404bc1130679","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"7e9ac756-4b27-4ccd-87b4-d959dae40aac","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f9f145be-535c-49f0-85e0-46b82e05ebb9","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f21c39dc-8e0d-4974-8795-5568b46411b4","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f1c5b466-1fd4-4130-88dd-9a624a6ea008","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"61aee7ec-5eae-4b92-b381-bc6236377b8b","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"8f3919c2-f0c9-4000-8008-be65026b6290","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"1ec6d1ad-90cc-4094-980f-43aa5fbf9540","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"78b0db4b-017c-4839-8c1e-60f6f5cc6d2b","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"cdf43116-31aa-4260-b33a-9a31c6845eb2","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"9e8044a9-aa63-4694-997d-13747cd3ee9d","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"ecd23122-8f53-4c60-837d-198fd699dfc0","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"7a9b6718-9f7b-4f86-a13f-1af00e6e1fd8","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"363dda9e-fe69-4e08-aae8-37d0147254e3","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"5c96fdcf-19a2-4aed-838a-8ed87a27a690","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"43ba9142-9a42-4717-866b-92a6acafcf6e","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"58f7dc81-7471-48e9-9020-1a2359e01121","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"0536592d-c039-4a1b-b482-aa0ba315a78d","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2981cffc-37a3-4e64-b682-71d898259ddc","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"bdfcce31-4e7a-46f0-8571-d643d6ae5215","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"a1c74507-1bc8-4333-b919-337bcd7f421a","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6bb55ad9-04e0-47f2-8343-5e9cb0f24fbc","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f668bfbe-c4fa-4b5f-add5-f82db90b9710","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6c4638bd-062c-4cc3-97c1-0daafc8624de","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"55aca15e-f3aa-46ab-95c6-9af4e0c779bc","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"000b26f4-c878-447f-acfc-d7e5571dbd01","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2822ff18-ccc4-40ab-b205-760e5dc66a93","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"978e1414-788c-42b3-ab45-c91e172a80f8","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2fced7df-d3ca-43a7-86d8-dfebd34541f7","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f7b8e156-8572-43aa-aec7-fe176eacc758","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2a1a5e3f-2bbe-4b96-8587-dbe13a089d4d","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"9a3f74e4-ebdf-4c28-ac95-6901cccf878c","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"9fd5b62f-8f1b-444e-9dcb-3d71965cfc6a","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"ab33528a-79c3-4b1c-82dd-15c99eb9419b","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"3a2e4995-96ce-4123-b7a9-d801c3135e5c","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"1480a066-6c2d-4d50-bf05-fcfb0ea27869","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"533dc174-547d-4419-8260-a62dc1e3a2b6","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2756d249-e4ca-48db-9775-1b76fc3efc5a","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"c0e02434-b0d8-4b70-83ef-f6ad2ac07536","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]}]
        
(Showing Draft Content)

Excel Import and Export

SpreadJS supports the import and export of Excel files using the following mentioned ways:

  • Import and Export Excel on the client side

  • Import and Export with SJS file formats

  • Import and Export Encrypted Excel Files

Import and Export on Client Side

You can import an Excel file (.xlsx) to JSON and export a JSON object to Excel using the import and export methods on the client side.

The exported Excel file is locked since the file is from the Internet. The Excel export occurs on the client side, not from the server. Hence, downloading on the client side causes the file to be locked. Therefore, when you open the Excel file for the first time, it displays a warning message.

You must include <!DOCTYPE html> to view the widget properly and the reference file gc.spread.sheets.io.x.x.x.min.js to import and export Excel files.

You can download the Excel file locally or get the returned Excel file (type: blob) to post it to a server.

Using Code

This example imports and exports an Excel file. Note that the first section of the code lists the dependencies for the client-side import and export.

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="css/gc.spread.sheets.excel2013white.x.x.x.css" rel="stylesheet" />
    <script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="application/javascript"></script>
    <script src="scripts/gc.spread.sheets.io.x.x.x.min.js"></script>
    <script src="scripts/FileSaver.js"></script>

    <script>
        var spread;
        window.onload = function () {
            spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        }
        // Import the xlsx, ssjson, csv file to spread.
        function ImportFile() {
            var file = document.getElementById("fileDemo").files[0];
            spread.import(file, function () {
            // success callback to do something
            }, function (e) {
               console.log(e); // error callback
            }, {
               fileType: GC.Spread.Sheets.FileType.excel
            });
        }
        // Export spread to xlsx, ssjson, csv file.
        function ExportFile() {
            var fileName = "fileNamehere.xlsx";      
            spread.export(function (blob) {
                // save blob to a file
                saveAs(blob, fileName);
            }, function (e) {
               console.log(e);
            }, {
               fileType: GC.Spread.Sheets.FileType.excel
            });
        }
    </script>
</head>
<body>
    <div>
        <input type="file" name="files[]" id="fileDemo" accept=".xlsx" />
        <input type="button" id="loadExcel" value="Import" onclick="ImportFile()" />
        <input type="button" class="btn btn-default" id="saveExcel" value="Export" onclick="ExportFile()" />
        <div id="ss" style="width:100%; height:500px"></div>
    </div>
</body>
</html>

Import and Export with SJS File Formats

You can import Excel files (.xlsx) to .SJS (SpreadJS filetype) and export .SJS files to Excel using the open and save methods. With .SJS format, the imported file can significantly improve the load time and memory usage when working with very large Excel files. It will also reduce the file size significantly when resaving.

This example opens and saves an Excel file using the open and save methods.

// Open the SJS file to spread.
function OpenFile() 
{ 
 var excelFile = document.getElementById("fileDemo").files[0]; 
 spread.open(excelFile, () => { 
 }, function (e) { 
    console.log(e); 
 });  
} 

// Save spread to xlsx file.
function SaveFile()
{ 
 var fileName = document.getElementById("exportFileName").value; 
 if (fileName.substr(-5, 5) !== '.xlsx') 
 { fileName += '.xlsx'; } 
 spread.save(sjs, function (blob)  {
    saveAs(blob, fileName);
 }, function (e) { 
    console.log(e);
 });
}

The following table lists the features that are imported or exported from or to an Excel file.

Category

Description

Import (excel to JSON)

Export (JSON to excel)

workbook(spread)

tabstrip: tabStripVisible, startSheetIndex, tabStripRatio, tabColor


scrollbar: showHorizontalScrollbar, showVerticalScrollbar


sheets: sheet visible, sheet name


Reference style: R1C1 or A1


custom name

sharedStrings

the string used for sheet data (common string, string with white spaces)

theme

color scheme


font scheme (SpreadJS has no detailed fonts)


format scheme (SpreadJS has no format schemes)

X

style

cellStyles: all SpreadJS supported styles


different formats (formats used in tables, conditional formats, and filters)


tableStyles

worksheet

rowRangeGroup, colRangeGroup


rowCount and columnCount


showZeros


gridline visible, gridline color


row header and column header visible


zoom


selections


activeRow, activeColumn


freeze (frozenRowCount, frozenColumnCount)


default rowHeight, default columnWidth


columnInfo: column width, column visible, column style


merged cells (span)


protected sheet


rowInfo: row height, row visible, row style


cellInfo: cell value, cell formula, cell style


custom name


conditional format


comment


picture


slicer


sparkline


table


filter


validation


outline


print

Import and Export Encrypted Excel Files

You can import and export encrypted Excel files by adding the following IO reference in your application.

<script src="scripts/gc.spread.sheets.io.x.x.x.min.js"></script>

Import Encrypted Excel File

To import a password-protected Excel file, you need to pass the password property in the spread's import method. If the correct password is provided, the file gets imported successfully. However, if an invalid or incorrect password is provided, the errorCallBack function is triggered, which returns an error. Using the members of the ErrorCode enumeration, you can specify the error message.

The following code sample shows how to import an encrypted Excel file:

const userPassword = 'Asdf0123';   
// Import an Excel file with a password.    
const errorCallback = (e) => {
    if (e.errorCode = GC.Spread.Sheets.IO.errorCode.invalidPassword) {
        console.log('Invalid Password!');
    } else if (e.errorCode = GC.Spread.Sheets.IO.errorCode.noPassword) {
        console.log('Please enter the password!');
    }
}
spread.import(file, () => { }, errorCallback, {
    fileType: GC.Spread.Sheets.FileType.excel,
    password: userPassword, 
})

Export Encrypted Excel File

You can export a password-protected Excel file by specifying the password property of the spread's export method. In this case, SpreadJS exports the encrypted Excel file if the password is entered, else it exports the original Excel file without encryption.

The following code sample shows how to export an encrypted Excel file:

const userPassword = 'ABC0123';
const fileName = 'encrypt-export.xlsx';
// Export an Excel file with a password.
spread.export(blob => saveAs(blob, fileName), e => console.log(e),
    {
    fileType: GC.Spread.Sheets.FileType.excel,
    password: userPassword,
    }
);

Using Designer

You can also provide the password while importing or exporting a protected Excel file in SpreadJS Designer.

To import an encrypted Excel file, click File and then choose Import. On the Import menu page, choose Excel File, specify the settings for importing your file, enter the password in the Password box, and then click Import Excel File.


image


To export an encrypted Excel file, click File, then choose Export. On the Export menu page, choose Excel File, specify the settings for exporting, enter the password in the Password box, and then click Export Excel File.


image