Including pdfmake in client side of MEAN-stack project

Question

I have a website built on the MEAN.io stack and am trying to generate PDF files on the client side with pdfmake. One can install pdfmake with bower (it looks like they used browserify to generate the client-side version).

I am struggling to get it to work. Either the injection of pdfmake does not work (I assume it cannot be found) or the pdfmake object is undefined (if I don't add pdfmake as a dependancy). I assume pdfmake needs to be packaged in some way to make it accessible, but I don't know how.

In config/assets.json I added:

"bower_components/pdfmake/build/pdfmake.js"

In the HTML corresponding to the JS file in which I want to use pdfmake I added:

<script src="bower_components/pdfmake/build/pdfmake.js"></script>
<script src="bower_components/pdfmake/build/vfs_fonts.js"></script>

I have set up a basic version on Github . I would really appreciate it if someone could explain to me how to make it possible to make pdfmake available for use in packages/system/public/controllers/index.js, for example.

Answer 1

I was recently have a similar problem. It seems to come from the fact that pdfmake isn't yet "browserfiable." After much troubleshooting, I was able to get it working through simply including the two client-side scripts pdfmake.min.js and vfs_fonts.js via script tags in my build directory. That's it.

Try moving the two script tags out of the bower_components directory and into your build directory. Make sure they're before your bundle.js , or generally whatever scripts need pdfmake.

I don't fully understand how bundled scripts are able to see the global objects created by these two files, but I think it's because they're setting pdfMake to the window object:

(The vfs_fonts.js file starts like this:)

window.pdfMake = window.pdfMake || {}; window.pdfMake.vfs

Since Browserify sets the global object to window , this approach seems to work. (Though I don't fully understand why... see this Github issue on their repo for more explanation and the deglobalify npm package.)

Here's another relevant post I was able to find.