Import pdfmake in ionic 2 #864

calraiden · 2017-02-10T18:53:30Z

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

The text was updated successfully, but these errors were encountered:

liborm85 · 2017-02-19T10:05:47Z

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

calraiden · 2017-02-27T20:22:59Z

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
`-- pdfmake@0.1.26
  +-- linebreak@0.3.0
  | +-- base64-js@0.0.8
  | +-- brfs@1.4.3
  | | +-- quote-stream@1.0.2
  | | | +-- buffer-equal@0.0.1
  | | | `-- through2@2.0.3
  | | |   `-- readable-stream@2.2.3
  | | |     `-- isarray@1.0.0
  | | +-- static-module@1.3.1
  | | | +-- concat-stream@1.4.10
  | | | | +-- readable-stream@1.1.14
  | | | | `-- typedarray@0.0.6
  | | | +-- duplexer2@0.0.2
  | | | | `-- readable-stream@1.1.14
  | | | +-- escodegen@1.3.3
  | | | | +-- esprima@1.1.1
  | | | | +-- estraverse@1.5.1
  | | | | +-- esutils@1.0.0
  | | | | `-- source-map@0.1.43
  | | | +-- has@1.0.1
  | | | | `-- function-bind@1.1.0
  | | | +-- object-inspect@0.4.0
  | | | +-- quote-stream@0.0.0
  | | | | `-- minimist@0.0.8
  | | | +-- shallow-copy@0.0.1
  | | | +-- static-eval@0.2.4
  | | | | `-- escodegen@0.0.28
  | | | |   +-- esprima@1.0.4
  | | | |   `-- estraverse@1.3.2
  | | | `-- through2@0.4.2
  | | |   `-- xtend@2.1.2
  | | |     `-- object-keys@0.4.0
  | | `-- through2@2.0.3
  | |   `-- readable-stream@2.2.3
  | |     `-- isarray@1.0.0
  | `-- unicode-trie@0.3.1
  |   `-- tiny-inflate@1.0.2
  `-- pdfkit@0.8.0
    +-- fontkit@1.5.2
    | +-- brotli@1.3.1
    | +-- browserify-optional@1.0.0
    | | +-- ast-transform@0.0.0
    | | | +-- escodegen@1.2.0
    | | | | +-- esutils@1.0.0
    | | | | `-- source-map@0.1.43
    | | | `-- esprima@1.0.4
    | | `-- ast-types@0.7.8
    | +-- clone@1.0.2
    | +-- deep-equal@1.0.1
    | +-- dfa@1.0.0
    | +-- restructure@0.5.3
    | `-- unicode-properties@1.1.0
    +-- linebreak@0.1.2
    | `-- unicode-trie@0.1.2
    `-- png-js@0.1.1

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 fsevents@1.1.1: 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 · 2017-02-27T20:31:22Z

Can you help me, please?

eugeny-bondarenko · 2017-03-02T11:14:07Z

@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';

calraiden · 2017-03-07T02:06:34Z

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';

rainstormza · 2017-03-13T14:26:29Z

@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 :)

calraiden · 2017-03-14T11:54:57Z

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>

pablomaurer · 2017-03-14T13:08:06Z

Why include one with import and another one with <script>?

You can do this for both..

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

test if it loaded with

console.log('pdfmake', window.pdfmake);
console.log('vfs', window.pdfmake.vfs);

calraiden · 2017-03-14T13:18:38Z

Hi @mnewmedia

Honestly, I cannot be sure of the answer, but pdfmake only works with little workaround in my project (ionic2/angular2.)

In my search on google, I read in some forum that pdfmake isn't yet fully compatible with angular2.

Sorry, I did not do more advanced research to understand the reasons fully.

pablomaurer · 2017-03-14T13:21:23Z

This isn't about ionic2/angular more about TypeScript and module loading... I use ionic 1 with Typescript and it works for me with my code snippet above..

calraiden · 2017-03-14T13:26:47Z

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".

rainstormza · 2017-03-14T16:38:01Z

@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;

aviadhahami · 2017-03-14T17:34:43Z

@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

ammulder · 2017-05-01T14:19:48Z

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.

JimJafar · 2017-05-03T08:42:19Z

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

rajddesai · 2017-05-04T23:08:24Z

@ammulder Worked for me too!

Landish · 2017-05-10T10:18:35Z

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';

Pragmateek · 2017-06-28T23:55:50Z

@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.

danillo10 · 2017-08-07T19:08:18Z

i'm try to use pdfmake and no success!

<button ion-button (tap)="gerarPDF()">
GERAR PDF

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();
}

liborm85 added the waiting for information label Feb 25, 2017

calraiden closed this as completed Mar 7, 2017

Pragmateek mentioned this issue Jun 28, 2017

Uncaught File 'Roboto-Medium.ttf' not found in virtual file system #910

Closed

quantumcat1 mentioned this issue Jul 11, 2019

multiple fonts in a PDF #673

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Import pdfmake in ionic 2 #864

Import pdfmake in ionic 2 #864

calraiden commented Feb 10, 2017 •

edited

liborm85 commented Feb 19, 2017

calraiden commented Feb 27, 2017

calraiden commented Feb 27, 2017 •

edited

eugeny-bondarenko commented Mar 2, 2017

calraiden commented Mar 7, 2017

rainstormza commented Mar 13, 2017

calraiden commented Mar 14, 2017

pablomaurer commented Mar 14, 2017 •

edited

calraiden commented Mar 14, 2017

pablomaurer commented Mar 14, 2017

calraiden commented Mar 14, 2017

rainstormza commented Mar 14, 2017

aviadhahami commented Mar 14, 2017

ammulder commented May 1, 2017

JimJafar commented May 3, 2017

rajddesai commented May 4, 2017

Landish commented May 10, 2017

Pragmateek commented Jun 28, 2017

danillo10 commented Aug 7, 2017

Import pdfmake in ionic 2 #864

Import pdfmake in ionic 2 #864

Comments

calraiden commented Feb 10, 2017 • edited

liborm85 commented Feb 19, 2017

calraiden commented Feb 27, 2017

calraiden commented Feb 27, 2017 • edited

eugeny-bondarenko commented Mar 2, 2017

calraiden commented Mar 7, 2017

rainstormza commented Mar 13, 2017

calraiden commented Mar 14, 2017

pablomaurer commented Mar 14, 2017 • edited

calraiden commented Mar 14, 2017

pablomaurer commented Mar 14, 2017

calraiden commented Mar 14, 2017

rainstormza commented Mar 14, 2017

aviadhahami commented Mar 14, 2017

ammulder commented May 1, 2017

JimJafar commented May 3, 2017

rajddesai commented May 4, 2017

Landish commented May 10, 2017

Pragmateek commented Jun 28, 2017

danillo10 commented Aug 7, 2017

calraiden commented Feb 10, 2017 •

edited

calraiden commented Feb 27, 2017 •

edited

pablomaurer commented Mar 14, 2017 •

edited