概述
本 Demo 展示了如何从导入的 Excel 文件中读取文档属性，并将其显示在工作表中。Demo 演示了三种类型的文档属性：核心文档属性、应用程序属性和自定义文档属性，用户可以通过界面查看文件的元数据信息。
实现思路
初始化 SpreadJS 工作簿，设置导入和导出按钮的事件监听
用户选择 Excel 文件并点击打开时，使用 spread.import() 导入文件
导入成功后，创建名为 "Product Information" 的新工作表
通过 spread.docProps 读取三种文档属性，并将其填充到工作表的相应单元格中
用户点击保存时，移除 "Product Information" 工作表，导出为 Excel 文件
代码解析
读取文档属性
这段代码展示了如何访问文档属性。spread.docProps 提供了三个属性：
coreDocProps：包含标题、主题、创建者、关键词等基本信息
appDocProps：包含经理、公司、超链接基础等应用程序相关属性
customDocPropsManager：自定义属性管理器，通过 all() 方法获取所有自定义属性的数组
导入 Excel 文件
使用 spread.import() 方法导入用户选择的 Excel 文件，导入成功后调用 initProductInformationSheet 函数创建并填充文档属性信息表。
导出 Excel 文件
导出前先移除 "Product Information" 工作表，确保导出的 Excel 文件不包含文档属性的显示信息，然后使用 spread.export() 导出为 Excel 文件。
运行效果
点击"选择文件"按钮，选择一个 Excel 文件（.xlsx 或 .xlsm）
点击"打开"按钮，Excel 文件将被导入到 SpreadJS 工作簿中
导入成功后，会自动创建一个名为 "Product Information" 的工作表
工作表中会显示导入文件的文档属性，包括标题、主题、创建者、关键词、描述、类别、内容状态、经理、公司和自定义属性
点击"保存"按钮，可以将工作簿导出为新的 Excel 文件
API 参考
docProps 属性
返回 IDocProps 接口对象，包含文档属性信息。
coreDocProps 属性
核心文档属性，包含以下字段：
title：文档标题
subject：文档主题
creator：创建者
keywords：关键词
description：描述
category：类别
contentStatus：内容状态
created：创建时间
lastPrinted：最后打印时间
modified：修改时间
lastModifiedBy：最后修改者
appDocProps 属性
应用程序属性，包含以下字段：
manager：经理
company：公司
hyperlinkBase：超链接基础路径
customDocPropsManager 方法
all()：获取所有自定义属性，返回数组 [{ name: string, value: any }]
add(name, value)：添加自定义属性
get(name)：获取指定名称的自定义属性
remove(name)：移除指定名称的自定义属性
clear()：清除所有自定义属性
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">打开</button>
</div>
<div class="inputContainer export-input-container">
<div class="label">导出到 Excel: </div>
<div class="space"></div>
<button class="settingButton" id="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;
}
