Pdfkit: How to import pdfkit in ng2/ionic 2 typescript based app

[mjwdoek]

Hi, I want to use pdfKit in my ionic 2 typescript based app. Is this possible?

I gave it a try and followed these steps:

1. Via the ionic CLI I created a new ionic2 v2 app

2. I installed pdfkit and blob-stream via
   npm install --save pdfkit
   npm install --save blob-stream

3. I installed the typings:
   npm install --save @types/pdfstream
   npm install --save @types/blob-stream

4. i made a service.ts file and create the following service:

` import { Injectable } from '@angular/core';
import * as pdfkit from 'pdfkit';
import * as blobStream from 'blob-stream';

@Injectable()
export class PdfService {

doc;
stream: blobStream.IBlobStream;

constructor() {
    this.doc = new pdfkit();
    this.stream = this.doc.pipe(blobStream());
}

createPdf() {
    this.doc.fontSize(25).text('Test PDF!', 100, 100);
    this.doc.circle(280, 200, 50).fill("#6600FF");
    this.doc.end();

    this.stream.on('finish', function () {
        window.open(this.stream.toBlobURL('application/pdf'));
    });
}

}
`

1. in other file I call the createPdf() function of this service, but when i do a ionic serve I get the following error:

Uncaught TypeError: fs.readFileSync is not a function
at Object. (index.js:10)

I Guess this is because pdfkit isn't available in "browser mode" at this moment, but in "node mode"???

Can anybody help me with this?

[imkamil]

https://github.com/devongovett/pdfkit/issues/354

[PrabuGovindan]

any updates?

[m0nzderr]

+1

[kishandonepudi]

@mjwdoek can you pls share the code, i have a same scope to develop

[hesampour]

fs is not available in browser but you can use pdfKit in the browser. as the documentation says

The first is to use Browserify, which is a Node module packager for the browser with the familiar require syntax. The second is to use a prebuilt version of PDFKit, which you can download from Github.

fs is for node server so this is the write error. you should find a way to skip the error.
but I dont know how to use it in angular 6. in angular 5- you can also find a way to declare fs in webpack.server.config. but ina angular 6+ there is no webpack config.

[Dzivo]

@hesampour thanks for the explanation but should we let angular and webpack compile the source code. Is there a plan to do something like that ?

[mohamed-badaoui]

Does pdfkit work for angular 6+? if Yes, how ?

Got following error :

vendor.js:74981 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'prototype' of undefined
TypeError: Cannot read property 'prototype' of undefined
    at extend (:4210/views-fundscall-fundscall-module.js:30143)
    at :4210/views-fundscall-fundscall-module.js:30151
    at Object.<anonymous> (:4210/views-fundscall-fundscall-module.js:30235)
    at Object../node_modules/pdfkit/js/reference.js (:4210/views-fundscall-fundscall-module.js:30241)
    at __webpack_require__ (runtime.js:84)
    at Object.<anonymous> (:4210/views-fundscall-fundscall-module.js:29561)
    at Object../node_modules/pdfkit/js/object.js (:4210/views-fundscall-fundscall-module.js:29563)
    at __webpack_require__ (runtime.js:84)
    at Object.<anonymous> (:4210/views-fundscall-fundscall-module.js:26399)
    at Object../node_modules/pdfkit/js/document.js (:4210/views-fundscall-fundscall-module.js:26629)
    at resolvePromise (polyfills.js:3159)
    at resolvePromise (polyfills.js:3116)
    at polyfills.js:3218
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2766)
    at Object.onInvokeTask (vendor.js:76531)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2765)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:2533)
    at drainMicroTaskQueue (polyfills.js:2940)
defaultErrorLogger @ vendor.js:74981
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ vendor.js:75029
next @ vendor.js:77012
schedulerFn @ vendor.js:72993
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ vendor.js:196670
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ vendor.js:196608
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ vendor.js:196551
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ vendor.js:196528
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ vendor.js:196293
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ vendor.js:72977
(anonymous) @ vendor.js:76562
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ polyfills.js:2733
push../node_modules/zone.js/dist/zone.js.Zone.run @ polyfills.js:2483
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ vendor.js:76499
onHandleError @ vendor.js:76562
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ polyfills.js:2737
push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ polyfills.js:2499
_loop_1 @ polyfills.js:3022
api.microtaskDrainDone @ polyfills.js:3031
drainMicroTaskQueue @ polyfills.js:2947