react-to-print

react 自定义打印组件

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

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 (
      <div>
        <div id="fixed-menu" className="ReactToPrintHeader">
          <ReactToPrint
            trigger={() => <a ><img className="printImg" title={this.I18N.value('eam_manifest_print')} src={PrintIcon} alt="" /></a>}
            content={() => this.componentRef}
            onAfterPrint={() => {
       }}
          />
        </div>
        <div ref={(el) => { this.componentRef = el; }}>
          {this.props.children}
        </div>
      </div>
    );
  }
}

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;
}