Open xgqfrms opened 2 years ago
@media
print.css
window.print();
Print...
<link media="print" href="./print.css" />
const btn = document.querySelector(`[data-uid="btn"]`); const dom = document.querySelector(`[data-uid="print"]`); btn.addEventListener(`click`, () => { printDOM(dom); }); const printDOM = (dom) => { // debugger; const html = dom.innerHTML; // about:blank const newBlankWindow = window.open("", "_blank"); newBlankWindow.document.write(html); newBlankWindow.document.close(); newBlankWindow.print(); newBlankWindow.close(); }
https://developer.mozilla.org/en-US/docs/Web/CSS/@media#print
https://codepen.io/xgqfrms/pens/popular
css & print
css
@media
query printprint.css
, hidden unwanted print DOM;window.print();
, OR using Chrome right-click menuPrint...
js
https://developer.mozilla.org/en-US/docs/Web/CSS/@media#print