it's possible to add some code before the content?

[Richi2293]

I need to add an image at the beginning of the page to be printed, but only for the print page.
It's possibile?
I tried but I did not succeed.

Thanks,
Riccardo

[MatthewHerbst]

To be clear, you mean add an image to the printed output that isn't on the page normally?

[Richi2293]

To be clear, you mean add an image to the printed output that isn't on the page normally?

exactly

[MatthewHerbst]

Do you mind showing how you previously tried? I think I have an idea for how to do it but I want to make sure it's not what you already tried first. Thanks

[Richi2293]

Okok, like this:

<ReactToPrint
    trigger={() => <Button color="primary" style={styles.button}>Print</Button>}
     content={() => this.createContentPrint()}
/>

And this is the method 'createContentPrint':

createContentPrint() {
        var content = (<img src={'https://imageExample.png'}></img>);
        return(content+this.componentRef);
}

The componentRef is like this in a div in the page:
<div ref={el => (this.componentRef = el)}>

[MatthewHerbst]

I think your issue is that you're not returning a ref - you're returning actual content. You need to return a ref in the content prop.

So, something along the lines of:

createContentPrint() {
  return this.componentRef;
}

handleAfterPrint() {
  // Remove the image from the DOM manually
  const elem = document.querySelector('#myImage');
  elem.parentNode.removeChild(elem);
}

handleBeforePrint() {
  // Add the image to the DOM manually
  const image = <img id="myImage" src={'https://imageExample.png'} />;
  this.componentRef.getElementsByTagName('body').appendChild(image);
}

setRef(ref) {
    this.componentRef = ref;
}

renderButton() {
  return <Button color="primary" style={styles.button}>Print</Button>;
}

render() {
  return (
    <div>
      <ReactToPrint
        afterPrint={this.handleAfterPrint}
        beforePrint={this.handleBeforePrint}
        content={this.createContentPrint}
        trigger={this.renderButton}
      />
      <div ref={this.setRef}>
    </div>
  );
}

I haven't tested if that works exactly, but that's the jist of what you need to do.

[Richi2293]

perfect thanks, I used a logic following your example and it worked

[MatthewHerbst]

Glad it worked out! If you wouldn't mind, could you please close this issue if all of your question has been addressed? Thanks!