Back

Explore Courses Blog Tutorials Interview Questions

Generate pdf from HTML in div using Javascript

0 votes
2 views
in Java by (13.1k points)

Can anyone help me print pdf from HTML. I am using jspdf but it contains only text.

<!DOCTYPE html>

<html>

    <body>

        <p>don't print this to pdf</p>

        <div id="pdf">

            <p><font size="3" color="red">print this to pdf</font></p>

        </div>

    </body>

</html>

Can anyone help me with this?

1 Answer

0 votes
by (26.7k points)

Basically, jsPDF comes with different plugins, in able to print HTML, you have to add some plugins into it. To do that:

- Download the latest version.

- Then, include these scripts:

jspdf.js

jspdf.plugin.from_html.js

jspdf.plugin.split_text_to_size.js

jspdf.plugin.standard_fonts_metrics.js

Then, your HTML code will look like this:

<!DOCTYPE html>

<html>

  <body>

    <p id="ignorePDF">don't print this to pdf</p>

    <div>

      <p><font size="3" color="red">print this to pdf</font></p>

    </div>

  </body>

</html>

After that, run the below file, that will help to convert to PDF:

var doc = new jsPDF();          

var elementHandler = {

  '#ignorePDF': function (element, renderer) {

    return true;

  }

};

var source = window.document.getElementsByTagName("body")[0];

doc.fromHTML(

    source,

    15,

    15,

    {

      'width': 180,'elementHandlers': elementHandler

    });

doc.output("dataurlnewwindow");

I hope this will help.

Want to become a Java expert? join Java Training now!!

Related questions

0 votes
1 answer
Export HTML page to PDF on user click using JavaScript.
asked Mar 28, 2021 in Web Technology by Jake (7k points)
0 votes
1 answer
How to convert HTML to PDF using iText.
asked Mar 17, 2021 in Java by Jake (7k points)
0 votes
1 answer
generate html table dynamically from JSON data
asked Mar 30, 2021 in Web Technology by Jake (7k points)
0 votes
1 answer
How can I remove child node in HTML using JavaScript?
asked Feb 18, 2021 by Harsh (1.5k points)

Browse Categories

© COPYRIGHT 2011-2023 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

Download Salary Trends Now !

Learn how professionals like you got up to 100% Salary Hike.

...