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.

JavaScript
Angular
Vue3
React
Description
app.vue
index.html
Copy to CodeMine

To use the PDF Export feature, add a link to the JavaScript files in the document's head section below the link to SpreadJS:

<head>
   ...
   <script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script>
   <script src='.../spreadjs/plugins/gc.spread.sheets.print.x.x.x.min.js' type='text/javascript'></script>
   <script src='.../spreadjs/plugins/gc.spread.sheets.pdf.x.x.x.min.js' type='text/javascript'></script>
</head>

To export the PDF file, you can use the spread.savePDF() method:

    spread.savePDF(successCallback: Function, errorCallback: Function, options?: Object, sheetIndex?: number?)

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:

    spread.savePDF(function (blob) {
        var fileName = $('#fileName').val() || 'download';
        saveAs(blob, fileName + '.pdf'); // Use the https://github.com/eligrey/FileSaver.js to save file directly.
    }, function (error) {
        console.log(error);
    }, {
        title: 'Test Title',
        author: 'Test Author',
        subject: 'Test Subject',
        keywords: 'Test Keywords',
        creator: 'test Creator'
    });

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

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 setup> import GC from "@mescius/spread-sheets"; import { ref } from "vue"; import "@mescius/spread-sheets-print"; import "@mescius/spread-sheets-pdf"; import "@mescius/spread-sheets-vue"; const spreadRef = ref(null); const exportPDF = () => { spreadRef.value.savePDF( function (blob) { saveAs(blob, "download.pdf"); }, console.log, { title: "Test Title", author: "Test Author", subject: "Test Subject", keywords: "Test Keywords", creator: "test Creator", } ); }; const initSpread = (spread) => { spreadRef.value = spread; let sheet = spread.getActiveSheet(); sheet.suspendPaint(); let style = new GC.Spread.Sheets.Style(); style.font = "15px Times"; sheet.setDefaultStyle(style); addPieContent(sheet); 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(); }; const 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"); }; const 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")' ); }; </script> <style scoped> .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; } #app { height: 100%; } </style>
<!DOCTYPE html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>SpreadJS VUE</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script> <script src="./systemjs.config.js"></script> <script src="./compiler.js" type="module"></script> <script> var System = SystemJS; System.import("./src/app.js"); System.import('$DEMOROOT$/en/lib/vue3/license.js'); </script> </head> <body> <div id="app"></div> </body> </html>
(function (global) { SystemJS.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, packageConfigPaths: [ './node_modules/*/package.json', "./node_modules/@mescius/*/package.json", "./node_modules/@babel/*/package.json", "./node_modules/@vue/*/package.json" ], map: { 'vue': "npm:vue/dist/vue.esm-browser.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", '@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' }, meta: { '*.css': { loader: 'systemjs-plugin-css' }, '*.vue': { loader: "../plugin-vue/index.js" } } }); })(this);