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:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
<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" v-on:click="exportPDF" />
</div>
</div>
</div>
</template>
<script setup>
import '@mescius/spread-sheets-vue';
import { ref } from "vue";
import GC from "@mescius/spread-sheets";
import '@mescius/spread-sheets-print';
import '@mescius/spread-sheets-pdf';
const spreadNS = GC.Spread.Sheets;
const spreadRef = ref(null);
const autoGenerateColumns = ref(false);
const exportPDF = () => {
spreadRef.value.savePDF(function (blob) {
saveAs(blob, 'download.pdf');
}, console.log);
};
const initSpread = (spread) => {
spreadRef.value = 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
registerCustomFont(fontsObj);
setCustomFontForCell(sheet);
// Provide a custom font file for the specific font string.
customizeFont(fontsObj);
// setting printInfo
setPrintInfo(spread);
};
const registerCustomFont = (fontsObj) => {
let fonts = {
normal: fontsObj["customfont1.ttf"]
};
GC.Spread.Sheets.PDF.PDFFontsManager.registerFont('customfont1', fonts);
};
const setCustomFontForCell = (sheet) => {
var style = sheet.getStyle(0, 0);
style.fontFamily = 'customfont1';
sheet.setStyle(0, 0, style);
};
const customizeFont = (fontsObj) => {
let fonts = {
normal: fontsObj["customfont2.ttf"]
};
GC.Spread.Sheets.PDF.PDFFontsManager.fallbackFont = function (font) {
let fontInfoArray = font.split(' '), fontName = fontInfoArray[fontInfoArray.length - 1];
if (fontName === 'Calibri') {
return fonts.normal;
}
}
};
const 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);
};
</script>
<style scoped>
#app {
height: 100%;
}
.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;
}
</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$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script src="$DEMOROOT$/spread/source/data/fonts.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/pdfExportData.js" type="text/javascript"></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-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-sheets-print': 'npm:@mescius/spread-sheets-print/index.js',
'@mescius/spread-sheets-pdf': 'npm:@mescius/spread-sheets-pdf/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
