Created
June 27, 2020 20:17
-
-
Save LucianoCharlesdeSouza/d6393e1d42b57064198c4c80ab1ab41a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>jsPDF</title> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" | |
| integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |
| <style> | |
| #conteudo { | |
| padding: 20px; | |
| width: 80%; | |
| margin: 0 auto; | |
| background-color: #ffffff; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container text-center"> | |
| <h1>Exemplo Básico de uso do JsPDF/HTML2CANVAS</h1> | |
| </div> | |
| <div id="conteudo"> | |
| <h3>PDF com CSS</h3> | |
| <button type="button" class="btn btn-primary">Primary</button> | |
| <button type="button" class="btn btn-secondary">Secondary</button> | |
| <button type="button" class="btn btn-success">Success</button> | |
| <button type="button" class="btn btn-danger">Danger</button> | |
| <button type="button" class="btn btn-warning">Warning</button> | |
| <button type="button" class="btn btn-info">Info</button> | |
| <button type="button" class="btn btn-dark">Dark</button> | |
| <br/> | |
| <br/> | |
| <table class="table table-striped table-bordered"> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Nome</th> | |
| <th>Idade</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>1</td> | |
| <td>Luciano Charles</td> | |
| <td>99</td> | |
| </tr> | |
| <tr> | |
| <td>2</td> | |
| <td>Fulano de Tal</td> | |
| <td>89</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <button id="gerarPDF" class="btn btn-success">Gerar PDF</button> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" | |
| integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js" | |
| integrity="sha256-c3RzsUWg+y2XljunEQS0LqWdQ04X1D3j22fd/8JCAKw=" crossorigin="anonymous"></script> | |
| <script> | |
| let doc = new jsPDF('landscape', 'pt', 'a4'); | |
| let btn = document.getElementById('gerarPDF'); | |
| let conteudo = document.getElementById('conteudo'); | |
| btn.addEventListener('click', function () { | |
| doc.addHTML(conteudo, 0, 10, function () { | |
| doc.save("teste.pdf"); | |
| }); | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment