How to Save an SJS Blob

We can save an SJS workbook as a blob object, along with the base64 string, which allows us to save the file to our own database.

 

Refer to the below sample code for an example on how to implement an import/export blob feature:

 

App.js

let designer = new GC.Spread.Sheets.Designer.Designer("gc-designer-container");
let spread = designer.getWorkbook();

initSpread(spread);

function initSpread(spread) {
    let sheet = spread.getSheet(0);

    document.getElementById("export").addEventListener("click", (e) => {
        spread.save((blob) => {
            // write your custom logic to store sjs file on web server
            let reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function () {
                let base64String = reader.result;
                localStorage.setItem('SJS_base64_data', base64String);
                console.log('exported');
            };
        }, console.log, { includeBindingSource: true });
    });

    document.getElementById("import").addEventListener("click", async (e) => {
        // write your custom logic here to get the sjs file from the web server
        let base64String = localStorage.getItem('SJS_base64_data');
        if (!base64String) {
            return;
        }

        let res = await fetch(base64String);
        let blob = await res.blob();
        console.log(blob);
        spread.open(blob, (args) => {
            console.log('SJS file loaded successfully');
        }, console.log);
    });
}

Index.html

<!doctype html>
<html>

<head>
    <title>SpreadJS Sample</title>
    <link rel="stylesheet" type="text/css"
        href="node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
    <link rel="stylesheet type=" text/css"
        href="node_modules/@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css">
        <link rel="stylesheet type=" text/css"
        href="./src/style.css">
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div class="sample-tutorial">
        <div id="gc-designer-container" class="sample-spreadsheets"></div>
        <div id="ss"></div>
        <div class="options-container" id="options">
            <button id="export">export</button><br/>
            <span>Clicking "export" button converts the spread to SJS blob object and stores base64 string of blob object on localStorage of browser</span><br/><br/>

            <button id="import">import</button><br/>
            <span>Clicking "import" button gets base64 string from localStorage of browser, converts base64 string to blob object and then loads the SJS blob object in the spread </span>
        </div>
    </div>
    <script>
        System.import('./src/app');
    </script>
</body>

</html>

Style.css

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.sample-tutorial {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.sample-spreadsheets {
    width: 85%;
    height: 100%;
    /* overflow: hidden; */
    float: left;
}

.options-container {
    float: right;
    width: 15%;
    padding: 12px;
    height: 100%;
    box-sizing: border-box;
    background: #fbfbfb;
    overflow: auto;
}


Tye Glenz