PdfMake Utils provides helper classes to use with PdfMake
✓ Custom element class to display pdf document
✓ Load assets dynamically
A class to load dynamically fonts and arbitrary files.
ready: Becomes true when assets loading is donevfs: a hash containing loaded files datafonts: a hash containing loaded fonts datapdfMake: pdfMake instance (optional)
registerFileRegister a file to be loaded. Accepts a hash with following properties:name: the file nameURL: URL where the file should be loaded from. If not set it will usename
registerFontRegister a font to be loaded. Accepts a hash with following properties:name: the font namefileName: the font file nameURL: URL where the file should be loaded from. If not set it will usefileNamestyles: an array with the styles that this file will be associated with
configurePdfMakeConfigure pdfMakevfsandfontsproperties with the loaded data. Accepts the pdfMake instance as argumentload: loads the registered fonts / files and configure pdfMake if pdfMake property is assigned. Returns a promise that is resolved if all files loaded correctly or is rejected if any file fails to load.
import pdfmake from 'pdfmake/build/pdfmake'
import { PdfAssetsLoader } from 'pdfmake-utils'
const assetsLoader = new PdfAssetsLoader()
pdfmake.fonts = assetsLoader.fonts
pdfmake.vfs = assetsLoader.vfs
// register Roboto font, normal variant. Roboto-Regular.woff must be in root path
assetsLoader.registerFont({name: 'Roboto', fileName: 'Roboto-Regular.woff', styles: ['normal']})
// register Roboto font, bolditalics variant using a custom file location
assetsLoader.registerFont({name: 'Roboto', fileName: 'Roboto-MediumItalic.woff', URL: 'fonts/Roboto-MediumItalic.woff', styles: ['bolditalics']})
// register a file to be loaded in the root path
assetsLoader.registerFile({name: 'MyLogo.png'})
// register a file with a custom location
assetsLoader.registerFile({name: 'MyHeader.png', URL: 'images/sunshine.png'})
assetsLoader.load().then(() => {
console.log('assets loaded')
}).catch(errors => {
// errors -> array with all file loading errors
console.error('assets loading', errors);
})The Pdf standard fonts can be loaded by setting fileName to
the font name without extension, e.g., 'Courier' or 'Courier-Bold'. By default, it will load the respective *.afm file in root path.
To use standard fonts is necessary to call
configurePdfMake
import pdfmake from 'pdfmake/build/pdfmake'
import { PdfAssetsLoader } from 'pdfmake-utils'
const assetsLoader = new PdfAssetsLoader()
// register a Times font that will use the standard Times-Roman font. Times-Roman.afm must be in root path
assetsLoader.registerFont({name: 'Times', fileName: 'Times-Roman', styles: ['normal']})
// registering standard Times-Italic with a custom afm file location
assetsLoader.registerFont({name: 'Times', fileName: 'Times-Italic', URL: 'fonts/Times-Italic.afm', styles: ['italics']})
// all possible standard fonts
assetsLoader.registerFont({name: 'Times', fileName: 'Times-Roman', styles: ['normal']})
assetsLoader.registerFont({name: 'Times', fileName: 'Times-Italic', styles: ['italics']})
assetsLoader.registerFont({name: 'Times', fileName: 'Times-Bold', styles: ['bold']})
assetsLoader.registerFont({name: 'Times', fileName: 'Times-BoldItalic', styles: ['bolditalics']})
assetsLoader.registerFont({name: 'Courier', fileName: 'Courier', styles: ['normal']})
assetsLoader.registerFont({name: 'Courier', fileName: 'Courier-Oblique', styles: ['italics']})
assetsLoader.registerFont({name: 'Courier', fileName: 'Courier-Bold', styles: ['bold']})
assetsLoader.registerFont({name: 'Courier', fileName: 'Courier-BoldOblique', styles: ['bolditalics']})
assetsLoader.registerFont({name: 'Helvetica', fileName: 'Helvetica', styles: ['normal']})
assetsLoader.registerFont({name: 'Helvetica', fileName: 'Helvetica-Oblique', styles: ['italics']})
assetsLoader.registerFont({name: 'Helvetica', fileName: 'Helvetica-Bold', styles: ['bold']})
assetsLoader.registerFont({name: 'Helvetica', fileName: 'Helvetica-BoldOblique', styles: ['bolditalics']})
assetsLoader.registerFont({name: 'Symbol', fileName: 'Symbol'})
assetsLoader.registerFont({name: 'ZapfDingbats', fileName: 'ZapfDingbats'})
assetsLoader.load().then(() => {
assetsLoader.configurePdfMake(pdfMake)
}).catch(errors => {
// will fail if one of the files fails to load
// configure pdfMake with the files that loaded correctly
assetsLoader.configurePdfMake(pdfMake)
console.error('assets loading', errors);
})A Custom Element class that creates and displays a pdf in an iframe.
The assets and the pdfmake packages are loaded dynamically the first time an instance is created
By default, it uses
window.pdfMake. Configure the pdfMake instance usinggetPdfMakecallback
dataThe pdf document definition to be generated
getPdfMakeAccepts a function that returns a pdfMake instance or a promise that resolves to a pdfMake instance
registerFileRegister a file to be loaded. Same signature as PdfAssetsLoader registerFile methodregisterFontRegister a font to be loaded. Same signature as PdfAssetsLoader registerFont method
import { PdfViewer } from 'pdfmake-utils'
// lazy load pdfmake (webpack will do code split automatically)
PdfViewer.getPdfMake = () => import('pdfmake/build/pdfmake')
PdfViewer.registerFont({name: 'Roboto', fileName: 'Roboto-Regular.woff', styles: ['normal']})
PdfViewer.registerFont({name: 'Roboto', fileName: 'Roboto-Italic.woff', styles: ['italics']})
PdfViewer.registerFile({name: 'MyLogo.png'})
customElements.define('pdf-viewer', PdfViewer)
// use pdf-viewer element with, e.g, lit-html:
// <pdf-viewer .data=${docDefinition}></pdf-viewer>Copyright © 2019 Luiz Américo. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.
Made with ♥ by Luiz Américo and contributors