PrintJS and Styled HTML

by ph822720355

HTML

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<button onClick="printJS({printable: 'print-area', type: 'html', targetStyles: ['*']})">
      Print
    </button>

<div id="print-area">
	<h2 class="header">Printing Styled HTML</h2>
  <div class="content">
    Some styled html...
  </div>
  <div class="footer">
    
  </div>
</div>

CSS

#print-area {
  padding: 30px;
}
.header {
  color: red;
  margin-bottom: 30px;
  text-size: 30px;
}
.content {
  text-size: 20px;
  font-weight: bold;
  padding: 40px;
  margin-bottom: 30px;
}
.footer button {
  padding: 30px 80px;
}