Blank sheet error react to print

[lizarragadev]

Hi everyone, I have a problem that has already been with me for two days. I'm using pure functional components, I found the following example, but when I press the button, I only get a blank sheet in the print preview, I tried to do it with classes, but it doesn't give me either, I don't know if I'm doing something wrong , all this in React JS, my files have a .jsx extension, I'm not sure what the problem is, I've already looked for too many solutions and I can't find what I'm doing wrong, thanks.

I'm using: "react": "^ 16.8.6", "react-to-print": "^ 2.13.0"

import React, { useRef } from "react";
import ReactToPrint from "react-to-print";

const ComponentToPrint = React.forwardRef((props, ref) => (
      <table ref={ref}>
        <thead>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
        </thead>
        <tbody>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
          </tr>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
          </tr>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
          </tr>
        </tbody>
      </table>
));

const Example = () => {
    const componentRef = useRef();
    return (
      <div>
        <ReactToPrint
          trigger={() => <a href="#">Print this out!</a>}
          content={() => componentRef.current}
        />
        <ComponentToPrint ref={componentRef} />
      </div>
    );
}

export default Example;

[lizarragadev]

This is the view when I press print...

[philhaynes337]

I am currently getting the same issue with my project. Found anything yet?

[lizarragadev]

Hi @philhaynes337 I still couldn't find a solution. Clicking on the button opens the print window with the sheet and everything but everything blank, I tried with a lot of content in the table, static data just to test, but also, the strange thing is that several pages are put, since it detects that it is a lot of content but still everything in white.
I think there is a problem in:

const componentRef = useRef ();

since in another example using a Calendar in full screen, the view was not complete, and I noticed that I didn't grab the value of useRef, but when somehow something in the view was modified or there was a small status update, with some button or something, it was just updated and everything was displayed normal.
Hopefully someone can give us a hand with the problem.

[MatthewHerbst]

Hello. I've run into problems using useRef and forwardRef before as well, though in theory it should work. Are you able to convert ComponentToPrint to a class component by chance to see if it works that way? Then you would know if it was an issue with forwardRef or not

[lizarragadev]

Hi @MatthewHerbst , here is a fragment of code in class, I also tried it and it doesn't work, maybe you will have more luck and tell us how.

class ComponentToPrint extends React.PureComponent {
  render() {
    return (
      <table>
        <thead>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
        </thead>
        <tbody>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

[philhaynes337]

I believe the problem lies within the PDFDownloadlink function / component it self. That would be within the node package itself. Ill dig deeper into this when this long weekend is over.

…

On Fri, Sep 3, 2021, 6:59 PM Gustavo Lizárraga ***@***.***> wrote: Hi @MatthewHerbst <https://github.com/MatthewHerbst> , here is a fragment of code in class, I also tried it and it doesn't work, maybe you will have more luck and tell us how. class ComponentToPrint extends React.PureComponent { render() { return ( <table> <thead> <th>column 1</th> <th>column 2</th> <th>column 3</th> </thead> <tbody> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> </tr> </tbody> </table> ); }} — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#410 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARCL2O2652FMQUOIKFZEALTUAFOODANCNFSM5CXYA3EQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[jncoates]

Hi @philhaynes337 and @MatthewHerbst, I am experiencing the same issue were you able to find a solution?

[babin93]

Same issue here, The only way I can see something in the print preview is by setting copyStyles={false} which gives an ugly rendering of my content.

Edit:

I had an import of a specifc css file in my js file. By removing that import it started working properly.

[MatthewHerbst]

@babin93 could you explain that import a bit more please? Might help others here

[babin93]

Alright, the styling issue was actually related to this problem: #11 (comment) (mostly a lack of understanding on my side)

For the blank page:

I had this import in my file
import 'react-toastify/dist/ReactToastify.css'; (not sure why this was there)

By removing it, there was no longer a STYLE tags in my page's HEAD so everything started working properly even with copyStyles={true}.

Before removing this import, I was only able to seem something when I would set copyStyles={false}.

Not sure this will help a lot...

[MatthewHerbst]

Ok, thanks for the explanation @babin93! I'll see about adding something to the README regarding #11 (comment)

[gaisuke]

i'm still experiencing this issue, is anyone had an update to this? my code looks exactly like @lizarragadev . Thanks in advance.

Update 2 hours after i commented this :
turns out mine is already showed, but because of my component is white text, it shows a blank preview which is actually there is text on it with white color. so i add copyStyles={false} prop to negate the css

[MatthewHerbst]

I added a note about this issue to the Common Pitfalls section of the README, hopefully that helps others in the future. Thanks all

[fosteman]

Having the same issue.

Exactly the same setup as of @lizarragadev, created #455

[dennemark]

Custom-font might not be loaded correctly. Using font-display: swap in @font-face might solve this: #281 (comment)
At least it worked for me.