Image not getting displayed on Print preview (Mac)

[SaravananAnbu]

Once I click print to print a file from web, then the print preview dialog box opens, but images on my file is missing in the print file, hence after exporting as pdf, images are missing from the print file. Also every time I click print, the results vary as some times it picks up one or two images or it picksup nothing or it picksup everything.

[MatthewHerbst]

Do you have the "Background graphics" option turned on in your print dialog?

[SaravananAnbu]

Yes @MatthewHerbst

[MatthewHerbst]

Can you please make a codesandbox or something replicating the issue?

[SaravananAnbu]

Did you have gitlab, i will give access...

Can you please make a codesandbox or something replicating the issue?

[ArunJeyR]

This issue is real urgent and we can provide access to our gitlab if you have an account.. The main issue is the images are missing when we tried printing on Mac but works fine on windows. Sandbox wont work.. This requires an immediate fix..

[MatthewHerbst]

@ArunJeyR why will Sandbox not work? I do not have a gitlab account.

[ArunJeyR]

Because I need to upload the entire code to Sandbox thats why.. if you want it, probably i can give you my gitlab access will that work? PS: We are pulling images from S3 bucket.

[ArunJeyR]

or if you got a skype account please drop by, and I can share my screen or video if needed.

[MatthewHerbst]

@ArunJeyR you don't need to upload all of the code. You only need to make a minimum viable example of the bug. While I appreciate the offer, I do not want access to your credentials - that is a security/privacy risk for both of us.

[ELTEGANI]

did you find any solution i have the same problem @MatthewHerbst

[ELTEGANI]

it's working but stopped suddenly with no errors in log ....this is my code @MatthewHerbst

<div ref={el => (this.componentRef = el)}>
        <Header as='h1' textAlign='center'>{this.state.formdata.name}</Header>
        <Image 
         size='large'
          centered  
          src='myqrcodelink'
           rounded/>  
       </div>

         <Form.Group widths={1}> 
        <ReactToPrint
         trigger={() => <Button type='submit' color='pink' fluid >Print  QRCODE</Button>}
         content={() => this.componentRef}
        />

[MatthewHerbst]

@Tiganimohammad please make a working code example. I can do nothing with the above. I don't even know what your Image component does.

[ArunJeyR]

@MatthewHerbst Honestly, It would be really helpful, if you can spare couple of minues on skype video call.. while I share the video.. atleast.. or if its still not ok. then I will have to paste my entire code here.. or copy paste the entire code on sandbox. Thats what i am worried about.

[MatthewHerbst]

@ArunJeyR I think you misunderstand me. I understand the problem you are having. However, I cannot attempt to investigate or fix it without a working code example. Again, you do NOT need to create a sandbox of your entire code. All you need to do is create a minimum viable reproduction of the bug, which sounds like it is just in a tiny, tiny section of your overall codebase.

[kildem]

I have tried this code on Mac:

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

class ComponentToPrint extends React.Component {
  render() {
    return (
      <table>
        <thead>
        <tr>
        <th>column 1</th>
        <th>column 2</th>
        <th>column 3</th>
        </tr>
        </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 PrintEsample = () => {
  const componentRef = useRef();
  return (
    <div>
      <ReactToPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
      />
      <ComponentToPrint ref={componentRef} />
    </div>
  );
};

this is the page:

When I click Print this out! button the preview is blank:

[ELTEGANI]

@MatthewHerbst sorry for not provide you with working code ...my problem is the same of the guy posted above would you please help us I used it in the production and it suddenly stopped and worked again I mean some time preview is blank and sometimes not

[MatthewHerbst]

@kildem / @Tiganimohammad are there any console errors when you get the blank screen?

[ELTEGANI]

@MatthewHerbst I have no errors in the console

[MatthewHerbst]

@Tiganimohammad it works for me using this codesandbox with the code above (seems to be the main example but using useRef as the only difference: https://codesandbox.io/s/3qyl47rznq?fontsize=14

I cannot replicate this issue, and no one has been able to give me an error message. Can someone please get me either an error message or a working code example that can reproduce the issue? Thank you.

[kildem]

using version 2.1.1 it works only if I remove
@font-face ( url("...woff2") format("woff2"), url("... truetype") format("truetype”), url("... woff") format("woff")) from my application. 😞
if I use [email protected] everything works

[MatthewHerbst]

@kildem can you make a working codesandbox with that css breaking react-to-print so that I can play around with it please?

[kildem]

@MatthewHerbst I have created a public Github repository that replicate this issue, you can clone it and play around with it:
https://github.com/kildem/test-react-to-print

[MatthewHerbst]

Hello. Version 2.1.2 was just published with a fix from @aviklai that aims to address this issue. Please let me know if you see any continued problems.

[kildem]

It works now 😃

[MatthewHerbst]

Haven't seen anyone else complain about this. Going to close as fixed. Thank you everyone for your reports and patience, and thank you @aviklai for the fix!