Fe-interview: [js] 第214天 js如何实现打印指定的区域？

[haizhilin2013]

第214天 js如何实现打印指定的区域？

我也要出题

[xgqfrms]

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