0

I am trying to add the print feature on a div's content. But the Print VIewer is showing a blank White page. This is the first time I'm using Print-to-react Library. I am not sure what is the Problem with my code.

let componentRef = useRef();
return(
<>
  <ReactToPrint
     trigger={() => <Button>Print this out!</Button>}
     content={() => componentRef}
    />
  <div id="showTable" ref={(el) => (componentRef = el)}>
     <div>
        <p>hello World</p>
        <Table dataSource={tabledata} columns={columnsLetter} />
     </div>
  </div>
</>
)

I have Followed the guides from different source with different approaches as well but still the page comes blank.

Hassan Muhammad Sabir
  • 29
  • 2

1 Answers1

0

The content prop in the ReactToPrint component takes the ref as componentRef.current instead of just componentRef. So your code should be looking like:

let componentRef = useRef();
return(
<>
  <ReactToPrint
     trigger={() => <Button>Print this out!</Button>}
     content={() => componentRef.current}
    />
  <div id="showTable" ref={(el) => (componentRef = el)}>
     <div>
        <p>hello World</p>
        <Table dataSource={tabledata} columns={columnsLetter} />
     </div>
  </div>
</>
)
Skodie
  • 1