reactjs - show the line only when printing

Question

I have a div in my reactjs which I colored to white. I want to change the color of the line whenever the user tries to print it.

Here is how I've done it.

    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;       
    }     
    `;

I declared two CSS the first CSS which I use to color the div from white which is #fff then the other one is for print which I colored to black #181818 !important.

I also used the ReactToPrint library

Here is my whole content.

<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>

Here is my button to print the page:

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

score 0 · Answer 1 · answered Oct 22 '21 at 07:20

You can listen to print events on Javascript using DOM event listener. Source

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

You can use this in useEffect hook to register the event.

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

reactjs - show the line only when printing

1 Answers1