react-to-type打印课表

1.下载引用组件

点击：参考链接
npm install --save react-to-print
import ReactToPrint from 'react-to-print';

2.设置

注意：trilgger返回的组件上添加onClick属性是不会触发事件的。所以需要打印的内容先添加到ref中，再点击“打印”才能在浏览器的打印预览中看到内容。
此时，我用的是按钮（根据需求自己设计，或者弹窗什么的都可以）

固定打印布局：需在pageStyle中传入样式，根据需求我这里固定横向
portrait|landscape (纵|横)

<ReactToPrint
   trigger={() => {
     return (
       <Button type="primary" placement="top" ghost>
         打印
       </Button>
     );
   }}
   content={() => this.print}
   pageStyle={`@media print {
     @page { size: A4 landscape;margin:0!important  }
   }`}
 />
 //要打印的课表（页面中不需要显示所以隐藏了）
 <div hidden={true}>
   <div ref={ref => (this.print = ref)}>
     <CourseTimeTable
       title={`这是我的课表组件 输出课表内容样式布局'}
      />
   </div>
 </div>

效果：点击’打印‘按钮 调起react-to-print组件 出现弹窗