你可以在工作表中设置显示打印线，有了它，用户在打印时可以很容易地知道工作表的数据是否能打印在正确的页面上。
打印时，可打印以下内容。
在列头/行头/表单视图区域的可见行和可见列
单元格的文本
单元格的样式 (包括背景图)
单元格合并信息
单元格溢出文本
图片
水印
以下内容无法被打印。
隐藏的行和列
浮动对象
备注
表单名称标签
滚动条
分组
筛选按钮
校验按钮和高亮红色提示圈
活动状态
选择
冻结线
Spread的背景图
如何打印
可以通过调用 Workbook的print 方法来打印整个表单或打印指定表单。
在每一个表单，你可以通过调用 Worksheet的setRowPageBreak / Worksheet的setColumnPageBreak 方法在指定行和指定列插入分页符。
在每一个表单，你可以通过调用Sheet.printInfo方法来这是打印的详细设定。这里是一些可选项：
呈现：
showGridLine: 是否打印网格线 (默认是打印)。
showBorder: 是否打印控件的外边框线。
showColumnHeader / showRowHeader: 是否打印列头/行头， 参数为PrintVisibilityType枚举值。
inherit: 继承自表单的设置 ((默认) 行头/列头可见)。
hide: 不打印。
show: 在每页中都显示。
showOnce: 显示一次 (在第一页)。
打印一个区域：
rowStart: 设定打印区域的开始行索引。
rowEnd: 设定打印区域的结束行索引。
columnStart: 设定打印区域的开始列索引。
columnEnd: 设定打印区域的结束列索引。
打印范围现在实际上是一个自定义名称 “Print_Area”，它可以在范围内添加或删除行/列时自动更新。您可以在公式中使用它，例如 =IFERROR(ROWS(Print_Area),"none") 来显示要打印的行数。
或者，您可以为自定义名称 “Print_Area” 设置公式来动态设置打印范围，例如 =IF(Sheet1!$A$1,Sheet1!$B$1:$C$5,Sheet1!$D$5 :$F$8)，如果 Sheet1!$A$1 为真值，则打印范围为 Sheet1!$B$1:$C$5，否则为 Sheet1!$D$5:$F$8。
注意：建议使用一种方式设置打印范围，设置自定义名称“Print_Area”或printInfo，不要一起使用。
打印重复次数：
repeatColumnStart: 设定在每页左边打印重复区域的开始列索引。
repeatColumnEnd: 设定每页左边打印重复区域的结束列索引。
repeatRowStart: 设定每页上边打印重复区域的开始行索引。
repeatRowEnd: 设定每页上边打印重复区域的结束行索引。
表头 & 表脚:
你可以使用printInfo中的pageHeaderFooter方法来获取/设置页眉或页脚的打印信息。
有4种类型的页眉/页脚打印信息。 常规, 首页, 奇数页 及 偶数页.
而且可以使用其中的一个或多个。说明如下：
选项名称
优先级
描述
常规
低
适用于所有页面的页眉/页脚。
首页
高
适用于第一页的页眉/页脚。
奇数页
中
适用于所有奇数页的页眉/页脚。
偶数页
中
适用于所有偶数页的页眉/页脚。
支持的格式: &被用作转义字符，与以下关键字一起使用，以打印特殊数据。
P: 当前页数。
N: 总页数。
D: 当前日期。（今天）
T: 当前时间。
G: 图片，用来显示相应区域图片（XXXImage）的占位符。
S: 删除线。
U: 下划线。
B: 粗体。
I: 斜体。
": (双引号)，用来设置字体。
F: Spread的名字。
A: 表单名字。
设置所有页面的页眉/页脚。
使用differentFirstPage来启用第一页的不同页眉/页脚，并设置第一页的页眉/页脚。
使用differentOddAndEvenPages来启用奇数和偶数页的不同页眉/页脚，并设置奇数和偶数页的页眉/页脚。
水印:
用户可以添加水印时，打印在SpreadJS上。
用户可以为一个页面添加多个水印，就像这样:
用户可以为不同的页面添加水印，如仅为0、1、2、3、5、10页添加水印，如下:
用户只需将页面设置为“奇数”或“偶数”，即可为奇数或偶数页面添加水印。
BeforPrint event:
SpreadJS支持在打印前的事件:GC.Spread.Sheets.Events.BeforePrint。
用户可以通过这个事件在打印之前做一些事情，比如:
客户可以取消打印.
给打印内容iframe，让用户可以使用其他方式打印，如flash等…
事件:
args.iframe: 包括所有打印内容的DOM元素。
args.cancel: 可以取消以下打印过程的选项。
代码如下:
function _getElementById(id) {
return document.getElementById(id);
}
function _getElementByClass(className) {
return document.getElementsByClassName(className);
}
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
initSpread(spread);
_getElementById('btnSetPrintInfo').addEventListener("click", setPrintInfo);
_getElementById('btnPrint').addEventListener("click", function () {
spread.print(0);
});
_getElementById('waterMarkAdd').addEventListener("click", addWaterMark);
_getElementById('waterMarkClear').addEventListener("click", function () {
var listDiv = _getElementById('waterMarkList');
listDiv.innerHTML = "";
listDiv.waterMarkList = [];
});
_getElementById('displayPrintLine').addEventListener("click", function () {
var sheet = spread.getActiveSheet();
sheet.isPrintLineVisible(_getElementById('displayPrintLine').checked);
});
_getElementById('selectTypeHeaderFooter').addEventListener("change", function (e) {
var type = parseInt(e.target.value)
var types = _getElementByClass('headfooter');
var diffFirst = _getElementByClass('differentFirstPage').item(0);
var diffOddEven = _getElementByClass('differentOddAndEvenPages').item(0);
if (type === 1) {
diffFirst.className = diffFirst.className.replace(/hidden/g, '');
} else {
diffFirst.className += " hidden";
}
if (type === 2 || type === 3) {
diffOddEven.className = diffOddEven.className.replace(/hidden/g, '');
} else {
diffOddEven.className += " hidden";
}
for (let index = 0; index < types.length; index++) {
const node = types[index];
if (node.className.indexOf('hidden')==-1) {
node.className += " hidden";
}
if (node.children.item(1).className.indexOf('hidden')==-1) {
node.children.item(1).className += " hidden";
}
if (type === index) {
node.className = node.className.replace(/hidden/g, '');
}
}
});
var titles = _getElementByClass('title');
for(var i=0; i<titles.length; i++){
titles[i].addEventListener("click", toggleClass);
}
}
function initSpread(spread) {
var sd = data;
if (sd && sd.sheets) {
if (!spread) {
return;
}
spread.suspendPaint();
spread.fromJSON(sd);
var sheet = spread.sheets[0];
adjustLayoutForPrint(sheet);
sheet.options.gridline.showVerticalGridline = false;
sheet.options.gridline.showHorizontalGridline = false;
initPrintInfo(sheet);
spread.resumePaint();
}
}
function initPrintInfo(sheet) {
var printInfo = sheet.printInfo();
// custom printInfo for default output
printInfo.showBorder(false);
printInfo.showGridLine(false);
printInfo.columnStart(1);
printInfo.columnEnd(6);
printInfo.rowStart(1);
printInfo.repeatRowStart(1);
printInfo.repeatRowEnd(2);
printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
printInfo.pageHeaderFooter({
normal: {
header: {
left: "&G",
center: "Olympic Athletes",
leftImage: "$DEMOROOT$/spread/source/images/olympic.jpg"
},
footer: {
center: "&P/&N"
}
}
});
// sync with UI setting items
_getElementById('rowStart').value = printInfo.rowStart();
_getElementById('rowEnd').value = printInfo.rowEnd();
_getElementById('columnStart').value = printInfo.columnStart();
_getElementById('columnEnd').value = printInfo.columnEnd();
_getElementById('repeatRowStart').value = printInfo.repeatRowStart();
_getElementById('repeatRowEnd').value = printInfo.repeatRowEnd();
_getElementById('repeatColumnStart').value = printInfo.repeatColumnStart();
_getElementById('repeatColumnEnd').value = printInfo.repeatColumnEnd();
_getElementById('showBorder').checked = printInfo.showBorder();
_getElementById('showGridLine').checked = printInfo.showGridLine();
_getElementById('displayPrintLine').checked = sheet.isPrintLineVisible();
_getElementById('showRowHeader').value = printInfo.showRowHeader();
_getElementById('showColumnHeader').value = printInfo.showColumnHeader();
var headerFooter = printInfo.pageHeaderFooter();
var normal = headerFooter.normal;
_getElementById('headerLeft').value = normal.header.left;
_getElementById('headerLeftImage').selected = normal.header.leftImage;
_getElementById('headerCenter').value = normal.header.center;
_getElementById('headerCenterImage').selected = normal.header.centerImage;
_getElementById('headerRight').value = normal.header.right || '';
_getElementById('headerRightImage').selected = normal.header.rightImage;
_getElementById('footerLeft').value = normal.footer.left || '';
_getElementById('footerLeftImage').selected = normal.footer.leftImage;
_getElementById('footerCenter').value = normal.footer.center;
_getElementById('footerCenterImage').selected = normal.footer.centerImage;
_getElementById('footerRight').value = normal.footer.right || '';
_getElementById('footerRightImage').selected = normal.footer.rightImage;
}
function setPrintInfo(){
function setPrintInfoNumberValueItem(printInfo, key, method) {
var value = parseInt(_getElementById(key).value),
method = method || key;
if (!isNaN(value)) {
printInfo[method](value);
}
}
var spread = GC.Spread.Sheets.findControl("ss");
var sheet = spread.getActiveSheet(),
printInfo = sheet.printInfo();
sheet.suspendPaint();
["rowStart", "rowEnd", "columnStart", "columnEnd",
"repeatRowStart", "repeatRowEnd", "repeatColumnStart", "repeatColumnEnd"
].forEach(function (name) {
setPrintInfoNumberValueItem(printInfo, name);
});
printInfo.showBorder(_getElementById('showBorder').checked);
printInfo.showGridLine(_getElementById('showGridLine').checked);
printInfo.showRowHeader(parseInt(_getElementById('showRowHeader').value));
printInfo.showColumnHeader(parseInt(_getElementById('showColumnHeader').value));
printInfo.pageHeaderFooter({
normal: {
header: {
left: _getElementById('headerLeft').value,
leftImage: _getElementById('headerLeftImage').value,
center: _getElementById('headerCenter').value,
centerImage: _getElementById('headerCenterImage').value,
right: _getElementById('headerRight').value,
rightImage: _getElementById('headerRightImage').value,
},
footer: {
left: _getElementById('footerLeft').value,
leftImage: _getElementById('footerLeftImage').value,
center: _getElementById('footerCenter').value,
centerImage: _getElementById('footerCenterImage').value,
right: _getElementById('footerRight').value,
rightImage: _getElementById('footerRightImage').value,
}
},
first: {
header: {
left: _getElementById('headerLeftOfFirstPage').value,
leftImage: _getElementById('headerLeftImageOfFirstPage').value,
center: _getElementById('headerCenterOfFirstPage').value,
centerImage: _getElementById('headerCenterImageOfFirstPage').value,
right: _getElementById('headerRightOfFirstPage').value,
rightImage: _getElementById('headerRightImageOfFirstPage').value,
},
footer: {
left: _getElementById('footerLeftOfFirstPage').value,
leftImage: _getElementById('footerLeftImageOfFirstPage').value,
center: _getElementById('footerCenterOfFirstPage').value,
centerImage: _getElementById('footerCenterImageOfFirstPage').value,
right: _getElementById('footerRightOfFirstPage').value,
rightImage: _getElementById('footerRightImageOfFirstPage').value,
}
},
odd: {
header: {
left: _getElementById('headerLeftOfOddPages').value,
leftImage: _getElementById('headerLeftImageOfOddPages').value,
center: _getElementById('headerCenterOfOddPages').value,
centerImage: _getElementById('headerCenterImageOfOddPages').value,
right: _getElementById('headerRightOfOddPages').value,
rightImage: _getElementById('headerRightImageOfOddPages').value,
},
footer: {
left: _getElementById('footerLeftOfOddPages').value,
leftImage: _getElementById('footerLeftImageOfOddPages').value,
center: _getElementById('footerCenterOfOddPages').value,
centerImage: _getElementById('footerCenterImageOfOddPages').value,
right: _getElementById('footerRightOfOddPages').value,
rightImage: _getElementById('footerRightImageOfOddPages').value,
}
},
even: {
header: {
left: _getElementById('headerLeftOfEvenPages').value,
leftImage: _getElementById('headerLeftImageOfEvenPages').value,
center: _getElementById('headerCenterOfEvenPages').value,
centerImage: _getElementById('headerCenterImageOfEvenPages').value,
right: _getElementById('headerRightOfEvenPages').value,
rightImage: _getElementById('headerRightImageOfEvenPages').value,
},
footer: {
left: _getElementById('footerLeftOfEvenPages').value,
leftImage: _getElementById('footerLeftImageOfEvenPages').value,
center: _getElementById('footerCenterOfEvenPages').value,
centerImage: _getElementById('footerCenterImageOfEvenPages').value,
right: _getElementById('footerRightOfEvenPages').value,
rightImage: _getElementById('footerRightImageOfEvenPages').value,
}
}
});
printInfo.differentFirstPage(_getElementById('differentFirstPage').checked);
printInfo.differentOddAndEvenPages(_getElementById('differentOddAndEvenPages').checked);
printInfo.watermark(_getElementById('waterMarkList').waterMarkList);
sheet.resumePaint();
}
function addWaterMark() {
var watermark = {};
watermark.x = _getElementById('waterMarkX').value;
watermark.y = _getElementById('waterMarkY').value;
watermark.width = _getElementById('waterMarkWidth').value;
watermark.height = _getElementById('waterMarkHeight').value;
watermark.imageSrc = _getElementById('waterMarkImage').value;
watermark.page = _getElementById('waterMarkPage').value;
var node=document.createElement("option");
node.innerText = JSON.stringify(Object.values(watermark));
var listDiv = _getElementById('waterMarkList');
listDiv.appendChild(node);
if (!listDiv.waterMarkList) {
listDiv.waterMarkList = [];
}
listDiv.waterMarkList.push(watermark);
}
function toggleClass() {
var node = this.nextElementSibling;
var reg = new RegExp('(\\s|^)hidden(\\s|$)');
while (node && node.className.indexOf("row title") === -1 && node.className.indexOf("btn-set") === -1) {
if (node.className.match(reg)) {
node.className = node.className.replace(reg, '');
} else {
node.className += " hidden";
}
node = node.nextElementSibling;
}
}
function adjustLayoutForPrint(sheet) {
sheet.addColumns(0, 2);
sheet.setColumnWidth(0, 30);
sheet.setColumnWidth(1, 30);
for (var r = 5; r <= 200; r += 5) {
sheet.getCell(r, 1).text(r + "").font("normal 9px Arial");
}
sheet.addRows(0, 2);
sheet.setRowHeight(0, 10);
sheet.setRowHeight(1, 10);
}
<!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="$DEMOROOT$/spread/source/data/customPrint.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="container">
<div class="row">
<span>更改这些选项并向下滚动，点击“设置打印信息”按钮将这些选项设置到 Spread 组件的打印信息中。点击“打印”按钮查看这些设置如何影响工作簿的打印效果。</span>
<hr style="border: 1px solid white;border-bottom-color: lightgray;" />
<div class="group">
<label>
<input type="checkbox" id="displayPrintLine">
打印线可见
</label>
</div>
</div>
<div class="row title">
<span>打印区域</span>
</div>
<div class="row hidden">
<div class="group">
<label>打印区域开始行:</label>
<input id="rowStart">
</div>
<div class="group">
<label>打印区域结束行:</label>
<input id="rowEnd">
</div>
<div class="group">
<label>打印区域开始列:</label>
<input id="columnStart">
</div>
<div class="group">
<label>打印区域结束列:</label>
<input id="columnEnd">
</div>
</div>
<div class="row title">
<span>重复打印区域</span>
</div>
<div class="row hidden">
<div class="group">
<label>重复打印区域开始行:</label>
<input id="repeatRowStart">
</div>
<div class="group">
<label>重复打印区域结束行:</label>
<input id="repeatRowEnd">
</div>
<div class="group">
<label>重复打印区域开始列:</label>
<input id="repeatColumnStart">
</div>
<div class="group">
<label>重复打印区域结束列:</label>
<input id="repeatColumnEnd">
</div>
</div>
<div class="row title">
<span>打印选项</span>
</div>
<div class="row hidden">
<div class="group">
<label>
<input type="checkbox" id="showBorder">
打印边框
</label>
</div>
<div class="group">
<label>
<input type="checkbox" id="showGridLine">
打印网格线
</label>
</div>
<div class="group">
<label>打印行标题:</label>
<select id="showRowHeader">
<option value="0">继承</option>
<option value="1">隐藏</option>
<option value="2">显示</option>
<option value="3">仅显示一次</option>
</select>
</div>
<div class="group">
<label>打印列标题:</label>
<select id="showColumnHeader">
<option value="0">继承</option>
<option value="1">隐藏</option>
<option value="2">显示</option>
<option value="3">仅显示一次</option>
</select>
</div>
</div>
<div class="row title">
<span>页眉页脚</span>
</div>
<div class="row hidden">
<div class="group">
<label>选择页眉页脚类型:</label>
<select id="selectTypeHeaderFooter">
<option value="0">普通</option>
<option value="1">第一页</option>
<option value="2">奇数页</option>
<option value="3">偶数页</option>
</select>
</div>
<div class="group differentFirstPage hidden">
<label>
<input type="checkbox" id="differentFirstPage">
启用不同第一页
</label>
</div>
<div class="group differentOddAndEvenPages hidden">
<label>
<input type="checkbox" id="differentOddAndEvenPages">
启用不同奇数页和偶数页
</label>
</div>
<div class="group headfooter">
<div class="row title">
<span>页眉</span>
</div>
<div class="row hidden">
<div class="group">
<label>页眉左:</label>
<input id="headerLeft">
</div>
<div class="group">
<label>页眉左图片:</label>
<select id="headerLeftImage">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg" selected>Olympic
</option>
</select>
</div>
<div class="group">
<label>页眉中:</label>
<input id="headerCenter">
</div>
<div class="group">
<label>页眉中图片:</label>
<select id="headerCenterImage">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>页眉右:</label>
<input type="text" id="headerRight">
</div>
<div class="group">
<label>页眉右图片:</label>
<select id="headerRightImage">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row title">
<span>页脚</span>
</div>
<div class="row hidden">
<div class="group">
<label>页脚左:</label>
<input id="footerLeft">
</div>
<div class="group">
<label>页脚左图片:</label>
<select id="footerLeftImage">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>页脚中:</label>
<input id="footerCenter">
</div>
<div class="group">
<label>页脚中图片:</label>
<select id="footerCenterImage">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>页脚右:</label>
<input type="text" id="footerRight">
</div>
<div class="group">
<label>页脚右图片:</label>
<select id="footerRightImage">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
</div>
<div class="group headfooter hidden">
<div class="row title">
<span>页眉</span>
</div>
<div class="row hidden">
<div class="group">
<label>页眉左:</label>
<input id="headerLeftOfFirstPage">
</div>
<div class="group">
<label>页眉左图片:</label>
<select id="headerLeftImageOfFirstPage">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>页眉中:</label>
<input id="headerCenterOfFirstPage">
</div>
<div class="group">
<label>页眉中图片:</label>
<select id="headerCenterImageOfFirstPage">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>页眉右:</label>
<input type="text" id="headerRightOfFirstPage">
</div>
<div class="group">
<label>页眉右图片:</label>
<select id="headerRightImageOfFirstPage">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row title">
<span>页脚</span>
</div>
<div class="row hidden">
<div class="group">
<label>页脚左:</label>
<input id="footerLeftOfFirstPage">
</div>
<div class="group">
<label>页脚左图片:</label>
<select id="footerLeftImageOfFirstPage">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>页脚中:</label>
<input id="footerCenterOfFirstPage">
</div>
<div class="group">
<label>页脚中图片:</label>
<select id="footerCenterImageOfFirstPage">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>页脚右:</label>
<input type="text" id="footerRightOfFirstPage">
</div>
<div class="group">
<label>页脚右图片:</label>
<select id="footerRightImageOfFirstPage">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
</div>
<div class="group headfooter hidden">
<div class="row title">
<span>页眉</span>
</div>
<div class="row hidden">
<div class="group">
<label>页眉左:</label>
<input id="headerLeftOfOddPages">
</div>
<div class="group">
<label>页眉左图片:</label>
<select id="headerLeftImageOfOddPages">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>页眉中:</label>
<input id="headerCenterOfOddPages">
</div>
<div class="group">
<label>页眉中图片:</label>
<select id="headerCenterImageOfOddPages">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>页眉右:</label>
<input type="text" id="headerRightOfOddPages">
</div>
<div class="group">
<label>页眉右图片:</label>
<select id="headerRightImageOfOddPages">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row title">
<span>页脚</span>
</div>
<div class="row hidden">
<div class="group">
<label>页脚左:</label>
<input id="footerLeftOfOddPages">
</div>
<div class="group">
<label>页脚左图片:</label>
<select id="footerLeftImageOfOddPages">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>页脚中:</label>
<input id="footerCenterOfOddPages">
</div>
<div class="group">
<label>页脚中图片:</label>
<select id="footerCenterImageOfOddPages">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>页脚右:</label>
<input type="text" id="footerRightOfOddPages">
</div>
<div class="group">
<label>页脚右图片:</label>
<select id="footerRightImageOfOddPages">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
</div>
<div class="group headfooter hidden">
<div class="row title">
<span>页眉</span>
</div>
<div class="row hidden">
<div class="group">
<label>页眉左:</label>
<input id="headerLeftOfEvenPages">
</div>
<div class="group">
<label>页眉左图片:</label>
<select id="headerLeftImageOfEvenPages">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>页眉中:</label>
<input id="headerCenterOfEvenPages">
</div>
<div class="group">
<label>页眉中图片:</label>
<select id="headerCenterImageOfEvenPages">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>页眉右:</label>
<input type="text" id="headerRightOfEvenPages">
</div>
<div class="group">
<label>页眉右图片:</label>
<select id="headerRightImageOfEvenPages">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row title">
<span>页脚</span>
</div>
<div class="row hidden">
<div class="group">
<label>页脚左:</label>
<input id="footerLeftOfEvenPages">
</div>
<div class="group">
<label>页脚左图片:</label>
<select id="footerLeftImageOfEvenPages">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>页脚中:</label>
<input id="footerCenterOfEvenPages">
</div>
<div class="group">
<label>页脚中图片:</label>
<select id="footerCenterImageOfEvenPages">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>页脚右:</label>
<input type="text" id="footerRightOfEvenPages">
</div>
<div class="group">
<label>页脚右图片:</label>
<select id="footerRightImageOfEvenPages">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
</div>
</div>
<div class="row title">
<span>水印</span>
</div>
<div class="row hidden">
<div class="group">
<label>X:</label>
<input type="number" id="waterMarkX">
</div>
<div class="group">
<label>Y:</label>
<input type="number" id="waterMarkY">
</div>
<div class="group">
<label>宽度:</label>
<input type="number" id="waterMarkWidth">
</div>
<div class="group">
<label>高度:</label>
<input type="number" id="waterMarkHeight">
</div>
<div class="group">
<label>水印图片:</label>
<select id="waterMarkImage">
<option value=""></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
<div class="group">
<label>水印页面:</label>
<input type="text" id="waterMarkPage" list="list">
<datalist id="list">
<option value="all"></option>
<option value="odd"></option>
<option value="even"></option>
</datalist>
</div>
<div class="group">
<button type="button" id="waterMarkAdd" class="waterMark-btn">
添加
</button>
<button type="button" id="waterMarkClear" class="waterMark-btn">
清除
</button>
</div>
<div class="group">
<label>水印列表:</label>
<select id="waterMarkList" class="custom-list-pane" size="4"></select>
</div>
</div>
<div>
<input type="button" id="btnSetPrintInfo" value="设置打印信息">
</div>
<hr style="border: 1px solid white;border-bottom-color: lightgray;" />
<div>
<input type="button" style="margin-bottom: 6px" value="打印" id="btnPrint">
</div>
</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-y: scroll;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.container {
width: 100%;
height: calc(100% - 40px);
box-sizing: border-box;
}
.row {
border: #e7e7e7 1px solid;
padding: 3px 7px;
}
.hidden {
display: none;
}
.title {
margin-top: 10px;
font-weight: bold;
cursor: pointer;
color: #3c79ff;
background: #f7a7115e;
padding-left: 10px;
}
.group {
padding-bottom: 8px;
}
.waterMark-btn {
width:30%;
}
label {
display: inline-block;
min-width: 130px;
}
input,
select {
margin-top: 6px;
padding: 4px 6px;
width: 100%;
display: block;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
display: inline-block;
}
hr {
border: 1px solid white;
border-bottom-color: lightgray;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
