PDF export from html table

jsPDF demo

by Juan Muñoz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12">


      <div id="content">
        <h2 class="text-center">Export from HTML</h2>
        <p>This is a demo for exporting PDF from html using jsPDF. Click save <code>button</code> to export this content.
        </p>
        <br>
        <p>Also checkout <a href="https://github.com/simonbengtsson/jsPDF-AutoTable">jsPDF-Autotable</a> for generating PDF tables with more customizable options.</p>
        <table cellpadding="1" cellspacing="1" border="1" style="border: 1px;width: 100%;height: 50%;" id="demo">
        
        <thead style="background-color:white;">   
            <tr style="height: 100px;">
                <th colspan="5" class="text-center" id="movTitle"><h3>Movimientos</h3></th>
                <th colspan="5" class="text-center hide" id="movTitleNo"><h3>Movimientos No Conciliados</h3></th>
                <th colspan="3">
                    <div style="position:fixed; background-color:rgb(3,94,148,1);color:white;z-index:12;">
                    <span style="float:left;">
                        <input type="radio" name="tipoconcil" value="0" checked="">
                        Todo
                    </span><br>
                    <span style="float:left;">
                        <input type="radio" name="tipoconcil" value="1">
                        No Conciliado
                    </span>
                </div>
                </th>
            </tr>
            <tr><th colspan="9" class="text-center"><h4>Banco Chile</h4></th></tr>
            <tr style="height: 100px;"><th colspan="9" class="text-center"><h4>Diciembre 2019</h4></th></tr>
            <tr>     
                <th style="border-radius: 5px 5px 5px 5px;width:80px;text-align: center;" class="hide">oculto</th>
                <!-- <th...

CSS

footer {
  color: rgb(180, 180, 180);
}

JavaScript

$(document).ready(function (){
  $('#export').click(function (){
  
    var HTML_Width = $("#demo").width();
    var HTML_Height = $("#demor").height();
    var top_left_margin = 15;
    var PDF_Width = HTML_Width + (top_left_margin * 2);
    var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
    var canvas_image_width = HTML_Width;
    var canvas_image_height = HTML_Height;

    var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;

    html2canvas($("#demo")[0]).then(function (canvas) {
        var imgData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
        pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
        for (var i = 1; i <= totalPDFPages; i++) { 
            pdf.addPage(PDF_Width, PDF_Height);
            pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
        }
        pdf.save("Your_PDF_Name.pdf");
        //$(".html-content").hide();
    });
})
})