Search code examples
javascriptjqueryfontspdfkitpdfmake

How to I assign the ttf font file in the vfs_fonts.js?


I am trying to add the custom fonts into vfs_fonts.js but I didn't understand what needs to be written in the value field of window.pdfMake object?

I have my key as "MyFont.ttf" and I know that value is nothing but ttf file. My ttf is a physical file not a set of characters. How do I fill the value field?

 window.pdfMake = window.pdfMake || {}; window.pdfMake.vfs = {
      "Roboto-Italic.ttf": "AAEAAAASAQAABA",
      "Roboto-Medium.ttf": "AAEAAA",
      "MyFont.ttf":"???????????????????"
    }

Thank you


Solution

  • /*  Read the documenation at https://github.com/bpampuch/pdfmake 
    specially the readme file */
    
    <!doctype html>
    <html lang='en'>
    <head>
       <meta charset='utf-8'>
       <title>my first pdfmake example</title>
       <script src='build/pdfmake.min.js'></script>
       <script src='build/vfs_fonts.js'></script>
    </head>
    <body>
    
    <script>
    
    
    // works great with the default vfs_fonts.js
    
       pdfMake.fonts = {
          Roboto: {
             normal: 'Roboto-Regular.ttf',
             bold: 'Roboto-Medium.ttf',
             italics: 'Roboto-Italic.ttf',
             bolditalics: 'Roboto-MediumItalic.ttf'
          }
       };
    
     // open the PDF in a new window
       pdfMake.createPdf(docDefinition).open();
    
    
    </script>
    
    </body>