react后台项目实现弹窗内容分页打印需求为弹窗中有打印按钮，点击后调起打印弹窗内部内容并分页,实现方式为建立一个隐藏的

需求为弹窗中有打印按钮，点击后调起打印弹窗内部内容并分页,实现方式为建立一个隐藏的iframe打印

<Modal
        open={imgModalVisible}
        centered
        destroyOnClose
        footer={null}
        title={''}
        onCancel={() => setImgModalVisible(false)}
      >
        <div className={cx(styles.modal, 'printMain')} style={{ pageBreakAfter: 'always' }}>
          <Button className={styles.printBtn} type="primary" onClick={() => handlePrint()}>
            打印
          </Button>
          <div ref={printRef} id="print-content">
            {currentInfo?.length &&
              currentInfo.map((item, index) => (
                <div key={index} className={cx(styles.printItem, 'printItem')} style={{ pageBreakAfter: 'always' }}>
                  <Image
                    preview={false}
                    className={cx(styles.logo, 'imgLogo')}
                    src={item.logo}
                    width={200}
                    height={31}
                  />
                  <Image
                    preview={false}
                    className={cx(styles.qrCode, 'imgCode')}
                    src={item.url}
                    width={100}
                    height={100}
                  />
                  <div style={{ fontSize: '16px' }}>{item.code}</div>
                  <div>电话：{phone}</div>
                  <div>地址：{address}</div>
                </div>
              ))}
          </div>
        </div>
      </Modal>

 const handlePrint = () => {
    // 获取需要打印的元素
    const printContent = document.getElementById('print-content')
    if (printContent) {
      // 创建一个隐藏的iframe用于打印
      const iframe = document.createElement('iframe')
      iframe.style.display = 'none'
      document.body.appendChild(iframe)
      iframe.contentWindow?.document.open()
      iframe.contentWindow?.document.write(`
	<html>
            <head>
                    <title>打印内容</title>
                    <style>
                            .printItem {
                                color: #000;
                                font-size: 14px;
                                background-color: aqua;
                                display: flex;
                                align-items: center;
                                flex-direction: column;
                            }
                    </style>
            </head>
            <body>
                    ${printContent.innerHTML}
            </body>
        </html>
	`)
      iframe.contentWindow?.document.close()
      iframe.contentWindow?.print()
      setTimeout(() => {
        document.body.removeChild(iframe)
      }, 500)
    }
    
    //其他方式（不友好）
    // // 创建一个临时的div来存储打印内容的副本
    // const printContents = document.createElement("div");
    // printContents.innerHTML = printRef.current.innerHTML;
    // // 将临时div添加到文档中，使其可以被打印
    // document.body.appendChild(printContents);
    // // 触发打印
    // window.print();
    // // 打印完成后移除临时div
    // document.body.removeChild(printContents);

    // const win = window.open('', 'printwindow');
    // win?.document.write(window.document.getElementsByClassName('printMain')[0].innerHTML)
    // win?.print();
    // win?.close()
  }