Bayt.com

Start networking and exchanging professional insights

Register now or log in to join your professional community.

Follow

How to generate PDF document from HTML code ?

PDF HTML
user-image
Question added by Hamzeh AbuZakham , market researcher , tetes
Date Posted: 2014/07/02
Upvote (0) Views (15) Followers (2) Answers (2) Report Question
Write an Answer
Register now or log in to answer.
Muhammad Waqas
by Muhammad Waqas , Dot Net and MVC Developer , Osys Technologies

jsPDF is able to use plugins. In order to enable it to print HTML, you have to include certain plugins and therefore have to do the following:

  1. Go to https://github.com/MrRio/jsPDF and download the latest Version.
  2. Include the following Scripts in your project:
    • jspdf.js
    • jspdf.plugin.from_html.js
    • jspdf.plugin.split_text_to_size.js
    • jspdf.plugin.standard_fonts_metrics.js

If you want to ignore certain elements, you have to mark them with an ID, which you can then ignore in a special element handler of jsPDF. Therefore your HTML should look like this:

<!DOCTYPE html><html><body><pid="ignorePDF">don't print this to pdf</p><div><p><fontsize="3"color="red">print this to pdf</font></p></div></body></html>

Then you use the following JavaScript code to open the created PDF in a PopUp:

var doc =new jsPDF();var elementHandler ={'#ignorePDF':function(element, renderer){returntrue;}};var source = window.document.getElementsByTagName("body")[0]; doc.fromHTML( source,15,15,{'width':180,'elementHandlers': elementHandler }); doc.output("dataurlnewwindow");

For me this created a nice and tidy PDF that only included the line 'print this to pdf'.

Please note that the special element handlers only deal with IDs in the current version, which is also stated in a GitHub Issue. It states:

Because the matching is done against every element in the node tree, my desire was to make it as fast as possible. In that case, it meant "Only element IDs are matched" The element IDs are still done in jQuery style "#id", but it does not mean that all jQuery selectors are supported.

Therefore replacing '#ignorePDF' with class selectors like '.ignorePDF' did not work for me. Instead you will have to add the same handler for each and every element, which you want to ignore like:

var elementHandler ={'#ignoreElement':function(element, renderer){returntrue;},'#anotherIdToBeIgnored':function(element, renderer){returntrue;}};

One very important thing to add is that you lose all your style information (CSS). Luckily jsPDF is able to nicely format h1, h2, h3 etc., which was enough for my purposes. Additionalyl it will only print text within text nodes, which means that it will not print the values of textareas and the like. Example:

<body><ul><!-- This is printed as the element contains a textnode --><li>Print me!</li></ul><div><!-- This is not printed because jsPDF doesn't deal with the value attribute --><inputtype="textarea"value="Please print me, too!"></div></body>

Write Your Answer
More Questions Like This

Do you need help in adding the right keywords to your CV? Let our CV writing experts help you.

Get Help