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
import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { SpreadSheetsModule } from '@grapecity/spread-sheets-angular'; import GC from '@grapecity/spread-sheets'; import '@grapecity/spread-sheets-print'; import '@grapecity/spread-sheets-pdf'; import './styles.css'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { autoGenerateColumns = false; dataSource: any[]; spread: GC.Spread.Sheets.Workbook; hostStyle = { width: 'calc(100% - 280px)', height: '100%', overflow: 'hidden', float: 'left' }; exportPDF() { this.spread.savePDF( function (blob: any) { saveAs(blob, 'download.pdf'); }, console.log, { title: 'Test Title', author: 'Test Author', subject: 'Test Subject', keywords: 'Test Keywords', creator: 'test Creator' }); } initSpread($event: any) { this.spread = $event.spread; let spread = this.spread; let sheet = spread.getActiveSheet(); sheet.suspendPaint(); let style = new GC.Spread.Sheets.Style(); style.font = '15px Times'; sheet.setDefaultStyle(style); this.addSparklineContent(sheet); this.addPieContent(sheet); this.addTableContent(sheet); this.addValue(sheet); sheet.getCell(0, 7).backgroundImage("$DEMOROOT$/spread/source/images/olympic.jpg"); let 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(); } addValue(sheet: any) { let value = 1; for (let r = 21; r < 68; r++) { for (let c = 0; c < 20; c++) { sheet.setValue(r, c, value++); } } } addSparklineContent(sheet: any) { sheet.addSpan(0, 0, 1, 7); sheet.setRowHeight(0, 40); sheet.getCell(0, 0).value("The company revenue in 2014").font("italic Bold 20px Times").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.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 (let i = 2; i < 5; i++) { sheet.setValue(i, 0, new Date(2014, 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)'); } addPieContent(sheet: any) { sheet.addSpan(6, 0, 1, 5); sheet.setRowHeight(6, 40); sheet.getCell(6, 0).value("My Assets").font("20px Times-Roman").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.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%"); } addTableContent(sheet: any) { let 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); } } @NgModule({ imports: [BrowserModule, SpreadSheetsModule], declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {} enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);
<!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/angular/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Polyfills --> <script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script> <script src="$DEMOROOT$/en/angular/node_modules/zone.js/dist/zone.min.js"></script> <script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script> <!-- SystemJS --> <script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('$DEMOROOT$/en/lib/angular/license.ts'); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div class="sample-tutorial"> <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"> </gc-spread-sheets> <div class="options-container"> <div class="option-row"> <p>Click this button to export the Spread component to a PDF file.</p> <input type = 'button' id="savePDF" value="Export PDF" (click)="exportPDF($event)" /> </div> </div> </div>
.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; }
(function (global) { System.config({ transpiler: 'ts', typescriptOptions: { tsconfig: true }, meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', 'zone': 'npm:zone.js/dist/zone.min.js', 'rxjs': 'npm:rxjs/bundles/rxjs.umd.min.js', '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.min.js', '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.min.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.min.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', 'ts': 'npm:plugin-typescript/lib/plugin.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', '@grapecity/spread-sheets': 'npm:@grapecity/spread-sheets/index.js', '@grapecity/spread-sheets-print': 'npm:@grapecity/spread-sheets-print/index.js', '@grapecity/spread-sheets-pdf': 'npm:@grapecity/spread-sheets-pdf/index.js', '@grapecity/spread-sheets-angular': 'npm:@grapecity/spread-sheets-angular/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);