search

xgqfrms / learning

learning : A collection of all kinds of resources, videos, pdf, blogs, codes... 📚 + 💻 + ❤
https://learning.xgqfrms.xyz
MIT License
16 stars 12 forks source link

css & print #129

Open xgqfrms opened 2 years ago

xgqfrms commented 2 years ago

css & print

css

  1. setting @media query print print.css, hidden unwanted print DOM;
  2. call window.print();, OR using Chrome right-click menu Print...

<link media="print" href="./print.css" />

js

    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

xgqfrms commented 2 years ago

https://codepen.io/xgqfrms/pens/popular