Customizing headers and footers declaratively

This sample illustrates how to customize headers and footers declaratively. Click the 'Export' button to export custom headers and footers in the PDF document.

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({ header: { declarative: { text: '\tTitle\t&[Page]', font: new pdf.PdfFont('helvetica', 10, 'normal', 'bold') } }, footer: { declarative: { text: '\t&[Page]\\&[Pages]', brush: '#3173c0', font: new pdf.PdfFont('helvetica', 10, 'normal', 'bold') } }, ended: (sender, args) => pdf.saveBlob(args.blob, 'Document.pdf') }); // doc.drawText('Lorem ipsum'); // doc.addPage(); doc.drawText('Lorem ipsum'); // doc.end(); }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Customizing headers and footers declaratively</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({ header: { declarative: { text: '\tTitle\t&[Page]', font: new pdf.PdfFont('helvetica', 10, 'normal', 'bold') } }, footer: { declarative: { text: '\t&[Page]\\&[Pages]', brush: '#3173c0', font: new pdf.PdfFont('helvetica', 10, 'normal', 'bold') } }, ended: (sender: pdf.PdfDocument, args: pdf.PdfDocumentEndedEventArgs) => pdf.saveBlob(args.blob, 'Document.pdf') }); // doc.drawText('Lorem ipsum'); // doc.addPage(); doc.drawText('Lorem ipsum'); // 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>Customizing headers and footers declaratively</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({ header: { declarative: { text: '\tTitle\t&[Page]', font: new pdf.PdfFont('helvetica', 10, 'normal', 'bold') } }, footer: { declarative: { text: '\t&[Page]\\&[Pages]', brush: '#3173c0', font: new pdf.PdfFont('helvetica', 10, 'normal', 'bold') } }, ended: (sender, args) => pdf.saveBlob(args.blob, 'Document.pdf') }); // doc.drawText('Lorem ipsum'); // doc.addPage(); doc.drawText('Lorem ipsum'); // 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>Customizing headers and footers declaratively</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 { constructor(props) { super(props); } 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({ header: { declarative: { text: '\tTitle\t&[Page]', font: new pdf.PdfFont('helvetica', 10, 'normal', 'bold') } }, footer: { declarative: { text: '\t&[Page]\\&[Pages]', brush: '#3173c0', font: new pdf.PdfFont('helvetica', 10, 'normal', 'bold') } }, ended: (sender, args) => pdf.saveBlob(args.blob, 'Document.pdf') }); // doc.drawText('Lorem ipsum'); // doc.addPage(); doc.drawText('Lorem ipsum'); // 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; }