Skip to content

Instantly share code, notes, and snippets.

@jinan-kordab

jinan-kordab/separateprint.html

Created June 3, 2019 00:58
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 jinan-kordab/697c3796bf2857c00278c785551c8d37 to your computer and use it in GitHub Desktop.
Save jinan-kordab/697c3796bf2857c00278c785551c8d37 to your computer and use it in GitHub Desktop.
Download ZIP
Printing separate section of your web page
Raw
separateprint.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function printmydiv(divid) {
//Get the HTML of the DIV
var divElements = document.getElementById(divid).innerHTML;
//Get the HTML of the whole page
var oldPage = document.body.innerHTML;
//Reset theh page's HTML with divs HTML only
document.body.innerHTML = "<html><head><title></title></head><body>" + divElements + "</body></html>";
//Print page
window.print();
//Restore original HTML
document.body.innerHTML = oldPage;
}
</script>
</head>
<body>
<div class="container" id="bdy">
<h3>PRINTING SEPARATE SECTIONS</h3>
<hr />
<div class="row">
<div class="col-sm-4">
<input type="button" class="btn btn-primary" onclick="printmydiv('dvone')" value="PRINT EXAMPLE ONE" />
<div class="card" style="width: 18rem;" id="dvone">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Image cap [100%x180]" src="IMG_1757.png" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-body">
<h5 class="card-title">Example 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-sm-4">
<input type="button" class="btn btn-primary" onclick="printmydiv('dvtwo')" value="PRINT EXAMPLE TWO" />
<div class="card" style="width: 18rem;" id="dvtwo">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Image cap [100%x180]" src="IMG_1757.png" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-body">
<h5 class="card-title">Example 2</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-sm-4">
<input type="button" class="btn btn-primary" onclick="printmydiv('dvthree')" value="PRINT EXAMPLE THREE" />
<div class="card" style="width: 18rem;" id="dvthree">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Image cap [100%x180]" src="IMG_1757.png" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-body">
<h5 class="card-title">Example 3</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment