カスタムPDFエクスポート

SpreadJSでは、Spreadの印刷設定に基づいてPDFファイルへのエクスポートが行われます。

<p><strong>savePDF</strong>メソッドを使用すると、すべてのシート、または指定のシートをエクスポートできます。</p> <pre><code class="hljs js language-js"> spread.savePDF(); <span class="hljs-comment">// すべてのシートをPDFファイルにエクスポートする。</span> </code></pre> <p>個々のシートに対し、シートの<strong>printInfo</strong>オプションを設定して、個別に詳細オプションを設定できます。</p> <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>
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); }; }; function adjustLayoutForPrint(sheet) { sheet.setRowHeight(0, 30); sheet.getRange(0, 0, 1, 5).hAlign(1).vAlign(1).font("bold 14px Times"); 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 Times"); } 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("$DEMOROOT$/spread/source/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) { _getElementById('savePDF').onclick = function () { spread.savePDF(function (blob) { saveAs(blob, 'download.pdf'); }, console.log); }; var sd = data; if (sd && sd.sheets) { if (!spread) { return; } spread.suspendPaint(); spread.fromJSON(sd); var sheet = spread.sheets[0]; sheet.suspendPaint(); adjustLayoutForPrint(sheet); setPrintInfo(sheet); sheet.resumePaint(); 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$/spread/source/js/FileSaver.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-pdf/dist/gc.spread.sheets.pdf.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/exportPDF.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"> <p>以下のオプションを変更して、画面下部にスクロールして[PrintInfoを設定]ボタンをクリックすると、Spread文書のPrintInfoにこれらのオプションが設定されます。[PDFにエクスポート]ボタンをクリックすると、これらの設定に基づき、ワークブックがどのようにPDFファイルとして保存されたかを確認できます。</p> <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="/spread/source/images/apple.jpg">Apple</option> <option value="/spread/source/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="/spread/source/images/apple.jpg">Apple</option> <option value="/spread/source/images/olympic.jpg" selected>Olympic</option> </select> </div> </div> <div class="row"> <div class="group"> <label>HeaderRight:</label> <input id="headerRight"> </div> <div class="group"> <label>HeaderRightImage:</label> <select id="headerRightImage"> <option value="/spread/source/images/apple.jpg">Apple</option> <option value="/spread/source/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="/spread/source/images/apple.jpg">Apple</option> <option value="/spread/source/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="/spread/source/images/apple.jpg">Apple</option> <option value="/spread/source/images/olympic.jpg" selected>Olympic</option> </select> </div> </div> <div class="row"> <div class="group"> <label>FooterRight:</label> <input id="footerRight"> </div> <div class="group"> <label>FooterRightImage:</label> <select id="footerRightImage"> <option value="/spread/source/images/apple.jpg">Apple</option> <option value="/spread/source/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="PDF形式でエクスポート" id="savePDF"> </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; }