A custom font can be registered with the PDFFontsManager.registerFont function. When you set the cell's style as the customer font, SpreadJS will register that font when exporting to PDF.
Override the PDFFontsManager.fallbackFont function to provide a custom font file for the specific font string:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-print';
import '@mescius/spread-sheets-pdf';
import { SpreadSheets } from '@mescius/spread-sheets-react';
import './styles.css';
const Component = React.Component;
function _getElementById(id) {
return document.getElementById(id);
}
class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.autoGenerateColumns = false;
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
</SpreadSheets>
</div>
<Panel exportPDF={(e) => { this.exportPDF(e) }} />
</div>
)
}
exportPDF() {
this.spread.savePDF(function (blob) {
saveAs(blob, 'download.pdf');
}, console.log);
}
initSpread(spread) {
this.spread = spread;
let data = report, fontsObj = fonts;
spread.fromJSON(data);
let sheet = spread.getActiveSheet();
sheet.setColumnWidth(0, 50);
sheet.setColumnWidth(1, 120);
sheet.setColumnWidth(2, 60);
sheet.setColumnWidth(3, 60);
// register the specific custom font
this.registerCustomFont(fontsObj);
// add custom font to fontManager
this.addFontsToFontManager(fontsObj);
// setting printInfo
this.setPrintInfo(spread);
}
registerCustomFont(fontsObj) {
let fonts = {
normal: fontsObj["simkai.ttf"]
};
GC.Spread.Sheets.PDF.PDFFontsManager.registerFont('simkai', fonts);
}
addFontsToFontManager(fontsObj) {
let fonts = {
normal: fontsObj["MTCORSVA.TTF"]
};
GC.Spread.Sheets.PDF.PDFFontsManager.fallbackFont = function (font) {
let fontInfoArray = font.split(' '), fontName = fontInfoArray[fontInfoArray.length - 1];
if (fontName === 'mtcorsva') {
return fonts.normal;
}
}
}
setPrintInfo(spread) {
let sheet = spread.getActiveSheet();
let printInfo = sheet.printInfo();
printInfo.showBorder(true);
printInfo.showGridLine(false);
printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
printInfo.centering(GC.Spread.Sheets.Print.PrintCentering.horizontal);
}
}
class Panel extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div class="options-container">
<p>Click this button to save the workbook in Spread with its own custom fonts to a PDF file.</p>
<div class="option-row">
<input type="button" value="Export PDF" id="savePDF" onClick={() => { this.props.exportPDF() }} />
</div>
</div>
)
}
}
ReactDOM.render(<App />, _getElementById('app'));
<!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/fonts.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/pdfExportData.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;
}
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,
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/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);
