SpreadJS 自有文件格式

import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { SpreadSheetsModule } from '@grapecity-software/spread-sheets-angular'; import GC from '@grapecity-software/spread-sheets'; import '@grapecity-software/spread-sheets-io'; import '@grapecity-software/spread-sheets-charts'; import '@grapecity-software/spread-sheets-shapes'; import '@grapecity-software/spread-sheets-slicers'; import '@grapecity-software/spread-sheets-pivot-addon'; import "@grapecity-software/spread-sheets-tablesheet"; import '@grapecity-software/spread-sheets-resources-zh'; GC.Spread.Common.CultureManager.culture("zh-cn"); import './styles.css'; declare let orderDataSource: any; declare var saveAs: any; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { spread: GC.Spread.Sheets.Workbook; hostStyle = { width: '100%', height: 'calc(100% - 25px)', overflow: 'hidden', float: 'left' }; selectedFile: File = null; openFileType: string = ""; saveFileType: string = "sjs"; openOptions = { openMode: 0, includeStyles: true, includeFormulas: true, frozenColumnsAsRowHeaders: false, frozenRowsAsColumnHeaders: false, fullRecalc: false, dynamicReferences: true, calcOnDemand: false, includeUnusedStyles: true, incrementalLoading: false, encoding: "UTF-8", rowDelimiter: "\r\n", columnDelimiter: "," }; saveOptions = { includeBindingSource: false, includeStyles: true, includeFormulas: true, saveAsView: false, rowHeadersAsFrozenColumns: false, columnHeadersAsFrozenRows: false, includeAutoMergedCells: false, includeCalcModelCache: false, includeUnusedNames: true, includeEmptyRegionCells: true, encoding: "UTF-8", rowDelimiter: "\r\n", columnDelimiter: ",", sheetIndex: 0, row: 0, column: 0, rowCount: 200, columnCount: 20, }; openOptionsConfig = { sjs: [ { 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 }, ], xlsx: [ { 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 }, ], ssjson: [ { 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 } ], csv: [ { propName: "encoding", type: "string", default: "UTF-8" }, { propName: "rowDelimiter", type: "string", default: "\r\n" }, { propName: "columnDelimiter", type: "string", default: "," } ] }; saveOptionsConfig = { sjs: [ { 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: "includeUnusedNames", type: "boolean", default: true }, { propName: "includeEmptyRegionCells", type: "boolean", default: true }, ], xlsx: [ { 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: "includeCalcModelCache", type: "boolean", default: false }, { propName: "includeUnusedNames", type: "boolean", default: true }, { propName: "includeEmptyRegionCells", type: "boolean", default: true }, ], ssjson: [ { 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 }, ], csv: [ { 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 }, ] }; constructor() { } initSpread($event: any) { this.spread = $event.spread; var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar')); statusBar.bind(this.spread); } selectedFileChange(e: any) { this.selectedFile = e.target.files[0]; this.openFileType = this.getFileType(this.selectedFile); } open() { var file = this.selectedFile; if (!file) { return; } var fileType = this.getFileType(file); var options = this.getOptions('open'); if (fileType === 'sjs') { this.spread.open(file, function() { }, function() { }, options); } else { this.spread.import(file, function() { }, function() { }, options); } } save() { var fileType = this.saveFileType; var fileName = 'export.' + fileType; var options: any = this.getOptions('save'); if (fileType === 'sjs') { this.spread.save(function(blob) { saveAs(blob, fileName); }, function() { }, options); } else { options.fileType = this.mapExportFileType(fileType); this.spread.export(function(blob) { saveAs(blob, fileName); }, function() { }, options); } } getOptions(mode: string) { let optionsConfig; let optionsValue: any; if (mode === 'open') { optionsConfig = this.openOptionsConfig[this.openFileType]; optionsValue = this.openOptions; } else { optionsConfig = this.saveOptionsConfig[this.saveFileType]; optionsValue = this.saveOptions; } let options = {}; optionsConfig.forEach((prop: any) => { let v = optionsValue[prop.propName]; if (prop.type === 'number') { v = +v; } options[prop.propName] = v; }); return options; } getFileType(file: File) { if (!file) { return; } var fileName = file.name; var extensionName = fileName.substring(fileName.lastIndexOf(".") + 1); if (extensionName === 'sjs') { return 'sjs'; } else if (extensionName === 'xlsx' || extensionName === 'xlsm') { return 'xlsx'; } else if (extensionName === 'ssjson' || extensionName === 'json') { return 'ssjson'; } else if (extensionName === 'csv') { return 'csv'; } } mapExportFileType(fileType: string) { if (fileType === 'ssjson') { return GC.Spread.Sheets.FileType.ssjson; } else if (fileType === 'csv') { return GC.Spread.Sheets.FileType.csv; } return GC.Spread.Sheets.FileType.excel; } needShow(mode: string, propName: string) { let options = mode === 'open' ? this.openOptionsConfig[this.openFileType] : this.saveOptionsConfig[this.saveFileType]; return options && options.find((p: any) => p.propName === propName); } } @NgModule({ imports: [BrowserModule, SpreadSheetsModule, FormsModule], declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);

<!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$/zh/angular/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script> <!-- Polyfills --> <script src="$DEMOROOT$/zh/angular/node_modules/core-js/client/shim.min.js"></script> <script src="$DEMOROOT$/zh/angular/node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="$DEMOROOT$/zh/angular/node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function(m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('$DEMOROOT$/zh/lib/angular/license.ts'); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>

<div class="sample-tutorial"> <div class="sample-container"> <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"> <gc-worksheet> </gc-worksheet> </gc-spread-sheets> <div id="statusBar"></div> </div> <div class="options-container"> <div class="option-row"> <div class="inputContainer"> <input id="selectedFile" type="file" accept=".sjs, .xlsx, .xlsm, .ssjson, .json, .csv" (change)="selectedFileChange($event)" /> <button class="settingButton" id="open" (click)="open()">Open</button> <div class="open-options"> <div class="item" *ngIf="needShow('open', 'openMode')"> <label for="open-openMode">OpenMode</label> <select id="open-openMode" [(ngModel)]="openOptions.openMode"> <option value="0">normal</option> <option value="1">lazy</option> <option value="2">incremental</option> </select> </div> <div class="item" *ngIf="needShow('open', 'openMode')" > <input type="checkbox" id="open-includeStyles" [(ngModel)]="openOptions.includeStyles"/> <label for="open-includeStyles">includeStyles</label> </div> <div class="item" *ngIf="needShow('open', 'includeFormulas')" > <input type="checkbox" id="open-includeFormulas" [(ngModel)]="openOptions.includeFormulas"/> <label for="open-includeFormulas">includeFormulas</label> </div> <div class="item" *ngIf="needShow('open', 'frozenColumnsAsRowHeaders')" > <input type="checkbox" id="open-frozenColumnsAsRowHeaders" [(ngModel)]="openOptions.frozenColumnsAsRowHeaders"/> <label for="open-frozenColumnsAsRowHeaders">frozenColumnsAsRowHeaders</label> </div> <div class="item" *ngIf="needShow('open', 'frozenRowsAsColumnHeaders')" > <input type="checkbox" id="open-frozenRowsAsColumnHeaders" [(ngModel)]="openOptions.frozenRowsAsColumnHeaders"/> <label for="open-frozenRowsAsColumnHeaders">frozenRowsAsColumnHeaders</label> </div> <div class="item" *ngIf="needShow('open', 'fullRecalc')" > <input type="checkbox" id="open-fullRecalc" [(ngModel)]="openOptions.fullRecalc"/> <label for="open-fullRecalc">fullRecalc</label> </div> <div class="item" *ngIf="needShow('open', 'dynamicReferences')" > <input type="checkbox" id="open-dynamicReferences" [(ngModel)]="openOptions.dynamicReferences"/> <label for="open-dynamicReferences">dynamicReferences</label> </div> <div class="item" *ngIf="needShow('open', 'calcOnDemand')" > <input type="checkbox" id="open-calcOnDemand" [(ngModel)]="openOptions.calcOnDemand"/> <label for="open-calcOnDemand">calcOnDemand</label> </div> <div class="item" *ngIf="needShow('open', 'includeUnusedStyles')" > <input type="checkbox" id="open-includeUnusedStyles" [(ngModel)]="openOptions.includeUnusedStyles"/> <label for="open-includeUnusedStyles">includeUnusedStyles</label> </div> <div class="item" *ngIf="needShow('open', 'incrementalLoading')" > <input type="checkbox" id="open-incrementalLoading" [(ngModel)]="openOptions.incrementalLoading"/> <label for="open-incrementalLoading">incrementalLoading</label> </div> <div class="item" *ngIf="needShow('open', 'encoding')" > <label for="open-encoding">encoding</label> <input type="text" id="open-encoding" [(ngModel)]="openOptions.encoding"/> </div> <div class="item" *ngIf="needShow('open', 'rowDelimiter')" > <label for="open-rowDelimiter">rowDelimiter</label> <input type="text" id="open-rowDelimiter" [(ngModel)]="openOptions.rowDelimiter"/> </div> <div class="item" *ngIf="needShow('open', 'columnDelimiter')" > <label for="open-columnDelimiter">columnDelimiter</label> <input type="text" id="open-columnDelimiter" [(ngModel)]="openOptions.columnDelimiter"/> </div> </div> </div> <div class="inputContainer"> <label for="saveFileType">FileType:</label> <select id="saveFileType" [(ngModel)]="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" (click)="save()">Save</button> <div class="save-options"> <div class="item" *ngIf="needShow('save', 'includeBindingSource')" > <input type="checkbox" id="save-includeBindingSource" [(ngModel)]="saveOptions.includeBindingSource"/> <label for="save-includeBindingSource">includeBindingSource</label> </div> <div class="item" *ngIf="needShow('save', 'includeStyles')" > <input type="checkbox" id="save-includeStyles" [(ngModel)]="saveOptions.includeStyles"/> <label for="save-includeStyles">includeStyles</label> </div> <div class="item" *ngIf="needShow('save', 'includeFormulas')" > <input type="checkbox" id="save-includeFormulas" [(ngModel)]="saveOptions.includeFormulas"/> <label for="save-includeFormulas">includeFormulas</label> </div> <div class="item" *ngIf="needShow('save', 'saveAsView')" > <input type="checkbox" id="save-saveAsView" [(ngModel)]="saveOptions.saveAsView"/> <label for="save-saveAsView">saveAsView</label> </div> <div class="item" *ngIf="needShow('save', 'rowHeadersAsFrozenColumns')" > <input type="checkbox" id="save-rowHeadersAsFrozenColumns" [(ngModel)]="saveOptions.rowHeadersAsFrozenColumns"/> <label for="save-rowHeadersAsFrozenColumns">rowHeadersAsFrozenColumns</label> </div> <div class="item" *ngIf="needShow('save', 'columnHeadersAsFrozenRows')" > <input type="checkbox" id="save-columnHeadersAsFrozenRows" [(ngModel)]="saveOptions.columnHeadersAsFrozenRows"/> <label for="save-columnHeadersAsFrozenRows">columnHeadersAsFrozenRows</label> </div> <div class="item" *ngIf="needShow('save', 'includeAutoMergedCells')" > <input type="checkbox" id="save-includeAutoMergedCells" [(ngModel)]="saveOptions.includeAutoMergedCells"/> <label for="save-includeAutoMergedCells">includeAutoMergedCells</label> </div> <div class="item" *ngIf="needShow('save', 'includeCalcModelCache')" > <input type="checkbox" id="save-includeCalcModelCache" [(ngModel)]="saveOptions.includeCalcModelCache"/> <label for="save-includeCalcModelCache">includeCalcModelCache</label> </div> <div class="item" *ngIf="needShow('save', 'includeUnusedNames')" > <input type="checkbox" id="save-includeUnusedNames" [(ngModel)]="saveOptions.includeUnusedNames"/> <label for="save-includeUnusedNames">includeUnusedNames</label> </div> <div class="item" *ngIf="needShow('save', 'includeEmptyRegionCells')" > <input type="checkbox" id="save-includeEmptyRegionCells" [(ngModel)]="saveOptions.includeEmptyRegionCells"/> <label for="save-includeEmptyRegionCells">includeEmptyRegionCells</label> </div> <div class="item" *ngIf="needShow('save', 'encoding')" > <label for="save-encoding">encoding</label> <input type="text" id="save-encoding" [(ngModel)]="saveOptions.encoding"/> </div> <div class="item" *ngIf="needShow('save', 'rowDelimiter')" > <label for="save-rowDelimiter">rowDelimiter</label> <input type="text" id="save-rowDelimiter" [(ngModel)]="saveOptions.rowDelimiter"/> </div> <div class="item" *ngIf="needShow('save', 'columnDelimiter')" > <label for="save-columnDelimiter">columnDelimiter</label> <input type="text" id="save-columnDelimiter" [(ngModel)]="saveOptions.columnDelimiter"/> </div> <div class="item" *ngIf="needShow('save', 'sheetIndex')" > <label for="save-sheetIndex">sheetIndex</label> <input type="number" id="save-sheetIndex" [(ngModel)]="saveOptions.sheetIndex"/> </div> <div class="item" *ngIf="needShow('save', 'row')" > <label for="save-row">row</label> <input type="number" id="save-row" [(ngModel)]="saveOptions.row"/> </div> <div class="item" *ngIf="needShow('save', 'column')" > <label for="save-column">column</label> <input type="number" id="save-column" [(ngModel)]="saveOptions.column"/> </div> <div class="item" *ngIf="needShow('save', 'rowCount')" > <label for="save-rowCount">rowCount</label> <input type="number" id="save-rowCount" [(ngModel)]="saveOptions.rowCount"/> </div> <div class="item" *ngIf="needShow('save', 'columnCount')" > <label for="save-columnCount">columnCount</label> <input type="number" id="save-columnCount" [(ngModel)]="saveOptions.columnCount"/> </div> </div> </div> </div> </div> </div>

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; }

(function(global) { System.config({ transpiler: 'ts', typescriptOptions: { tsconfig: true }, meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', 'zone': 'npm:zone.js/dist/zone.min.js', 'rxjs': 'npm:rxjs/bundles/rxjs.umd.min.js', '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.min.js', '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.min.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.min.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', 'ts': 'npm:plugin-typescript/lib/plugin.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js', '@grapecity-software/spread-sheets': 'npm:@grapecity-software/spread-sheets/index.js', '@grapecity-software/spread-sheets-resources-zh': 'npm:@grapecity-software/spread-sheets-resources-zh/index.js', '@grapecity-software/spread-sheets-io': 'npm:@grapecity-software/spread-sheets-io/index.js', '@grapecity-software/spread-sheets-charts': 'npm:@grapecity-software/spread-sheets-charts/index.js', '@grapecity-software/spread-sheets-shapes': 'npm:@grapecity-software/spread-sheets-shapes/index.js', '@grapecity-software/spread-sheets-slicers': 'npm:@grapecity-software/spread-sheets-slicers/index.js', '@grapecity-software/spread-sheets-pivot-addon': 'npm:@grapecity-software/spread-sheets-pivot-addon/index.js', '@grapecity-software/spread-sheets-tablesheet': 'npm:@grapecity-software/spread-sheets-tablesheet/index.js', '@grapecity-software/spread-sheets-angular': 'npm:@grapecity-software/spread-sheets-angular/bundles/grapecity-software-spread-sheets-angular.umd.js', '@grapecity-software/jsob-test-dependency-package/react-components': 'npm:@grapecity-software/jsob-test-dependency-package/react-components/index.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);