如何在 React 中打印特定组件？

Question

我正在尝试使用 window.print() 为 POS-58 系列打印机打印发票模式组件，但我无法打印特定组件，因为页眉也在打印。

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

}
  

因此，当我单击“打印”按钮时，会打开打印对话框选项，其中包含模态正文和模态标题，页面底部有一些额外的空间。

Answer 1

你可以使用

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

在 css 中并显示非其他元素