JSFiddle - React, Tailwind, and code Playground

by Julian

HTML

<p>test</p>
<a>print</a><br />
<a href="javascript:window.print(); return false;">window.print</a>

.<br />
.<br />

.<br />
.<br />

.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />

CSS

html {
    position: relative;
}

body {
    background-color: #ddd;
    width: 100%;
    height: 100%;
    position: relative;
}

@media print {
    body {
        background-color: red;
    }
}

JavaScript

$(document).ready( function (){
    $(document).on('click', 'a', onPrint);
    $(document).on('DOMNodeInsertedIntoDocument', function(event) {
        console.log("DOMNodeInsertedIntoDocument", arguments);
    });
});

function onPrint(event) {
    console.log(document.compatMode);
    window.print();
    console.log(document.compatMode);
}