Overview

You can print a single sheet or all of the sheets in SpreadJS using the print plugin. This makes it easy to give users the ability to print the SpreadJS instance, which can be particularly useful if there is some sort of dashboard or form where they have entered information and want a physical copy.

In order to use the print feature, add the JS file link into the document's head section below the SpreadJS link. For example: Then you can use the print feature by using the print method. It is defined as: where the optional parameter sheetIndex tells which sheet to print (omit for printing all sheets). For example you can print all sheets with the following code:
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import './styles.css'; import { AppFunc } from './app-func'; import { App } from './app-class'; // 1. Functional Component sample ReactDOM.render(<AppFunc />, document.getElementById('app')); // 2. Class Component sample // ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import GC from '@mescius/spread-sheets'; import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react'; import '@mescius/spread-sheets-print'; import './styles.css'; const Component = React.Component; export function AppFunc() { let spread = null; let initSpread = function (value) { spread = value; let sheet = spread.getActiveSheet(); sheet.suspendPaint(); sheet.options.allowCellOverflow = true; sheet.name("Demo"); sheet.addSpan(1, 1, 1, 1); sheet.setValue(1, 1, "Month"); sheet.setValue(2, 1, "January"); sheet.setValue(3, 1, "February"); sheet.setValue(4, 1, "March"); sheet.setValue(5, 1, "April"); sheet.setValue(6, 1, "May"); sheet.setValue(7, 1, "June"); sheet.setValue(8, 1, "July"); sheet.setValue(9, 1, "August"); sheet.setValue(10, 1, "September"); sheet.setValue(11, 1, "October"); sheet.setValue(12, 1, "November"); sheet.setValue(13, 1, "December"); sheet.addSpan(1, 2, 1, 1); sheet.setValue(1, 2, "Quantity"); sheet.setValue(2, 2, 60); sheet.setValue(3, 2, 100); sheet.setValue(4, 2, 110); sheet.setValue(5, 2, 90); sheet.setValue(6, 2, 112); sheet.setValue(7, 2, 137); sheet.setValue(8, 2, 80); sheet.setValue(9, 2, 88); sheet.setValue(10, 2, 118); sheet.setValue(11, 2, 122); sheet.setValue(12, 2, 130); sheet.setValue(13, 2, 135); sheet.addSpan(1, 3, 1, 1); sheet.setValue(1, 3, "Price"); sheet.setValue(2, 3, 30.0); sheet.setValue(3, 3, 45.0); sheet.setValue(4, 3, 10.0); sheet.setValue(5, 3, 99.9); sheet.setValue(6, 3, 89.0); sheet.setValue(7, 3, 150.0); sheet.setValue(8, 3, 35.0); sheet.setValue(9, 3, 59.9); sheet.setValue(10, 3, 47.9); sheet.setValue(11, 3, 55.0); sheet.setValue(12, 3, 32.0); sheet.setValue(13, 3, 20.0); sheet.addSpan(1, 4, 1, 1); sheet.setValue(1, 4, "Total"); sheet.setFormula(2, 4, "=C3*D3"); sheet.setFormula(3, 4, "=C4*D4"); sheet.setFormula(4, 4, "=C5*D5"); sheet.setFormula(5, 4, "=C6*D6"); sheet.setFormula(6, 4, "=C7*D7"); sheet.setFormula(7, 4, "=C8*D8"); sheet.setFormula(8, 4, "=C9*D9"); sheet.setFormula(9, 4, "=C10*D10"); sheet.setFormula(10, 4, "=C11*D11"); sheet.setFormula(11, 4, "=C12*D12"); sheet.setFormula(12, 4, "=C13*D13"); sheet.setFormula(13, 4, "=C14*D14"); // set column width sheet.setColumnWidth(0, 50); sheet.setColumnWidth(1, 100); sheet.setColumnWidth(2, 60); sheet.setColumnWidth(3, 60); sheet.setColumnWidth(4, 90); sheet.setColumnWidth(5, 50); //set alignment sheet.getRange(1, 1, 1, 4).hAlign(GC.Spread.Sheets.HorizontalAlign.center) //set formatter sheet.getRange(2, 3, 12, 1).formatter("$ #,##0"); sheet.getRange(2, 4, 12, 1).formatter("$ #,##0"); //set color sheet.getRange(1, 1, 1, 4).backColor("#69a569").foreColor("white"); //set lineBorder sheet.getRange(2, 1, 12, 4).setBorder(new GC.Spread.Sheets.LineBorder("#A8A9AD", GC.Spread.Sheets.LineStyle.dotted), { all: true }); addFigures(sheet); sheet.resumePaint(); } let handelPrint = function () { // used to adjust print range, should set with printInfo (refer custom print for detail) spread.sheets[0].setText(31, 8, " "); spread.print(); } let addFigures = function (sheet) { sheet.getRange(20, -1, 1, -1).visible(false); sheet.addSpan(4, 6, 6, 3); sheet.setFormula(4, 6, '=PIESPARKLINE(E3:E7, "#e6f0e6","#c9dec9","#a3c8a3","#73ab73","#d1ffd1")'); sheet.addSpan(10, 6, 1, 3); sheet.getCell(10, 6).text("Figure 1").hAlign(1); } return (<div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => initSpread(spread)}> <Worksheet /> </SpreadSheets> </div> <Panel handelPrint={(e) => { handelPrint(e) }} /> </div>); } class Panel extends Component { constructor(props) { super(props); } render() { return ( <div class="options-container"> <div class="option-row"> <input type="button" value="Print" id="btnPrint" onClick={(e) => { this.props.handelPrint() }} /> </div> </div> ) } }
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import GC from '@mescius/spread-sheets'; import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react'; import '@mescius/spread-sheets-print'; import './styles.css'; const Component = React.Component; function _getElementById(id) { return document.getElementById(id); } export class App extends Component { constructor(props) { super(props); } render() { return (<div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}> <Worksheet /> </SpreadSheets> </div> <Panel handelPrint={(e) => { this.handelPrint(e) }} /> </div>); } initSpread(spread) { this.spread = spread; let sheet = spread.getActiveSheet(); sheet.suspendPaint(); sheet.options.allowCellOverflow = true; sheet.name("Demo"); sheet.addSpan(1, 1, 1, 1); sheet.setValue(1, 1, "Month"); sheet.setValue(2, 1, "January"); sheet.setValue(3, 1, "February"); sheet.setValue(4, 1, "March"); sheet.setValue(5, 1, "April"); sheet.setValue(6, 1, "May"); sheet.setValue(7, 1, "June"); sheet.setValue(8, 1, "July"); sheet.setValue(9, 1, "August"); sheet.setValue(10, 1, "September"); sheet.setValue(11, 1, "October"); sheet.setValue(12, 1, "November"); sheet.setValue(13, 1, "December"); sheet.addSpan(1, 2, 1, 1); sheet.setValue(1, 2, "Quantity"); sheet.setValue(2, 2, 60); sheet.setValue(3, 2, 100); sheet.setValue(4, 2, 110); sheet.setValue(5, 2, 90); sheet.setValue(6, 2, 112); sheet.setValue(7, 2, 137); sheet.setValue(8, 2, 80); sheet.setValue(9, 2, 88); sheet.setValue(10, 2, 118); sheet.setValue(11, 2, 122); sheet.setValue(12, 2, 130); sheet.setValue(13, 2, 135); sheet.addSpan(1, 3, 1, 1); sheet.setValue(1, 3, "Price"); sheet.setValue(2, 3, 30.0); sheet.setValue(3, 3, 45.0); sheet.setValue(4, 3, 10.0); sheet.setValue(5, 3, 99.9); sheet.setValue(6, 3, 89.0); sheet.setValue(7, 3, 150.0); sheet.setValue(8, 3, 35.0); sheet.setValue(9, 3, 59.9); sheet.setValue(10, 3, 47.9); sheet.setValue(11, 3, 55.0); sheet.setValue(12, 3, 32.0); sheet.setValue(13, 3, 20.0); sheet.addSpan(1, 4, 1, 1); sheet.setValue(1, 4, "Total"); sheet.setFormula(2, 4, "=C3*D3"); sheet.setFormula(3, 4, "=C4*D4"); sheet.setFormula(4, 4, "=C5*D5"); sheet.setFormula(5, 4, "=C6*D6"); sheet.setFormula(6, 4, "=C7*D7"); sheet.setFormula(7, 4, "=C8*D8"); sheet.setFormula(8, 4, "=C9*D9"); sheet.setFormula(9, 4, "=C10*D10"); sheet.setFormula(10, 4, "=C11*D11"); sheet.setFormula(11, 4, "=C12*D12"); sheet.setFormula(12, 4, "=C13*D13"); sheet.setFormula(13, 4, "=C14*D14"); // set column width sheet.setColumnWidth(0, 50); sheet.setColumnWidth(1, 100); sheet.setColumnWidth(2, 60); sheet.setColumnWidth(3, 60); sheet.setColumnWidth(4, 90); sheet.setColumnWidth(5, 50); //set alignment sheet.getRange(1, 1, 1, 4).hAlign(GC.Spread.Sheets.HorizontalAlign.center) //set formatter sheet.getRange(2, 3, 12, 1).formatter("$ #,##0"); sheet.getRange(2, 4, 12, 1).formatter("$ #,##0"); //set color sheet.getRange(1, 1, 1, 4).backColor("#69a569").foreColor("white"); //set lineBorder sheet.getRange(2, 1, 12, 4).setBorder(new GC.Spread.Sheets.LineBorder("#A8A9AD", GC.Spread.Sheets.LineStyle.dotted), { all: true }); this.addFigures(sheet); sheet.resumePaint(); } handelPrint() { // used to adjust print range, should set with printInfo (refer custom print for detail) this.spread.sheets[0].setText(31, 8, " "); this.spread.print(); } addFigures(sheet) { sheet.getRange(20, -1, 1, -1).visible(false); sheet.addSpan(4, 6, 6, 3); sheet.setFormula(4, 6, '=PIESPARKLINE(E3:E7, "#e6f0e6","#c9dec9","#a3c8a3","#73ab73","#d1ffd1")'); sheet.addSpan(10, 6, 1, 3); sheet.getCell(10, 6).text("Figure 1").hAlign(1); } } class Panel extends Component { constructor(props) { super(props); } render() { return ( <div class="options-container"> <div class="option-row"> <input type="button" value="Print" id="btnPrint" onClick={(e) => { this.props.handelPrint() }} /> </div> </div> ) } }
<!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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- SystemJS --> <script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('$DEMOROOT$/en/lib/react/license.js').then(function () { System.import('./src/app'); }); </script> </head> <body> <div id="app"></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; } #app { height: 100%; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/spread-sheets-print': 'npm:@mescius/spread-sheets-print/index.js', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'react': 'npm:react/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.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' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);