You can export all sheets or a specified sheet with the savePDF method:
For each sheet, you can set detailed options by setting the sheet’s printInfo options:
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
createRoot(document.getElementById('app')).render(<AppFunc />);
// 2. Class Component sample
// createRoot(document.getElementById('app')).render(<App />);
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-print';
import '@mescius/spread-sheets-pdf';
import { SpreadSheets } from '@mescius/spread-sheets-react';
let spread = null;
export function AppFunc() {
const [pdfSetting, setPdfSetting] = React.useState({
rowStart: -1,
rowEnd: -1,
columnStart: -1,
columnEnd: 5,
repeatRowStart: 0,
repeatRowEnd: 1,
repeatColumnStart: -1,
repeatColumnEnd: -1,
showBorder: false,
showGridLine: false,
blackAndWhite: false,
showRowHeader: 1,
showColumnHeader: 1,
headerLeft: '',
headerLeftImage: '',
headerCenter: '',
headerCenterImage: '',
headerRight: '',
headerRightImage: '',
footerLeft: '',
footerLeftImage: '',
footerCenter: '',
footerCenterImage: '',
footerRight: '',
footerRightImage: ''
});
const footerRightImage = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
footerRightImage: value
});
}
const footerRight = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
footerRight: value
});
}
const footerCenterImage = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
footerCenterImage: value
});
}
const footerCenter = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
footerCenter: value
});
}
const footerLeftImage = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
footerLeftImage: value
});
}
const footerLeft = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
footerLeft: value
});
}
const headerRightImage = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
headerRightImage: value
});
}
const headerRight = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
headerRight: value
});
}
const headerCenterImage = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
headerCenterImage: value
});
}
const headerCenter = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
headerCenter: value
});
}
const headerLeftImage = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
headerLeftImage: value
});
}
const headerLeft = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
headerLeft: value
});
}
const showColumnHeader = (e) => {
let value = e.target.selectIndex;
setPdfSetting({
...pdfSetting,
showColumnHeader: value
});
}
const showRowHeader = (e) => {
let value = e.target.selectIndex;
setPdfSetting({
...pdfSetting,
showRowHeader: value
});
}
const blackAndWhite = (e) => {
let value = e.target.checked;
setPdfSetting({
...pdfSetting,
blackAndWhite: value
});
}
const showGridLine = (e) => {
let value = e.target.checked;
setPdfSetting({
...pdfSetting,
showGridLine: value
});
}
const showBorder = (e) => {
let value = e.target.checked;
setPdfSetting({
...pdfSetting,
showBorder: value
});
}
const repeatColumnStart = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
repeatColumnStart: value
});
}
const repeatColumnEnd = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
repeatColumnEnd: value
});
}
const repeatRowEnd = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
repeatRowEnd: value
});
}
const repeatRowStart = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
repeatRowStart: value
});
}
const rowStartChange = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
rowStart: value
});
}
const rowEndChange = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
rowEnd: value
});
}
const columnStart = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
columnStart: value
});
}
const columnEnd = (e) => {
let value = e.target.value;
setPdfSetting({
...pdfSetting,
columnEnd: value
});
}
const savePDF = () => {
spread.savePDF(function (blob) {
saveAs(blob, 'download.pdf');
}, console.log);
}
const initSpread = (currSpread) => {
spread = currSpread;
let sd = data;
if (sd && sd.sheets) {
if (!spread) {
return;
}
spread.suspendPaint();
spread.fromJSON(sd);
let sheet = spread.sheets[0];
sheet.suspendPaint();
adjustLayoutForPrint(sheet);
setPrintInfo(sheet);
sheet.resumePaint();
spread.resumePaint();
}
}
const adjustLayoutForPrint = (sheet) => {
sheet.setRowHeight(0, 30);
sheet.getRange(0, 0, 1, 5).hAlign(1).vAlign(1).font("bold 14px Times");
sheet.setColumnWidth(0, 220);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 50);
sheet.setColumnWidth(4, 180);
sheet.getRange(1, 0, 200, 5).textIndent(1);
sheet.getRange(-1, 3, -1, 1).hAlign(1).textIndent(0);
sheet.addColumns(0, 1);
sheet.setColumnWidth(0, 30);
for (let r = 5; r <= 200; r += 5) {
sheet.getCell(r, 0)
.text(r + '')
.font("normal 9px Times");
}
sheet.addRows(0, 1);
sheet.setRowHeight(0, 10);
sheet.getRange(1, 1, 202, 5).setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin), { all: true });
}
const setPrintInfo = (sheet) => {
let printInfo = sheet.printInfo();
// custom printInfo for default output
printInfo.showBorder(false);
printInfo.showGridLine(false);
printInfo.blackAndWhite(false);
printInfo.columnEnd(5);
printInfo.repeatRowStart(0);
printInfo.repeatRowEnd(1);
printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
printInfo.headerCenter("Olympic Athletes");
printInfo.headerLeft("&G");
printInfo.headerLeftImage("$DEMOROOT$/spread/source/images/olympic.jpg");
printInfo.footerCenter("&P/&N");
// sync with UI setting items
let stateInfo = {};
stateInfo.rowStart = printInfo.rowStart();
stateInfo.rowEnd = printInfo.rowEnd();
stateInfo.columnStart = printInfo.columnStart();
stateInfo.columnEnd = printInfo.columnEnd();
stateInfo.repeatRowStart = printInfo.repeatRowStart();
stateInfo.repeatRowEnd = printInfo.repeatRowEnd();
stateInfo.repeatColumnStart = printInfo.repeatColumnStart();
stateInfo.repeatColumnEnd = printInfo.repeatColumnEnd();
stateInfo.showBorder = printInfo.showBorder();
stateInfo.showGridLine = printInfo.showGridLine();
stateInfo.blackAndWhite = printInfo.blackAndWhite();
stateInfo.showRowHeader = printInfo.showRowHeader();
stateInfo.showColumnHeader = printInfo.showColumnHeader();
stateInfo.headerLeft = printInfo.headerLeft();
stateInfo.headerLeftImage = printInfo.headerLeftImage();
stateInfo.headerCenter = printInfo.headerCenter();
stateInfo.headerCenterImage = printInfo.headerCenterImage();
stateInfo.headerRight = printInfo.headerRight();
stateInfo.headerRightImage = printInfo.headerRightImage();
stateInfo.footerLeft = printInfo.footerLeft();
stateInfo.footerLeftImage = printInfo.footerLeftImage();
stateInfo.footerCenter = printInfo.footerCenter();
stateInfo.footerCenterImage = printInfo.footerCenterImage();
stateInfo.footerRight = printInfo.footerRight();
stateInfo.footerRightImage = printInfo.footerRightImage();
setPdfSetting({ ...pdfSetting, ...stateInfo });
}
const setPrintInfoBut = () => {
const stateInfo = pdfSetting;
function setPrintInfoNumberValueItem(printInfo, key) {
let value = parseInt(stateInfo[key]);
if (!isNaN(value)) {
printInfo[key](value);
}
}
let sheet = spread.getActiveSheet(),
printInfo = sheet.printInfo();
["rowStart", "rowEnd", "columnStart", "columnEnd",
"repeatRowStart", "repeatRowEnd", "repeatColumnStart", "repeatColumnEnd"
].forEach(function (name) {
setPrintInfoNumberValueItem(printInfo, name);
});
printInfo.showBorder(stateInfo.showBorder);
printInfo.showGridLine(stateInfo.showGridLine);
printInfo.blackAndWhite(stateInfo.blackAndWhite);
printInfo.showRowHeader(stateInfo.showRowHeader);
printInfo.showColumnHeader(stateInfo.showColumnHeader);
printInfo.headerLeft(stateInfo.headerLeft);
printInfo.headerLeftImage(stateInfo.headerLeftImage);
printInfo.headerCenter(stateInfo.headerCenter);
printInfo.headerCenterImage(stateInfo.headerCenterImage);
printInfo.headerRight(stateInfo.headerRight);
printInfo.headerRightImage(stateInfo.headerRightImage);
printInfo.footerLeft(stateInfo.footerLeft);
printInfo.footerLeftImage(stateInfo.footerLeftImage);
printInfo.footerCenter(stateInfo.footerCenter);
printInfo.footerCenterImage(stateInfo.footerCenterImage);
printInfo.footerRight(stateInfo.footerRight);
printInfo.footerRightImage(stateInfo.footerRightImage);
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={initSpread}>
</SpreadSheets>
</div>
<div class="options-container">
<div class="container">
<p>Adjust the options below then click the <b>Set PrintInfo</b> button to apply these options to the Spread PrintInfo.</p>
<p> Click the <b>Export PDF</b> button to see how these settings affect the way the workbook is saved to PDF.</p>
<div class="row">
<div class="group">
<label>RowStart:</label>
<input onChange={rowStartChange} id="rowStart" value={pdfSetting.rowStart} />
</div>
<div class="group">
<label>RowEnd:</label>
<input onChange={rowEndChange} id="rowEnd" value={pdfSetting.rowEnd} />
</div>
</div>
<div class="row">
<div class="group">
<label>ColumnStart:</label>
<input onChange={columnStart} id="columnStart" value={pdfSetting.columnStart} />
</div>
<div class="group">
<label>ColumnEnd:</label>
<input onChange={columnEnd} id="columnEnd" value={pdfSetting.columnEnd} />
</div>
</div>
<div class="row">
<div class="group">
<label>RepeatRowStart:</label>
<input onChange={repeatRowStart} id="repeatRowStart" value={pdfSetting.repeatRowStart} />
</div>
<div class="group">
<label>RepeatRowEnd:</label>
<input onChange={repeatRowEnd} id="repeatRowEnd" value={pdfSetting.repeatRowEnd} />
</div>
</div>
<div class="row">
<div class="group">
<label>RepeatColumnStart:</label>
<input onChange={repeatColumnStart} id="repeatColumnStart" value={pdfSetting.repeatColumnStart} />
</div>
<div class="group">
<label>RepeatColumnEnd:</label>
<input onChange={repeatColumnEnd} id="repeatColumnEnd" value={pdfSetting.repeatColumnEnd} />
</div>
</div>
<div class="row">
<div class="group">
<label>
<input onChange={showBorder} type="checkbox" id="showBorder" value={pdfSetting.showBorder} />
ShowBorder
</label>
</div>
<div class="group">
<label>
<input onChange={showGridLine} type="checkbox" id="showGridLine" value={pdfSetting.showGridLine} />
ShowGridLine
</label>
</div>
<div class="group">
<label>
<input onChange={blackAndWhite} type="checkbox" id="blackAndWhite" value={pdfSetting.blackAndWhite} />
Black And White
</label>
</div>
</div>
<div class="row">
<div class="group">
<label>ShowRowHeader:</label>
<select onChange={showRowHeader} id="showRowHeader" value={pdfSetting.showRowHeader}>
<option value="0">Inherit</option>
<option value="1">Hide</option>
<option value="2">Show</option>
<option value="3">ShowOnce</option>
</select>
</div>
<div class="group">
<label>ShowColumnHeader:</label>
<select id="showColumnHeader" onChange={showColumnHeader} value={pdfSetting.showColumnHeader}>
<option value="0">Inherit</option>
<option value="1">Hide</option>
<option value="2">Show</option>
<option value="3">ShowOnce</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>HeaderLeft:</label>
<input onChange={headerLeft} id="headerLeft" value={pdfSetting.headerLeft} />
</div>
<div class="group">
<label>HeaderLeftImage:</label>
<select id="headerLeftImage" onChange={headerLeftImage} value={pdfSetting.headerLeftImage}>
<option value="" style={{ display: "none" }}></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>HeaderCenter:</label>
<input id="headerCenter" onChange={headerCenter} value={pdfSetting.headerCenter} />
</div>
<div class="group">
<label>HeaderCenterImage:</label>
<select id="headerCenterImage" onChange={headerCenterImage} value={pdfSetting.headerCenterImage}>
<option value="" style={{ display: "none" }}></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>HeaderRight:</label>
<input onChange={headerRight} id="headerRight" value={pdfSetting.headerRight} />
</div>
<div class="group">
<label>HeaderRightImage:</label>
<select id="headerRightImage" onChange={headerRightImage} value={pdfSetting.headerRightImage}>
<option value="" style={{ display: "none" }}></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>FooterLeft:</label>
<input onChange={footerLeft} id="footerLeft" value={pdfSetting.footerLeft} />
</div>
<div class="group">
<label>FooterLeftImage:</label>
<select id="footerLeftImage" onChange={footerLeftImage} value={pdfSetting.footerLeftImage}>
<option value="" style={{ display: "none" }}></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>FooterCenter:</label>
<input onChange={footerCenter} id="footerCenter" value={pdfSetting.footerCenter} />
</div>
<div class="group">
<label>FooterCenterImage:</label>
<select id="footerCenterImage" onChange={footerCenterImage} value={pdfSetting.footerCenterImage}>
<option value="" style={{ display: "none" }}></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>FooterRight:</label>
<input onChange={footerRight} id="footerRight" value={pdfSetting.footerRight} />
</div>
<div class="group">
<label>FooterRightImage:</label>
<select id="footerRightImage" onChange={footerRightImage} value={pdfSetting.footerRightImage}>
<option value="" style={{ display: "none" }}></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label></label>
<input type="button" id="btnSetPrintInfo" value="Set PrintInfo" onClick={setPrintInfoBut} />
</div>
</div>
<hr style={{ border: '1px', solid: 'white', borderBottomColor: 'lightgray' }} />
<div>
<input type="button" style={{ marginBottom: "6px" }} value="Export PDF" id="savePDF" onClick={savePDF} />
</div>
</div>
</div>
</div>
);
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-print';
import '@mescius/spread-sheets-pdf';
import { SpreadSheets } from '@mescius/spread-sheets-react';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.showRowHeader = this.showRowHeader.bind(this);
this.rowStartChange = this.rowStartChange.bind(this);
this.footerRightImage = this.footerRightImage.bind(this);
this.footerRight = this.footerRight.bind(this);
this.footerCenterImage = this.footerCenterImage.bind(this);
this.footerCenter = this.footerCenter.bind(this);
this.footerLeftImage = this.footerLeftImage.bind(this);
this.footerLeftImage = this.footerLeftImage.bind(this);
this.footerLeft = this.footerLeft.bind(this);
this.headerRightImage = this.headerRightImage.bind(this);
this.headerRight = this.headerRight.bind(this);
this.headerCenterImage = this.headerCenterImage.bind(this);
this.headerCenter = this.headerCenter.bind(this);
this.headerLeftImage = this.headerLeftImage.bind(this);
this.headerLeft = this.headerLeft.bind(this);
this.showColumnHeader = this.showColumnHeader.bind(this);
this.blackAndWhite = this.blackAndWhite.bind(this);
this.showGridLine = this.showGridLine.bind(this);
this.showBorder = this.showBorder.bind(this);
this.repeatColumnStart = this.repeatColumnStart.bind(this);
this.repeatColumnEnd = this.repeatColumnEnd.bind(this);
this.repeatRowEnd = this.repeatRowEnd.bind(this);
this.repeatRowStart = this.repeatRowStart.bind(this);
this.rowEndChange = this.rowEndChange.bind(this);
this.columnStart = this.columnStart.bind(this);
this.columnEnd = this.columnEnd.bind(this);
this.setPrintInfoBut = this.setPrintInfoBut.bind(this);
this.savePDF = this.savePDF.bind(this);
this.state = {
rowStart: -1,
rowEnd: -1,
columnStart: -1,
columnEnd: 5,
repeatRowStart: 0,
repeatRowEnd: 1,
repeatColumnStart: -1,
repeatColumnEnd: -1,
showBorder: false,
showGridLine: false,
blackAndWhite: false,
showRowHeader: 1,
showColumnHeader: 1,
headerLeft: '',
headerLeftImage: '',
headerCenter: '',
headerCenterImage: '',
headerRight: '',
headerRightImage: '',
footerLeft: '',
footerLeftImage: '',
footerCenter: '',
footerCenterImage: '',
footerRight: '',
footerRightImage: ''
}
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
</SpreadSheets>
</div>
<div class="options-container">
<div class="container">
<p>Adjust the options below then click the <b>Set PrintInfo</b> button to apply these options to the Spread PrintInfo.</p>
<p> Click the <b>Export PDF</b> button to see how these settings affect the way the workbook is saved to PDF.</p>
<div class="row">
<div class="group">
<label>RowStart:</label>
<input onChange={(e) => { this.rowStartChange(e) }} id="rowStart" value={this.state.rowStart} />
</div>
<div class="group">
<label>RowEnd:</label>
<input onChange={(e) => { this.rowEndChange(e) }} id="rowEnd" value={this.state.rowEnd} />
</div>
</div>
<div class="row">
<div class="group">
<label>ColumnStart:</label>
<input onChange={(e) => { this.columnStart(e) }} id="columnStart" value={this.state.columnStart} />
</div>
<div class="group">
<label>ColumnEnd:</label>
<input onChange={(e) => { this.columnEnd(e) }} id="columnEnd" value={this.state.columnEnd} />
</div>
</div>
<div class="row">
<div class="group">
<label>RepeatRowStart:</label>
<input onChange={(e) => { this.repeatRowStart(e) }} id="repeatRowStart" value={this.state.repeatRowStart} />
</div>
<div class="group">
<label>RepeatRowEnd:</label>
<input onChange={(e) => { this.repeatRowEnd(e) }} id="repeatRowEnd" value={this.state.repeatRowEnd} />
</div>
</div>
<div class="row">
<div class="group">
<label>RepeatColumnStart:</label>
<input onChange={(e) => { this.repeatColumnStart(e) }} id="repeatColumnStart" value={this.state.repeatColumnStart} />
</div>
<div class="group">
<label>RepeatColumnEnd:</label>
<input onChange={(e) => { this.repeatColumnEnd(e) }} id="repeatColumnEnd" value={this.state.repeatColumnEnd} />
</div>
</div>
<div class="row">
<div class="group">
<label>
<input onChange={(e) => { this.showBorder(e) }} type="checkbox" id="showBorder" value={this.state.showBorder} />
ShowBorder
</label>
</div>
<div class="group">
<label>
<input onChange={(e) => { this.showGridLine(e) }} type="checkbox" id="showGridLine" value={this.state.showGridLine} />
ShowGridLine
</label>
</div>
<div class="group">
<label>
<input onChange={(e) => { this.blackAndWhite(e) }} type="checkbox" id="blackAndWhite" value={this.state.blackAndWhite} />
Black And White
</label>
</div>
</div>
<div class="row">
<div class="group">
<label>ShowRowHeader:</label>
<select onChange={(e) => { this.showRowHeader(e) }} id="showRowHeader" value={this.state.showRowHeader}>
<option value="0">Inherit</option>
<option value="1">Hide</option>
<option value="2">Show</option>
<option value="3">ShowOnce</option>
</select>
</div>
<div class="group">
<label>ShowColumnHeader:</label>
<select id="showColumnHeader" onChange={(e) => { this.showColumnHeader(e) }} value={this.state.showColumnHeader}>
<option value="0">Inherit</option>
<option value="1">Hide</option>
<option value="2">Show</option>
<option value="3">ShowOnce</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>HeaderLeft:</label>
<input onChange={(e) => { this.headerLeft(e) }} id="headerLeft" value={this.state.headerLeft} />
</div>
<div class="group">
<label>HeaderLeftImage:</label>
<select id="headerLeftImage" onChange={(e) => { this.headerLeftImage(e) }} value={this.state.headerLeftImage}>
<option value="" style={{ display: "none" }}></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>HeaderCenter:</label>
<input id="headerCenter" onChange={(e) => { this.headerCenter(e) }} value={this.state.headerCenter} />
</div>
<div class="group">
<label>HeaderCenterImage:</label>
<select id="headerCenterImage" onChange={(e) => { this.headerCenterImage(e) }} value={this.state.headerCenterImage}>
<option value="" style={{ display: "none" }}></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>HeaderRight:</label>
<input onChange={(e) => { this.headerRight(e) }} id="headerRight" value={this.state.headerRight} />
</div>
<div class="group">
<label>HeaderRightImage:</label>
<select id="headerRightImage" onChange={(e) => { this.headerRightImage(e) }} value={this.state.headerRightImage}>
<option value="" style={{ display: "none" }}></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>FooterLeft:</label>
<input onChange={(e) => { this.footerLeft(e) }} id="footerLeft" value={this.state.footerLeft} />
</div>
<div class="group">
<label>FooterLeftImage:</label>
<select id="footerLeftImage" onChange={(e) => { this.footerLeftImage(e) }} value={this.state.footerLeftImage}>
<option value="" style={{ display: "none" }}></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>FooterCenter:</label>
<input onChange={(e) => { this.footerCenter(e) }} id="footerCenter" value={this.state.footerCenter} />
</div>
<div class="group">
<label>FooterCenterImage:</label>
<select id="footerCenterImage" onChange={(e) => { this.footerCenterImage(e) }} value={this.state.footerCenterImage}>
<option value="" style={{ display: "none" }}></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>FooterRight:</label>
<input onChange={(e) => { this.footerRight(e) }} id="footerRight" value={this.state.footerRight} />
</div>
<div class="group">
<label>FooterRightImage:</label>
<select id="footerRightImage" onChange={(e) => { this.footerRightImage(e) }} value={this.state.footerRightImage}>
<option value="" style={{ display: "none" }}></option>
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label></label>
<input type="button" id="btnSetPrintInfo" value="Set PrintInfo" onClick={this.setPrintInfoBut} />
</div>
</div>
<hr style={{ border: '1px', solid: 'white', borderBottomColor: 'lightgray' }} />
<div>
<input type="button" style={{ marginBottom: "6px" }} value="Export PDF" id="savePDF" onClick={this.savePDF} />
</div>
</div>
</div>
</div>
)
}
footerRightImage(e) {
let value = e.target.value;
this.setState({
footerRightImage: value
});
}
footerRight(e) {
let value = e.target.value;
this.setState({
footerRight: value
});
}
footerCenterImage(e) {
let value = e.target.value;
this.setState({
footerCenterImage: value
});
}
footerCenter(e) {
let value = e.target.value;
this.setState({
footerCenter: value
});
}
footerLeftImage(e) {
let value = e.target.value;
this.setState({
footerLeftImage: value
});
}
footerLeft(e) {
let value = e.target.value;
this.setState({
footerLeft: value
});
}
headerRightImage(e) {
let value = e.target.value;
this.setState({
headerRightImage: value
});
}
headerRight(e) {
let value = e.target.value;
this.setState({
headerRight: value
});
}
headerCenterImage(e) {
let value = e.target.value;
this.setState({
headerCenterImage: value
});
}
headerCenter(e) {
let value = e.target.value;
this.setState({
headerCenter: value
});
}
headerLeftImage(e) {
let value = e.target.value;
this.setState({
headerLeftImage: value
});
}
headerLeft(e) {
let value = e.target.value;
this.setState({
headerLeft: value
});
}
showColumnHeader(e) {
let value = e.target.selectIndex;
this.setState({
showColumnHeader: value
});
}
showRowHeader(e) {
let value = e.target.selectIndex;
this.setState({
showRowHeader: value
});
}
blackAndWhite(e) {
let value = e.target.checked;
this.setState({
blackAndWhite: value
});
}
showGridLine(e) {
let value = e.target.checked;
this.setState({
showGridLine: value
});
}
showBorder(e) {
let value = e.target.checked;
this.setState({
showBorder: value
});
}
repeatColumnStart(e) {
let value = e.target.value;
this.setState({
repeatColumnStart: value
});
}
repeatColumnEnd(e) {
let value = e.target.value;
this.setState({
repeatColumnEnd: value
});
}
repeatRowEnd(e) {
let value = e.target.value;
this.setState({
repeatRowEnd: value
});
}
repeatRowStart(e) {
let value = e.target.value;
this.setState({
repeatRowStart: value
});
}
rowStartChange(e) {
let value = e.target.value;
this.setState({
rowStart: value
});
}
rowEndChange(e) {
let value = e.target.value;
this.setState({
rowEnd: value
});
}
columnStart(e) {
let value = e.target.value;
this.setState({
columnStart: value
});
}
columnEnd(e) {
let value = e.target.value;
this.setState({
columnEnd: value
});
}
savePDF() {
this.spread.savePDF(function (blob) {
saveAs(blob, 'download.pdf');
}, console.log);
}
initSpread(spread) {
this.spread = spread;
let sd = data;
if (sd && sd.sheets) {
if (!spread) {
return;
}
spread.suspendPaint();
spread.fromJSON(sd);
let sheet = spread.sheets[0];
sheet.suspendPaint();
this.adjustLayoutForPrint(sheet);
this.setPrintInfo(sheet);
sheet.resumePaint();
spread.resumePaint();
}
}
adjustLayoutForPrint(sheet) {
sheet.setRowHeight(0, 30);
sheet.getRange(0, 0, 1, 5).hAlign(1).vAlign(1).font("bold 14px Times");
sheet.setColumnWidth(0, 220);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 50);
sheet.setColumnWidth(4, 180);
sheet.getRange(1, 0, 200, 5).textIndent(1);
sheet.getRange(-1, 3, -1, 1).hAlign(1).textIndent(0);
sheet.addColumns(0, 1);
sheet.setColumnWidth(0, 30);
for (let r = 5; r <= 200; r += 5) {
sheet.getCell(r, 0)
.text(r + '')
.font("normal 9px Times");
}
sheet.addRows(0, 1);
sheet.setRowHeight(0, 10);
sheet.getRange(1, 1, 202, 5).setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin), { all: true });
}
setPrintInfo(sheet) {
let printInfo = sheet.printInfo();
// custom printInfo for default output
printInfo.showBorder(false);
printInfo.showGridLine(false);
printInfo.blackAndWhite(false);
printInfo.columnEnd(5);
printInfo.repeatRowStart(0);
printInfo.repeatRowEnd(1);
printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
printInfo.headerCenter("Olympic Athletes");
printInfo.headerLeft("&G");
printInfo.headerLeftImage("$DEMOROOT$/spread/source/images/olympic.jpg");
printInfo.footerCenter("&P/&N");
// sync with UI setting items
let stateInfo = {};
stateInfo.rowStart = printInfo.rowStart();
stateInfo.rowEnd = printInfo.rowEnd();
stateInfo.columnStart = printInfo.columnStart();
stateInfo.columnEnd = printInfo.columnEnd();
stateInfo.repeatRowStart = printInfo.repeatRowStart();
stateInfo.repeatRowEnd = printInfo.repeatRowEnd();
stateInfo.repeatColumnStart = printInfo.repeatColumnStart();
stateInfo.repeatColumnEnd = printInfo.repeatColumnEnd();
stateInfo.showBorder = printInfo.showBorder();
stateInfo.showGridLine = printInfo.showGridLine();
stateInfo.blackAndWhite = printInfo.blackAndWhite();
stateInfo.showRowHeader = printInfo.showRowHeader();
stateInfo.showColumnHeader = printInfo.showColumnHeader();
stateInfo.headerLeft = printInfo.headerLeft();
stateInfo.headerLeftImage = printInfo.headerLeftImage();
stateInfo.headerCenter = printInfo.headerCenter();
stateInfo.headerCenterImage = printInfo.headerCenterImage();
stateInfo.headerRight = printInfo.headerRight();
stateInfo.headerRightImage = printInfo.headerRightImage();
stateInfo.footerLeft = printInfo.footerLeft();
stateInfo.footerLeftImage = printInfo.footerLeftImage();
stateInfo.footerCenter = printInfo.footerCenter();
stateInfo.footerCenterImage = printInfo.footerCenterImage();
stateInfo.footerRight = printInfo.footerRight();
stateInfo.footerRightImage = printInfo.footerRightImage();
this.setState(stateInfo);
}
setPrintInfoBut() {
const stateInfo = this.state;
function setPrintInfoNumberValueItem(printInfo, key) {
let value = parseInt(stateInfo[key]);
if (!isNaN(value)) {
printInfo[key](value);
}
}
let sheet = this.spread.getActiveSheet(),
printInfo = sheet.printInfo();
["rowStart", "rowEnd", "columnStart", "columnEnd",
"repeatRowStart", "repeatRowEnd", "repeatColumnStart", "repeatColumnEnd"
].forEach(function (name) {
setPrintInfoNumberValueItem(printInfo, name);
});
printInfo.showBorder(stateInfo.showBorder);
printInfo.showGridLine(stateInfo.showGridLine);
printInfo.blackAndWhite(stateInfo.blackAndWhite);
printInfo.showRowHeader(stateInfo.showRowHeader);
printInfo.showColumnHeader(stateInfo.showColumnHeader);
printInfo.headerLeft(stateInfo.headerLeft);
printInfo.headerLeftImage(stateInfo.headerLeftImage);
printInfo.headerCenter(stateInfo.headerCenter);
printInfo.headerCenterImage(stateInfo.headerCenterImage);
printInfo.headerRight(stateInfo.headerRight);
printInfo.headerRightImage(stateInfo.headerRightImage);
printInfo.footerLeft(stateInfo.footerLeft);
printInfo.footerLeftImage(stateInfo.footerLeftImage);
printInfo.footerCenter(stateInfo.footerCenter);
printInfo.footerCenterImage(stateInfo.footerCenterImage);
printInfo.footerRight(stateInfo.footerRight);
printInfo.footerRightImage(stateInfo.footerRightImage);
}
}
<!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">
<script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/exportPDF.js" type="text/javascript"></script>
<!-- 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" 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;
}
.container {
width: 100%;
height: calc(100% - 40px);
box-sizing: border-box;
}
.group {
padding-bottom: 8px;
}
label {
display: inline-block;
min-width: 130px;
}
input,
select {
margin-top: 6px;
padding: 4px 6px;
width: 100%;
display: block;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
display: inline-block;
}
hr {
border: 1px solid white;
border-bottom-color: lightgray;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(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': '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-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/cjs/react.production.js',
'react-dom': 'npm:react-dom/cjs/react-dom.production.js',
'react-dom/client': 'npm:react-dom/cjs/react-dom-client.production.js',
'scheduler': 'npm:scheduler/cjs/scheduler.production.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);
