印刷のカスタマイズ

SpreadJSでは、ユーザーに対し、印刷範囲および印刷方法を指定するための各種オプションを提供できます。これにより、大規模なシートであっても、ユーザーはそのシートの一部だけを印刷できるようになります。

<p><strong>印刷対象に関する設定</strong></p> <p>以下のコンテンツが印刷対象になります。</p> <ul> <li><strong>コーナーセル、行ヘッダ、列ヘッダ、またはビューポート内で表示されている行/列</strong></li> <li><strong>セルテキスト</strong></li> <li><strong>セルスタイル(背景画像も含む)</strong></li> <li><strong>結合セル</strong></li> <li><strong>オーバーフロー表示</strong></li> <li><strong>ピクチャ</strong></li> </ul> <p>以下のコンテンツは印刷の対象となりません。</p> <ul> <li><strong>非表示の行/列</strong></li> <li><strong>フローティングオブジェクト</strong></li> <li><strong>コメント</strong></li> <li><strong>タブストリップ</strong></li> <li><strong>スクロールバー</strong></li> <li><strong>グループ</strong></li> <li><strong>フィルタボタン</strong></li> <li><strong>検証ボタン、強調表示の円</strong></li> <li><strong>有効な効果</strong></li> <li><strong>選択領域</strong></li> <li><strong>固定線</strong></li> <li><strong>Spreadの背景画像</strong></li> </ul> <p><strong>印刷について</strong></p> <p><strong>print</strong>メソッドを使用して、すべてのシート、もしくは特定のシートを印刷できます。</p> <pre><code class="hljs js language-js"> spread.print(); <span class="hljs-comment">// すべてのシートを印刷する。</span> <span class="hljs-comment">// spread.print(1 /* sheetIndex */); // 2枚目の用紙を印刷します(0ベースのインデックス)。</span> </code></pre> <p>各シートについて、<strong>setRowPageBreak</strong>または、Sheet.<strong>setColumnPageBreak</strong>メソッドを使用して、特定の行や列の前に改ページを挿入できます。</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">// 6行目の前に改ページを挿入する。</span> sheet.setRowPageBreak(<span class="hljs-number">5</span>, <span class="hljs-literal">true</span>); <span class="hljs-comment">// 4列目の前に改ページを挿入する。</span> sheet.setColumnPageBreak(<span class="hljs-number">3</span>, <span class="hljs-literal">true</span>); </code></pre> <p><strong>printInfo</strong>メソッドを使用して印刷の詳細を設定できます。設定できるオプションを以下の通りです。</p> <p><strong>外観:</strong></p> <p><span class="indent-1">showGridLine</span>: グリッド線を印刷するかどうかを設定します(初期値はtrue)。</p> <p><span class="indent-1">showBorder</span>: コントロールの外枠線を印刷するかどうかを設定します。</p> <p><span class="indent-1">showColumnHeader / showRowHeader</span>: 行、列のヘッダ印刷設定。<strong>PrintVisibilityType</strong>パラメータで設定します。</p> <ul> <li><strong>inherit: シート設定を継承します(既定値)。</strong></li> <li><strong>hide: 行、列ヘッダを印刷しません。</strong></li> <li><strong>show: 各ページに行、列ヘッダを印刷します。</strong></li> <li><strong>showOnce: 初項にだけ行、列ヘッダを印刷します。</strong></li> </ul> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> sheet = spread.sheets[<span class="hljs-number">0</span>]; <span class="hljs-keyword">var</span> printInfo = sheet.printInfo(); printInfo.showGridLine(<span class="hljs-literal">false</span>); printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.show); printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.show); </code></pre> <p><strong>印刷範囲:</strong></p> <p><span class="indent-1">rowStart</span>: 印刷の開始行をインデックス指定します。</p> <p><span class="indent-1">rowEnd</span>: 印刷の終了行をインデックス指定します。</p> <p><span class="indent-1">columnStart</span>: 印刷の開始列をインデックス指定します。</p> <p><span class="indent-1">columnEnd</span>: 印刷の終了列をインデックス指定します。</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">// 自動検出された終了行/列を上書きするように印刷範囲を設定する。</span> printInfo.rowEnd(<span class="hljs-number">40</span>); printInfo.columnEnd(<span class="hljs-number">12</span>) </code></pre> <p><strong>行、列の繰り返し印刷:</strong></p> <p><span class="indent-1">repeatColumnStart</span>: 各ページの左端に表示する列の開始インデックスを指定します。</p> <p><span class="indent-1">repeatColumnEnd</span>: 各ページの左端に表示する列の終了インデックスを指定します。</p> <p><span class="indent-1">repeatRowStart</span>: 各ページの上端に表示する行の開始インデックスを指定します。</p> <p><span class="indent-1">repeatRowEnd</span>: 各ページの上端に表示する行の終了インデックスを指定します。</p> <pre><code class="hljs js language-js"> printInfo.repeatRowStart(<span class="hljs-number">0</span>); printInfo.repeatRowEnd(<span class="hljs-number">1</span>); printInfo.repeatColumnStart(<span class="hljs-number">0</span>) printInfo.repeatColumnEnd(<span class="hljs-number">0</span>) </code></pre> <p><strong>ヘッダーとフッター:</strong></p> <p><span class="indent-1">headerLeft</span>: ヘッダ領域左セクションのテキストとフォーマット。</p> <p><span class="indent-1">headerCenter</span>: ヘッダ領域中央セクションのテキストとフォーマット。</p> <p><span class="indent-1">headerRight</span>: ヘッダ領域右セクションのテキストとフォーマット。</p> <p><span class="indent-1">footerLeft</span>: フッタ領域左セクションのテキストとフォーマット。</p> <p><span class="indent-1">footerCenter</span>: フッタ領域中央セクションのテキストとフォーマット。</p> <p><span class="indent-1">footerRight</span>: フッタ領域右セクションのテキストとフォーマット。</p> <p><span class="indent-1">headerLeftImage</span>: ヘッダ領域左セクションのイメージ。</p> <p><span class="indent-1">headerCenterImage</span>: ヘッダ領域中央セクションのイメージ。</p> <p><span class="indent-1">headerRightImage</span>: ヘッダ領域右セクションのイメージ。</p> <p><span class="indent-1">footerLeftImage</span>: フッタ領域左セクションのイメージ。</p> <p><span class="indent-1">footerCenterImage</span>: フッタ領域中央セクションのイメージ。</p> <p><span class="indent-1">footerRightImage</span>: フッタ領域右セクションのイメージ。</p> <p><span class="indent-1">supported format</span>: 以下のキーワードとエスケープ記号&amp;を使用して特殊なデータを印刷します。</p> <ul> <li><strong>P: 現在のページ番号</strong></li> <li><strong>N: 総ページ数</strong></li> <li><strong>D: 現在の日付 (今日).</strong></li> <li><strong>T: 現在の時刻</strong></li> <li><strong>G: 画像</strong></li> <li><strong>S: 取り消し線</strong></li> <li><strong>U: 下線</strong></li> <li><strong>B: 太字</strong></li> <li><strong>I: 斜体</strong></li> <li><strong>": (二重引用符), フォント設定</strong></li> <li><strong>F: ワークブック名</strong></li> <li><strong>A: シート名</strong></li> </ul> <pre><code class="hljs js language-js"> printInfo.headerCenter(<span class="hljs-string">"&amp;\"Comic Sans MS\"System Information"</span>); printInfo.headerLeft(<span class="hljs-string">"&amp;G"</span>); printInfo.headerLeftImage(<span class="hljs-string">"images/GrapeCity_LOGO.jpg"</span>); printInfo.footerCenter(<span class="hljs-string">"&amp;P/&amp;N"</span>); </code></pre>
function _getElementById(id) { return document.getElementById(id); } window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); initSpread(spread); _getElementById('btnSetPrintInfo').onclick = function () { function setPrintInfoNumberValueItem(printInfo, key, method) { var value = parseInt(_getElementById(key).value), method = method || key; if (!isNaN(value)) { printInfo[method](value); } } var sheet = spread.getActiveSheet(), printInfo = sheet.printInfo(); ["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(_getElementById('showRowHeader').value); printInfo.showColumnHeader(_getElementById('showColumnHeader').value); printInfo.headerLeft(_getElementById('headerLeft').value); printInfo.headerLeftImage(_getElementById('headerLeftImage').value); printInfo.headerCenter(_getElementById('headerCenter').value); printInfo.headerCenterImage(_getElementById('headerCenterImage').value); printInfo.headerRight(_getElementById('headerRight').value); printInfo.headerRightImage(_getElementById('headerRightImage').value); printInfo.footerLeft(_getElementById('footerLeft').value); printInfo.footerLeftImage(_getElementById('footerLeftImage').value); printInfo.footerCenter(_getElementById('footerCenter').value); printInfo.footerCenterImage(_getElementById('footerCenterImage').value); printInfo.footerRight(_getElementById('footerRight').value); printInfo.footerRightImage(_getElementById('footerRightImage').value); }; _getElementById('btnPrint').onclick = function() { spread.print(0); }; } function adjustLayoutForPrint(sheet) { sheet.setRowHeight(0, 30); sheet.getRange(0, 0, 1, 5).hAlign(1).vAlign(1).font("bold 14px Arial"); sheet.setColumnWidth(0, 220); sheet.setColumnWidth(2, 120); sheet.setColumnWidth(3, 50); sheet.setColumnWidth(4, 180); sheet.getRange(1, 0, 200, 5).textIndent(1); sheet.getRange(-1, 3, -1, 1).hAlign(1).textIndent(0); sheet.addColumns(0, 1); sheet.setColumnWidth(0, 30); for (var r = 5; r <= 200; r += 5) { sheet.getCell(r, 0) .text(r + "") .font("normal 9px Arial"); } sheet.addRows(0, 1); sheet.setRowHeight(0, 10); sheet.getRange(1, 1, 202, 5).setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin), {all: true}); } function setPrintInfo(sheet) { var printInfo = sheet.printInfo(); // custom printInfo for default output printInfo.showBorder(false); printInfo.showGridLine(false); printInfo.columnEnd(5); printInfo.repeatRowStart(0); printInfo.repeatRowEnd(1); printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide); printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide); printInfo.headerCenter("Olympic Athletes"); printInfo.headerLeft("&G"); printInfo.headerLeftImage("images/olympic.jpg"); printInfo.footerCenter("&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('showRowHeader').value = printInfo.showRowHeader(); _getElementById('showColumnHeader').value = printInfo.showColumnHeader(); _getElementById('headerLeft').value = printInfo.headerLeft(); _getElementById('headerLeftImage').value = printInfo.headerLeftImage(); _getElementById('headerCenter').value = printInfo.headerCenter(); _getElementById('headerCenterImage').value = printInfo.headerCenterImage(); _getElementById('headerRight').value = printInfo.headerRight(); _getElementById('headerRightImage').value = printInfo.headerRightImage(); _getElementById('footerLeft').value = printInfo.footerLeft(); _getElementById('footerLeftImage').value = printInfo.footerLeftImage(); _getElementById('footerCenter').value = printInfo.footerCenter(); _getElementById('footerCenterImage').value = printInfo.footerCenterImage(); _getElementById('footerRight').value = printInfo.footerRight(); _getElementById('footerRightImage').value = printInfo.footerRightImage(); } function initSpread(spread) { var sd = data; if (sd && sd.sheets) { if (!spread) { return; } spread.suspendPaint(); spread.fromJSON(sd); var sheet = spread.sheets[0]; sheet.suspendPaint(); adjustLayoutForPrint(sheet); sheet.resumePaint(); setPrintInfo(sheet); spread.resumePaint(); } }
<!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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/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> </div> <div class="row"> <div class="group"> <label>RowStart:</label> <input id="rowStart"> </div> <div class="group"> <label>RowEnd:</label> <input id="rowEnd"> </div> </div> <div class="row"> <div class="group"> <label>ColumnStart:</label> <input id="columnStart"> </div> <div class="group"> <label>ColumnEnd:</label> <input id="columnEnd"> </div> </div> <div class="row"> <div class="group"> <label>RepeatRowStart:</label> <input id="repeatRowStart"> </div> <div class="group"> <label>RepeatRowEnd:</label> <input id="repeatRowEnd"> </div> </div> <div class="row"> <div class="group"> <label>RepeatColumnStart:</label> <input id="repeatColumnStart"> </div> <div class="group"> <label>RepeatColumnEnd:</label> <input id="repeatColumnEnd"> </div> </div> <div class="row"> <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> <div class="row"> <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"> <div class="group"> <label>HeaderLeft:</label> <input id="headerLeft"> </div> <div class="group"> <label>HeaderLeftImage:</label> <select id="headerLeftImage"> <option value="images/apple.jpg">Apple</option> <option value="images/olympic.jpg" selected>Olympic</option> </select> </div> </div> <div class="row"> <div class="group"> <label>HeaderCenter:</label> <input id="headerCenter"> </div> <div class="group"> <label>HeaderCenterImage:</label> <select id="headerCenterImage"> <option value="images/apple.jpg">Apple</option> <option value="images/olympic.jpg" selected>Olympic</option> </select> </div> </div> <div class="row"> <div class="group"> <label>HeaderRight:</label> <input type="text" id="headerRight"> </div> <div class="group"> <label>HeaderRightImage:</label> <select id="headerRightImage"> <option value="images/apple.jpg">Apple</option> <option value="images/olympic.jpg" selected>Olympic</option> </select> </div> </div> <div class="row"> <div class="group"> <label>FooterLeft:</label> <input id="footerLeft"> </div> <div class="group"> <label>FooterLeftImage:</label> <select id="footerLeftImage"> <option value="images/apple.jpg">Apple</option> <option value="images/olympic.jpg" selected>Olympic</option> </select> </div> </div> <div class="row"> <div class="group"> <label>FooterCenter:</label> <input id="footerCenter"> </div> <div class="group"> <label>FooterCenterImage:</label> <select id="footerCenterImage"> <option value="images/apple.jpg">Apple</option> <option value="images/olympic.jpg" selected>Olympic</option> </select> </div> </div> <div class="row"> <div class="group"> <label>FooterRight:</label> <input type="text" id="footerRight"> </div> <div class="group"> <label>FooterRightImage:</label> <select id="footerRightImage"> <option value="images/apple.jpg">Apple</option> <option value="images/olympic.jpg" selected>Olympic</option> </select> </div> </div> <div class="row"> <div class="group"> <label></label> <input type="button" id="btnSetPrintInfo" value="PrintInfoを設定"> </div> </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: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } .container { width: 100%; height: calc(100% - 40px); box-sizing: border-box; } .group { padding-bottom: 8px; } 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; }