Easily print Pdf link in Javascript/Angular (Solved)

Shivam Gupta
1 min readAug 29, 2020

We are going to use print.js library: https://printjs.crabbly.com/

1. For Html/Javascript Project

a) in HTML file define these links

<link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css"><script src="https://printjs-4de6.kxcdn.com/print.min.js"> </script>

b) Now global method printjs is available

printJS({printable:'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf', type:'pdf', showModal:true})

2. If you are using Angular 2+

Follow given steps to implement pdf preview in Agular 2+

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

Now you can use printJs method inside component.ts code -

ngOnInit() {printJS({printable:'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf', type:'pdf', showModal:true})
}

This will open a print preview in the browser :)

If you like this Article give a clap and write in comment section.

--

--

Shivam Gupta

Full Stack Engineer (Web/App) working on different JS Technologies & frameworks— Angular, Node, Typescript, Ionic, Firebase, AWS, ElK...Love to write cool stuff