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