自定义打印设置

概述本 Demo 展示了 SpreadJS 的自定义打印功能，包括打印区域设置、重复打印区域、页眉页脚自定义、水印添加和打印线显示等功能。Demo 提供了完整的交互界面，用户可以动态调整各种打印参数并实时预览效果。实现思路初始化工作簿并加载预设数据，设置基础打印信息通过 printInfo() 方法配置打印区域、重复区域、页眉页脚等参数提供交互界面让用户动态修改打印设置支持添加水印，可设置水印的位置、大小、图片和显示页面可显示打印线帮助用户预览打印区域点击打印按钮执行打印操作代码解析设置打印区域这段代码通过 printInfo() 方法获取打印信息对象，然后设置打印区域的起止行列。showColumnHeader 和 showRowHeader 方法用于控制是否打印列头和行头，参数为 PrintVisibilityType 枚举值，包括 inherit（继承）、hide（隐藏）、show（显示）、showOnce（仅显示一次）。设置页眉页脚页眉页脚分为四种类型：normal（常规）、first（首页）、odd（奇数页）、even（偶数页）。每个页眉页脚区域分为左、中、右三个部分，可以设置文本和图片。文本支持特殊格式代码，如 &P 表示当前页码、&N 表示总页数、&G 表示图片占位符、&D 表示日期等。添加水印水印对象包含位置（x、y）、尺寸（width、height）、图片路径（imageSrc）和显示页面（page）。page 参数支持 "all"（所有页）、"odd"（奇数页）、"even"（偶数页）或具体页码如 "0,1,2,3"。可以添加多个水印，通过数组传递。显示打印线 isPrintLineVisible() 方法用于控制是否显示打印线。打印线可以帮助用户预览数据在打印页面上的分布情况，确保数据能正确打印。执行打印调用 Workbook 的 print() 方法执行打印操作。可以传入工作表索引打印指定工作表，不传参数则打印所有工作表。运行效果页面右侧提供完整的打印设置面板，包括打印区域、重复区域、打印选项、页眉页脚、水印等设置勾选"打印线可见"复选框，工作表中会显示打印线，帮助预览打印区域点击"设置打印信息"按钮，将界面上的设置应用到工作表的打印配置点击"打印"按钮，打开浏览器打印对话框，可以预览和打印工作表页眉页脚支持为首页、奇偶页设置不同的内容水印功能可以为不同页面添加图片水印，并指定显示位置和尺寸

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;
}

SpreadJS 在线示例