Custom PDF Export

SpreadJS exports PDF files according to Spread print settings.

<p>You can export all sheets or a specified sheet with the <strong>savePDF</strong> method:</p> <pre><code class="hljs js language-js"> spread.savePDF(); <span class="hljs-comment">// export all sheets as PDF</span> </code></pre> <p>For each sheet, you can set detailed options by setting the sheet’s <strong>printInfo</strong> options:</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); printInfo.blackAndWhite(<span class="hljs-literal">true</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.blackAndWhite(_getElementById('blackAndWhite').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.blackAndWhite(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('blackAndWhite').checked = printInfo.blackAndWhite(); _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 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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/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$/en/purejs/node_modules/@grapecity/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-pdf/dist/gc.spread.sheets.pdf.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>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 “Export PDF” button to see how these settings affect how the workbook is saved to 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 class="group"> <label> <input type="checkbox" id="blackAndWhite"> Black And White </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="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/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="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/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="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/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="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/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="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/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="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/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="Set PrintInfo"> </div> </div> <hr style="border: 1px solid white;border-bottom-color: lightgray;" /> <div> <input type="button" style="margin-bottom: 6px" value="Export 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; }