Custom PDF Export

Exporting SpreadJS to PDF files can be customized. The print settings in SpreadJS can be changed so you can export exactly the information that you need.

You can export all sheets or a specified sheet with the savePDF method: For each sheet, you can set detailed options by setting the sheet’s printInfo options:
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) { var value = parseInt(_getElementById(key).value); if (!isNaN(value)) { printInfo[key](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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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>Adjust the options below then click the <b>Set PrintInfo</b> button to apply these options to the Spread PrintInfo.</p> <p> Click the <b>Export PDF</b> button to see how these settings affect the way 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">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">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">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">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">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">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; }