how to make html to pdf usign jsPDF

Share:

If you are searching for how to make HTML to pdf using jsPDF on the internet but don't understand how to download a pdf file using jspdf and how to use jsPDF then you have come to the right place.




In this blog, I will show you how to convert HTML2 to PDF copy. Let's start with JS PDF.

"HTML to pdf" ------------------>how to make an HTML file to pdf file using javascript or jquery ?

follow this step then you can make HTML to pdf document------

STEP 1: HTML code paste into your  INDEX,HTML page.

<div id="pdfs" style="text-align: center;">
    <center>  
    <table border="1">
      <tr>
        <th>name</th>
        <th>email</th>
        <th>number</th>
        <th>taka</th>
      </tr>

          <tr>
        <th> roy</th>
        <th>j@gmail.com</th>
        <th>01971779608</th>
        <th>500tk</th>
      </tr>


          <tr>
        <th>roy</th>
        <th>roy@gmail.com</th>
        <th>01721779608</th>
        <th>500tk</th>
      </tr>
    </table>

    
  </center>
  </div>





STEP 2: add this button tag on your HTML INDEX page 

 <button onclick="ppd()">print</button>

step 3 : use to script link in your html page INDEX PAGE  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>


step 4: use this code

Use this code before the body tag close.

<script type="text/javascript">


  function ppd(e){

    var doc = new jsPDF();

    var x = document.getElementById('pdfs');

    doc.fromHTML(x,15,15);
    doc.save("pdf.pdf");


  }
</script>





full code example :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title> html to pdf</title>
</head>
<body>

  <div id="pdfs" style="text-align: center;">
    <center>  
    <table border="1">
      <tr>
        <th>name</th>
        <th>email</th>
        <th>number</th>
        <th>taka</th>
      </tr>

          <tr>
        <th> roy </th>
        <th>j@gmail.com</th>
        <th>01971779608</th>
        <th>500tk</th>
      </tr>


          <tr>
        <th>roy</th>
        <th>roy@gmail.com</th>
        <th>01721779608</th>
        <th>500tk</th>
      </tr>
    </table>

    
  </center>
  </div>

  <button onclick="ppd()">print</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script type="text/javascript">
  function ppd(e){

    var doc = new jsPDF();

    var x = document.getElementById('pdfs');

    doc.fromHTML(x,15,15);
    doc.save("pdf.pdf");


  }
</script>
</body>
</html>

Follow these steps above so you can convert to html2pdf and download your pdf file. If there is any problem then please let me know in the comments. I will try to solve your problem. Thank you.






Post a Comment

No comments