Fonts

This sample shows how to use PdfFont class to draw text using different fonts. Click the 'Export' button to view the applied fonts in the exported PDF document.

For more information, see the Fonts topic in Documentation.

import 'bootstrap.css'; import './styles.css'; import * as pdf from '@grapecity/wijmo.pdf'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { document.querySelector('#btnExport').addEventListener('click', () => { let doc = new pdf.PdfDocument({ ended: (sender, args) => pdf.saveBlob(args.blob, 'FlexGrid.pdf') }); // doc.drawText('This text uses the default document font, Times 10.'); // doc.drawText('This text uses Times Bold Oblique 20.', null, null, { font: new pdf.PdfFont('times', 20, 'oblique', 'bold') }); // doc.setFont(new pdf.PdfFont('helvetica')); doc.drawText('This text uses Helvetica 10.'); doc.drawText('This text also uses Helvetica 10.'); // doc.end(); }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Fonts</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <!-- Export button --> <button class="btn btn-default" id="btnExport">Export</button> </div> </body> </html> body { margin-bottom: 24px; } import 'bootstrap.css'; import './styles.css'; // import * as pdf from '@grapecity/wijmo.pdf'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { export() { let doc = new pdf.PdfDocument({ ended: (sender: pdf.PdfDocument, args: pdf.PdfDocumentEndedEventArgs) => pdf.saveBlob(args.blob, 'FlexGrid.pdf') }); // doc.drawText('This text uses the default document font, Times 10.'); // doc.drawText('This text uses Times Bold Oblique 20.', null, null, { font: new pdf.PdfFont('times', 20, 'oblique', 'bold') }); // doc.setFont(new pdf.PdfFont('helvetica')); doc.drawText('This text uses Helvetica 10.'); doc.drawText('This text also uses Helvetica 10.'); // doc.end(); } } // @NgModule({ imports: [BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Fonts</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <!-- Export button --> <button class="btn btn-default" (click)="export()">Export</button> </div> body { margin-bottom: 24px; } <template> <div class="container-fluid"> <!-- Export button --> <button class="btn btn-default" @click="exportPDF">Export</button> </div> </template> <script> import 'bootstrap.css'; import Vue from 'vue'; import * as pdf from '@grapecity/wijmo.pdf'; // let App = Vue.extend({ name: 'app', methods: { exportPDF() { let doc = new pdf.PdfDocument({ ended: (sender, args) => pdf.saveBlob(args.blob, 'FlexGrid.pdf') }); // doc.drawText('This text uses the default document font, Times 10.'); // doc.drawText('This text uses Times Bold Oblique 20.', null, null, { font: new pdf.PdfFont('times', 20, 'oblique', 'bold') }); // doc.setFont(new pdf.PdfFont('helvetica')); doc.drawText('This text uses Helvetica 10.'); doc.drawText('This text also uses Helvetica 10.'); // doc.end(); } } }) // new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Fonts</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import "./app.css"; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as pdf from "@grapecity/wijmo.pdf"; class App extends React.Component { render() { return <div className="container-fluid"> <button className="btn btn-default" onClick={this.exportPDF.bind(this)}>Export</button> </div>; } exportPDF() { let doc = new pdf.PdfDocument({ ended: (sender, args) => pdf.saveBlob(args.blob, 'FlexGrid.pdf') }); // doc.drawText('This text uses the default document font, Times 10.'); // doc.drawText('This text uses Times Bold Oblique 20.', null, null, { font: new pdf.PdfFont('times', 20, 'oblique', 'bold') }); // doc.setFont(new pdf.PdfFont('helvetica')); doc.drawText('This text uses Helvetica 10.'); doc.drawText('This text also uses Helvetica 10.'); // doc.end(); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Chart Overview</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> body { margin-bottom: 24px; }