React-to-print: Export a method to trigger print

[leeseean]

I want to print by Api instead of click,
just like target.print()

[MatthewHerbst]

Do you mean without using the React component at all? Right now you can do:

render() {
  componentDidMount() {
    this.ref.handlePrint();
  }

  return (
        <ReactToPrint
          ...
          ref={ref => this.ref = ref}
        />
  );
}

I'd be interested in moving the print API outside of the component itself. How do you imagine setting up target in your example?

[leeseean]

Do you mean without using the React component at all? Right now you can do:

render() {
  componentDidMount() {
    this.ref.handlePrint();
  }

  return (
        <ReactToPrint
          ...
          ref={ref => this.ref = ref}
        />
  );
}

I'd be interested in moving the print API outside of the component itself. How do you imagine setting up target in your example?

target is a ref or domNode

[mengbimao]

东西是好东西,但是貌似我这个项目用不了,我照着上面来做了,但是样式貌似没有打印出来,无论怎么说还是辛苦啦,点一个星,不成敬意

[mengbimao]

[Bosch-Eli-Black]

Thanks for the info :) It would be great if this were documented, though.

Also, any chance of making the trigger() function optional? :)

[yefriddavid]

For me works!

this

manualPrint() {

this.printRef.handlePrint();

}

render(){
ref={el => (this.printRef = el)}
trigger={() => Imprimir}
content={() => this.componentRef}
/>

......

[heyjaypray]

I'm currently having a similar issue. I'm currently using material-table and would like to have a button that you click that will print the info contained passed into a component.

My code looks like this -

constructor(props) {
    super(props);

    this.state = {
      orderLoaded: false,
      orderData: []
    };
    this.printRef = React.createRef();

  }

onClick: (event, rowData) => {
    this.setState({ orderData: rowData })
    this.setState ({ orderLoaded: true })
    this.printRef.handlePrint();
}

Then i have

{this.state.orderLoaded ? 
  <div>
    <ReactToPrint
       ref={el => (this.printRef = el)}
       trigger={this.state.orderLoaded = true}
       content={() => this.componentRef}
     />
     <AssemblyList
       selectedOrder={this.state.orderData}
       ref={el => (this.componentRef = el)} />
   </div>
        : 
  <div />
} 

i'm getting an error that says

Uncaught TypeError: _this2.printRef.handlePrint is not a function
and
Uncaught TypeError: e is not a function

any ideas?

[MatthewHerbst]

@heyjaypray we don't have a feature available yet where you can call that method directly. Something I've been meaning to work on. I'll also happily accept any PRs :)

[MatthewHerbst]

We have had the ability to useReactToPrint for some time now 😄