Not working @page size A4 landscape · Issue #86 · MatthewHerbst/react-to-print

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

豪情万千的消防车 · AF-SDK-Programming-Onl ...· 6 月前 ·

风流的乌冬面 · 快穿攻略男配文有肉 - 百度· 7 月前 ·

魁梧的铅笔 · Transition Class ...· 11 月前 ·

体贴的柿子 · 陪读妈妈，县城中学的外挂-虎嗅网· 1 年前 ·

害羞的海龟 · 《龙与地下城侠盗荣耀》高清电影完整版在线观看 ...· 1 年前 ·

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@NguyenTheSon if this could be any help i created a print class which consume react-to-print with print preview.

Print Class

import React , { Component } from 'react';
import ReactToPrint from "react-to-print";
class Content extends Component{
    render(){
      let printCon = this.props.printContent;
      return(
        {printCon}
        </div>)
class Print extends Component {
  constructor(props){
    super(props);
    this.state = {
      content: null
    componentDidMount(){
        if(this.props.content){
            this.setState({content:this.props.content});
    render() {
          return (
              <div className="card " align="center">
                        <div className="card-header">
                        <h5 className="card-title">Print Preview</h5>
                        <ReactToPrint
                            trigger={() => <a href="#" className="btn-floating btn btn-primary">Print</a>}
                            content={() => this.componentRef}
                          </div>
                        <div className="card-body ">
                          <Content ref={el => (this.componentRef = el)} printContent={this.state.content}/>
                        </div>
                      </div>
  export default Print;

usage:
Note: package used instead of modal reactjs-popup

Content

printContent(){
   return(
   <div> {/* your content with its own style if you have too */}</div>
in Render
render(){
  let printContent= this.printContent();
  return(
    <div className="input-group col-6" align="right">
      <Popup
        trigger={
          <button className="btn-floating btn btn-secondary buttonFix">
            <span><FontAwesomeIcon icon="print" /></span> Print
          </button>
        modal
        closeOnDocumentClick
        <Print content ={printContent} />
     </Popup>
    </div>
)};