Gerador PDF (JS)

//COMO IMPLEMENTAR UM SISTEMA QUE CONVERTE HTML (ESTILIZADO) EM PDF?

//1 - Importe as seguintes libs no seu HTML

//JQUERY (VERSÃO RECOMENDADA: 2.1.0)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

//JSPDF
<script src="https://cdn.rawgit.com/MrRio/jsPDF/master/dist/jspdf.min.js"></script>

//HTML2CANVAS
<script type="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>


//2 - Defina em que ponto o HTML começa a ser convertido e onde ele termina.

<div id="renderPDF"> // COMEÇO

      <h1>Uma página de teste</h1>
      <h3> Aqui dentro vai o conteúdo que deseja converter para pdf, estilizado ou não. </h3>
      
</div> // FIM


//3 - Gere o botão que irá chamar a função "getPDF" no script JS que iremos criar.

<button onclick="getPDF()">Baixar PDF</button>

//4 - Partindo para o JS, agora vamos desenvolver o script do sistema de conversão.

<script language="javascript"> 
        var cache_width = $('#renderPDF').width(); //Criado um cache do CSS
        var a4  =[ 595.28,  841.89]; // Widht e Height de uma folha a4

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

        // Aqui ele cria a imagem e cria o pdf
        html2canvas($('#renderPDF'), {
          onrendered: function(canvas) {
            var img = canvas.toDataURL("image/png",1.0);  
            var doc = new jsPDF({unit:'px', format:'a4'});
            doc.addImage(img, 'JPEG', 20, 20);
            doc.save('NOME-DO-PDF.pdf');
            //Retorna ao CSS normal
            $('#renderPDF').width(cache_width);
          }
        });
        }
    </script>
    
 //5 - O sistema deverá rodar perfeitamente agora.

show!