Import & Export

SpreadJS supports the opening and saving to several popular file formats including Excel .xlsx/.xlsm, .csv, .ssjson (older SpreadJS format) and the new faster .sjs SpreadJS file formats. The new .sjs format significantly improves the load time and memory usage when working with very large Excel files while greatly reducing the file size when resaved as compared to previous SpreadJS versions.

Learn more about opening password protected Excel files.

Description
app.js
index.html
styles.css
Copy to CodeMine

In order to use the SpreadJS File Format feature, you need to add the related js file link into the document's head section below the Spread link. For example:

<head>
   ...
   <script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script>
   <script src='.../spreadjs/plugins/gc.spread.sheets.io.x.x.x.min.js' type='text/javascript'></script>
</head>

SpreadJS supports opening and saving sjs file formats. It also supports importing and exporting xlsx, ssjson, and csv file formats.

For example:

// open the sjs file to spread.
spread.open(file, function () {
   // success callback to do something 
}, function (e) {
   console.log(e); // error callback
});

// save spread to sjs file.
spread.save(function (blob) {
   // save blob to a file
   saveAs(blob, fileName);
}, function (e) {
   console.log(e);
});

// import the xlsx, ssjson, csv file to spread.
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.
spread.export(function (blob) {
   // save blob to a file
   saveAs(blob, fileName);
}, function (e) {
   console.log(e);
}, {
   fileType: GC.Spread.Sheets.FileType.excel
});

class GC.Spread.Sheets.Workbook

export class Workbook {
  ///* function GC.Spread.Sheets.@Workbook.save(successCallBack?: Function, errorCallBack?: Function, saveOptions?: GC.Spread.Sheets.SaveOptions): void
  /**
  * Saves the spreadJS state to a sjs file.
  * @param {function} successCallBack - The success callback when save spreadJS state complete, accept Blob as argument.
  * @param {function} errorCallBack - The error callback when save spreadJS state got error.
  * @param {GC.Spread.Sheets.SaveOptions} saveOptions - The save options.
  * @example
  * spread.save(function (blob) {
  *    // save blob to a file
  *    saveAs(blob, fileName);
  * }, function (e) {
  *    console.log(e);
  * }, { includeUnusedNames: false });
  */
  Workbook.prototype.save = function (this: Workbook, successCallBack?: (content: Blob) => {}, errorCallBack?, saveOptions?: SaveOptions): void;

  ///* function GC.Spread.Sheets.@Workbook.open(file: File, successCallback?: Function, errorCallback?: Function, openOptions?: GC.Spread.Sheets.OpenOptions)
  /**
  * Loads the object state from the sjs zipped file.
  * @param {Blob} file - The zipped spreadsheet data file.
  * @param {function} successCallBack - The success callback when import file complete, accept json as argument.
  * @param {function} errorCallBack - The error callback when import file got error.
  * @param {GC.Spread.Sheets.OpenOptions} [openOptions] - The deserialization options.
  * @example
  * //This example uses the open method.
  * //Get file blob.
  * var file = document.getElementById("importFileName").files[0];
  * // import
  * spread.open(file, function () {
  *    // success callback to do something
  * }, function (e) {
  *  console.log(e); // error callback
  * });
  */
  Workbook.prototype.open = function (file: Blob, successCallback?, errorCallback?, openOptions?: OpenOptions): void;

  ///* function GC.Spread.Sheets.@Workbook.export(successCallBack?: Function, errorCallBack?: Function, exportOptions?: GC.Spread.Sheets.ExportOptions): void
  /**
  * Exports the object state to excel or ssjson file or csv file.
  * @param {function} [successCallBack] The success callback when export object state complete, accept Blob as argument.
  * @param {function} [errorCallBack] The error callback when export object state got error.
  * @param {GC.Spread.Sheets.ExportOptions} [exportOptions] - The export options.
  * @example
  * spread.export(function (blob) {
  *    // save blob to a file
  *    saveAs(blob, fileName);
  * }, function (e) {
  *    console.log(e);
  * }, {
  *    fileType: GC.Spread.Sheets.FileType.excel,
  *    includeBindingSource: true
  * });
  */
  Workbook.prototype.export = function (successCallBack?: (content: Blob) => {}, errorCallBack?, exportOptions?: ExportOptions);

  ///* function GC.Spread.Sheets.@Workbook.import(file: File, successCallback?: Function, errorCallback?: Function, importOptions?: GC.Spread.Sheets.ImportOptions)
  /**
  * Imports the object state from the excel or ssJson or csv file.
  * @param {File} file - The ssJson or csv or Excel file for import.
  * @param {function} [successCallBack] - The success callback when import file complete, accept json as argument. ???
  * @param {function} [errorCallBack] - The error callback when import file got error.
  * @param {GC.Spread.Sheets.ImportOptions} [importOptions] - The import options.
  * @example
  * //This example uses the import method.
  * //Get file blob.
  * var file = document.getElementById("importFileName").files[0];
  * // import
  * spread.import(file, function () {
  *    // success callback to do something
  * }, function (e) {
  *    console.log(e); // error callback
  * }, {
  *    fileType: GC.Spread.Sheets.FileType.excel
  * });
  */
  Workbook.prototype.import = function (file: File, successCallback?, errorCallback?, importOptions?: ImportOptions);
}

GC.Spread.Sheets.SaveOptions

///* typedef GC.Spread.Sheets.SaveOptions
/**
 * @typedef GC.Spread.Sheets.SaveOptions
 * @property {boolean} [includeBindingSource] - Whether to include the binding source when do save, default false.
 * @property {boolean} [includeStyles] - Whether to include the style when do save, default true.
 * @property {boolean} [includeFormulas] - Whether to include the formula when do save, default true.
 * @property {boolean} [saveAsView] - Whether to ignore the format string when do save, default false.
 * @property {boolean} [includeAutoMergedCells] - Whether to include the automatically merged cells when do save, default false.
 * @property {boolean} [includeCalcModelCache] - Whether to include the extra data of calculation. Can be faster when open the file with those data, default false.
 * @property {boolean} [includeUnusedNames] - Whether to include the unused custom name when do save, default true.
 * @property {boolean} [includeEmptyRegionCells] - Whether to include any empty cells(cells with no data or only style) outside the used data range, default true.
 * @property {boolean} [saveR1C1Formula] - Whether to save the r1c1 formula in the file, only works in sjs file type, default false.
 */

GC.Spread.Sheets.OpenOptions

///* typedef GC.Spread.Sheets.OpenOptions
/**
 * @typedef GC.Spread.Sheets.OpenOptions
 * @property {boolean} [includeStyles] - Whether to include the style when loading, default true.
 * @property {boolean} [includeFormulas] - Whether to include the formula when loading, default true.
 * @property {boolean} [fullRecalc] - Whether to calculate after loading the json data, false by default.
 * @property {boolean} [dynamicReferences] - Whether to calculate functions with dynamic reference, default true.
 * @property {boolean} [calcOnDemand] - Whether to calculate formulas only when they are demanded, default false.
 * @property {boolean} [incrementalCalculation] - Whether to incremental calculate formulas without blocking UI, default false.
 * @property {boolean} [includeUnusedStyles] - Whether to include the name style when converting excel xml to the json, default true.
 * @property {GC.Spread.Sheets.OpenMode} [openMode] - The open mode of normal, lazy and incremental. By default is normal.
 * @property {GC.Spread.Sheets.ProgressFunctionType} [progress] - The progress callback function for each open mode.
 */

 ///* enum GC.Spread.Sheets.OpenMode
/**
 * The open mode for open sjs function.
 * @enum {number}
 */
 enum OpenMode {
    /**
    * normal open mode, without lazy and incremental. When opening file, UI and UI event could be refreshed and responsive at specific time points.
    */
    normal = 0,
    /**
    * lazy open mode. When opening file, only the active sheet will be loaded directly. Other sheets will be loaded only when they are be used.
    */
    lazy = 1,
    /**
    * incremental open mode. When opening file, UI and UI event could be refreshed and responsive directly.
    */
    incremental = 2
}

///* typedef GC.Spread.Sheets.ProgressFunctionType
/**
 * @typedef GC.Spread.Sheets.ProgressFunctionType
 * @param {object} progressArgs - the progress arguments.
 * @param {string} [progressArgs.sheetName] - the current loading sheet's name.
 * @param {string} progressArgs.step - the current loading step.
 * @param {number} progressArgs.progress - the current loading progress, from 0 - 1.
 * @returns {void}
 * @description The callback when of the incremental loading progress.
 */
export type ProgressFunctionType = (progressArgs: ProgressArgs) => void;

GC.Spread.Sheets.ImportOptions

///* typedef GC.Spread.Sheets.ImportOptions
/**
 * @typedef {GC.Spread.Sheets.FileOptions & (GC.Spread.Sheets.ImportCsvOptions | GC.Spread.Sheets.ImportSSJsonOptions | GC.Spread.Sheets.ImportXlsxOptions)} GC.Spread.Sheets.ImportOptions - The options for import function. */
/**
 GC.Spread.Sheets.FileOptions & (GC.Spread.Sheets.ImportCsvOptions | GC.Spread.Sheets.ImportSSJsonOptions | GC.Spread.Sheets.ImportXlsxOptions)
*/

///* typedef GC.Spread.Sheets.FileOptions
/**
 * @typedef GC.Spread.Sheets.FileOptions - The file options for export.
 * @property {GC.Spread.Sheets.FileType} fileType - The file type.
 */
/**
{
    fileType: GC.Spread.Sheets.FileType
}
*/

GC.Spread.Sheets.ExportOptions

///* typedef GC.Spread.Sheets.ExportOptions
/**
 * @typedef {GC.Spread.Sheets.FileOptions & (GC.Spread.Sheets.ExportCsvOptions | GC.Spread.Sheets.ExportSSJsonOptions | GC.Spread.Sheets.ExportXlsxOptions)} GC.Spread.Sheets.ExportOptions - The options for export function.
 */
/**
 GC.Spread.Sheets.FileOptions & (GC.Spread.Sheets.ExportCsvOptions | GC.Spread.Sheets.ExportSSJsonOptions | GC.Spread.Sheets.ExportXlsxOptions)
*/

///* typedef GC.Spread.Sheets.FileOptions
/**
 * @typedef GC.Spread.Sheets.FileOptions - The file options for export.
 * @property {GC.Spread.Sheets.FileType} fileType - The file type.
 */
/**
{
    fileType: GC.Spread.Sheets.FileType
}
*/

GC.Spread.Sheets.ImportXlsxOptions

///* typedef GC.Spread.Sheets.ImportXlsxOptions
/**
 * @typedef GC.Spread.Sheets.ImportXlsxOptions
 * @property {boolean} [includeStyles] - Whether to include the style when loading, default true.
 * @property {boolean} [includeFormulas] - Whether to include the formula when loading, default true.
 * @property {boolean} [frozenColumnsAsRowHeaders] - Whether to treat the frozen columns as row headers when loading, default false.
 * @property {boolean} [frozenRowsAsColumnHeaders] - Whether to treat the frozen rows as column headers when loading, default false.
 * @property {boolean} [fullRecalc] - Whether to calculate after loading the json data, false by default.
 * @property {boolean} [dynamicReferences] - Whether to calculate functions with dynamic reference, default true.
 * @property {boolean} [calcOnDemand] - Whether to calculate formulas only when they are demanded, default false.
 * @property {boolean} [incrementalCalculation] - Whether to incremental calculate formulas without blocking UI, default false.
 * @property {boolean} [includeUnusedStyles] - Whether to include the name style when converting excel xml to the json, default true.
 * @property {boolean} [convertSheetTableToDataTable] - Whether to convert the sheet tables to data manager tables, default false.
 * @property {GC.Spread.Sheets.OpenMode} [openMode] - The open mode of normal, lazy and incremental. By default is lazy.
 * @property {GC.Spread.Sheets.ProgressFunctionType} [progress] - The progress callback function for each open mode.
 */
/**
{
    includeStyles?: boolean;
    frozenColumnsAsRowHeaders?: boolean;
    frozenRowsAsColumnHeaders?: boolean;
    includeFormulas?: boolean;
    fullRecalc?: boolean;
    dynamicReferences?: boolean;
    calcOnDemand?: boolean;
    includeUnusedStyles?: boolean;
    convertSheetTableToDataTable?: boolean;
    incrementalCalculation?: boolean;
    openMode?: GC.Spread.Sheets.OpenMode;
    progress?: GC.Spread.Sheets.ProgressFunctionType
}
*/

GC.Spread.Sheets.ExportXlsxOptions

///* typedef GC.Spread.Sheets.ExportXlsxOptions
/**
 * @typedef GC.Spread.Sheets.ExportXlsxOptions
 * @property {boolean} [includeBindingSource] - Whether to include the binding source when do save, default false.
 * @property {boolean} [includeStyles] - Whether to include the style when do save, default true.
 * @property {boolean} [includeFormulas] - Whether to include the formula when do save, default true.
 * @property {boolean} [saveAsView] - Whether to ignore the format string when do save, default false.
 * @property {boolean} [rowHeadersAsFrozenColumns] - Whether to treat the row headers as frozen columns when do save, default false.
 * @property {boolean} [columnHeadersAsFrozenRows] - Whether to treat the column headers as frozen rows when do save, default false.
 * @property {boolean} [includeAutoMergedCells] - Whether to include the automatically merged cells when do save, default false.
 * @property {boolean} [includeUnusedNames] - Whether to include the unused custom name when do save, default true.
 * @property {boolean} [includeEmptyRegionCells] - Whether to include any empty cells(cells with no data or only style) outside the used data range, default true.
 */
/**
{
    includeBindingSource?: boolean;
    includeStyles?: boolean;
    includeFormulas?: boolean;
    saveAsView?: boolean;
    rowHeadersAsFrozenColumns?: boolean;
    columnHeadersAsFrozenRows?: boolean;
    includeUnusedNames?: boolean;
    includeEmptyRegionCells?: boolean;
    includeAutoMergedCells?: boolean;
}
*/

GC.Spread.Sheets.ImportCsvOptions

///* typedef GC.Spread.Sheets.ImportCsvOptions
/**
 * @typedef GC.Spread.Sheets.ImportCsvOptions
 * @property {string} [encoding] - The csv encoding type, the default encoding type is 'UTF-8'.
 * @property {string} [rowDelimiter] - The row delimiter that is appended to the end of the row, the default row delimiter is '\r\n'.
 * @property {string} [columnDelimiter] - The column delimiter that is appended to the end of the column, the default column delimiter is ','.
 */
/**
{
    rowDelimiter?: string;
    columnDelimiter?: string;
    encoding?: string;
}
*/

.Spread.Sheets.ExportCsvOptions

///* typedef GC.Spread.Sheets.ExportCsvOptions
/**
 * @typedef GC.Spread.Sheets.ExportCsvOptions
 * @property {string} [encoding] - The csv encoding type, the default encoding type is 'UTF-8'.
 * @property {string} [rowDelimiter] - The row delimiter that is appended to the end of the row, the default row delimiter is '\r\n'.
 * @property {string} [columnDelimiter] - The column delimiter that is appended to the end of the column, the default column delimiter is ','.
 * @property {object} [range] - The range info.
 * @param {number} [range.sheetIndex] - The sheet index, the default sheet index is current active sheet index.
 * @param {number} [range.row] - The start row, the default row index is 0.
 * @param {number} [range.column] - The start column, the default column index is 0.
 * @param {number} [range.rowCount] - The row count, the default row count is current active sheet row count.
 * @param {number} [range.columnCount] - The column count, the default column count is current active sheet column count.

 */
/**
{
    encoding?: string;
    rowDelimiter?: string;
    columnDelimiter?: string;
    range?: {
        sheetIndex: number;
        row: number;
        column: number;
        rowCount: number;
        columnCount: number;
    }
}
*/

GC.Spread.Sheets.ImportSSJsonOptions

///* typedef GC.Spread.Sheets.ImportSSJsonOptions
/**
 * @typedef GC.Spread.Sheets.ImportSSJsonOptions
 * @property {boolean} [includeStyles] - Whether to include the style when converting json to the workbook, default true.
 * @property {boolean} [includeFormulas] - Whether to include the formula when converting json to the workbook, default true.
 * @property {boolean} [frozenColumnsAsRowHeaders] - Whether to treat the frozen columns as row headers when converting json to the workbook, default false.
 * @property {boolean} [frozenRowsAsColumnHeaders] - Whether to treat the frozen rows as column headers when converting json to the workbook, default false.
 * @property {boolean} [fullRecalc] - Whether to do full recalculation after loading the json data, default true.
 * @property {boolean | object} [incrementalLoad] - Whether to use the incremental loading or the callbacks of incremental loading when converting json to the workbook, default false.
 * @param {function} [incrementalLoad.loading] - The callback when of the incremental loading progress.
 * @param {function} [incrementalLoad.loaded] - The callback when of the incremental loading finished.
 */
/**
{
    includeStyles?: boolean;
    incrementalLoad?: any;
    frozenColumnsAsRowHeaders?: boolean;
    frozenRowsAsColumnHeaders?: boolean;
    includeFormulas?: boolean;
    fullRecalc?: boolean;
}
*/

GC.Spread.Sheets.ExportSSJsonOptions

///* typedef GC.Spread.Sheets.ExportSSJsonOptions
/**
 * @typedef GC.Spread.Sheets.ExportSSJsonOptions
 * @property {boolean} [includeBindingSource] - Whether to include the binding source when converting the workbook to json, default false.
 * @property {boolean} [includeStyles] - Whether to include the style when converting the workbook to json, default true.
 * @property {boolean} [includeFormulas] - Whether to include the formula when converting the workbook to json, default true.
 * @property {boolean} [saveAsView] - Whether to ignore the format string when converting the workbook to json, default false.
 * @property {boolean} [rowHeadersAsFrozenColumns] - Whether to treat the row headers as frozen columns when converting the workbook to json, default false.
 * @property {boolean} [columnHeadersAsFrozenRows] - Whether to treat the column headers as frozen rows when converting the workbook to json, default false.
 * @property {boolean} [includeAutoMergedCells] - Whether to include the automatically merged cells when converting the workbook to json, default false.
 */
/**
{
    includeBindingSource?: boolean;
    includeStyles?: boolean;
    includeFormulas?: boolean;
    saveAsView?: boolean;
    rowHeadersAsFrozenColumns?: boolean;
    columnHeadersAsFrozenRows?: boolean;
    includeAutoMergedCells?: boolean;
}
*/
In order to use the SpreadJS File Format feature, you need to add the related js file link into the document's head section below the Spread link. For example: SpreadJS supports opening and saving sjs file formats. It also supports importing and exporting xlsx, ssjson, and csv file formats. For example: class GC.Spread.Sheets.Workbook GC.Spread.Sheets.SaveOptions GC.Spread.Sheets.OpenOptions GC.Spread.Sheets.ImportOptions GC.Spread.Sheets.ExportOptions GC.Spread.Sheets.ImportXlsxOptions GC.Spread.Sheets.ExportXlsxOptions GC.Spread.Sheets.ImportCsvOptions .Spread.Sheets.ExportCsvOptions GC.Spread.Sheets.ImportSSJsonOptions GC.Spread.Sheets.ExportSSJsonOptions
var openOptions = [ { propName: "openMode", type: "select", displayText: "OpenMode", options: [{name: 'normal', value: 0}, {name: 'lazy', value: 1}, {name: 'incremental', value: 2}], default: 0 }, { propName: "includeStyles", type: "boolean", default: true }, { propName: "includeFormulas", type: "boolean", default: true }, { propName: "fullRecalc", type: "boolean", default: false }, { propName: "dynamicReferences", type: "boolean", default: true }, { propName: "calcOnDemand", type: "boolean", default: false }, { propName: "includeUnusedStyles", type: "boolean", default: true }, ]; var importXlsxOptions = [ { propName: "openMode", type: "select", displayText: "OpenMode", options: [{name: 'normal', value: 0}, {name: 'lazy', value: 1}, {name: 'incremental', value: 2}], default: 0 }, { propName: "includeStyles", type: "boolean", default: true }, { propName: "includeFormulas", type: "boolean", default: true }, { propName: "frozenColumnsAsRowHeaders", type: "boolean", default: false }, { propName: "frozenRowsAsColumnHeaders", type: "boolean", default: false }, { propName: "fullRecalc", type: "boolean", default: false }, { propName: "dynamicReferences", type: "boolean", default: true }, { propName: "calcOnDemand", type: "boolean", default: false }, { propName: "includeUnusedStyles", type: "boolean", default: true }, { propName: "convertSheetTableToDataTable", type: "boolean", default: false }, ]; var importSSJsonOptions = [ { propName: "includeStyles", type: "boolean", default: true }, { propName: "includeFormulas", type: "boolean", default: true }, { propName: "frozenColumnsAsRowHeaders", type: "boolean", default: false }, { propName: "frozenRowsAsColumnHeaders", type: "boolean", default: false }, { propName: "fullRecalc", type: "boolean", default: false }, { propName: "incrementalLoading", type: "boolean", default: false } ]; var importCsvOptions = [ { propName: "encoding", type: "string", default: "UTF-8" }, { propName: "rowDelimiter", type: "string", default: "\r\n" }, { propName: "columnDelimiter", type: "string", default: "," } ]; var saveOptions = [ { propName: "includeBindingSource", type: "boolean", default: false }, { propName: "includeStyles", type: "boolean", default: true }, { propName: "includeFormulas", type: "boolean", default: true }, { propName: "saveAsView", type: "boolean", default: false }, { propName: "includeAutoMergedCells", type: "boolean", default: false }, { propName: "includeCalcModelCache", type: "boolean", default: false }, { propName: "saveR1C1Formula", type: "boolean", default: false }, { propName: "includeUnusedNames", type: "boolean", default: true }, { propName: "includeEmptyRegionCells", type: "boolean", default: true }, ]; var exportXlsxOptions = [ { propName: "includeBindingSource", type: "boolean", default: false }, { propName: "includeStyles", type: "boolean", default: true }, { propName: "includeFormulas", type: "boolean", default: true }, { propName: "saveAsView", type: "boolean", default: false }, { propName: "rowHeadersAsFrozenColumns", type: "boolean", default: false }, { propName: "columnHeadersAsFrozenRows", type: "boolean", default: false }, { propName: "includeAutoMergedCells", type: "boolean", default: false }, { propName: "includeUnusedNames", type: "boolean", default: true }, { propName: "includeEmptyRegionCells", type: "boolean", default: true }, ]; var exportSSJsonOptions = [ { propName: "includeBindingSource", type: "boolean", default: false }, { propName: "includeStyles", type: "boolean", default: true }, { propName: "includeFormulas", type: "boolean", default: true }, { propName: "saveAsView", type: "boolean", default: false }, { propName: "rowHeadersAsFrozenColumns", type: "boolean", default: false }, { propName: "columnHeadersAsFrozenRows", type: "boolean", default: false }, { propName: "includeAutoMergedCells", type: "boolean", default: false }, ]; var exportCsvOptions = [ { propName: "encoding", type: "string", default: "UTF-8" }, { propName: "rowDelimiter", type: "string", default: "\r\n" }, { propName: "columnDelimiter", type: "string", default: "," }, { propName: "sheetIndex", type: "number", default: 0 }, { propName: "row", type: "number", default: 0 }, { propName: "column", type: "number", default: 0 }, { propName: "rowCount", type: "number", default: 200 }, { propName: "columnCount", type: "number", default: 20 }, ]; var FileType = { SJS: 'sjs', Excel: 'xlsx', SSJson: 'ssjson', Csv: 'csv', } var openOptionsDict = {}; openOptionsDict[FileType.SJS] = openOptions; openOptionsDict[FileType.Excel] = importXlsxOptions; openOptionsDict[FileType.SSJson] = importSSJsonOptions; openOptionsDict[FileType.Csv] = importCsvOptions; var saveOptionsDict = {}; saveOptionsDict[FileType.SJS] = saveOptions; saveOptionsDict[FileType.Excel] = exportXlsxOptions; saveOptionsDict[FileType.SSJson] = exportSSJsonOptions; saveOptionsDict[FileType.Csv] = exportCsvOptions; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar')); statusBar.bind(spread); initDefaultOptions(); var selectedFileElement = document.querySelector('#selectedFile'); selectedFileElement.addEventListener("change", function() { var file = selectedFileElement.files[0]; updateOptions('open', getFileType(file)); }); var saveFileType = document.querySelector('#saveFileType'); saveFileType.addEventListener("change", function() { var fileType = saveFileType.value; updateOptions('save', fileType); }); document.getElementById('open').onclick = function () { var file = document.querySelector('#selectedFile').files[0]; if (!file) { return; } var fileType = getFileType(file); var options = getOptions('open'); if (fileType === FileType.SJS) { spread.open(file, function() {}, function() {}, options); } else { spread.import(file, function() {}, function() {}, options); } }; document.getElementById('save').onclick = function () { var fileName = 'export.' + saveFileType.value; var fileType = saveFileType.value; var options = getOptions('save'); if (fileType === FileType.SJS) { spread.save(function(blob) { saveAs(blob, fileName); }, function() {}, options); } else { options.fileType = mapExportFileType(fileType); spread.export(function(blob) { saveAs(blob, fileName); }, function() {}, options); } }; }; function initOptions (options, fileType, mode) { var container = document.createElement('div'); container.className = fileType; container.style.display = 'none'; options.forEach(function (prop) { var item = document.createElement('div'); item.className = 'item'; var id = getElementId(mode, fileType, prop.propName); var label = document.createElement("label"); label.innerText = prop.displayText || prop.propName; label.for = id; if (prop.type === 'select') { var select = document.createElement('select'); prop.options.forEach(function(p) { var option = document.createElement('option'); option.value = p.value; option.text = p.name; select.appendChild(option); }); select.id = id; select.value = prop.default; item.appendChild(label); item.appendChild(select); } else { var input = document.createElement('input'); input.id = getElementId(mode, fileType, prop.propName); if (prop.type === 'boolean') { input.type ='checkbox'; input.checked = prop.default; item.appendChild(input); item.appendChild(label); } else if (prop.type === 'number') { input.type = 'number'; input.value = prop.default; item.appendChild(label); item.appendChild(input); } else if (prop.type === 'string') { input.type = 'text'; input.value = prop.default; item.appendChild(label); item.appendChild(input); } } container.appendChild(item); }); return container; } function initDefaultOptions () { var container = document.querySelector('.open-options'); var mode = 'open'; container.appendChild(initOptions(openOptions, FileType.SJS, mode)); container.appendChild(initOptions(importXlsxOptions, FileType.Excel, mode)); container.appendChild(initOptions(importSSJsonOptions, FileType.SSJson, mode)); container.appendChild(initOptions(importCsvOptions, FileType.Csv, mode)); container = document.querySelector('.save-options'); mode = 'save'; container.appendChild(initOptions(saveOptions, FileType.SJS, mode)); container.appendChild(initOptions(exportXlsxOptions, FileType.Excel, mode)); container.appendChild(initOptions(exportSSJsonOptions, FileType.SSJson, mode)); container.appendChild(initOptions(exportCsvOptions, FileType.Csv, mode)); updateOptions('save', FileType.SJS); } function updateOptions (mode, fileType) { var container = document.querySelector('.' + mode + '-options'); var oldFileType = container.getAttribute('data-file-type'); if (oldFileType === fileType) { return; } if (oldFileType) { container.querySelector('.' + oldFileType).style.display = 'none'; } if (fileType) { container.querySelector('.' + fileType).style.display = ''; } container.setAttribute('data-file-type', fileType); } function getOptions (mode) { var container = document.querySelector('.' + mode + '-options'); var fileType = container.getAttribute('data-file-type'); if (!fileType) { return; } var options = {}; var props = mode === 'open' ? openOptionsDict[fileType] : saveOptionsDict[fileType]; container = container.querySelector('.' + fileType); props.forEach(function(prop) { var element = container.querySelector('#' + getElementId(mode, fileType, prop.propName)); var value; if (prop.type === 'boolean') { value = element.checked; } else if (prop.type === 'number') { value = +element.value; } else if (prop.type === 'string') { value = element.value; } else if (prop.type === 'select') { value = +element.value; } options[prop.propName] = value; }); return options; } function getElementId (mode, fileType, propName) { return mode + '-' + fileType + '-' + propName; } function getFileType (file) { if (!file) { return; } var fileName = file.name; var extensionName = fileName.substring(fileName.lastIndexOf(".") + 1); if (extensionName === 'sjs') { return FileType.SJS; } else if (extensionName === 'xlsx' || extensionName === 'xlsm') { return FileType.Excel; } else if (extensionName === 'ssjson' || extensionName === 'json') { return FileType.SSJson; } else if (extensionName === 'csv') { return FileType.Csv; } } function mapExportFileType (fileType) { if (fileType === FileType.SSJson) { return GC.Spread.Sheets.FileType.ssjson; } else if (fileType === FileType.Csv) { return GC.Spread.Sheets.FileType.csv; } return GC.Spread.Sheets.FileType.excel; }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-reportsheet-addon/dist/gc.spread.report.reportsheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div class="sample-container"> <div id="ss" class="sample-spreadsheets"></div> <div id="statusBar"></div> </div> <div class="options-container"> <div class="option-row"> <div class="inputContainer"> <input id="selectedFile" type="file" name="files[]"accept=".sjs, .xlsx, .xlsm, .ssjson, .json, .csv" /> <button class="settingButton" id="open">Open</button> <div class="open-options"></div> </div> <div class="inputContainer"> <label for="fileType">FileType:</label> <select id="saveFileType"> <option value="sjs">SJS</option> <option value="xlsx">Excel</option> <option value="ssjson">SSJson</option> <option value="csv">Csv</option> </select> <button class="settingButton" id="save">Save</button> <div class="save-options"></div> </div> </div> </div> </div></body> </html>
body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-container { width: calc(100% - 280px); height: 100%; float: left; } .sample-spreadsheets { width: 100%; height: calc(100% - 25px); overflow: hidden; } #statusBar { bottom: 0; height: 25px; width: 100%; position: relative; } .options-container { float: right; width: 280px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .sample-options { z-index: 1000; } .inputContainer { width: 100%; height: auto; border: 1px solid #eee; padding: 6px 12px; margin-bottom: 10px; box-sizing: border-box; } .settingButton { color: #fff; background: #82bc00; outline: 0; line-height: 1.5715; position: relative; display: inline-block; font-weight: 400; white-space: nowrap; text-align: center; height: 32px; padding: 4px 15px; font-size: 14px; border-radius: 2px; user-select: none; cursor: pointer; border: 1px solid #82bc00; box-sizing: border-box; margin-bottom: 10px; margin-top: 10px; } .settingButton:hover { color: #fff; border-color: #88b031; background: #88b031; } .options-title { font-weight: bold; margin: 4px 2px; } #selectedFile { width: 180px; } #saveFileType { width: 120px; height: 31px; } .open-options .item { margin: 5px 0px; display: flex; } .save-options .item { margin: 5px 0px; display: flex; } label { margin-left: 3px; } select, input[type="text"], input[type="number"] { display: inline-block; margin-left: auto; width: 120px; font-weight: 400; outline: 0; line-height: 1.5715; border-radius: 2px; border: 1px solid #F4F8EB; box-sizing: border-box; }