Skip to content

Print html to pdf using Angularjs

The problem when print html to pdf

Hi friends, in this post I will show you how to print html to pdf file with all css using AngularJS.

I have been faced with this problem: when the browser print the html element to pdf, it loss of css => pdf file will look ugly.

Searching around the internet, I got the solution that put all css you need to print out into the

This solution is work correctly, but how about the css you are reference from other CDN like Bootstrap? You can’t put all Bootstrap css into your css file!

Solution for printing html to pdf with CSS included

Luckily, I have found another solution at this Plnkr.

How does it work?

Create an AngularJS print directive

Embed that directive into your html page:

That’s all. You don’t need to put your css into the @media print{} tag.

Please refer to this Plnkr for demo.

Published inAngularJSProgramming

One Comment

  1. xc xc

    Yes , but content in new windows is without values from angular model 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *