0.3.1 • Public • Published

    PdfMake Utils

    NPM version NPM downloads Dependency Status

    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 done
    • vfs: a hash containing loaded files data
    • fonts: a hash containing loaded fonts data
    • pdfMake: pdfMake instance (optional)
    • registerFile Register a file to be loaded. Accepts a hash with following properties:
      • name: the file name
      • URL: URL where the file should be loaded from. If not set it will use name
    • registerFont Register a font to be loaded. Accepts a hash with following properties:
      • name: the font name
      • fileName: the font file name
      • URL: URL where the file should be loaded from. If not set it will use fileName
      • styles: an array with the styles that this file will be associated with
    • configurePdfMake Configure pdfMake vfs and fonts properties with the loaded data. Accepts the pdfMake instance as argument
    • load: 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);
    Standard fonts

    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(() => {
    }).catch(errors => {
      // will fail if one of the files fails to load 
      // configure pdfMake with the files that loaded correctly
      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 using getPdfMake callback

    • data The pdf document definition to be generated
    Static Properties
    • getPdfMake Accepts a function that returns a pdfMake instance or a promise that resolves to a pdfMake instance
    Static Methods
    • registerFile Register a file to be loaded. Same signature as PdfAssetsLoader registerFile method
    • registerFont Register 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




    npm i pdfmake-utils

    DownloadsWeekly Downloads






    Unpacked Size

    4.7 MB

    Total Files


    Last publish


    • avatar