Download a div in a HTML page as pdf using javascript

http://stackoverflow.com/questions/17293135/download-a-div-in-a-html-page-as-pdf-using-javascript

by pratapamit

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="content">
     <h3>Hello, this is a H3 tag</h3>
  <img src="https://i2.wp.com/www.hostname.space/public/uploads/2018/05/worldwide-support-1.png" class="img-responsive" style="top:40px;position:absolute;z-index:10;width:50px;">
  
  <img src="https://i1.wp.com/www.hostname.space/public/uploads/2018/05/optimize-1.png" class="img-responsive" style="top:40px;position:absolute;">
    
</div>

<button id="btnPrint" style="top:170px;position:absolute;">generate PDF</button>

JavaScript

var cache_width = $('#content').width(); //Criado um cache do CSS
    var a4 = [595.28, 841.89]; // Widht e Height de uma folha a4

    $(document).on("click", '#btnPrint', function () {
        // Setar o width da div no formato a4
        $("#content").width((a4[0] * 1.33333) - 80).css('max-width', 'none');

        // Aqui ele cria a imagem e cria o pdf
        html2canvas($('#content'), {
            onrendered: function (canvas) {
                var img = canvas.toDataURL("image/png", 1.0);
                
                var doc = new jsPDF('landscape'); // default is portrait
                doc.addImage(img, 'PNG', 20, 20);
                doc.save('NAME-OF-PDF.pdf');
                //Retorna ao CSS normal
                $('#content').width(cache_width);
            }
        });
    });