print-html-element
Version:
Prints the HTML of a provided element.
143 lines (132 loc) • 6.67 kB
HTML
<html>
<head>
<title>Print Element Sample</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Print Element Sample</h1>
<p>Here are a couple of samples to show <code>print-html-element</code> in action</p>
</div>
<div>
<div class="row">
<div class="col-md-3">
<button id="printStrButton" class="btn btn-lg btn-primary">Print HTML string from popup</button>
</div>
<div class="col-md-9">
<pre><h1>Let's print this h1</h1>
<p>...and while we're at it, this p as well will do nicely.</p></pre>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3">
<button id="printStrIframeButton" class="btn btn-lg btn-primary">Print HTML string from iframe</button>
</div>
<div class="col-md-9">
<pre><h1>Let's print this h1</h1>
<p>...and while we're at it, this p as well will do nicely.</p></pre>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3">
<button id="printStrStylesButton" class="btn btn-lg btn-primary">Print with custom styles</button>
</div>
<div class="col-md-9">
<code>styles: 'body { transform: translate(-150px, 500px) rotate(45deg); }'</code>
<br><br>
<pre><h1>Let's print this h1</h1>
<p>...and while we're at it, this p as well will do nicely.</p></pre>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3">
<button id="printStrStylesheetButton" class="btn btn-lg btn-primary">Print with custom stylesheets</button>
</div>
<div class="col-md-9">
<code>stylesheets: 'https://cdnjs.cloudflare.com/ajax/libs/typeplate-starter-kit/3.0.1/css/typeplate.min.css'</code>
<br><br>
<pre><h1>Let's print this h1</h1>
<p>...and while we're at it, this p as well will do nicely.</p></pre>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3">
<button id="printTempStrButton" class="btn btn-lg btn-primary">Print HTML w/ Template</button>
</div>
<div class="col-md-9">
<pre><p>I want to print this paragraph in a template</p></pre>
<pre><header class="label">I'm part of the template header</header>
{{printBody}}
<footer class="label">I'm part of the template footer</footer></pre>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<button id="printElButton" class="btn btn-lg btn-primary">Print section below</button>
</div>
</div>
</div>
<div id="printElement" class="test print class">
<div class="page-header">
<h2>Print this div</h2>
</div>
<div class="alert alert-success" role="alert">
<strong>We're going to print this!</strong>
</div>
<div class="alert alert-info" role="alert">
<strong>...and we're going to print this!</strong>
</div>
</div><!-- #printElement -->
<div>
<div class="page-header">
<h2>Just displaying this div</h2>
</div>
<div class="alert alert-danger" role="alert">
<strong>We're not going to print this</strong>
</div>
</div>
</div>
<script type="text/javascript" src="../dist/print-html-element.js"></script>
<script type="text/javascript">
document.getElementById('printStrButton').addEventListener('click', function(e){
e.preventDefault();
printHtmlElement.printHtml('<h1>Let\'s print this h1</h1><p>...and while we\'re at it, this p as well will do nicely.</p>', {pageTitle: 'From HTML String', printMode: 'popup'});
});
document.getElementById('printStrIframeButton').addEventListener('click', function(e){
e.preventDefault();
printHtmlElement.printHtml('<h1>Let\'s print this h1</h1><p>...and while we\'re at it, this p as well will do nicely.</p>', {pageTitle: 'From HTML String', printMode: 'iframe'});
});
document.getElementById('printStrStylesButton').addEventListener('click', function(e){
e.preventDefault();
printHtmlElement.printHtml('<h1>Let\'s print this h1</h1><p>...and while we\'re at it, this p as well will do nicely.</p>', {
pageTitle: 'From HTML String',
printMode: 'iframe',
styles: 'body { transform: translate(-150px, 500px) rotate(45deg); }'
});
});
document.getElementById('printStrStylesheetButton').addEventListener('click', function(e){
e.preventDefault();
printHtmlElement.printHtml('<h1>Let\'s print this h1</h1><p>...and while we\'re at it, this p as well will do nicely.</p>', {
pageTitle: 'From HTML String',
printMode: 'iframe',
stylesheets: 'https://cdnjs.cloudflare.com/ajax/libs/typeplate-starter-kit/3.0.1/css/typeplate.min.css'
});
});
document.getElementById('printTempStrButton').addEventListener('click', function(e){
e.preventDefault();
printHtmlElement.printHtml('<p>I want to print this paragraph in a template</p>', {pageTitle: 'From HTML String', templateString: '<header class="label">I\'m part of the template header</header>{{printBody}}<footer class="label">I\'m part of the template footer</footer>'});
});
document.getElementById('printElButton').addEventListener('click', function(e){
var element = document.getElementById('printElement');
e.preventDefault();
printHtmlElement.printElement(element, {pageTitle: 'From HTML Element'});
});
</script>
</body>
</html>