导入和导出

SpreadJS支持打开和保存多种流行的文件格式,包括Excel .xlsx/.xlsm,.csv,.ssjson(旧的SpreadJS格式)和新的更快的.sjs SpreadJS文件格式。新的.sjs格式在处理非常大的Excel文件时显著提高了加载时间和内存使用,并且在重新保存时与之前的SpreadJS版本相比大大减小了文件大小。

为了使用SpreadJS文件格式功能,您需要将相关的js文件链接添加到文档的head部分中,放在Spread链接下面。例如: SpreadJS支持打开和保存sjs文件格式。它还支持导入和导出xlsx、ssjson和csv文件格式。 例如: 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 }, ]; 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 name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-reportsheet-addon/dist/gc.spread.report.reportsheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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; }