react print自定义打印页面

项目场景：

自定义打印页面
用法：导入第三方react-to-print

npm install --save react-to-print

npm

使用方法：

import ReactToPrint from 'react-to-print';
const inputRef = useRef();

//获取 dom
<Layout className="fuelStatisticsForm-form">
	<div ref={inputRef} className="form-print"><div/>
<Layout/>
//打印按钮
//bodyClass：如果打印样式与页面不符合引入打印css样式，特殊用法（例如：打印时不需要某些页面，可以用css隐藏）
<ReactToPrint
        key="print-setPageNo"
        trigger={() =><Button>打印</Button>}
        onAfterPrint={() => console.log('打印回调')}
        content={() => inputRef.current}
        bodyClass="fuelStatisticsForm-print printRepair"
      />

//css
//fuelStatisticsForm-print 打印样式
.fuelStatisticsForm-form,
.fuelStatisticsForm-print {
....
  /* 打印框 */
  .form-print {
  .....
  }
 }

问题描述：

页面和打印样式不同，打印不全
如何去查找问题：可以给消失的值更改醒目的背景颜色方便查找
打印页面：
1、

加颜色： flex原因默认会100% 加flex-basis：auto

原本页面：

加颜色：

2、
label="船名:"使用label后
打印后冒号不显示

原因分析：

1. 页面样式没有完全引入，需单独引入插件内
2. antd Form 控件样式问题，打印样式要单独设置

例如：
1、如上图（1）问题是form样式将内容挤出当前可视区域
打印样式：

// 打印时样式
.printRepair {
  width: 1200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  // 隐藏侧边栏按钮
  .form-print-button {
    display: none;
  }
  // form表单打印样式--头样式---ant-form-item
  //每个form组件不同-不一定是ant-form-item-has-success
  .ant-form-item-has-success {
      flex-wrap: nowrap;
      // 设置行高48px
      .ant-col {
        flex-basis: auto !important;
        line-height: 48px !important;
        // 隐藏选择框图标
        .ant-select {
          .ant-select-arrow {
            display: none;
          }
        }
      }
    }
  // 隐藏未显示的form.item
  .ant-form-item-hidden {
    display: none !important;
  }
}

解决方案：

<ReactToPrint
        key="print-setPageNo"
        trigger={() =><Button>打印</Button>}
        onAfterPrint={() => console.log('打印回调')}
        content={() => inputRef.current}
        bodyClass="fuelStatisticsForm-print printRepair"
      />

2、解决form冒号不打印问题----使用 label后