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

can't print image #15

Closed
zhayes opened this issue May 14, 2018 · 15 comments
Closed

can't print image #15

zhayes opened this issue May 14, 2018 · 15 comments
Labels

Comments

@zhayes
Copy link

zhayes commented May 14, 2018

image

image

image

@vademyanchik
Copy link

The same problem

@gregnb
Copy link
Collaborator

gregnb commented May 14, 2018

What path is provided for the image? is it absolute? Or relative?

My guess is that it is a relative path and I need to fix the package to handle relative paths for images. That was a recent bug in the stylesheets that I should address here regardless

@gregnb gregnb added the bug label May 14, 2018
@zhayes
Copy link
Author

zhayes commented May 14, 2018

absolute path @gregnb

@mezzab
Copy link

mezzab commented May 22, 2018

same problem

@rafael-cineis
Copy link

rafael-cineis commented Jun 5, 2018

Any update? I'm having the same issue when trying to print an image using Edge. Using Chrome, Firefox and IE it works fine. Pressing CTRL+P works fine in Edge.

@gregnb
Copy link
Collaborator

gregnb commented Jun 6, 2018

I just published 1.0.18 and I've added a debug mode. To turn it on add the debug={true} prop like so:

       <ReactToPrint
          trigger={() => <a href="#">Print this out!</a>}
          content={() => this.componentRef}
          debug={true}
        />

What this will do is when you click to print it'll open the print window but it will NOT print and it will NOT close. What I would like is if anyone experiencing issues could open up console and then look for any issues? Also, if they could paste the contents HTML elements like so below:

screen shot 2018-06-05 at 8 08 28 pm

@ssxv
Copy link

ssxv commented Jun 11, 2018

I have an <img src="url" />
url is an Amazon S3 url.
When triggered, and the Print dialog opens,
I see the network tab, it doesn't request for this image, first time.
then I close the dialog.
And open again
this time it fetches the url.

@ssxv
Copy link

ssxv commented Jun 11, 2018

my observations are, on trigger, it does not fetch the image first time.
on second trigger it fetches the image as 'octet-stream' and renders it in print dialog.
on further triggers, the image is not fetched, but is seen in the print dialog.

Hope this helps @gregnb

@gregnb
Copy link
Collaborator

gregnb commented Jun 28, 2018

I would encourage anyone having issues to try the new beta version which is going to rely on an iframe to solve the cross origin issues some people are experiencing.

npm install react-to-print@2.0.0-beta-1

and let me know the feedback if this solves issues

@zhayes
Copy link
Author

zhayes commented Jun 28, 2018

i have used https://www.npmjs.com/package/rc-print

@gregnb gregnb closed this as completed Jul 17, 2018
@brettkoz
Copy link

Any update here? I'm having the same issue.

@saraems
Copy link

saraems commented Apr 22, 2020

Hello, It's still not working. I have that issue. contains the img with src or the div with a background but it's not on the print. What is more it does not trigger print-system dialog while contains an image.

@MatthewHerbst
Copy link
Owner

hello @saraems can you please possibly make a codesandbox showing the problem?

@TheRogue76
Copy link

What path is provided for the image? is it absolute? Or relative?

My guess is that it is a relative path and I need to fix the package to handle relative paths for images. That was a recent bug in the stylesheets that I should address here regardless

Hi there. I'm using Electron and React for my project and while i can show the image in the app using import or require, the second i try to print it it vanishes. It's using a relative path for the image src. Calling the absolute path (ex: http://localhost:3000/static/media/logo1.0550988b.png) will work in development and show the image in both the app and the printed file, But this can not be done in production (the webpage files are not available). Any ideas?

Repository owner deleted a comment from Islombek-FD Sep 6, 2023
@kumaresan17
Copy link

@TheRogue76 Try background image as base64. Because the app doesn't know whether the image path will be absolute or relative path. for the first time loading it get confused. after it working fine. I tried it's working fine.

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

No branches or pull requests