文档属性

SpreadJS支持设置文件的一些相关属性,包括文档属性、应用程序属性和自定义属性。

要使用文档属性,请按照以下示例操作: 您可以直接修改文档的属性和应用程序属性。支持的属性如下: 您可以使用customDocPropsManager来操作文档的自定义属性。例如:
import { sheetJSON } from './utils.js'; var spreadNS = GC.Spread.Sheets; window.onload = function () { const spread = new spreadNS.Workbook(document.getElementById("ss"), { sheetCount: 1 }); document.getElementById('open').onclick = function () { const file = document.querySelector('#selectedFile').files[0]; if (!file) { return; } const fileType = getFileType(file); if (fileType === 'xlsx') { spread.import(file, () => { initProductInformationSheet(spread); }); } }; document.getElementById('save').onclick = function () { const sheetIndex = spread.getSheetIndex('Product Information'); if (typeof sheetIndex === 'number' && sheetIndex >= 0) { spread.removeSheet(sheetIndex); } const fileName = 'export.xlsx'; const fileType = GC.Spread.Sheets.FileType.excel; spread.export(function(blob) { saveAs(blob, fileName); }, function() {}, { fileType }); }; }; function initProductInformationSheet(spread) { const docProps = spread.docProps; spread.suspendPaint(); if (docProps) { const newSheet = new GC.Spread.Sheets.Worksheet('Product Information'); newSheet.fromJSON(sheetJSON); spread.addSheet(0, newSheet); spread.setActiveSheetIndex(0); const sheet = spread.getActiveSheet(); // set document properties sheet.setValue(1, 1, docProps.coreDocProps && docProps.coreDocProps.title); sheet.setValue(2, 1, docProps.coreDocProps && docProps.coreDocProps.subject); sheet.setValue(3, 1, docProps.coreDocProps && docProps.coreDocProps.creator); sheet.setValue(4, 1, docProps.coreDocProps && docProps.coreDocProps.keywords); sheet.setValue(5, 1, docProps.coreDocProps && docProps.coreDocProps.description); sheet.setValue(6, 1, docProps.coreDocProps && docProps.coreDocProps.category); sheet.setValue(7, 1, docProps.coreDocProps && docProps.coreDocProps.contentStatus); sheet.setValue(1, 3, docProps.appDocProps && docProps.appDocProps.manager); sheet.setValue(2, 3, docProps.appDocProps && docProps.appDocProps.company); sheet.setValue(3, 3, docProps.appDocProps && docProps.appDocProps.hyperlinkBase); const customDocPropsManager = docProps.customDocPropsManager; if (customDocPropsManager && customDocPropsManager.all()) { customDocPropsManager.all().forEach((prop, index) => { sheet.setValue(index + 1, 4, prop.name); sheet.setValue(index + 1, 5, prop.value); }); } } spread.resumePaint(); }; function getFileType (file) { if (!file) { return; } var fileName = file.name; var extensionName = fileName.substring(fileName.lastIndexOf(".") + 1); if (extensionName === 'xlsx' || extensionName === 'xlsm') { return 'xlsx'; } }
<!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" /> <meta name="spreadjs culture" content="zh-cn" /> <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-resources-zh/dist/gc.spread.sheets.resources.zh.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$/spread/source/js/FileSaver.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script type="module" 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> <div class="options-container"> <div class="option-row"> <div class="inputContainer"> <input id="selectedFile" type="file" name="files[]" accept=".xlsx, .xlsm" /> <button class="settingButton" id="open">Open</button> </div> <div class="inputContainer export-input-container"> <div class="label">Export to Excel: </div> <div class="space"></div> <button class="settingButton" id="save">Save</button> </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: 100%; overflow: hidden; } .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; } .export-input-container { display: flex; justify-content: space-around; align-items: center; } .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; } .space { width: 66px; height: 31px; display: inline-block; } .open-options .item { margin: 5px 0px; display: flex; } .save-options .item { margin: 5px 0px; display: flex; } .inputContainer .label { margin-left: 3px; display: inline-block; } 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; }