Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image not getting displayed on Print preview (Mac) #118

Closed
SaravananAnbu opened this issue Apr 12, 2019 · 25 comments
Closed

Image not getting displayed on Print preview (Mac) #118

SaravananAnbu opened this issue Apr 12, 2019 · 25 comments

Comments

@SaravananAnbu
Copy link

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
Copy link
Owner

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

@SaravananAnbu
Copy link
Author

Yes @MatthewHerbst

@MatthewHerbst
Copy link
Owner

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

@SaravananAnbu
Copy link
Author

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

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

@ArunJeyR
Copy link

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
Copy link
Owner

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

@ArunJeyR
Copy link

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
Copy link

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

@MatthewHerbst
Copy link
Owner

MatthewHerbst commented Apr 23, 2019

@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
Copy link

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

@ELTEGANI
Copy link

ELTEGANI commented Apr 26, 2019

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
Copy link
Owner

@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
Copy link

ArunJeyR commented Apr 28, 2019

@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
Copy link
Owner

MatthewHerbst commented Apr 28, 2019

@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
Copy link

kildem commented Apr 29, 2019

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:
Schermata 2019-04-29 alle 11 51 49

When I click Print this out! button the preview is blank:
Schermata 2019-04-29 alle 11 52 01

@ELTEGANI
Copy link

ELTEGANI commented Apr 29, 2019

@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
Copy link
Owner

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

@ELTEGANI
Copy link

@MatthewHerbst I have no errors in the console

@MatthewHerbst
Copy link
Owner

@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
Copy link

kildem commented Apr 30, 2019

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
Copy link
Owner

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

@kildem
Copy link

kildem commented May 2, 2019

@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
Copy link
Owner

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
Copy link

kildem commented May 6, 2019

It works now 😃

@MatthewHerbst
Copy link
Owner

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants