CODEWITHSUNDEEP
javascriptpdf
stanimirsp
stanimirsp

Reputation: 3076

How to generate PDF from HTML with JavaScript?

I want to generate PDF from HTML. The libraries I tried are print.js, jsPDF

With print.js I have HTML and trying to make it to PDF and it succeed, but the PDF is only the HTML, without the CSS. But that does not suit me. Sample example

<table id="printJS-form">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>


<button type="button" onclick="printJS('printJS-form', 'html')">
    Print Form
</button>

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

The closest thing to success was with jsPDF, where I create image this time with all css and then generate from that image PDF. But the problem here is that generated PDF is just image and I lose all meta data from the PDF. Sample example

<body>
  <div id="printJS-form">

   <h3 id='head-color'>Test heading</h3>
   <button id='print-btn'>Start print process</button>
  </div>
</body>

$('#print-btn').click(()=>{
   var pdf = new jsPDF();
    pdf.addHTML(document.body,function() {
    pdf.save('web.pdf');
 });
})

#head-color{
  color: blue;
}

Another thing I tried and really hope to make it here, because it seems cleaner option for me, is with "onbeforeprint" event. Here right before window.print() to be called, "onbeforeprint" event is activated. And if in "onbeforeprint", PDF is already generated I want somehow to access it. But I can`t figure out how and whether it is at all possible. Sample example

<html>
<body onbeforeprint="myFunction()">

<h1>Try to print this document</h1>
<p><b>Tip:</b> Keyboard shortcuts, such as Ctrl+P sets the page to print.</p>
<p><b>Note:</b> The onbeforeprint event is not supported in Safari and Opera.</p>
<button type="button" onclick="printWindow()">
    Print Form
</button>
<script>
function myFunction() {
// get blob pdf
  alert("You are about to print this document!");
}
function printWindow() {
 window.print();
}
</script>

</body>
</html>

And finally I'm asking

Is there a way, with print.js or jsPDF, to get not just the html, but the css too?

Can I get binary PDF from "onbeforeprint" event or any other javascript event?

Upvotes: 1

Views: 7121

Answers (1)

kapantzak
kapantzak

Reputation: 11750

I think you could use Puppeteer to generate a pdf. I've not tried it but here are some links that demonstrate this approach:

Upvotes: 4

Related Questions