LucianoCharlesdeSouza · June 28, 2020 17:50
diff --git a/Baixa-div-com-imagem-usando-jsPDF-html2canvas.html b/Baixa-div-com-imagem-usando-jsPDF-html2canvas.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>Document</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/>

    <img src="1.jpg" alt="++php">

    <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 id="download" >

 </div>

 <div id="previewImage"></div>

 <button id="gerarImagem" class="btn btn-success">Gerar Imagem</button>



 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></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 element = $("#conteudo");

    let getCanvas;

    $('document').ready(function () {

        html2canvas(element, {
            onrendered: function (canvas) {

                // $("#previewImage").html(canvas);
                getCanvas = canvas;
            }
        });
    });

    $("#gerarImagem").on('click', function () {

        let imageData = getCanvas.toDataURL("image/png");

        let newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");

        let linkDownload= `<a href="${newData}" download="exemplo-imagem.png">Baixar Imagem</a>`;

        $("#download").html(linkDownload);
    });

 </script>
 </body>
 </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>Document</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/>

	<img src="1.jpg" alt="++php">

	<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 id="download" >

	</div>

	<div id="previewImage"></div>

	<button id="gerarImagem" class="btn btn-success">Gerar Imagem</button>



	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></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 element = $("#conteudo");

	let getCanvas;

	$('document').ready(function () {

	html2canvas(element, {
	onrendered: function (canvas) {

	// $("#previewImage").html(canvas);
	getCanvas = canvas;
	}
	});
	});

	$("#gerarImagem").on('click', function () {

	let imageData = getCanvas.toDataURL("image/png");

	let newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");

	let linkDownload= `<a href="${newData}" download="exemplo-imagem.png">Baixar Imagem</a>`;

	$("#download").html(linkDownload);
	});

	</script>
	</body>
	</html>