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

我正在尝试使用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>
 )

}
  

导出默认函数InvoiceModal（{orderInfo}）{
const[show，setShow]=useState（false）；
const handleClose=（）=>setShow（false）；
常量handleShow=（）=>setShow（true）；
返回(
发票联
window.print（）}
>
印刷品
{orderInfo.salon.basic.name | |“salon name”}
{orderInfo.salon.basic.location.address+
" " +
orderInfo.salon.basic.location.city.name+
" ," +
orderInfo.salon.basic.location.state.name||
“查塔布尔，德里-110068”}
商品及服务税编号-22AAA0000A1Z5
发票编号：123/2021
发票日期：{“}
{时刻（orderInfo.basic.confirmed_at.date）。格式（“Do-MMM”）||
“2021年5月13日”
#
项目
价格
{orderInfo.items.map（（item，i）=>{
//paddingRight:“250px”，
返回(
{i+1}
{item.service.name}
{item.service.price.price\u net}
);
})}
)
}

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

您可以使用

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

---

在css和display none other元素中

如何删除底部空间？@media print{*{display:none}#print side:{display:block}我可以删除模式标题，但打印页面仍然很大，空间很大，正如您在图片中看到的那样。请给我发一封电子邮件帮助您najafi。it@gmail.com