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
<template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread"> </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" v-on:click='exportPDF()' /> </div> </div> </div> </template> <script> import Vue from 'vue'; import '@mescius/spread-sheets-vue' import GC from '@mescius/spread-sheets'; import '@mescius/spread-sheets-print'; import '@mescius/spread-sheets-pdf'; import './styles.css'; let App = Vue.extend({ name: "app", data: function () { return { autoGenerateColumns: false, spread: null }; }, methods: { exportPDF() { this.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' }); }, initSpread(spread) { this.spread = spread; let sheet = spread.getActiveSheet(); sheet.suspendPaint(); let style = new GC.Spread.Sheets.Style(); style.font = '15px Times'; sheet.setDefaultStyle(style); this.addPieContent(sheet); this.addTableContent(sheet); let printInfo = sheet.printInfo(); printInfo.showBorder(true); printInfo.showGridLine(true); printInfo.headerCenter("Family Business Costs"); printInfo.headerLeft("&G"); printInfo.footerCenter("&P/&N"); sheet.resumePaint(); }, addTableContent(sheet) { sheet.addSpan(1, 0, 1, 7); sheet.setRowHeight(1, 40); sheet.getCell(1, 0).value("Costs").font("28px Times").foreColor("#11114f").hAlign(GC.Spread.Sheets.HorizontalAlign.left).vAlign(GC.Spread.Sheets.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(GC.Spread.Sheets.HorizontalAlign.left).vAlign(GC.Spread.Sheets.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(GC.Spread.Sheets.HorizontalAlign.left).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.setColumnWidth(1, 70); sheet.getCell(3, 1).value("2018").font("Bold 15px Times").foreColor("#171717").backColor("#dfe9fb").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.setColumnWidth(2, 70); sheet.getCell(3, 2).value("2019").font("Bold 15px Times").foreColor("#171717").backColor("#d1dffa").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.setColumnWidth(3, 70); sheet.getCell(3, 3).value("2020").font("Bold 15px Times").foreColor("#171717").backColor("#9bbaf3").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.setColumnWidth(4, 70); sheet.getCell(3, 4).value("2021").font("Bold 15px Times").foreColor("#ffffff").backColor("#5c7ee6").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.setColumnWidth(5, 70); sheet.getCell(3, 5).value("2022").font("Bold 15px Times").foreColor("#ffffff").backColor("#1346a4").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.setColumnWidth(6, 70); sheet.getCell(3, 6).value("Total").font("Bold 15px Times").foreColor("#ffffff").backColor("#102565").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(4, 0).value("Salaries").foreColor("#171717").backColor("#ffffff").vAlign(GC.Spread.Sheets.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(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(4, 2).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(4, 3).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(4, 4).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(4, 5).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(4, 6).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(5, 0).value("Consulting").foreColor("#171717").backColor("#ffffff").vAlign(GC.Spread.Sheets.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(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(5, 2).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(5, 3).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(5, 4).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(5, 5).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(5, 6).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(6, 0).value("Hardware").foreColor("#171717").backColor("#ffffff").vAlign(GC.Spread.Sheets.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(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(6, 2).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(6, 3).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(6, 4).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(6, 5).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(6, 6).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(7, 0).value("Software").foreColor("#171717").backColor("#ffffff").vAlign(GC.Spread.Sheets.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(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(7, 2).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(7, 3).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(7, 4).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(7, 5).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(7, 6).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(8, 0).value("Training").foreColor("#171717").backColor("#ffffff").vAlign(GC.Spread.Sheets.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(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(8, 2).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(8, 3).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(8, 4).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(8, 5).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(8, 6).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(9, 0).value("Travel").foreColor("#171717").backColor("#ffffff").vAlign(GC.Spread.Sheets.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(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(9, 2).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(9, 3).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(9, 4).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(9, 5).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(9, 6).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(10, 0).value("Other").foreColor("#171717").backColor("#ffffff").vAlign(GC.Spread.Sheets.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(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(10, 2).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(10, 3).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(10, 4).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(10, 5).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(10, 6).foreColor("#171717").backColor("#ffffff").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.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"); }, addPieContent(sheet) { sheet.addSpan(12, 0, 1, 4); sheet.getCell(12, 0).value("Total Costs").font("15px Times").foreColor("#11114f").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.addSpan(13, 0, 9, 4); sheet.setFormula(13, 0, '=PIESPARKLINE(G5:G11,"#dfe9fb","#d1dffa","#9bbaf3","#5c7ee6","#1346a4","#102565", "#ededed")'); }, }, computed: { dataSource() { return getData(); } } }); new Vue({ render: h => h(App) }).$mount('#app'); </script>
<!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/vue/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script> <!-- SystemJS --> <script src="$DEMOROOT$/en/vue/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); System.import('$DEMOROOT$/en/lib/vue/license.js'); </script> </head> <body> <div id="app" style="height: 100%;"></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; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: 'vue-loader' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-print': 'npm:@mescius/spread-sheets-print/index.js', '@mescius/spread-sheets-pdf': 'npm:@mescius/spread-sheets-pdf/index.js', '@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.min.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', 'tiny-emitter': 'npm:tiny-emitter/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' } } }); })(this);