How to print specific component in React?

Question

I am trying to print an Invoice modal component, for the POS-58-Series printer using the window.print(), but I am not able to print the specific component as a header is also printing.

export default function InvoiceModal({ orderInfo }) {
 const [show, setShow] = useState(false);

 const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

 return(
      <Modal
        className="invoice-modal px-5"
        show={show}
        onHide={handleClose}
      >
        <Modal.Header className='d-flex justify-content-between'> 
          <Modal.Title>Invoice</Modal.Title>
          <Button
            className="invoice-print-button"
            variant="contained"
            onClick={() => window.print()}
          >
            Print
          </Button>
        </Modal.Header>
        <Modal.Body id="testInvoicePage">
          <div className="d-flex flex-column justify-content-center">
            <div className="invoice-heading d-flex flex-column text-center">
              <img
                style={{ width: "25%", display: "block", margin: "5px auto" }}
                src={orderInfo.salon.basic.logo} //images.MAIN[0].url
                alt="no data availabel"
              />
              <h4 style={{ fontSize: "23px" }} className="pt-3 pb-3">
                {orderInfo.salon.basic.name || "Salon Name"}
              </h4>
              <span>
                {orderInfo.salon.basic.location.address +
                  " " +
                  orderInfo.salon.basic.location.city.name +
                  " ," +
                  orderInfo.salon.basic.location.state.name ||
                  "Chattarpur, Delhi-110068"}
              </span>
              <span>GST Number - 22AAAAA0000A1Z5</span>
            </div>
            <Dropdown.Divider />
            <div className="d-flex justify-content-between">
              <span style={{fontSize:'14px'}}>
                <b>Invoice No:</b> 123/2021
              </span>
              <span style={{fontSize:'14px'}}>
                <b>Invoice Date:</b>{" "}
                {moment(orderInfo.basic.confirmed_at.date).format("Do MMM") ||
                  "13 May 2021"}
              </span>
            </div>
            <Dropdown.Divider />
            <Table>
              <thead>
                <tr>
                  <th style={{ fontSize: "16px", color:'#000000' }}>#</th>
                  <th style={{ fontSize: "16px", color:'#000000' }}>
                    Item
                  </th>
                  <th style={{ fontSize: "16px", color:'#000000' }}>Price</th>
                </tr>
              </thead>
              <tbody>
                {orderInfo.items.map((item, i) => {
                  //paddingRight: "250px",
                  return (
                    <tr key={i}>
                      <td style={{color:'#000', fontSize: "16px"}}>{i + 1}</td>
                      <td style={{color:'#000', fontSize: "16px"}}>{item.service.name}</td>
                      <td style={{color:'#000', fontSize: "16px"}}>{item.service.price.price_net}</td>
                    </tr>
                  );
                })}
              </tbody>
            </Table>
          </div>
        </Modal.Body>
      </Modal>
 )

}

So when I click on the Print button, the print dialog option opens with the modal body and modal header, with some extra space at the bottom of the page.

Ali Najafi · Accepted Answer · 2021-05-25 12:58:54Z

2

you can use

@meida print {
*{
display:none
}
#print-content {
display: auto
}
}

in css and display none other elements

edited May 25, 2021 at 12:58

answered May 25, 2021 at 12:40

Ali Najafi

1436 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aaquib Over a year ago

how can I remove the bottom space?

Ali Najafi Over a year ago

@media print {*{display: none} #print-side: {display: block}}

Aaquib Over a year ago

I am able to remove the Modal header but print page is still big with huge space down as you can see in the image

Ali Najafi Over a year ago

Send me an email to help you [email protected]

Collectives™ on Stack Overflow

How to print specific component in React?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related