Skip to content

Instantly share code, notes, and snippets.

@marcelod

marcelod/generate-modal-pdf-with-html2canvas-and-jspdf.html

Forked from LucianoCharlesdeSouza/generate-modal-pdf-with-html2canvas-and-jspdf.html
Created April 20, 2021 13:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marcelod/2a52b4b23aa2e0f1a04fea05ebaa98bf to your computer and use it in GitHub Desktop.
Save marcelod/2a52b4b23aa2e0f1a04fea05ebaa98bf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
generate-modal-pdf-with-html2canvas-and-jspdf.html
<!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>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Clica ni mim
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<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>
<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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary" id="gerarPDF">Gerar PDF e Abrir</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<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('portrait', 'pt', 'a4');
let btn = document.getElementById('gerarPDF');
let conteudo = document.getElementById('conteudo');
btn.addEventListener('click', function() {
doc.addHTML(conteudo, 0, 10, function() {
var blob = doc.output("blob");
window.open(URL.createObjectURL(blob));
});
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment