Import and Export JSON

You can import data from or export data to a JSON object using the fromJSON method and toJSON method.

While importing data from a JSON object, you can set several deserialization options for custom data import. These options include ignoreStyle, ignoreFormula, frozenColumnsAsRowHeaders, frozenRowsAsColumnHeaders and doNotRecalculateAfterLoad.

While exporting data to a JSON object, you can set several serialization options for exporting custom data. These options include includeBindingSource, ignoreStyle, ignoreFormula, saveAsView, rowHeadersAsFrozenColumns, columnHeadersAsFrozenRows, includeAutoMergedCells, saveR1C1Formula, and saveExternalSourcePivotCache.

Note: Earlier versions of SpreadJS cannot load JSON files created with SpreadJS 3.20142.11 or later.

Exporting to and Importing from a JSON Object

The following code sample shows how to export to and import from a JSON object.

workbook.fromJSON(jsonData, {
    ignoreFormula: true,
    ignoreStyle: true,
    frozenColumnsAsRowHeaders: false,
    frozenRowsAsColumnHeaders: false,
    doNotRecalculateAfterLoad: true
});
workbook.toJSON({
    includeBindingSource: true,
    ignoreFormula: true,
    ignoreStyle: true,
    saveAsView: true,
    rowHeadersAsFrozenColumns: true,
    columnHeadersAsFrozenRows: true,
    includeAutoMergedCells: true,
    saveR1C1Formula: true,
    saveExternalSourcePivotCache: true
});

Save PivotCache Data for External Pivot Sources

When a PivotTable is created from an external Pivot source, such as a DataManager Table or View, JSON and SJS save operations preserve the Pivot source relationship so the PivotTable can reconnect to the source for future refresh.

Use the saveExternalSourcePivotCache option to control whether materialized PivotCache data for external Pivot sources is saved.

When saveExternalSourcePivotCache is set to true, the saved JSON or SJS file includes the materialized PivotCache records for external-source PivotTables. After reopening the file, the PivotTable can be restored from the saved cache data and can continue to use the saved Pivot source relationship for future refresh.
When saveExternalSourcePivotCache is set to false, the saved JSON or SJS file preserves the Pivot source relationship but omits the materialized external-source PivotCache records. This can reduce file size, but the PivotCache must be rebuilt from the DataManager Table or View after the DataManager data becomes available.

workbook.toJSON({
    includeBindingSource: true,
    saveExternalSourcePivotCache: true
});

The saveExternalSourcePivotCache option is a workbook save or export option. It is not a PivotTable source property and does not change the PivotTable source.

The default value of saveExternalSourcePivotCache needs confirmation.

Loading an ssjson File

The following sample loads an ssjson file.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TestLoad ssjson</title>
    <!--SpreadJS Widgets CSS-->
    <link href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet" type="text/css" />

    <!--SpreadJS Widgets JavaScript-->
    <script src="./scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function () {
            var spread = new GC.Spread.Sheets.Workbook(
                document.getElementById("ss"),
                { sheetCount: 3 }
            );

            fetch("TestFile.ssjson")
                .then(function (response) {
                    if (!response.ok) {
                        throw new Error(response.status + " " + response.statusText);
                    }
                    return response.text();
                })
                .then(function (data) {
                    //here to load ssjson file.
                    spread.suspendPaint();
                    spread.fromJSON(JSON.parse(data));
                    spread.resumePaint();
                })
                .catch(function (ex) {
                    alert("Exception:" + ex);
                });
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>Sample for load .ssjson file</h2>
        </div>
        <div id="ss" style="width: 100%; height: 430px; border: 1px solid gray;"></div>
    </div>
</body>