Skip to content

Instantly share code, notes, and snippets.

@lynas

lynas/bootstrapPrinterFriendlyCss.html

Created September 13, 2019 11:18
Show Gist options
  • Save lynas/16014068fb9bc59e1e64006cd4083839 to your computer and use it in GitHub Desktop.
Save lynas/16014068fb9bc59e1e64006cd4083839 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap printer friendly css
Raw
bootstrapPrinterFriendlyCss.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create a new invoice</title>
<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">
<script crossorigin="anonymous"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script crossorigin="anonymous"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script crossorigin="anonymous"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script crossorigin="anonymous"
src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
// add print button function
$('.print').on('click', function () {
$(".print").hide();
html2canvas(document.body, {
onrendered: function (canvas) {
$("#page").hide();
document.body.appendChild(canvas);
window.print();
$('canvas').remove();
$("#page").show();
}
});
});
});
</script>
<div class="container" id="page">
<div class="row">
<div class="col-lg-4">
<img height="225" src="/img/logo.png" width="225"/>
</div>
<div class="col-lg-4">2</div>
<div class="col-lg-4">
<div style="height: 225px;">
Company Name<br/>
Owner info<br/>
Company Address<br/>
Phone number <br/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div style="height: 225px;">
<h3>Billing address</h3>
<div>
Company Name<br/>
Owner info<br/>
Company Address<br/>
Phone number <br/>
</div>
</div>
</div>
<div class="col-lg-4">
<div style="height: 225px;">
<h3>Shipping address</h3>
<div>
Company Name<br/>
Owner info<br/>
Company Address<br/>
Phone number <br/>
</div>
</div>
</div>
<div class="col-lg-4">
<button class='print'>Print</button>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment