reactjs - 仅在打印时显示该行答案

【问题标题】：reactjs - show the line only when printingreactjs - 仅在打印时显示该行
【发布时间】：2021-12-08 20:24:56
【问题描述】：

我的reactjs 中有一个 div，我将其着色为白色。我想在用户尝试打印时更改线条的颜色。

这是我的做法。

    const useStyles = makeStyles(() => ({
        vl: {
            borderLeft: "1px solid #fff",
            height: "100%",
            position: "absolute",
            left: "50.9%",        
            top: "0",
        },
    }));

 const pagePrintStyle = `
    @media print {               
        table {
            font-size: 16.5px !important;                    
        }
        td {
            padding: 0.2rem !important;
        }
        .vl {            
            borderLeft: 1px solid #181818 !important,           
        }
    }

    @page { 
        size: 11.0in 8.5in; !important;
        margin:20mm 5mm 32mm 5mm;       
    }     
    `;

我声明了两个 CSS，第一个 CSS 用于将 div 从白色着色为 #fff，然后另一个用于打印，我将其着色为黑色 #181818 !important。

我还使用了ReactToPrint 库

这是我的全部内容。

<div style={{ margin: "0", padding: "0", width: "100%" }} ref={dtrRef}>
    <Row gutter={[24, 24]}>
        <Col
            className="gutter-row"
            xs={12}
            md={12}
            lg={12}
        >
            <DTR timeLogsData={timeLogs} selectedMY={state.selectedDate} dtr_state></DTR>
        </Col>
        <div className={`${classes.vl}`}></div>
        <Col
            className="gutter-row"
            xs={12}
            md={12}
            lg={12}
        >
            <DTR timeLogsData={timeLogs} selectedMY={state.selectedDate} dtr_state></DTR>
        </Col>
    </Row>
</div>

这是我打印页面的按钮：

<ReactToPrint
trigger={() => {
    return <Button variant="contained" color="primary" size="small" style={{ margin: "1rem 1rem" }}><PrintIcon />PRINT</Button>;
}}
content={() => dtrRef.current}
pageStyle={pagePrintStyle} />

【问题讨论】：

标签： reactjs react-to-print

【解决方案1】：

您可以使用 DOM 事件侦听器在 Javascript 上侦听打印事件。 Source

window.addEventListener("beforeprint", function(event) { ... });
window.onbeforeprint = function(event) { ... };

你可以在useEffect钩子中使用这个来注册事件。

useEffect(() => {
    window.addEventListener("beforeprint", function(event) { ... });
    return () => {
      window.removeEventListener("beforeprint", function(event) { ... });
    }
  });

【讨论】：