react-to-print

react 自定义打印组件

export default class App extends BaseApp {
  render() {
    return this.loadingResource(['inventory', 'dmt', 'common'], () => (
      
        
      
    ));
  }
}

printComponent

import React from 'react';
import ReactToPrint from 'react-to-print';
import { LocalizableComponent } from '../../Common/components/CommonComponents';
import './printComponent.css';
import PrintIcon from '../../Resources/images/printImg.png';


export default class PrintComponent extends LocalizableComponent {
  constructor(props) {
    super(props);
    this.state = {
      needFixed: false,
    };
  }

  render() {
    return (
      

        

           }
            content={() => this.componentRef}
            onAfterPrint={() => {
       }}
          />
        
        
 { this.componentRef = el; }}>
          {this.props.children}
        
      
    );
  }
}

printCoponent.css

.ReactToPrintHeader{
    position: fixed;
    top: 0px;
    right: 0;
    width: 100%;
    background-color: white;
    z-index: 1000;
    box-shadow: #666 0px 0px 10px;
}

.printImg{
    float: right;
    margin-right: 30px;
    width: 24px;
    height: 24px;
    margin-top: 3px;
}