Question 15073 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How To Convert HTML to PDF using JavaScript – Jquery

I want to convert HTML to PDF with the click of a button and download.
My js working perfectly only need the latest JavaScript CDN link.

HTML

<div id="pageprint">
   <div id="reportbox">Hello World!!</div>
</div> 
<button type="button" onclick="downloadCode();">Download HTML</button>

Javascript

<script>
    function generatePDF() {
    
    const element = document.getElementById("pageprint");
    document.getElementById("reportbox").style.display = "block";
    document.getElementById("reportbox").style.marginTop = "0px"; 
    document.getElementById("pageprint").style.border = "1px solid black";
    html2pdf().from(element).save('download.pdf'); 
    }
    
    function downloadCode(){
    var x = document.getElementById("reportbox");  
    generatePDF();
    setTimeout(function() { window.location=window.location;},3000);}
</script>
Tags:

3

Answers


  1. 0

    You can print html just as follow.

    <style type="text/css">
    @media print{ button {display:none} };
</style>

<div id="pageprint">
   <div id="reportbox">Hello World!!</div>
</div> 
<button type="button" onclick=javascript:window.print()>Download HTML</button>

    Please let me know if any issue found

    Login or Signup to reply.
  2. 0

    There isn’t an easy way to do this. The best thing you could do is to open an empty page, fill it with your html data and print it to pdf. Or look for some external libary like jsPDF.

    example for print to pdf:

     var wnd = window.open('about:blank', '', '_blank');
 wnd.document.write("<p> Some HTML-Content </p> ");
 wnd.print();
    Login or Signup to reply.
  3. 0

    If all you need is the CDN then simply add it after the </body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


        function generatePDF() {
    
    const element = document.getElementById("pageprint");
    document.getElementById("reportbox").style.display = "block";
    document.getElementById("reportbox").style.marginTop = "0px"; 
    document.getElementById("pageprint").style.border = "1px solid black";
    html2pdf().from(element).save('download.pdf'); 
    }
    
    function downloadCode(){
    var x = document.getElementById("reportbox");  
    generatePDF();
    setTimeout(function() { window.location=window.location;},3000);}
    
    <div id="pageprint">
   <div id="reportbox">Hello World!!</div>
</div> 
<button type="button" onclick="downloadCode();">Download HTML</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

    However seems a very odd way to ask a user to download a pdf page since the option disappears after the download is attempted, so change of mind does not keep it user visible to try differently on fail.
    enter image description here

    So for example, I say open the download on current page, I see
    enter image description here

    but if I say open in PDF Viewer I see
    enter image description here

    It’s much simpler to layout the printable HTML page as text not image, and suggest the user prints or saves exactly as their browser is configured and their desire, best result for all, especially as no libraries are needed.
    Nor will the page be cluttered by buttons.
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search