CODEWITHSUNDEEP
javascriptjquerycsshtmlpdf-generation
ajay
ajay

Reputation: 149

How to convert HTML page to PDF then download it?

This is my web page designed with HTML and CSS:

How can I download the same web page as PDF? I was trying many solutions but I am getting only content on PDF file but not with CSS style.

Any solutions?

Upvotes: 13

Views: 49845

Answers (2)

Ivan
Ivan

Reputation: 40618

As explained in this post you can use the jsPDF library to do that.

Make sure to include both jQuery and jsPDF in your file.

Also get html2canvasJS to convert the document elements to canvas in order to fix the CSS.

JS:

let doc = new jsPDF('p','pt','a4');

doc.addHTML(document.body,function() {
    doc.save('html.pdf');
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

<div id="content">
  <h1 style="color:red">Hello World</h1>
  <p>this is a PDF</p>
</div>

Demo: JSFiddle

You can also trigger the download with a button (see initial post for details)

Upvotes: 24

Kirit
Kirit

Reputation: 415

  1. Download the latest version of jsPDF.

  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

Upvotes: 1

Related Questions