Pdfmake: Import pdfmake in ionic 2

Created on 10 Feb 2017  Â·  19Comments  Â·  Source: bpampuch/pdfmake

Hi, I installed pdfmake in ionic 2 by npm

npm install pdfmake --save

And import to into class

import pdfmake from 'pdfmake'; or import * as pdfmake from 'pdfmake';

but, when I try use ...

testPdf(){
        var dd = { content: 'This is an sample PDF printed with pdfMake' };
        pdfmake.createPdf(dd).download();
}

receive Runtime Error:

fs.readFileSync is not a function

screenshot_2017-02-09-18-52-11

waiting for information
Source
picture calraiden
👍4

Most helpful comment

Here's what I had to do in Ionic 3 / Angular 4 with Webpack:

npm install --save pdfmake

import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';
...
pdfMake.vfs = pdfFonts.pdfMake.vfs;

That last line just needs to be run once to move the output of the font script into the main pdfMake object. From then on PDFMake should work fine. (FWIW in my app I have one singleton @Injectable that does all my PDFMake work, so I put that line in its constructor.)

This lets you operate totally out of the content in node_modules without needing to add script definitions to the index.html or anything.

picture ammulder on 1 May 2017
👍22 🎉6 😄4

All 19 comments

Is not much to see from the screen, give full error stack in text (important as the line number).

liborm85 picture liborm85 on 19 Feb 2017

Sorry for the delay in reply.

I created a new project and redo the steps, but the problem still.

Creating blank project:

C:\Workspace\htdocs\Projetos>ionic start  cal-pdfmake-test blank  --v2
Creating an Ionic 2.x app in C:\Workspace\htdocs\Projetos\cal-pdfmake-test based on the blank template.

Downloading: https://github.com/driftyco/ionic2-app-base/archive/master.zip
Downloading: https://github.com/driftyco/ionic2-starter-blank/archive/master.zip
Installing npm packages (may take a minute or two)...
|
♬ ♫ ♬ ♫  Your Ionic app is ready to go! ♬ ♫ ♬ ♫

Some helpful tips:

Run your app in the browser (great for initial development):
  ionic serve

Run on a device or simulator:
  ionic run ios[android,browser]

Share your app with testers, and test on device easily with the Ionic View companion app:
  http://view.ionic.io

C:\Workspace\htdocs\Projetos>cd cal-pdfmake-test

Installed lib:

C:\Workspace\htdocs\Projetos\cal-pdfmake-test>npm install pdfmake --save
ionic-hello-world@ C:\Workspace\htdocs\Projetos\cal-pdfmake-test
`-- [email protected]
  +-- [email protected]
  | +-- [email protected]
  | +-- [email protected]
  | | +-- [email protected]
  | | | +-- [email protected]
  | | | `-- [email protected]
  | | |   `-- [email protected]
  | | |     `-- [email protected]
  | | +-- [email protected]
  | | | +-- [email protected]
  | | | | +-- [email protected]
  | | | | `-- [email protected]
  | | | +-- [email protected]
  | | | | `-- [email protected]
  | | | +-- [email protected]
  | | | | +-- [email protected]
  | | | | +-- [email protected]
  | | | | +-- [email protected]
  | | | | `-- [email protected]
  | | | +-- [email protected]
  | | | | `-- [email protected]
  | | | +-- [email protected]
  | | | +-- [email protected]
  | | | | `-- [email protected]
  | | | +-- [email protected]
  | | | +-- [email protected]
  | | | | `-- [email protected]
  | | | |   +-- [email protected]
  | | | |   `-- [email protected]
  | | | `-- [email protected]
  | | |   `-- [email protected]
  | | |     `-- [email protected]
  | | `-- [email protected]
  | |   `-- [email protected]
  | |     `-- [email protected]
  | `-- [email protected]
  |   `-- [email protected]
  `-- [email protected]
    +-- [email protected]
    | +-- [email protected]
    | +-- [email protected]
    | | +-- [email protected]
    | | | +-- [email protected]
    | | | | +-- [email protected]
    | | | | `-- [email protected]
    | | | `-- [email protected]
    | | `-- [email protected]
    | +-- [email protected]
    | +-- [email protected]
    | +-- [email protected]
    | +-- [email protected]
    | `-- [email protected]
    +-- [email protected]
    | `-- [email protected]
    `-- [email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

C:\Workspace\htdocs\Projetos\cal-pdfmake-test>ionic serve

> ionic-hello-world@ ionic:serve C:\Workspace\htdocs\Projetos\cal-pdfmake-test
> ionic-app-scripts serve "--v2" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"

[17:05:49]  ionic-app-scripts 1.1.3
[17:05:49]  watch started ...
[17:05:49]  build dev started ...
[17:05:49]  clean started ...
[17:05:49]  clean finished in 2 ms
[17:05:49]  copy started ...
[17:05:49]  transpile started ...
[17:05:51]  transpile finished in 2.38 s
[17:05:51]  preprocess started ...
[17:05:51]  preprocess finished in less than 1 ms
[17:05:51]  webpack started ...
[17:05:51]  copy finished in 2.52 s
[17:05:59]  webpack finished in 7.66 s
[17:05:59]  sass started ...
[17:06:00]  sass finished in 1.40 s
[17:06:00]  postprocess started ...
[17:06:00]  postprocess finished in less than 1 ms
[17:06:00]  lint started ...
[17:06:00]  build dev finished in 11.55 s
[17:06:01]  watch ready in 12.45 s
[17:06:01]  dev server running: http://localhost:8100/

[17:06:02]  lint finished in 2.00 s

Create an simple code to test:
https://github.com/calraiden/cal-pdfmake-test

_home.ts_

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import * as pdfmake from 'pdfmake';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  public testPdf() {
    var dd = { content: 'This is an sample PDF printed with pdfMake' };
    pdfmake.createPdf(dd).download();
  }
}

_home.html_

<ion-header>
  <ion-navbar>
    <ion-title>
      TEST PDFMAKE
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <button ion-button full (click)="testPdf()">TEST PDF</button>
</ion-content>

Result in the browser test:

Runtime Error
fs.readFileSync is not a function Stack

TypeError: fs.readFileSync is not a function
    at Object.<anonymous> (http://localhost:8100/build/main.js:117530:32)
    at Object.<anonymous> (http://localhost:8100/build/main.js:117676:4)
    at Object.module.exports (http://localhost:8100/build/main.js:117678:30)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.TraversalTracker.startTracking.callbacks.events.(anonymous function).events.(anonymous function) (http://localhost:8100/build/main.js:118521:19)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:175398:17)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:176525:18)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)

Ionic Framework: 2.1.0
Ionic Native: 2.4.1
Ionic App Scripts: 1.1.3
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 4.5.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

calraiden picture calraiden on 27 Feb 2017

Can you help me, please?

calraiden picture calraiden on 27 Feb 2017

@calraiden I've similar issue and usage of compiled version from build folder is helping me with that.
Try to replace
import * as pdfmake from 'pdfmake'; with import * as pdfmake from 'pdfmake/build/pdfmake';

eugeny-bondarenko picture eugeny-bondarenko on 2 Mar 2017
🎉3 👍3 😄2

Hi @eugeny-bondarenko

Thank you for help.

It's work.

I cloned the compiled version into the www folder

$ cd  project/www/
$ clone https://github.com/bpampuch/pdfmake.git

Then I added the scripts to the index.

<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>
  <script src='pdfmake/build/pdfmake.min.js'></script>
  <script src='pdfmake/build/vfs_fonts.js'></script>
</body>
</html>

and replace import to ...

import * as pdfmake from 'pdfmake/build/pdfmake';

calraiden picture calraiden on 7 Mar 2017

@calraiden

EXCEPTION: Error in :0:0 caused by: File 'Roboto-Regular.ttf' not found in virtual file system
ErrorHandler.handleError @ error_handler.js:54
(anonymous) @ application_ref.js:261
webpackJsonp.1382.ZoneDelegate.invoke @ zone.js:330
onInvoke @ ng_zone.js:273
webpackJsonp.1382.ZoneDelegate.invoke @ zone.js:329
webpackJsonp.1382.Zone.run @ zone.js:126
(anonymous) @ zone.js:679
webpackJsonp.1382.ZoneDelegate.invokeTask @ zone.js:363
onInvokeTask @ ng_zone.js:264
webpackJsonp.1382.ZoneDelegate.invokeTask @ zone.js:362
webpackJsonp.1382.Zone.runTask @ zone.js:166
drainMicroTaskQueue @ zone.js:529
error_handler.js:56ORIGINAL EXCEPTION: File 'Roboto-Regular.ttf' not found in virtual file system

I follow your step in angular 2 project
but this error was happend

any help ?

thanks :)

rainstormza picture rainstormza on 13 Mar 2017

Hi @rainstormza

I already received similar error, it is the file not found.

Please, check the includes:

<script src='pdfmake/build/pdfmake.min.js'></script>
<script src='pdfmake/build/vfs_fonts.js'></script>
calraiden picture calraiden on 14 Mar 2017

Why include one with import and another one with

I understand your argument but unfortunately it doesn't work for me ionic2 and angular 2 =) without "workaround".

Sorry again, I'm newbie with ionic, technically cann't answer "the why".

calraiden picture calraiden on 14 Mar 2017

@mnewmedia @calraiden

thanks for helping :)

I try to test with your solution @mnewmedia

but error happens

ERROR in /Users/ARM/Desktop/kibito_web/src/app/app.component.ts (14,26): Cannot find module 'pdfmake/build/pdfmake'.)
/Users/ARM/Desktop/kibito_web/src/app/app.component.ts (15,27): Cannot find module 'pdfmake/build/vfs_fonts'.)

I think this library doesn't have about @types for typescript yet.

anyway, I made it with this solution

in file .angular-cli.json

"scripts": [
        "../src/assets/pdfmake/pdfmake.js",
        "../src/assets/pdfmake/vfs_fonts.js"
      ],

use this in component that you want to
declare var pdfMake: any;

rainstormza picture rainstormza on 14 Mar 2017

@calraiden I've similar issue and usage of compiled version from build folder is helping me with that.
Try to replace
import * as pdfmake from 'pdfmake'; with import * as pdfmake from 'pdfmake/build/pdfmake';

This could go in the readme IMO

aviadhahami picture aviadhahami on 14 Mar 2017

Here's what I had to do in Ionic 3 / Angular 4 with Webpack:

npm install --save pdfmake

import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';
...
pdfMake.vfs = pdfFonts.pdfMake.vfs;

That last line just needs to be run once to move the output of the font script into the main pdfMake object. From then on PDFMake should work fine. (FWIW in my app I have one singleton @Injectable that does all my PDFMake work, so I put that line in its constructor.)

This lets you operate totally out of the content in node_modules without needing to add script definitions to the index.html or anything.

ammulder picture ammulder on 1 May 2017
👍22 🎉6 😄4

Thank you @ammulder - that did the trick for me!

EvilJimJafar picture EvilJimJafar on 3 May 2017

@ammulder Worked for me too!

rajddesai picture rajddesai on 5 May 2017

Actually, you don't need to "import as" syntax.

Instead of: 

import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';

You can import like this:

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
Landish picture Landish on 10 May 2017
👍6 🎉1

@ammulder Thanks a lot for your fix. :-)
This bug was really annoying.
In my case the naive assumption this === window was not playing well with Browserify.

Pragmateek picture Pragmateek on 29 Jun 2017

i'm try to use pdfmake and no success!



import * as pdfmake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';

public gerarPDF(){
let texto = {
content: 'PDF ORÇAMENTO 00001'
}
pdfmake.createPdf(texto).download();
}

danillo10 picture danillo10 on 7 Aug 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

kumarandena picture kumarandena  Â·  3Comments
m-brudi picture m-brudi  Â·  3Comments
Masber picture Masber  Â·  3Comments
kamilkp picture kamilkp  Â·  3Comments
ValeSauer picture ValeSauer  Â·  3Comments