你可以在工作表中设置显示打印线，有了它，用户在打印时可以很容易地知道工作表的数据是否能打印在正确的页面上。
打印时，可打印以下内容。
在列头/行头/表单视图区域的可见行和可见列
单元格的文本
单元格的样式 (包括背景图)
单元格合并信息
单元格溢出文本
图片
水印
以下内容无法被打印。
隐藏的行和列
浮动对象
备注
表单名称标签
滚动条
分组
筛选按钮
校验按钮和高亮红色提示圈
活动状态
选择
冻结线
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>Change these options and scroll down to click the "Set PrintInfo" button to set these options
in the PrintInfo for the Spread component. Click the "Print" button to see how these settings
affect how the workbook is printed.</span>
<hr style="border: 1px solid white;border-bottom-color: lightgray;" />
<div class="group">
<label>
<input type="checkbox" id="displayPrintLine">
PrintLineVisible
</label>
</div>
</div>
<div class="row title">
<span>Print Region</span>
</div>
<div class="row hidden">
<div class="group">
<label>RowStart:</label>
<input id="rowStart">
</div>
<div class="group">
<label>RowEnd:</label>
<input id="rowEnd">
</div>
<div class="group">
<label>ColumnStart:</label>
<input id="columnStart">
</div>
<div class="group">
<label>ColumnEnd:</label>
<input id="columnEnd">
</div>
</div>
<div class="row title">
<span>Repeat</span>
</div>
<div class="row hidden">
<div class="group">
<label>RepeatRowStart:</label>
<input id="repeatRowStart">
</div>
<div class="group">
<label>RepeatRowEnd:</label>
<input id="repeatRowEnd">
</div>
<div class="group">
<label>RepeatColumnStart:</label>
<input id="repeatColumnStart">
</div>
<div class="group">
<label>RepeatColumnEnd:</label>
<input id="repeatColumnEnd">
</div>
</div>
<div class="row title">
<span>Print Options</span>
</div>
<div class="row hidden">
<div class="group">
<label>
<input type="checkbox" id="showBorder">
ShowBorder
</label>
</div>
<div class="group">
<label>
<input type="checkbox" id="showGridLine">
ShowGridLine
</label>
</div>
<div class="group">
<label>ShowRowHeader:</label>
<select id="showRowHeader">
<option value="0">Inherit</option>
<option value="1">Hide</option>
<option value="2">Show</option>
<option value="3">ShowOnce</option>
</select>
</div>
<div class="group">
<label>ShowColumnHeader:</label>
<select id="showColumnHeader">
<option value="0">Inherit</option>
<option value="1">Hide</option>
<option value="2">Show</option>
<option value="3">ShowOnce</option>
</select>
</div>
</div>
<div class="row title">
<span>Header/Footer</span>
</div>
<div class="row hidden">
<div class="group">
<label>Select A Type Of Header/Footer:</label>
<select id="selectTypeHeaderFooter">
<option value="0">Normal</option>
<option value="1">First</option>
<option value="2">Odd</option>
<option value="3">Even</option>
</select>
</div>
<div class="group differentFirstPage hidden">
<label>
<input type="checkbox" id="differentFirstPage">
Enable Different First Page
</label>
</div>
<div class="group differentOddAndEvenPages hidden">
<label>
<input type="checkbox" id="differentOddAndEvenPages">
Enable Different Odd And Even Pages
</label>
</div>
<div class="group headfooter">
<div class="row title">
<span>Header</span>
</div>
<div class="row hidden">
<div class="group">
<label>HeaderLeft:</label>
<input id="headerLeft">
</div>
<div class="group">
<label>HeaderLeftImage:</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>HeaderCenter:</label>
<input id="headerCenter">
</div>
<div class="group">
<label>HeaderCenterImage:</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>HeaderRight:</label>
<input type="text" id="headerRight">
</div>
<div class="group">
<label>HeaderRightImage:</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>Footer</span>
</div>
<div class="row hidden">
<div class="group">
<label>FooterLeft:</label>
<input id="footerLeft">
</div>
<div class="group">
<label>FooterLeftImage:</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>FooterCenter:</label>
<input id="footerCenter">
</div>
<div class="group">
<label>FooterCenterImage:</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>FooterRight:</label>
<input type="text" id="footerRight">
</div>
<div class="group">
<label>FooterRightImage:</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>Header</span>
</div>
<div class="row hidden">
<div class="group">
<label>Header Left Of First Page:</label>
<input id="headerLeftOfFirstPage">
</div>
<div class="group">
<label>Header Left Image Of First Page:</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>Header Center Of First Page:</label>
<input id="headerCenterOfFirstPage">
</div>
<div class="group">
<label>Header Center Image Of First Page:</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>Header Right Of First Page:</label>
<input type="text" id="headerRightOfFirstPage">
</div>
<div class="group">
<label>Header Right Image Of First Page:</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>Footer</span>
</div>
<div class="row hidden">
<div class="group">
<label>Footer Left Of First Page:</label>
<input id="footerLeftOfFirstPage">
</div>
<div class="group">
<label>Footer Left Image Of First Page:</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>Footer Center Of First Page:</label>
<input id="footerCenterOfFirstPage">
</div>
<div class="group">
<label>Footer Center Image Of First Page:</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>Footer Right Of First Page:</label>
<input type="text" id="footerRightOfFirstPage">
</div>
<div class="group">
<label>Footer Right Image Of First Page:</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>Header</span>
</div>
<div class="row hidden">
<div class="group">
<label>Header Left Of Odd Pages:</label>
<input id="headerLeftOfOddPages">
</div>
<div class="group">
<label>Header Left Image Of Odd Pages:</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>Header Center Of Odd Pages:</label>
<input id="headerCenterOfOddPages">
</div>
<div class="group">
<label>Header Center Image Of Odd Pages:</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>Header Right Of Odd Pages:</label>
<input type="text" id="headerRightOfOddPages">
</div>
<div class="group">
<label>Header Right Image Of Odd Pages:</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>Footer</span>
</div>
<div class="row hidden">
<div class="group">
<label>Footer Left Of Odd Page:</label>
<input id="footerLeftOfOddPages">
</div>
<div class="group">
<label>Footer Left Image Of Odd Page:</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>Footer Center Of Odd Page:</label>
<input id="footerCenterOfOddPages">
</div>
<div class="group">
<label>Footer Center Image Of Odd Page:</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>Footer Right Of Odd Page:</label>
<input type="text" id="footerRightOfOddPages">
</div>
<div class="group">
<label>Footer Right Image Of Odd Page:</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>Header</span>
</div>
<div class="row hidden">
<div class="group">
<label>Header Left Of Even Pages:</label>
<input id="headerLeftOfEvenPages">
</div>
<div class="group">
<label>Header Left Image Of Even Pages:</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>Header Center Of Even Pages:</label>
<input id="headerCenterOfEvenPages">
</div>
<div class="group">
<label>Header Center Image Of Even Pages:</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>Header Right Of Even Pages:</label>
<input type="text" id="headerRightOfEvenPages">
</div>
<div class="group">
<label>Header Right Image Of Even Pages:</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>Footer</span>
</div>
<div class="row hidden">
<div class="group">
<label>Footer Left Of Even Page:</label>
<input id="footerLeftOfEvenPages">
</div>
<div class="group">
<label>Footer Left Image Of Even Page:</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>Footer Center Of Even Page:</label>
<input id="footerCenterOfEvenPages">
</div>
<div class="group">
<label>Footer Center Image Of Even Page:</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>Footer Right Of Even Page:</label>
<input type="text" id="footerRightOfEvenPages">
</div>
<div class="group">
<label>Footer Right Image Of Even Page:</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>Water Mark</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>Width:</label>
<input type="number" id="waterMarkWidth">
</div>
<div class="group">
<label>Height:</label>
<input type="number" id="waterMarkHeight">
</div>
<div class="group">
<label>WaterMarkImage:</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>Page:</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">
Add
</button>
<button type="button" id="waterMarkClear" class="waterMark-btn">
Clear
</button>
</div>
<div class="group">
<label>WaterMarkList:</label>
<select id="waterMarkList" class="custom-list-pane" size="4"></select>
</div>
</div>
<div>
<input type="button" id="btnSetPrintInfo" value="Set PrintInfo">
</div>
<hr style="border: 1px solid white;border-bottom-color: lightgray;" />
<div>
<input type="button" style="margin-bottom: 6px" value="Print" 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;
}
