ReactJS - 打印 DOM 中的特定元素

Question

I am using ReactJS on an App and currently need to be able to print some elements from the page on user's request (click on a button).

I chose to use the CSS media-query type print ( @media print ) to be able to check if an element should be printed, based on a selector that could be from a class or attribute on an Element. The strategy would be to hide everything but those "printable" elements with a stylesheet looking like:

@media print {
    *:not([data-print]) {
        display: none;
    }
}

However, for this to work I need to also add the chosen print selector (here the attribute data-print ) on every parent element each printable element has.

To do that here's what I've tried so far:

export default function PrintButton() {
    useEffect(() => {
        const handleBeforePrint = () => {
            printNodeSelectors.forEach((selector) => {
                const printableElement = document.querySelector(selector);
                if (printableElement != null) {
                    let element = printableElement;
                    while (element.parentElement) {
                        element.setAttribute("data-print", "");
                        element = element.parentElement;
                    }
                    element.setAttribute("data-print", "");
                }
            });
        };
        const handleAfterPrint = () => {
            printNodeSelectors.forEach((selector) => {
                const printableElement = document.querySelector(selector);
                if (printableElement != null) {
                    let element = printableElement;
                    while (element.parentElement) {
                        element.removeAttribute("data-print");
                        element = element.parentElement;
                    }
                    element.removeAttribute("data-print");
                }
            });
        };
        window.addEventListener("beforeprint", handleBeforePrint);
        window.addEventListener("afterprint", handleAfterPrint);
        return () => {
            window.removeEventListener("beforeprint", handleBeforePrint);
            window.removeEventListener("afterprint", handleAfterPrint);
        };
    }, []);

    return <button onClick={() => window.print()}>Print</button>;
}

With printNodeSelectors being a const Array of string selectors.

Unfortunately it seems that React ditch out all my dirty DOM modification right after I do them

I'd like to find a way to achieve this without having to manually put everywhere in the app who should be printable, while working on a React App, would someone knows how to do that?

Answer 1

Just CSS should be enough to hide all Elements which do not have the data-print attribute AND which do not have such Element in their descendants .

Use the :has CSS pseudo-class (in combination with :not one) to express that 2nd condition (selector on descendants):

@media print {
  *:not([data-print]):not(:has([data-print])) {
    display: none;
  }
}

Caution: ancestors of Elements with data-print attribute would not match, hence their text nodes (not wrapped by a tag) would not be hidden when printing:

<div>
  <span>should not print</span>
  <span data-print>but this should</span>
  Caution: text node without tag may be printed...
</div>

Demo: https://jsfiddle.net/6x34ad50/1/ (you can launch the print preview browser feature to see the effect, or rely on the coloring)

Similar but just coloring to directly see the effect:

 *:not([data-print]):not(:has([data-print])) { color: red; }

 <div> <span>should not print (be colored in red)</span> <span data-print>but this should</span> Caution: text node without tag may be printed... </div>

Answer 2

After some thoughts, tries and errors it appears that even though I managed to put the attribute selector on the parents I completely missed the children of the elements I wanted to print! (React wasn't at all removing the attributes from a mysterious render cycle in the end)

Here's a now functioning Component:

export default function PrintButton() {
    
    useEffect(() => {
        const handleBeforePrint = () => {
            printNodeSelectors.forEach((selector) => {
                const printableElement = document.querySelector(selector);
                if (printableElement != null) {
                    const elements: Element[] = [];
                    // we need to give all parents and children a data-print attribute for them to be displayed on print
                    const addParents = (element: Element) => {
                        if (element.parentElement) {
                            elements.push(element.parentElement);
                            addParents(element.parentElement);
                        }
                    };
                    addParents(printableElement);
                    const addChildrens = (element: Element) => {
                        elements.push(element);
                        Array.from(element.children).forEach(addChildrens);
                    };
                    addChildrens(printableElement);
                    elements.forEach((element) => element.setAttribute("data-print", ""));
                }
            });
        };
        const handleAfterPrint = () => {
            document.querySelectorAll("[data-print]").forEach((element) => element.removeAttribute("data-print"));
        };
        window.addEventListener("beforeprint", handleBeforePrint);
        window.addEventListener("afterprint", handleAfterPrint);
        return () => {
            window.removeEventListener("beforeprint", handleBeforePrint);
            window.removeEventListener("afterprint", handleAfterPrint);
        };
    }, []);

    return <button onClick={() => window.print()}>Print</button>;
}

I usually don't like messing with the DOM while using React but here it allows me to keep everything in the component without having to modify anything else around (though I'd agree that those printNodeSelectors need to be chosen from outside and aren't dynamic at the moment)