概述
本 Demo 展示了 SpreadJS 的基本打印功能。通过创建一个销售数据报表，演示如何引入打印插件并调用 print 方法打印工作表内容。
实现思路
在 HTML 中引入打印插件脚本文件（gc.spread.sheets.print.min.js）
创建 Workbook 实例，初始化工作表
使用 suspendPaint 暂停渲染，批量设置数据和样式
创建销售数据表格，包含月份、数量、价格、总计四列
设置表格样式，包括合并单元格、列宽、对齐方式、数字格式、颜色和边框
添加饼图迷你图展示数据分布
使用 resumePaint 恢复渲染
为打印按钮绑定点击事件，调用 spread.print() 方法打印
代码解析
引入打印插件
打印功能作为 SpreadJS 的插件模块，需要在页面中单独引入。插件文件必须放在主脚本（gc.spread.sheets.all.min.js）之后。
初始化工作簿
创建 Workbook 实例，挂载到页面的 DOM 元素上。
批量设置数据和样式
使用 suspendPaint 和 resumePaint 方法可以避免频繁重绘，提升性能。在批量修改工作表时，建议暂停绘制，完成所有修改后再恢复。
设置表格数据和公式
使用 setValue 设置单元格文本和数值，使用 setFormula 设置公式计算总计。
设置表格样式
通过链式调用设置单元格样式，包括列宽、对齐、格式化、颜色和边框。
添加饼图迷你图
使用 PIESPARKLINE 函数在单元格中创建饼图迷你图。函数第一个参数是数据范围，后续参数是各扇形的颜色。
调用打印方法
调用 spread.print() 方法打印所有工作表。也可以传入 sheetIndex 参数打印指定工作表，例如 spread.print(0) 只打印第一个工作表。
运行效果
页面加载后显示一个销售数据报表，包含月份、数量、价格、总计四列数据
右侧显示一个饼图迷你图，直观展示前五个月的销售占比
点击「打印」按钮触发浏览器打印对话框，可以打印工作表内容
打印输出包含表格数据、样式、合并单元格、迷你图等元素
API 参考
print 方法
sheetIndex（可选）：指定要打印的工作表索引，不传参则打印所有可见工作表
suspendPaint 和 resumePaint 方法
用于暂停和恢复工作表渲染，在批量修改时可以显著提升性能。
PIESPARKLINE 函数
range：数据范围，用于计算各扇形的百分比
color1, color2, ...：各扇形的颜色值
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
document.getElementById('btnPrint').onclick = function () {
// used to adjust print range, should set with printInfo (refer custom print for detail)
spread.sheets[0].setText(31, 8, " ");
spread.print();
};
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.options.allowCellOverflow = true;
sheet.name("示例");
sheet.addSpan(1, 1, 1, 1);
sheet.setValue(1, 1, "月份");
sheet.setValue(2, 1, "一月");
sheet.setValue(3, 1, "二月");
sheet.setValue(4, 1, "三月");
sheet.setValue(5, 1, "四月");
sheet.setValue(6, 1, "五月");
sheet.setValue(7, 1, "六月");
sheet.setValue(8, 1, "七月");
sheet.setValue(9, 1, "八月");
sheet.setValue(10, 1, "九月");
sheet.setValue(11, 1, "十月");
sheet.setValue(12, 1, "十一月");
sheet.setValue(13, 1, "十二月");
sheet.addSpan(1, 2, 1, 1);
sheet.setValue(1, 2, "数量");
sheet.setValue(2, 2, 60);
sheet.setValue(3, 2, 100);
sheet.setValue(4, 2, 110);
sheet.setValue(5, 2, 90);
sheet.setValue(6, 2, 112);
sheet.setValue(7, 2, 137);
sheet.setValue(8, 2, 80);
sheet.setValue(9, 2, 88);
sheet.setValue(10, 2, 118);
sheet.setValue(11, 2, 122);
sheet.setValue(12, 2, 130);
sheet.setValue(13, 2, 135);
sheet.addSpan(1, 3, 1, 1);
sheet.setValue(1, 3, "价格");
sheet.setValue(2, 3, 30.0);
sheet.setValue(3, 3, 45.0);
sheet.setValue(4, 3, 10.0);
sheet.setValue(5, 3, 99.9);
sheet.setValue(6, 3, 89.0);
sheet.setValue(7, 3, 150.0);
sheet.setValue(8, 3, 35.0);
sheet.setValue(9, 3, 59.9);
sheet.setValue(10, 3, 47.9);
sheet.setValue(11, 3, 55.0);
sheet.setValue(12, 3, 32.0);
sheet.setValue(13, 3, 20.0);
sheet.addSpan(1, 4, 1, 1);
sheet.setValue(1, 4, "总计");
sheet.setFormula(2, 4, "=C3*D3");
sheet.setFormula(3, 4, "=C4*D4");
sheet.setFormula(4, 4, "=C5*D5");
sheet.setFormula(5, 4, "=C6*D6");
sheet.setFormula(6, 4, "=C7*D7");
sheet.setFormula(7, 4, "=C8*D8");
sheet.setFormula(8, 4, "=C9*D9");
sheet.setFormula(9, 4, "=C10*D10");
sheet.setFormula(10, 4, "=C11*D11");
sheet.setFormula(11, 4, "=C12*D12");
sheet.setFormula(12, 4, "=C13*D13");
sheet.setFormula(13, 4, "=C14*D14");
// set column width
sheet.setColumnWidth(0, 50);
sheet.setColumnWidth(1, 100);
sheet.setColumnWidth(2, 60);
sheet.setColumnWidth(3, 60);
sheet.setColumnWidth(4, 90);
sheet.setColumnWidth(5, 50);
//set alignment
sheet.getRange(1, 1, 1, 4).hAlign(GC.Spread.Sheets.HorizontalAlign.center)
//set formatter
sheet.getRange(2, 3, 12, 1).formatter("[$¥-zh-CN]#,##0.00");
sheet.getRange(2, 4, 12, 1).formatter("[$¥-zh-CN]#,##0.00");
//set color
sheet.getRange(1, 1, 1, 4).backColor("#69a569").foreColor("white");
//set lineBorder
sheet.getRange(2, 1, 12, 4).setBorder(new GC.Spread.Sheets.LineBorder("#A8A9AD", GC.Spread.Sheets.LineStyle.dotted), { all: true });
addFigures(sheet);
sheet.resumePaint();
}
function addFigures(sheet) {
sheet.getRange(20, -1, 1, -1).visible(false);
sheet.addSpan(4, 6, 6, 3);
sheet.setFormula(4, 6, '=PIESPARKLINE(E3:E7, "#e6f0e6","#c9dec9","#a3c8a3","#73ab73","#d1ffd1")');
sheet.addSpan(10, 6, 1, 3);
sheet.getCell(10, 6).text("图 1").hAlign(1);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<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-print/dist/gc.spread.sheets.print.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">
<input type="button" value="打印" id="btnPrint">
</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;
}
input {
padding: 8px 14px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
