PrintJS and Styled HTML

by ph822720355

HTML

<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">
    refer to the logo section below. reveal.js Build Status Slides A framework for easily creating beautiful presentations using HTML. Check out the live demo. reveal.js comes with a broad range of features including nested slides, Markdown contents, PDF export, speaker notes and a JavaScript API. There's also a fully featured visual editor and platform for sharing reveal.js presentations at slides.com. Table of contents Online Editor Instructions Markup Markdown Element Attributes Slide Attributes Configuration Presentation Size Dependencies Ready Event Auto-sliding Keyboard Bindings Touch Navigation Lazy Loading API Slide Changed Event Presentation State Slide States Slide Backgrounds Parallax Background Slide Transitions Internal links Fragments Fragment events Code syntax highlighting Slide number Logo Overview mode Fullscreen mode Embedded media Stretching elements postMessage API PDF Export Theming Speaker Notes Share and Print Speaker Notes Server Side Speaker Notes Multiplexing Master
refer to the logo section below. reveal.js Build Status Slides A framework for easily creating beautiful presentations using HTML. Check out the live demo. reveal.js comes with a broad range of features including nested slides, Markdown contents, PDF export, speaker notes and a JavaScript API. There's also a fully featured visual editor and platform for sharing reveal.js presentations at slides.com. Table of contents Online Editor Instructions Markup Markdown Element Attributes Slide Attributes Configuration Presentation Size Dependencies Ready Event Auto-sliding Keyboard Bindings Touch Navigation Lazy Loading API Slide Changed Event Presentation State Slide States Slide Backgrounds Parallax Background Slide Transitions Internal links Fragments Fragment events Code...

CSS

.header {
  color: red;
  margin-bottom: 5px;
  font-size: 50px;
}

.content {
  text-size: 20px;
  font-weight: bold;
  padding: 40px;
  margin-bottom: 30px;
}

.footer button {
  padding: 30px 80px;
}

button: {
  margin-right: 20px;
}

JavaScript

// Print.js
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.printJS=t():e.printJS=t()}(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){e.exports=n(2)},function(e,t,n){},function(e,t,n){"use strict";n.r(t);n(1);var r={isFirefox:function(){return"undefined"!=typeof InstallTrigger},isIE:function(){return-1!==navigator.userAgent.indexOf("MSIE")||!!document.documentMode},isEdge:function(){return!r.isIE()&&!!window.StyleMedia},isChrome:function(){var e=arguments.length>0&&arguments[0]!==undefined?arguments[0]:window;return!!e.chrome},isSafari:function(){return Object.prototype.toString.call(window.HTMLElement).indexOf("Constructor")>0||-1!==navigator.userAgent.toLowerCase().indexOf("safari")},isIOSChrome:function(){return-1!==navigator.userAgent.toLowerCase().indexOf("crios")}},o=r,i={show:function(e){var t=document.createElement("div");t.setAttribute("style","font-family:sans-serif; display:table; text-align:center; font-weight:300; font-size:30px;...