JSFiddle - React, Tailwind, and code Playground
HTML
<button class="print-button">Print Me</button>
CSS
body {
background: red;
}
.print-button {
display: none;
}
.print-layout body {
background: white;
}
.print-layout .print-button {
display: block;
}
JavaScript
document.addEventListener('keydown', function (event) {
// listen for ctrl+p
if (event.key === "p" && event.ctrlKey === true) {
event.preventDefault();
// add class to html element
document.documentElement.classList.toggle('print-layout');
}
})
var printButton = document.querySelector('.print-button');
// just trigger print popup
printButton.addEventListener('click', function() {
window.print();
})