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 usis 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 using 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); addSparklineContent(sheet); addPieContent(sheet); addTableContent(sheet); addValue(sheet); sheet.getCell(0, 7).backgroundImage("$DEMOROOT$/spread/source/images/olympic.jpg"); var printInfo = sheet.printInfo(); printInfo.showBorder(true); printInfo.showGridLine(true); printInfo.headerCenter("Olympic Athletes"); printInfo.headerLeft("&G"); printInfo.headerLeftImage("$DEMOROOT$/spread/source/images/olympic.jpg"); printInfo.footerCenter("&P/&N"); sheet.resumePaint(); }; var spreadNS = GC.Spread.Sheets; function addValue(sheet) { var value = 1; for (var r = 21; r < 68; r++) { for (var c = 0; c < 20; c++) { sheet.setValue(r, c, value++); } } } function addSparklineContent(sheet) { sheet.addSpan(0, 0, 1, 7); sheet.setRowHeight(0, 40); sheet.getCell(0, 0).value("The company revenue in 2020").font("italic Bold 20px Times").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.addSpan(1, 2, 1, 2); sheet.addSpan(1, 4, 1, 2); sheet.addSpan(1, 6, 1, 2); sheet.setValue(1, 0, "Month"); sheet.setValue(1, 1, "Revenue"); sheet.setValue(1, 2, "Diagram 1"); sheet.setValue(1, 4, "Diagram 2"); sheet.setValue(1, 6, "Diagram 3"); sheet.getRange(1, 0, 1, 7).backColor("Accent 4").foreColor("white"); for (var i = 2; i < 5; i++) { sheet.setValue(i, 0, new Date(2020, i - 1, 1)); sheet.setFormatter(i, 0, "mm/dd/yyyy"); } sheet.setColumnWidth(0, 80); sheet.setValue(2, 1, 30); sheet.setValue(3, 1, -60); sheet.setValue(4, 1, 80); sheet.addSpan(2, 2, 3, 2); sheet.setFormula(2, 2, '=LINESPARKLINE(B3:B5,0,A3:A5,0,"{ac:#ffff00,fmc:brown,hmc:red,lastmc:blue,lowmc:green,mc:purple,nc:yellowgreen,sc:pink,dxa:true,sf:true,sh:true,slast:true,slow:true,sn:true,sm:true,lw:3,dh:false,deca:1,rtl:false,minat:1,maxat:1,mmax:5,mmin:-3}")'); sheet.addSpan(2, 4, 3, 2); sheet.setFormula(2, 4, '=COLUMNSPARKLINE(B3:B5,0,A3:A5,0,"{ac:#ffff00,fmc:brown,hmc:red,lastmc:blue,lowmc:green,mc:purple,nc:yellowgreen,sc:pink,dxa:true,sf:true,sh:true,slast:true,slow:true,sn:true,sm:true,lw:3,dh:false,deca:1,rtl:false,minat:1,maxat:1,mmax:5,mmin:-3}")'); sheet.addSpan(2, 6, 3, 2); sheet.setFormula(2, 6, '=WINLOSSSPARKLINE(B3:B5,0,A3:A5,0)'); } function addPieContent(sheet) { sheet.addSpan(6, 0, 1, 5); sheet.setRowHeight(6, 40); sheet.getCell(6, 0).value("My Assets").font("20px Times-Roman").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.addSpan(7, 2, 1, 2); sheet.addSpan(8, 2, 3, 2); sheet.setValue(7, 0, "Asset Type"); sheet.setValue(7, 1, "Amount"); sheet.setValue(7, 2, "Diagram"); sheet.setValue(7, 4, "Note"); sheet.setValue(8, 0, "Savings"); sheet.getRange(7, 0, 1, 5).backColor("Accent 4").foreColor("white"); sheet.getCell(8, 1).value(25000).formatter("$#,##0"); sheet.setValue(9, 0, "401k"); sheet.getCell(9, 1).value(55000).formatter("$#,##0"); sheet.setValue(10, 0, "Stocks"); sheet.getCell(10, 1).value(15000).formatter("$#,##0"); sheet.setFormula(8, 2, '=PIESPARKLINE(B9:B11,"#919F81","#D7913E","CEA722")'); sheet.getCell(8, 4).backColor("#919F81").formula("=B9/SUM(B9:B11)").formatter("0.00%"); sheet.getCell(9, 4).backColor("#D7913E").formula("=B10/SUM(B9:B11)").formatter("0.00%"); sheet.getCell(10, 4).backColor("#CEA722").formula("=B11/SUM(B9:B11)").formatter("0.00%"); } function addTableContent(sheet) { var data = [ ["bob", "36", "man", "Beijing", "80"], ["Betty", "28", "woman", "Xi'an", "52"], ["Gary", "23", "man", "NewYork", "63"], ["Hunk", "45", "man", "Beijing", "80"], ["Cherry", "37", "woman", "Shanghai", "58"]]; sheet.tables.addFromDataSource("sampleTable8", 13, 0, data); }
<!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="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; }