Pdfmake: React+Webpack Configuration: Uncaught File 'Roboto-Regular.ttf' not found in virtual file system

[cah-alexsukhodolsky]

I'm using the react library and building using webpack. When I try building a base64 version of a pdf using pdfmake within my react app I get the following error:

Uncaught File 'Roboto-Regular.ttf' not found in virtual file system

I've read that I need to include the vfs_fonts.js script but including a reference to that file in my index.html file makes no difference.

Has anyone managed to get pdfmake (download/base64 operations) working with react + webpack?

Thanks!

[liborm85]

Is file vfs_fonts.js included after pdfmake.js?
i.e.:

  <script src='build/pdfmake.min.js'></script>
  <script src='build/vfs_fonts.js'></script>

[yokeshvaradhan]

Hi i tried with ionic 2 same error

could someone help me

[cah-alexsukhodolsky]

The issue was less with pdfmake and more with webpack. But I've got it working!

Specifically, I needed to:

1. npm install --save-dev copy-webpack-plugin
2. import and use the CopyWebpackPlugin and add it to the plugins section with the following config:
   new CopyWebpackPlugin([{from: 'node_modules/pdfmake/build/pdfmake.min.js'},{from: 'node_modules/pdfmake/build/vfs_fonts.js'}])
3. Add references to the js files in index.html:
   <script src='/pdfmake.min.js'></script>
<script src='/vfs_fonts.js'></script>
4. NOT import pdfMake into my React/Angular component. Simply use the global instance.

[XeniaSiskaki]

@cah-alexsukhodolsky what's the difference between what you did with the CopyWebpackPlugin and doing:

require('pdfmake/build/pdfmake.js');
require('pdfmake/build/vfs_fonts.js');

It's not working for us with webpack as well. But the problem started when we installed 0.1.28 (0.1.27 worked fine)

[cah-alexsukhodolsky]

@XeniaSiskaki I found that importing the libraries in a React component with a require/import statement didn't properly run the vfs_fonts.js code. Specifically, all vfs_fonts.js does is add a vfs property to the window.pdfmake object (it creates a window.pdfmake object if one doesn't exist already).
It's possibly that using require doesn't properly run the vfs_fonts.js code. Or maybe it runs it out of order and the pdfmake.js ends up overriding the window.pdfmake object.
Either way, setting up webpack to copy the pdfmake/vfs_fonts files to the build directory and importing them directly in index.html got pdfmake working correctly (even with 0.1.28).

[ShehramTahir]

New to Ionic 2.

First I installed "npm install pdfmake --save"
Secondly I defined like this in the body of index.html file

<script src="build/main.js"></script>
 <script src='/pdfmake.min.js'></script>

Thirdly I defined I amked used of this library
declare var require: any; var pdfMake = require('pdfmake/build/pdfmake.js'); var pdfFonts = require('pdfmake/build/vfs_fonts.js'); pdfMake.vfs = pdfFonts.pdfMake.vfs;
In the last I am accessing the the pdfmake function like this
pdfMake.createPdf(docDefinition).open();
Consoling both function

Problem is that after doing all that it is not giving me success.
When pdfMake.createPdf(docDefinition).open(); is called it do nothing.

Console Tells me that libraries are included in my project.

How Can I solve my problem ??

[hoppy-kamper]

I was able to get the basic example working in React with Webpack by doing the following:

// PdfMakePrototype.js

import pdfMake from 'pdfmake/build/pdfmake';
import vfsFonts from 'pdfmake/build/vfs_fonts'

export default () => {

    const {vfs} = vfsFonts.pdfMake;
    pdfMake.vfs = vfs;

    pdfMake.createPdf({content: 'Hi. I am a PDF.'}).open();
}

and then you can call this somewhere in a way like:

import pdfMakePrototype from './PdfMakePrototype';
// ...
<Button onClick{() => PdfProto()} />
// ...

[gbluv]

We use typescript would be good to have support for it.

Had to do something similar to make it work:

window.pdfMake = require('pdfmake/build/pdfmake.min');
var vfs = require('pdfmake/build/vfs_fonts');
window.pdfMake.vfs = vfs.pdfMake.vfs;

[vspedr]

@hoppy-kamper your solution works great! I took the time to create a sample app to demonstrate it, if anyone is interested:
https://github.com/vspedr/react-pdfmake-example

Edit: Check out the live preview at https://vspedr.github.io/react-pdfmake-example/

[zinge]

Example CreatePdf.vue

<template>
  <div id="create-pdf">
    <a class="button is-warning" @click="create">create pdf</a>
  </div>
</template>

<script>
import pdfMake from 'pdfmake/build/pdfmake.min.js'
import pdfFonts from 'pdfmake/build/vfs_fonts.js'

export default {
  name: 'CreatePdf',

  data () {
    return {
      pdfMake,
      pdfFonts,
      docDefinition: {
        content: 'This is an sample PDF printed with pdfMake, тест'
      }
    }
  },

  methods: {
    create () {
      this.pdfMake.vfs = this.pdfFonts.pdfMake.vfs
      this.pdfMake.createPdf(this.docDefinition).download('optionalName.pdf')
    }
  }
}
</script>

[joshuaalpuerto]

@hoppy-kamper Thanks! Got it working with your code sample 👍

[spirift]

@hoppy-kamper Thank you, you solved a couple of hours of pain

[ershadahamed]

@gbluv ur solution works fine in laravel, using below in /resources/assets/app.js
window.pdfMake = require('pdfmake/build/pdfmake.js');
var vfs = require('pdfmake/build/vfs_fonts');
window.pdfMake.vfs = vfs.pdfMake.vfs;

[arivera12]

Integration with vuejs as plugin

For anyone interested on how to integrate it as a vuejs plugin here its a working solution:

1. Create a vuejs plugin and name it like -> vue-pdfmake.js and drop this lines of code

import pdfmake from 'pdfmake/build/pdfmake.js'
import vfsFonts from 'pdfmake/build/vfs_fonts.js'
export default {
    install(Vue, options) {
        const { vfs } = vfsFonts.pdfMake;
        pdfmake.vfs = vfs;
        Vue.prototype.$pdfmake = pdfmake
    }
}

1. Install it in your main.js

import vuepdfmake from 'myplugins/vue-pdfmake.js'
Vue.use(vuepdfmake) 

1. Then in all your components instance you can use it like:
   this.$pdfmake.createPdf(docDefinition).download('export.pdf');

Hope this helps someone!