<commit_before>---
layout: post
title:  "Printing the document from front end only using jsPDF, html2canvas"
date:  2016-07-14 00:34:00
categories: front-end
---

### Why do I need this?
As a front end developer, we all come across a problem statement where the client wants to get the screenshot of front-end views in a single PDF.

Though we can print PDF by triggering browser's default print button functionality(similar to Ctrl+P) but that approach has some limitations, which are:
* Styling issues: The browser is programmed to print only the necessary info(text) when we do (Ctrl+P). The browser ignores some css properties box shadow/background.
* Working with SVG's: If you have a lot of charts on your page then it becomes a pain to write a separate [print specific CSS](https://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/).
* If you want to print multiple views: You cannot print multiple views in a single pdf file. You will need do some hack in your front-end router to merge all the pages in a single route and then trigger the print button. I tried it in angularJS and it is not something which I would recommend to do.

So if you think that you won't face the issues mentioned above, then you can go ahead and use [Ctrl + P](https://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/).

And if you think that you might face these issues, then this blog is for you.
<commit_msg>md fix for bullets<commit_after>---
layout: post
title:  "Printing the document from front end only using jsPDF, html2canvas"
date:  2016-07-14 00:34:00
categories: front-end
---

### Why do I need this?
As a front end developer, we all come across a problem statement where the client wants to get the screenshot of front-end views in a single PDF.

Though we can print PDF by triggering browser's default print button functionality(similar to Ctrl+P) but that approach has some limitations, which are:

* Styling issues: The browser is programmed to print only the necessary info(text) when we do (Ctrl+P). The browser ignores some css properties box shadow/background.
* Working with SVG's: If you have a lot of charts on your page then it becomes a pain to write a separate [print specific CSS](https://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/).
* If you want to print multiple views: You cannot print multiple views in a single pdf file. You will need do some hack in your front-end router to merge all the pages in a single route and then trigger the print button. I tried it in angularJS and it is not something which I would recommend to do.

So if you think that you won't face the issues mentioned above, then you can go ahead and use [Ctrl + P](https://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/).

And if you think that you might face these issues, then this blog is for you.

{'fraction_non_alphanumeric': 0.06624383368569416, 'fraction_numerical': 0.010570824524312896, 'mean_word_length': 4.1338155515370705, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3436428', 'n_tokens_mistral': 780, 'n_tokens_neox': 738, 'n_words': 439}