通过Print.js实现table的打印功能

   近期遇到一个需求，就是希望目前项目中的table（基于antd）可以具备打印功能，同时又希望每页都能有「固定在表头的说明内容」，由于需求比较急，所以查了资料后决定使用「Print.js」来实现这一功能。
   具体实现方式如下： 我们的table组件使用的是antd中的table, 只需在引入「Print.js」后，打印对应的内容即可：

    /** table处的内容 */
    <div id="printContent" className={styles.myTable}>
          <Table
            columns={columns}
            pagination={false}
            dataSource={data}
            bordered={true}
          />
      </div>

      /** 打印功能 */
  const handlePrint = () => {
    if (window.printJS) {
      window.printJS({
        printable: $('#printContent').html(),
        type: 'raw-html',
      });
    }
  };

由于打印时HTML中的「table」内会自动识别「thead」和「tbody」标签，「thead」标签的内容会自动识别为头部，因此只要保证打印时「table」内的内容是完整的即可：

打印的结果：
   添加每页的头部说明内容： 在打印时，将想要固定在头部的说明通过「position: fixed」固定在头部，这样就可以在打印时也固定在每页的头部了。

        <div id="printContent" className={styles.myTable}>
          <div
            style={{
              position: 'fixed',
              zIndex: '10000',
              fontSize: '16px'
            }}
          >
            头部说明的内容测试
          </div>
          <Table
            columns={columns}
            pagination={false}
            dataSource={data}
            bordered={true}
          />
        </div>

最终打印可看到，每页都有了头部说明的内容：    此时会有一个问题，就是头部说明的内容会和「table」中「thead」标签的内容重叠，对应这个问题只需要在「thead」标签内添加一个「tr」标签并计算对应的高度即可，在代码中可通过dom的插入方式解决。

此时的打印结果就不再重叠了： 只要计算好了距离，即使打印含有多行的头部说明也是没有问题的：

以上就是本次关于通过Print.js实现table的打印功能的一些实践内容。 关于更多「Print.js」的内容可以参考：https://printjs.crabbly.com