シートに表示印刷行を設定することで、印刷時にシートデータを正しいページに印刷できるかどうかを簡単に知ることができます。
以下のコンテンツを印刷できます。
コーナー、行ヘッダー、列ヘッダー、ビューポートに表示される行／列
セルテキスト
セルスタイル（背景画像を含む）
結合セル
オーバーフロー表示
ピクチャ
透かし
以下のコンテンツは印刷できません。
非表示の行／列
フローティングオブジェクト
コメント
タブストリップ
スクロールバー
グループ
フィルターボタン
検証ボタン、強調表示の円
アクティブな効果
選択領域
固定線
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") のような数式で使用すると、印刷する行数を表示できます。
または、=IF(Sheet1!$A$1,Sheet1!$B$1:$C$5,Sheet1!$D$5:$F$8)のように、数式をカスタム名「Print_Area」に設定して、印刷範囲を動的に設定できます。印刷範囲は、「Sheet1!$A$1」が真の値の場合「Sheet1!$B$1:$C$5」で、そうでないとき「Sheet1!$D$5:$F$8」です。
注意：印刷範囲は、カスタム名「Print_Area」またはprintInfoのどちらかを設定することを推奨します。
項目の繰り返し：
repeatColumnStart： 各ページの左側に印刷する繰り返し範囲の開始列インデックスを指定します。
repeatColumnEnd： 各ページの左側に印刷する繰り返し範囲の終了列インデックスを指定します。
repeatRowStart： 各ページの上部に印刷する繰り返し範囲の開始行インデックスを指定します。
repeatRowEnd： 各ページの上部に印刷する繰り返し範囲の終了行インデックスを指定します。
ヘッダーとフッター：
pageHeaderFooterメソッドを使用して、ヘッダーまたはフッターの印刷情報を取得／設定できます。
ヘッダー／フッターの印刷情報には、normal、first、odd、evenの4種類があります。
そして、それらの1つ以上を使用することができます。説明は次のとおりです：
オプション名
優先度
説明
normal
Low
すべてのページのヘッダー／フッターに適用されます。
first
High
最初のページのヘッダー／フッターに適用されます。
odd
Medium
すべての奇数ページのヘッダー／フッターに適用されます。
even
Medium
すべての偶数ページのヘッダー／フッターに適用されます。
対応フォーマット： &はエスケープ文字として使用され、次のキーワードと一緒に使用して特別なデータを出力します。
P： 現在のページ番号
N： 総ページ数
D： 現在の日付 (今日)
T： 現在の時刻
G： 画像、関連するURLは対応する画像で設定されます
S： 取り消し線
U： 下線
B： 太字
I： 斜体
"： (二重引用符)、フォントの設定に使用されます
F： ワークブック名
A： シート名
すべてのページのヘッダー/フッターを設定します。
differentFirstPageを使用して最初のページの異なるヘッダー／フッターを有効にし、最初のページのヘッダー／フッターを設定します。
differentOddAndEvenPagesを使用して、奇数ページと偶数ページの異なるヘッダー／フッターを有効にし、奇数ページと偶数ページのヘッダー／フッターを設定します。
透かし：
SpreadJSで印刷するときに透かしを追加できます。
次のように、ページに複数の透かしを追加できます：
次のように、ページ0、1、2、3、5、10にのみ透かしを追加するなど、さまざまなページに透かしを追加できます：
また、ユーザーは奇数ページまたは偶数ページにのみ透かしを追加できます。ページを「奇数」または「偶数」に設定するだけです。
BeforPrintイベント：
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="ja-jp" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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>以下のオプションを変更して、画面下部にスクロールして［PrintInfoを設定］ボタンをクリックすると、SpreadのPrintInfoにこれらのオプションが設定されます。［印刷］ボタンをクリックすると、これらの設定に基づき、ワークブックがどのように印刷されるかを確認できます。</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>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>印刷タイトル</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>印刷オプション</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>ヘッダ/フッタ</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>ヘッダ</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>フッタ</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>ヘッダ</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>フッタ</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>ヘッダ</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>フッタ</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>ヘッダ</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>フッタ</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>ウォーターマーク</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" selected>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">
追加
</button>
<button type="button" id="waterMarkClear" class="waterMark-btn">
クリア
</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="PrintInfoを設定">
</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;
}
