导入导出

GanttSheet支持导入和导出各种不同类型的文件,并且还支持打印和导出为PDF。

必需的依赖项 如果您想要支持IO功能(除了JSON序列化/反序列化),您需要导入并引用以下特定的NPM包: 新的SJS格式:@grapecity-software/spread-sheets-io 打印:@grapecity-software/spread-sheets-print PDF:@grapecity-software/spread-sheets-pdf 导出到Excel 如果您想要将甘特数据导出到Excel,您需要确保序列化选项为includeBindingSource: true。 注意:甘特图列将以图片的形式导出到Excel文件中。
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ var spread; var myTable; var ganttSheet; var FileType = { SJS: 'sjs', Excel: 'xlsx', SSJson: 'ssjson' }; var openOptions = { openMode: GC.Spread.Sheets.OpenMode.normal, fullRecalc: true }; window.onload = function() { spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); initSpread(spread); initSplitView(spread); }; function initSpread(spread) { spread.suspendPaint(); initDataSource(spread); initGanttSheet(spread); spread.resumePaint(); } function initDataSource(spread) { var tableName = "Gantt_Id"; var baseApiUrl = getBaseApiUrl(); var apiUrl = baseApiUrl + "/" + tableName; var dataManager = spread.dataManager(); myTable = dataManager.addTable("myTable", { batch: true, remote: { read: { url: apiUrl } }, schema: { hierarchy: { type: "Parent", column: "parentId" }, columns: { id: { isPrimaryKey: true }, taskNumber: { dataType: "rowOrder" } } } }); } function initGanttSheet(spread) { ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet); var view = myTable.addView("ganttView", [ { value: "taskNumber", caption: "NO.", width: 60 }, { value: "name", caption: "Task Name", width: 200 }, { value: "duration", caption: "Duration", width: 90 }, { value: "predecessors", caption: "Predecessors", width: 120, visible: false } ]); view.fetch().then(function() { ganttSheet.bindGanttView(view); }); initSidePanel(spread, ganttSheet); } function initSidePanel(spread, ganttSheet) { var fileInput = document.getElementById("file-input"); var openFileItem = document.getElementById("open-file"); var fileNameItem = document.getElementById("file-name"); var exportJSONItem = document.getElementById("export-to-json"); var exportSJSItem = document.getElementById("export-to-sjs"); var exportExcelItem = document.getElementById("export-to-excel"); var printItem = document.getElementById("print"); var pdfItem = document.getElementById("pdf"); openFileItem.addEventListener('click', function() { fileInput.click(); }); fileInput.addEventListener('change', function(e) { openFile(e, fileNameItem, fileInput); }); exportJSONItem.addEventListener('click', function () { exportFile(FileType.SSJson); }); exportSJSItem.addEventListener('click', function () { exportFile(FileType.SJS); }); exportExcelItem.addEventListener('click', function () { exportFile(FileType.Excel); }); printItem.addEventListener('click', function() { printSpread(); }); pdfItem.addEventListener('click', function() { savePDF(); }); } 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; } } function openFile(e) { var fileNameItem = document.getElementById("file-name"); var fileInput = document.getElementById("file-input"); fileNameItem.value = 'Loading file...'; var file = fileInput.files[0]; if (!file) { alert("Upload a file first."); return; } var fileType = getFileType(file); var fileName = file.name; if (fileType === FileType.SJS) { // here is excel IO API spread.open(file, function() { fileNameItem.value = fileName; fileInput.value = ''; }, function() {}, openOptions); // process error } else { spread.import(file, function() { fileNameItem.value = fileName; fileInput.value = ''; }, function() {}, openOptions); } } function getExportOptions(fileType) { return { // process error fileType: GC.Spread.Sheets.FileType[fileType], includeBindingSource: true, saveAsView: true }; } function exportFile(fileType) { var fileName = 'export.' + fileType; var options = getExportOptions(fileType); if (fileType === FileType.SJS) { spread.save(function(blob) { saveAs(blob, fileName); }, function() {}, options); // here is excel IO API // process error } else { spread.export(function(blob) { saveAs(blob, fileName); }, function() {}, options); } } function printSpread() { spread.print(); } function savePDF() { spread.savePDF( function (blob) { saveAs(blob, 'download.pdf'); }, function () {} ); } function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/SpreadJSTutorial\//)[0] + 'server/api'; } function initSplitView(spread) { var host = document.getElementById("split-view"); var content = host.getElementsByClassName("split-content")[0]; var panel = host.getElementsByClassName("split-panel")[0]; new SplitView({ host: host, content: content, panel: panel, refreshContent: function() { spread.refresh(); } }); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="zh-cn" /> <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"> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/spread/source/splitView/splitView.css"> <!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill --> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <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-pdf/dist/gc.spread.sheets.pdf.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-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$/zh/purejs/node_modules/@grapecity-software/spread-excelio/dist/gc.spread.excelio.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/splitView/splitView.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/FileSaver.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 id="split-view" class="sample-tutorial"> <div id="ss" class="sample-spreadsheets split-content"></div> <div class="options-container split-panel"> <div class="option-block"> <input id="file-input" type="file" name="files[]" accept=".xlsx, .ssjson, .json, .sjs, .zip, .xlsm" class="hide" /> <div class="option-row input-box"> <label for="file-name">File Name</label> <input type="text" id="file-name" value="" disabled /> </div> <div class="option-row"> <input type="button" id="open-file" class="option-button" value="Open File" /> <div class="option-info">File Type: *.ssjson, *.sjs</div> </div> </div> <div class="option-block"> <div class="option-row"> <input type="button" id="export-to-json" class="option-button" value="Export to JSON" /> </div> <div class="option-row"> <input type="button" id="export-to-sjs" class="option-button" value="Export to SJS" /> </div> <div class="option-row"> <input type="button" id="export-to-excel" class="option-button" value="Export to Excel" /> </div> </div> <div class="option-block"> <div class="option-row"> <input type="button" id="print" class="option-button" value="Print" /> </div> <div class="option-row"> <input type="button" id="pdf" class="option-button" value="PDF" /> </div> </div> </div> </div> </html>
.options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; box-shadow: inset 0px 0 4px 0 rgba(0,0,0,0.4); } .option-block { background: #fff; padding: 8px; margin: 12px 0; border-radius: 4px; border: 1px dashed #82bc00; box-shadow: 0px 0 6px 0 rgba(0,0,0,0.1); } .option-block.toggle { border: 1px dotted #f7a711; } .option-row { font-size: 14px; box-sizing: border-box; padding: 4px 0; } .option-title { font-weight: bold; color: #656565; } .option-info { font-size: 12px; color: #919191; margin-top: 6px; font-weight: normal; } .option-info.valid { color: #82bc00; } .option-info.toggle { color: #f7a711; } .option-button { width: 100%; padding: 0; line-height: 20px; background: #82bc00; color: #fff; transition: 0.3s; cursor: pointer; outline: none; border-radius: 4px; box-sizing: border-box; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); border: none; } .option-button:hover { background: #82bc00; color: #fff; box-shadow: 0 3px 8px 0 rgba(0,0,0,0.4); } .option-checkbox { background: #fff; border: 1px dashed #f7a711; color: #f7a711; padding: 2px 4px; transition: 0.3s; box-sizing: border-box; cursor: pointer; } .option-checkbox.active { color: #fff; background: #f7a711; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); border-radius: 4px; } .selection-box { position: relative; } .selection-box > select { text-align: left; width: 100%; height: 20px; padding: 0; line-height: 20px; background: transparent; border: none; border-bottom: 2px solid #656565; color: #656565; transition: 0.3s; cursor: pointer; outline: none; box-sizing: border-box; } .selection-box > select > option { background: white; } .selection-box > select:focus { border-bottom: 2px solid #82bc00; color: #82bc00; box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3); } .selection-box > label { position: absolute; cursor: pointer; font-size: 12px; color: #fff; background: #656565; padding: 0 4px; right: 0; top: 6px; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); } .input-box { position: relative; } .input-box > input[type=text] { width: 100%; background: transparent; border: none; color: #656565; border-bottom: 2px solid #656565; outline: none; box-sizing: border-box; transition: 0.3s; } .input-box > input[type=text]:focus { color: #82bc00; border-bottom: 2px solid #82bc00; } .input-box > label { cursor: pointer; position: absolute; right: 0; top: 5px; font-size: 12px; color: #fff; background: #656565; padding: 0 4px; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); }