You can set the display of print lines in the sheets using the isPrintLineVisible method. Using print lines can let the user easily know if the sheet data will be printed on the correct page when printing.
When printing, the following contents are printable:
visible rows/columns in corner/row header/column header/viewport
cell text
cell style(including background image)
span
overflow
picture
water mark
And the following contents are unprintable:
hidden rows/columns
floating object
comment
tabStrip
scrollBar
group
filter button
validation button, highlight circle
active affect
selection
freeze line
spread's background image
How to print
You can print all sheets or a specified sheet with the sheet.print method.
For each sheet, you can insert a page break before the specified row or column with the setRowPageBreak or setColumnPageBreak methods.
For each sheet, you can set detailed options with the Sheet.printInfo method. Here are some of those options:
Appearance:
showGridLine: whether to print the grid lines (default is true).
showBorder: whether to print an outline border around the entire control.
showColumnHeader / showRowHeader: how to print column / row header, a PrintVisibilityType enum value.
inherit: depends on Sheet's setting ((default) visibility of column / row header).
hide: do not print.
show: shows in each page.
showOnce: shows once (display the header on the 1st page only).
Print range:
You can also manually specify the range of cells that will be printed with the following options:
rowStart: specify the start row index of print range.
rowEnd: specify the end row index of print range.
columnStart: specify the start column index of print range.
columnEnd: specify the end column index of print range.
Print range is actually a custom name "Print_Area" now, and can be updated automatically when adding or removing rows/columns in the range. You can use it in a formula, like =IFERROR(ROWS(Print_Area),"none") to display how many rows to print.
Alternatively, you can set a formula to the custom name "Print_Area" to set the print range dynamically, such as: =IF(Sheet1!$A$1,Sheet1!$B$1:$C$5,Sheet1!$D$5:$F$8). In that formula, the print range is Sheet1!$B$1:$C$5 if Sheet1!$A$1 has a value of true, otherwise the Print_Area will be Sheet1!$D$5:$F$8.
Note: It's recommend to set the print range using either the "Print_Area" custom name or printInfo, don't use them together.
Repeat items:
repeatColumnStart: specify the start column index of a repeated range to print on left of each page.
repeatColumnEnd: specify the end column index of a repeated range to print on left of each page.
repeatRowStart: specify the start row index of a repeated range to print on top of each page.
repeatRowEnd: specify the end row index of a repeated range to print on top of each page.
Header & footer:
You can use the pageHeaderFooter method in the printInfo object to get/set the header or footer print info.
There are 4 types of header/footer print info: normal, first, odd and even.
Multiple options can be used simultaneously. The descriptions are as follows:
Option name
Priority
Description
normal
Low
apply to the header/footer of all pages.
first
High
apply to the header/footer of first page.
odd
Medium
apply to the header/footer of all odd pages.
even
Medium
apply to the header/footer of all even pages.
Supported format: the "&" symbol is used as an escape character, and can be used along with the following keywords to print special data:
P: current page number.
N: total page count.
D: current date (today).
T: current time.
G: image, related url is set with corresponding Image.
S: strikethrough.
U: underline.
B: bold.
I: italic.
": (double quote), used to set font-family.
F: spread name.
A: sheet name.
The following code sets the header/footer of all pages.
The following code shows how to use the differentFirstPage method to enable a different header/footer for the first page, and how to set the header/footer of the first page:
The following code shows how to use the differentOddAndEvenPages method to enable different headers/footers for odd and even pages, and how to set the header/footer of odd and even pages:
Watermark:
A user can add a watermark when printing in SpreadJS.
A user can add multiple watermarks for a page, just like this:
A user can add a watermark for different pages, such as a watermark for pages 0, 1, 2, 3, 5, 10, just like this:
A user can add a watermark for odd or even pages, you just need to set the page to "odd" or "even".
BeforPrint event:
SpreadJS supports an event that is fired before printing occurs: GC.Spread.Sheets.Events.BeforePrint.
A user can do something before printing through this event, such as:
Cancelling the print
Getting the print content iFrame, so they can print with a different technique, such as flash and so on…
Event args:
args.iframe: The DOM element that includes all printing content.
args.cancel: The option that cancels the following printing process.
Code see below:
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 charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.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 class="btn-set">
<input type="button" id="btnSetPrintInfo" value="Set PrintInfo">
</div>
<hr class="btn-set" style="border: 1px solid white;border-bottom-color: lightgray;" />
<div class="btn-set">
<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;
}
