概述
本 Demo 展示了如何在 SpreadJS 中启用 Excel 样式复制粘贴功能。通过设置 allowCopyPasteExcelStyle 选项，用户可以在 Excel 和 SpreadJS 之间复制粘贴样式、合并单元格和图片。Demo 提供了一个带有复杂样式的销售数据分析表格，方便用户测试复制粘贴效果。
实现思路
创建 Workbook 实例并初始化工作表
调用 loadSaleDataAnalysisTable 方法生成示例表格（包含合并单元格、样式、公式）
通过 checkbox 控件的 change 事件动态切换 allowCopyPasteExcelStyle 选项
用户可以在启用/禁用功能之间切换，体验不同效果
代码解析
启用 Excel 样式复制粘贴功能
这段代码通过 checkbox 控制是否启用 Excel 样式复制粘贴。spread.options.allowCopyPasteExcelStyle 默认为 true，当设置为 true 时，SpreadJS 会在剪贴板操作中保留样式信息。
示例表格结构
Demo 创建了一个包含多层表头、合并单元格和计算公式的销售数据分析表。表格使用了多种样式：
背景颜色区分不同区域
边框样式（实线、虚线）
单元格合并展示层级关系
公式自动计算小计和总计
运行效果
表格加载后会显示一个带有复杂样式的销售数据分析表
checkbox 默认勾选，表示 Excel 样式复制粘贴功能已启用
用户可以从 Excel 复制带样式的内容粘贴到 SpreadJS 表格中
用户也可以将 SpreadJS 表格中的内容复制到 Excel，样式会被保留
取消勾选 checkbox 后，复制粘贴将不会保留样式信息
API 参考
allowCopyPasteExcelStyle 选项
类型：boolean
默认值：true
作用：控制是否允许在 SpreadJS 和 Excel 之间复制粘贴样式
支持的样式类型
启用此功能后，以下样式可以在 Excel 和 SpreadJS 之间互通：
背景颜色（backColor）
前景颜色（foreColor）
字体（font）
对齐方式（vAlign、hAlign）
边框（borderLeft、borderRight、borderTop、borderBottom）
剪贴板事件参数
启用 Excel 样式复制粘贴后，剪贴板事件参数会包含更丰富的信息：
ClipboardChanging 和 ClipboardChanged 事件的 copyData 参数包含：
text：剪贴板的文本字符串
html：剪贴板的 HTML 字符串
ClipboardPasting 和 ClipboardPasted 事件的 pasteData 参数包含：
text：剪贴板的文本字符串
html：剪贴板的 HTML 字符串
image：剪贴板的图片源字符串
注意：如果从 Excel 复制图片到 SpreadJS，建议一次只选择一个图片进行复制，以确保粘贴效果最佳。
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
var sheet = spread.getActiveSheet();
sheet.options.allowCellOverflow = true;
sheet.getCell(0, 0).value("复制以下数据，然后粘贴到 Excel 中。");
loadSaleDataAnalysisTable(sheet, 1, 0, true);
spread.resumePaint();
var allowCopyPasteExcelStyle = document.getElementById('allowCopyPasteExcelStyle');
allowCopyPasteExcelStyle.checked=spread.options.allowCopyPasteExcelStyle;
allowCopyPasteExcelStyle.addEventListener('change',function () {
spread.options.allowCopyPasteExcelStyle = allowCopyPasteExcelStyle.checked;
});
}
function loadSaleDataAnalysisTable(sheet, startRow, startCol, haveTitle) {
var spread = sheet.parent;
if (!spread) {
return;
}
spread.suspendPaint();
if (startRow === undefined) {
startRow = 0;
}
if (startCol === undefined) {
startCol = 0;
}
if (sheet.getRowCount(GC.Spread.Sheets.SheetArea.viewport) - startRow < 19 ||
sheet.getColumnCount(GC.Spread.Sheets.SheetArea.viewport) - startCol < 10) {
return;
}
spread.options.referenceStyle = GC.Spread.Sheets.ReferenceStyle.r1c1;
if (haveTitle) {
sheet.addSpan(startRow + 0, startCol + 1, 1, 10);
sheet.setRowHeight(startRow + 0, 40);
sheet.setValue(startRow + 0, startCol + 1, "销售数据分析");
sheet.getCell(startRow + 0, startCol + 1).font("bold 30px arial");
sheet.getCell(startRow + 0, startCol + 1).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
sheet.addSpan(startRow + 1, startCol + 1, 1, 3);
sheet.setValue(startRow + 1, startCol + 1, "店铺");
sheet.addSpan(startRow + 1, startCol + 4, 1, 7);
sheet.setValue(startRow + 1, startCol + 4, "商品");
sheet.addSpan(startRow + 2, startCol + 1, 1, 2);
sheet.setValue(startRow + 2, startCol + 1, "区域");
sheet.addSpan(startRow + 2, startCol + 3, 2, 1);
sheet.setValue(startRow + 2, startCol + 3, "编号");
sheet.addSpan(startRow + 2, startCol + 4, 1, 2);
sheet.setValue(startRow + 2, startCol + 4, "水果");
sheet.addSpan(startRow + 2, startCol + 6, 1, 2);
sheet.setValue(startRow + 2, startCol + 6, "蔬菜");
sheet.addSpan(startRow + 2, startCol + 8, 1, 2);
sheet.setValue(startRow + 2, startCol + 8, "食品");
sheet.addSpan(startRow + 2, startCol + 10, 2, 1);
sheet.setValue(startRow + 2, startCol + 10, "总计");
sheet.setValue(startRow + 3, startCol + 1, "州");
sheet.setValue(startRow + 3, startCol + 2, "城市");
sheet.setValue(startRow + 3, startCol + 4, "葡萄");
sheet.setValue(startRow + 3, startCol + 5, "苹果");
sheet.setValue(startRow + 3, startCol + 6, "土豆");
sheet.setValue(startRow + 3, startCol + 7, "西红柿");
sheet.setValue(startRow + 3, startCol + 8, "三明治");
sheet.setValue(startRow + 3, startCol + 9, "汉堡包");
sheet.addSpan(startRow + 4, startCol + 1, 7, 1);
sheet.addSpan(startRow + 4, startCol + 2, 3, 1);
sheet.addSpan(startRow + 7, startCol + 2, 3, 1);
sheet.addSpan(startRow + 10, startCol + 2, 1, 2);
sheet.setValue(startRow + 10, startCol + 2, "小计:");
sheet.addSpan(startRow + 11, startCol + 1, 7, 1);
sheet.addSpan(startRow + 11, startCol + 2, 3, 1);
sheet.addSpan(startRow + 14, startCol + 2, 3, 1);
sheet.addSpan(startRow + 17, startCol + 2, 1, 2);
sheet.setValue(startRow + 17, startCol + 2, "小计:");
sheet.addSpan(startRow + 18, startCol + 1, 1, 3);
sheet.setValue(startRow + 18, startCol + 1, "总计:");
sheet.setValue(startRow + 4, startCol + 1, "北卡罗来纳州");
sheet.setValue(startRow + 4, startCol + 2, "罗利");
sheet.setValue(startRow + 7, startCol + 2, "夏洛特");
sheet.setValue(startRow + 4, startCol + 3, "001");
sheet.setValue(startRow + 5, startCol + 3, "002");
sheet.setValue(startRow + 6, startCol + 3, "003");
sheet.setValue(startRow + 7, startCol + 3, "004");
sheet.setValue(startRow + 8, startCol + 3, "005");
sheet.setValue(startRow + 9, startCol + 3, "006");
sheet.setValue(startRow + 11, startCol + 1, "宾夕法尼亚州");
sheet.setValue(startRow + 11, startCol + 2, "费城");
sheet.setValue(startRow + 14, startCol + 2, "匹兹堡");
sheet.setValue(startRow + 11, startCol + 3, "007");
sheet.setValue(startRow + 12, startCol + 3, "008");
sheet.setValue(startRow + 13, startCol + 3, "009");
sheet.setValue(startRow + 14, startCol + 3, "010");
sheet.setValue(startRow + 15, startCol + 3, "011");
sheet.setValue(startRow + 16, startCol + 3, "012");
for (var i = 4; i < 10; i++) {
sheet.setFormula(startRow + 10, startCol + i, "=SUM(R[-6]C:R[-1]C");
sheet.setFormula(startRow + 17, startCol + i, "=SUM(R[-6]C:R[-1]C");
sheet.setFormula(startRow + 18, startCol + i, "=R[-8]C + R[-1]C");
}
sheet.setFormula(startRow + 18, startCol + 10, "=R[-8]C + R[-1]C");
for (var i = startRow; i < 14 + startRow; i++) {
sheet.setFormula(4 + i, startCol + 10, "=SUM(RC[-6]:RC[-1])");
}
sheet.getRange(startRow + 1, startCol + 1, 3, 10).backColor("#D9D9FF");
sheet.getRange(startRow + 4, startCol + 1, 15, 3).backColor("#D9FFD9");
sheet.getRange(startRow + 1, startCol + 1, 3, 10).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet.getRange(startRow + 1, startCol + 1, 18, 10).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {all: true});
sheet.getRange(startRow + 4, startCol + 4, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder("Green", GC.Spread.Sheets.LineStyle.dotted), {innerHorizontal: true});
sheet.getRange(startRow + 7, startCol + 4, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder("Green", GC.Spread.Sheets.LineStyle.dotted), {innerHorizontal: true});
sheet.getRange(startRow + 11, startCol + 4, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder("Green", GC.Spread.Sheets.LineStyle.dotted), {innerHorizontal: true});
sheet.getRange(startRow + 14, startCol + 4, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder("Green", GC.Spread.Sheets.LineStyle.dotted), {innerHorizontal: true});
fillSampleData(sheet, new GC.Spread.Sheets.Range(startRow + 4, startCol + 4, 6, 6));
fillSampleData(sheet, new GC.Spread.Sheets.Range(startRow + 11, startCol + 4, 6, 6));
function fillSampleData(sheet, range) {
for (var i = 0; i < range.rowCount; i++) {
for (var j = 0; j < range.colCount; j++) {
sheet.setValue(range.row + i, range.col + j, Math.ceil(Math.random() * 300));
}
}
};
spread.options.referenceStyle = GC.Spread.Sheets.ReferenceStyle.a1;
spread.resumePaint();
}
<!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">
<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$/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 id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<label>
<input type="checkbox" id="allowCopyPasteExcelStyle">允许Excel样式的复制粘贴
</label>
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
