시트에 인쇄선 표시를 설정할 수 있습니다. 인쇄선을 사용하면 인쇄 시 시트 데이터가 올바른 페이지에 인쇄되는지 여부를 쉽게 알 수 있습니다.
인쇄 시 다음 내용을 인쇄할 수 있습니다.
모서리/행 헤더/열 헤더/뷰포트의 표시되는 행/열
셀 텍스트
셀 스타일(배경 이미지 포함)
범위
오버플로
그림
워터마크
다음 내용은 인쇄할 수 없습니다.
고정된 행 및 열
부동 개체
메모
탭 스트립
스크롤 바
그룹
필터 버튼
유효성 검사 버튼, 원 강조 표시
활성 영향
선택
선 고정
Spread의 배경 이미지
인쇄 방법
sheet.print 메서드를 사용하여 모든 시트 또는 지정된 시트를 인쇄할 수 있습니다.
각 시트에 대해 setRowPageBreak 또는 Sheet.setColumnPageBreak 메서드를 사용하여 지정된 행이나 열 앞에 페이지 나누기를 삽입할 수 있습니다.
각 시트에 대해 Sheet object.printInfo 메서드를 사용하여 자세한 옵션을 설정할 수 있습니다. 다음은 몇 가지 옵션입니다.
모양:
showGridLine: 눈금선을 인쇄할지 여부(기본값은 true).
showBorder: 전체 컨트롤 주위에 윤곽선 테두리를 인쇄할지 여부.
showColumnHeader/showRowHeader: 열/행 머리글을 인쇄하는 방법, PrintVisibilityType 열거 값.
inherit: 시트 설정((기본값) 열/행 헤더의 표시 여부)에 따릅니다.
hide: 인쇄하지 않습니다.
show: 각 페이지에 표시됩니다.
showOnce: 한 번(첫 번째 페이지에만 헤더 표시) 표시됩니다.
인쇄 범위:
rowStart: 인쇄 범위의 시작 행 인덱스를 지정합니다.
rowEnd: 인쇄 범위의 끝 행 인덱스를 지정합니다.
columnStart: 인쇄 범위의 시작 열 인덱스를 지정합니다.
columnEnd: 인쇄 범위의 끝 열 인덱스를 지정합니다.
현재 인쇄 범위는 실제로 사용자 정의 이름인 "PrintArea"이고, 범위 내에서 행/열을 추가 또는 제거하는 경우 자동으로 업데이트됩니다. =IFERROR(ROWS(PrintArea),"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 메서드를 사용하여 헤더 또는 푸터 인쇄 정보를 가져오거나 설정할 수 있습니다.
헤더/푸터 인쇄 정보에는 normal, first, odd, even 등 네 가지 유형이 있습니다.
네 가지 유형 중 하나 이상을 사용할 수 있습니다. 설명은 다음과 같습니다.
옵션 이름
우선순위
설명
normal
Low
모든 페이지의 헤더/푸터에 적용.
first
High
첫 페이지의 헤더/푸터에 적용.
odd
Medium
모든 홀수 페이지의 헤더/푸터에 적용.
even
Medium
모든 짝수 페이지의 헤더/푸터에 적용.
지원되는 서식: &는 이스케이프 문자로 사용되며 특수 데이터를 인쇄하려면 다음 키워드와 함께 사용하십시오.
P: 현재 페이지 번호.
N: 총 페이지 수.
D: 현재 날짜(오늘).
T: 현재 시간.
G: 이미지, 관련 URL은 해당 이미지를 사용하여 설정됩니다.
S: 취소선.
U: 밑줄.
B: 굵게.
I: 기울임꼴.
": (큰따옴표), 글꼴 집합을 설정하는 데 사용됩니다.
F: Spread 이름.
A: 시트 이름.
모든 페이지의 헤더/푸터 설정.
첫 페이지의 다른 헤더/푸터를 활성화하려면 differentFirstPage를 사용하고 첫 페이지의 헤더/푸터 설정.
홀수 및 짝수 페이지의 다른 헤더/푸터를 활성화하려면 differentOddAndEvenPages를 사용하고 홀수 및 짝수 페이지의 헤더/푸터 설정.
워터마크:
사용자는 spreadJS에서 인쇄할 때 워터마크를 추가할 수 있습니다.
사용자는 다음과 같이 한 페이지에 여러 워터마크를 추가할 수 있습니다.
사용자는 페이지 0, 1, 2, 3, 5, 10에만 워터마크를 추가하는 것처럼 다음과 같이 서로 다른 페이지에 한 워터마크를 추가할 수 있습니다.
또한 사용자는 홀수 또는 짝수 페이지에만 워터마크를 추가할 수 있습니다. 페이지를 "odd" 또는 "even"으로 설정하면 됩니다.
BeforPrint 이벤트:
SpreadJS는 인쇄 전 이벤트를 지원합니다. GC.Spread.Sheets.Events.BeforePrint.
사용자는 다음과 같이 이 이벤트를 통해 인쇄하기 전에 작업을 수행할 수 있습니다.
고객이 인쇄를 취소할 수 있습니다.
인쇄 콘텐츠 iframe을 제공하므로, 사용자가 플래시 등의 다른 인쇄 방법을 사용할 수 있습니다.
이벤트 args:
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="ko-kr" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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;
}
