JSFiddle - React, Tailwind, and code Playground

by Rapha Souza

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css">
<!DOCTYPE html>
<html lang="en_US">

<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
</head>

<body>
	<div id="app">
		<h1>HTML Print Example</h1>
		<p>Printing HTML with print.js</p>
		<p class="special-element">
			This element will only show when printed.
		</p>
    <div class="bd-example m-0 border-0">

<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-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
</div>
		<div>
			<button id="print-button">Print HTML</button>
		</div>
	</div>


</body>

</html>

CSS

body {
  font-family: sans-serif;
}

.special-element {
  /*visibility: hidden;*/
}

JavaScript

function printHTML() {
  printJS({
    printable: 'app',
    type: 'html',
    style: '.special-element { visibility: visible; }'
  });
}

document.getElementById("print-button").addEventListener("click", printHTML);