Print.js: How Import Print.js in Angular 2

[vishaltps]

How Can i use it in angular 2 ?

[crabbly]

Try this: import printJS from 'node_modules/print.js/src/index.js';

[pedrosimoes-nbr]

not the best ideal approach when using angular.

[pedrosimoes-nbr]

And also needs to activate the allowJs typescript flag: https://github.com/Microsoft/TypeScript/issues/14485

[crabbly]

@pedrosimoes-nbr Please explain your comment about importing the package when using angular. As far as I know, there shouldn't be any difference.

[crabbly]

@pedrosimoes-nbr Please help. You comments don't make any sense to me.

[pedrosimoes-nbr]

The biggest problem is the name of the module: node_modules/print.js, the dot between print and js confuses the typescript module import.

Your suggestion was to reference the file directly like this import printJS from 'node_modules/print.js/src/index.js'; but if you do this you also have to configure the flag allowJs for the typescript could accept it, and this was a condition that I didn't want.

And I also had other problems with the integration, I believe that your lib is great but in face of these integration problems with angular I had to implement a solution on my own.

I hope that my comment could help you.

[joseluisq]

The biggest problem is the name of the module: node_modules/print.js, the dot between print and js confuses the typescript module import.

Yep,
In fact, I have the same issue using ES6 import import PrintJS from 'print.js'

This dependency was not found:
* print.js in ./~/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]]}!./~/vue-loader/lib/selector.js?type=script&index=0!./assets/js/components/mycomponent.vue

Adding a dash instead a dot (print-js) it could help!

By the way, this issue it should be renamed.

[mswaidan]

I'm having the same issue. Library looks great but am unable to get it loaded due to the . in the name.

[nsksaisaravana]

I am getting below error when i call PrintJS in Angular 2

Error: __WEBPACK_IMPORTED_MODULE_5_print_js_src__.a.printJS is not a function

[tckastanek]

I had a similar problem using it React. You can work around it by installing it locally and changing the file name to print-js and requiring that. You'll have to be careful and also delete the .js file extension (and may even need to manually copy the files into your node_modules).
Works, but not ideal.

[joseluisq]

@tckastanek I did create an alternative at https://github.com/joseluisq/printd
Maybe It could work for you.

[crabbly]

I renamed the library to print-js. Try using npm install print-js --save instead.

[tckastanek]

@crabbly The updated name works great! Thank you!

[embds]

@tckastanek and @crabbly, how do you use it on your angular 2 project? Can you share sample there?

King regards

[jackjamieson]

Importing print-js from a lazy loaded module causes Error: Uncaught (in promise): Error: Loading chunk ... in IE in Angular 2+.

[subatomicglue]

import printJS from 'node_modules/print-js/src/index.js';

where...? in my component? in my app.module.ts? someplace else? neither works for me.
got _co.printJS is not a function.
Angular5.2 here with angular-cli 1.7.1...

also tried .angular-cli.json:

 "scripts": [
        "../node_modules/print-js/src/index.js"
      ],

also tried the following imports:

import printJS from 'print-js/src/index.js';

and

import printJS from 'print-js/dist/print.min.js';

and

import printJS from 'print-js';

html template is this:

<div (click)="printJS( content_url )">PRINT</div>

[subatomicglue]

getting more traction with this in my component:

import printjs from 'print-js';

and this in the component class definition:
printJS = printjs;

and this in the html template:

<div class='pointer' (click)="printJS( content_url )">PRINTJS</div>

clicking this element then downloads the pdf file (Chrome / MacOSX)... so... not that exciting. ha. :)
outputs this:

print.js:92 Resource interpreted as Document but transferred with MIME type application/pdf:

it's a pdf hosted on Amazon AWS s3

[crabbly]

You shouldn't do this: printJS = printjs, as it overwrites the global printJS function.

Just import the library, for ex.: import print from 'print-js', and the function printJS will be available in your code.

[subatomicglue]

see my earlier bug report, that didn't work, it results in:

_co.printJS is not a function

this is the import I used at the top of the angular5 component.ts file:

import print from 'print-js'

[crabbly]

All your other imports uses printJS overwriting the library global variable function.
Please make sure to use import print from 'print-js' instead.

Or anything else other than printJS. For example, import printPackage from 'print-js'

[subatomicglue]

I did use print, see my last post. exactly like that one.

import print from 'print-js'

[subatomicglue]

I fixed my problem with _co.printJS is not a function...
I was adding this line in typings.d.ts, which I did as a habit:

declare var printJS: any;

I removed, and can now reference printJS from my html template.

[subatomicglue]

I fixed my other problem with clicking the element and only getting a download.

This is the HTML template which works for me (pops up a modal and print dialog under Chrome/MacOSX). Works with pdf hosted at Amazon AWS S3 named such as https://myorganization.s3.amazonaws.com/8aafec21-ff95-ca8z-695g-a7779962df5f_6681153436723 with mimetype application/pdf

<div (click)="printJS( {
    type:'pdf',
    printable: content_url,
    showModal: true,
    modalMessage: 'retrieving...',
})">PRINT</div>

[crabbly]

Just published a new version to npm which has proper support for module import.
The library will still expose a global variable printJS, but the recommend usage now should be to import the package at the same file where it will be used:

For ex.:

import printJS from 'print-js'

printJS('path-to.pdf')

Run npm update print-js to get the latest version.

[kamal0912]

I fixed my problem with _co.printJS is not a function...
I was adding this line in typings.d.ts, which I did as a habit:

declare var printJS: any;

I removed, and can now reference printJS from my html template.

@subatomicglue I am unable to resolve thie error. Please help.

[crabbly]

Hi @kamal0912, a new version is out with better Typescript support.
Please run npm update print-js to get it. You shouldn't have any issues importing the library.
Thank you.

[Salmanferozkhan]

Hi, I'm using AngularJS 6 and using your print-js
I'm giving on typescript this
print() {
printJS('http://www.pdf995.com/samples/pdf.pdf');
}
means I want to show pdf using the link but it shows print the current page not working URL of pdf

[karamuka]

import printJS from 'print-js'; works for me

[andrecontdi]

I'm still having problems importing on TypeScript (Angular 7).

error TS1192: Module '"C:/Dev/Wash&Iron/wi-frontend-sisad/node_modules/print-js/src/index"' has no default export

@crabbly
I solved changing directly at the end of the index.d.ts file from export = printJS; to export default printJS;

[crabbly]

Interesting. Thank you for the feedback, @andrecontdi
FYI: https://github.com/crabbly/Print.js/issues/304

[asfernandes]

With latest version, see https://github.com/crabbly/Print.js/pull/293

[rahulswimmer]

I have installed "print-js": "^1.0.61" for my angular 5 application.

I import the package, like this:

import printJS from "print-js"

There is red underline for printJS saying,
Module '"/Users/printProject/node_modules/print-js/src/index"' has no default export.ts

But, index.js inside src does have a export default printJS.

Because of this, I am not able to build my project, what should I do ?

[rahulswimmer]

Solved this issue:

Not only are we suppose to change

export = printJS

to

export default printJS

But also the import statement in the component from :

import 'printJS' from 'print-js'

to

  import 'printJS' from 'print-js/src/index'

[dami95]

1) npm install print-js --save
2) import printJS from 'print-js'; in component code
3) tsconfig.json: "allowSyntheticDefaultImports": true, option incompilerOptions