デモ
PDF：フォント
このサンプルでは、PdfFontクラスを使用してさまざまなフォントのテキストを描画する方法を示します。「エクスポート」ボタンをクリックすると、PDFで適用されたフォントを表示できます。
詳細については、ヘルプのフォントを参照してください。
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.registerFont({ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' });
doc.setFont(new pdf.PdfFont('ipaexg'));
//
doc.drawText('ドキュメントの既定のフォントです。');
//
doc.drawText('サイズ = 20のフォントです。', null, null, { font: new pdf.PdfFont('ipaexg', 20, 'oblique', 'bold') });
//
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">エクスポート</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.registerFont({ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' });
doc.setFont(new pdf.PdfFont('ipaexg'));
//
doc.drawText('ドキュメントの既定のフォントです。');
//
doc.drawText('サイズ = 20のフォントです。', null, null, { font: new pdf.PdfFont('ipaexg', 20, 'oblique', 'bold') });
//
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()">エクスポート</button>
</div>
body {
margin-bottom: 24px;
}
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)}>エクスポート</button>
</div>;
}
exportPDF() {
let doc = new pdf.PdfDocument({
ended: (sender, args) => pdf.saveBlob(args.blob, 'FlexGrid.pdf')
});
doc.registerFont({ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' });
doc.setFont(new pdf.PdfFont('ipaexg'));
//
doc.drawText('ドキュメントの既定のフォントです。');
//
doc.drawText('サイズ = 20のフォントです。', null, null, { font: new pdf.PdfFont('ipaexg', 20, 'oblique', 'bold') });
//
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;
}
<template>
<div class="container-fluid">
<!-- Export button -->
<button class="btn btn-default" @click="exportPDF">エクスポート</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.registerFont({ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' });
doc.setFont(new pdf.PdfFont('ipaexg'));
//
doc.drawText('ドキュメントの既定のフォントです。');
//
doc.drawText('サイズ = 20のフォントです。', null, null, { font: new pdf.PdfFont('ipaexg', 20, 'oblique', 'bold') });
//
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>
