Demos
Features
PDF Export
Overview

Overview

SpreadJS supports exporting to a PDF file. You can also import your Excel .xlsx files and export it to PDF using JavaScript. The Export to PDF operation uses the printInfo object for page settings and provides support for all of the printing features that are available in SpreadJS.

To use the PDF Export feature, add a link to the JavaScript files in the document's head section below the link to SpreadJS: To export the PDF file, you can use the spread.savePDF() method: The method parameters are: successCallback: call this function after a successful export. function (blob){}. errorCallback: call this function if an error occurs. options: the options for exporting to a PDF file options.creator: the name of the application (e.g. Adobe FrameMaker®) that created the original document from which it was converted. options.title: the document’s title options.author: the name of the person who created the document options.keywords: keywords associated with the document options.subject: the subject of the document. sheetIndex: Exports the specified sheet with a sheet index. If not set, all visible sheets will be exported. For example, you can export all the sheets in SpreadJS to PDF using the following code: SpreadJS supports 14 built-in standard fonts: Courier: Courier, Courier-Bold, Courier-Oblique, Courier-BoldOblique Times: Tomes-Roman, Times-Bold, Times-Italic, Times-BoldItalic Helvetica: Helvetica, Helvetica-Bold, Helvetica-Oblique, Helvetica-BoldOblique Symbol: Symbol ZapfDingbats: ZapfDingbats
window.onload = function () { var spread = new spreadNS.Workbook(document.getElementById("ss")); document.getElementById('savePDF').onclick = function () { spread.savePDF( function (blob) { saveAs(blob, 'download.pdf'); }, console.log, { title: 'Test Title', author: 'Test Author', subject: 'Test Subject', keywords: 'Test Keywords', creator: 'test Creator' }); }; var sheet = spread.getActiveSheet(); sheet.suspendPaint(); var style = new GC.Spread.Sheets.Style(); style.font = '15px Times'; sheet.setDefaultStyle(style); addTableContent(sheet); addPieContent(sheet); var printInfo = sheet.printInfo(); printInfo.showBorder(true); printInfo.showGridLine(true); printInfo.headerCenter("Family Business Costs"); printInfo.headerLeft("&G"); printInfo.footerCenter("&P/&N"); sheet.resumePaint(); }; var spreadNS = GC.Spread.Sheets; function addTableContent (sheet) { sheet.addSpan(1, 0, 1, 7); sheet.setRowHeight(1, 40); sheet.getCell(1, 0).value("Costs").font("28px Times").foreColor("#11114f").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center); sheet.addSpan(2, 0, 1, 7); sheet.setRowHeight(2, 30); sheet.getCell(2, 0).value("Family Business").font("18px Times").foreColor("#11114f").backColor("#f5f5f5").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center); sheet.setColumnWidth(0, 105); sheet.setRowHeight(3, 35); sheet.getCell(3, 0).value("Costs Elements").font("Bold 15px Times").foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center); sheet.setColumnWidth(1, 70); sheet.getCell(3, 1).value("2018").font("Bold 15px Times").foreColor("#171717").backColor("#dfe9fb").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.setColumnWidth(2, 70); sheet.getCell(3, 2).value("2019").font("Bold 15px Times").foreColor("#171717").backColor("#d1dffa").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.setColumnWidth(3, 70); sheet.getCell(3, 3).value("2020").font("Bold 15px Times").foreColor("#171717").backColor("#9bbaf3").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.setColumnWidth(4, 70); sheet.getCell(3, 4).value("2021").font("Bold 15px Times").foreColor("#ffffff").backColor("#5c7ee6").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.setColumnWidth(5, 70); sheet.getCell(3, 5).value("2022").font("Bold 15px Times").foreColor("#ffffff").backColor("#1346a4").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.setColumnWidth(6, 70); sheet.getCell(3, 6).value("Total").font("Bold 15px Times").foreColor("#ffffff").backColor("#102565").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(4, 0).value("Salaries").foreColor("#171717").backColor("#ffffff").vAlign(spreadNS.VerticalAlign.center); sheet.setValue(4, 1, 200); sheet.setValue(4, 2, 210); sheet.setValue(4, 3, 250); sheet.setValue(4, 4, 300); sheet.setValue(4, 5, 360); sheet.getCell(4, 1).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(4, 2).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(4, 3).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(4, 4).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(4, 5).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(4, 6).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(5, 0).value("Consulting").foreColor("#171717").backColor("#ffffff").vAlign(spreadNS.VerticalAlign.center); sheet.setValue(5, 1, 100); sheet.setValue(5, 2, 100); sheet.setValue(5, 3, 100); sheet.setValue(5, 4, 240); sheet.setValue(5, 5, 260); sheet.getCell(5, 1).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(5, 2).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(5, 3).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(5, 4).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(5, 5).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(5, 6).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(6, 0).value("Hardware").foreColor("#171717").backColor("#ffffff").vAlign(spreadNS.VerticalAlign.center); sheet.setValue(6, 1, 2000); sheet.setValue(6, 2, 2500); sheet.setValue(6, 3, 0); sheet.setValue(6, 4, 3000); sheet.setValue(6, 5, 3200); sheet.getCell(6, 1).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(6, 2).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(6, 3).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(6, 4).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(6, 5).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(6, 6).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(7, 0).value("Software").foreColor("#171717").backColor("#ffffff").vAlign(spreadNS.VerticalAlign.center); sheet.setValue(7, 1, 500); sheet.setValue(7, 2, 100); sheet.setValue(7, 3, 100); sheet.setValue(7, 4, 200); sheet.setValue(7, 5, 250); sheet.getCell(7, 1).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(7, 2).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(7, 3).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(7, 4).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(7, 5).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(7, 6).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(8, 0).value("Training").foreColor("#171717").backColor("#ffffff").vAlign(spreadNS.VerticalAlign.center); sheet.setValue(8, 1, 1100); sheet.setValue(8, 2, 1300); sheet.setValue(8, 3, 2500); sheet.setValue(8, 4, 1300); sheet.setValue(8, 5, 1250); sheet.getCell(8, 1).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(8, 2).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(8, 3).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(8, 4).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(8, 5).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(8, 6).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(9, 0).value("Travel").foreColor("#171717").backColor("#ffffff").vAlign(spreadNS.VerticalAlign.center); sheet.setValue(9, 1, 2000); sheet.setValue(9, 2, 2000); sheet.setValue(9, 3, 1000); sheet.setValue(9, 4, 1500); sheet.setValue(9, 5, 0); sheet.getCell(9, 1).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(9, 2).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(9, 3).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(9, 4).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(9, 5).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(9, 6).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(10, 0).value("Other").foreColor("#171717").backColor("#ffffff").vAlign(spreadNS.VerticalAlign.center); sheet.setValue(10, 1, 200); sheet.setValue(10, 2, 200); sheet.setValue(10, 3, 100); sheet.setValue(10, 4, 150); sheet.setValue(10, 5, 30); sheet.getCell(10, 1).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(10, 2).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(10, 3).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(10, 4).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(10, 5).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.getCell(10, 6).foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.setFormula(4, 6, "=SUM(B5:F5)"); sheet.setFormula(5, 6, "=SUM(B6:F6)"); sheet.setFormula(6, 6, "=SUM(B7:F7)"); sheet.setFormula(7, 6, "=SUM(B8:F8)"); sheet.setFormula(8, 6, "=SUM(B9:F9)"); sheet.setFormula(9, 6, "=SUM(B10:F10)"); sheet.setFormula(10, 6, "=SUM(B11:F11)"); sheet.getRange(4,1,7,6).formatter("$0.0"); } function addPieContent(sheet) { sheet.addSpan(12, 0, 1, 4); sheet.getCell(12, 0).value("Total Costs").font("15px Times").foreColor("#11114f").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.addSpan(13, 0, 9, 4); sheet.setFormula(13, 0, '=PIESPARKLINE(G5:G11,"#dfe9fb","#d1dffa","#9bbaf3","#5c7ee6","#1346a4","#102565", "#ededed")'); }
<!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="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"> <p>Click this button to export the Spread component to a PDF file.</p> <div class="option-row"> <input type="button" value="Export PDF" id="savePDF"> </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; } input { padding: 8px 14px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }