Low quality images upon saving PDF about react-to-print HOT 28 CLOSED

By the way, I tried the beta but it wouldn't work at all for me.

from react-to-print.

What happens when you try the beta? does anything pop up or any console errors?

from react-to-print.

Each time I press my print trigger with [email protected] installed
with debug mode on with chrome devtools

(screenshot)

** DEBUG MODE **
index.js:1 undefined
index.js:1 [Violation] Avoid using document.write().
o.onload @ index.js:1
r.handlePrint @ index.js:1
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
executeDispatch @ react-dom.development.js:461
executeDispatchesInOrder @ react-dom.development.js:483
executeDispatchesAndRelease @ react-dom.development.js:581
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:592
forEachAccumulated @ react-dom.development.js:562
runEventsInBatch @ react-dom.development.js:723
runExtractedEventsInBatch @ react-dom.development.js:732
handleTopLevel @ react-dom.development.js:4476
batchedUpdates$1 @ react-dom.development.js:16659
batchedUpdates @ react-dom.development.js:2131
dispatchEvent @ react-dom.development.js:4555
interactiveUpdates$1 @ react-dom.development.js:16714
interactiveUpdates @ react-dom.development.js:2150
dispatchInteractiveEvent @ react-dom.development.js:4532

from react-to-print.

Can you give me more details? OS, Browser Version, React/React-dom Version etc

Here's a simple example using v1-beta https://codesandbox.io/s/l7oq61y65q it seems to work perfectly. It should solve a lot of people's CORS issues but I'm reluctant to release it until it's been tested. Let's try to figure out what is going on here with your issue

from react-to-print.

OS: macOS High Sierra 10.13.6
Browser Version: Chrome Version 67.0.3396.99 (Official Build) (64-bit)

package.json file:

{
  "name": "d4d-map",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://dpett.github.io/d4d-map/",
  "dependencies": {
    "audit": "0.0.6",
    "bootstrap": "^4.1.1",
    "classnames": "^2.2.6",
    "core-js": "^2.5.7",
    "cssnano": "4.0.0-rc.2",
    "gh-pages": "^1.2.0",
    "jquery": "^3.3.1",
    "lodash": "4.17.10",
    "npm": "^6.1.0",
    "popper.js": "^1.14.3",
    "postcss-filter-plugins": "^3.0.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-icons": "^2.2.7",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "react-share": "^2.1.1",
    "react-sticky": "^6.0.3",
    "react-to-print": "2.0.0-beta-1",
    "reactstrap": "^6.1.0",
    "style-loader": "^0.21.0",
    "webpack": "^3.12.0",
    "webpack-cli": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "eject": "react-scripts eject"
  }
}

To be totally fair, I'm fairly new to React and React Router and loading images in there confuses me a bit so it's possible that I'm messing something up. Here's how I'm loading images:
I'm initializing images like this at the top of the file:
const portrait001 = require("./portraits/Portrait_001.jpg");
and then I have a separate file with a large object, and that includes:
img: "portrait002"
and then I map each image as follows:
<img src={eval(x.img)} alt={x.name} />

I'm sure this isn't the best way to do things, but seemed to work for my sake. Feel free to suggest a better way of referencing the images in the object (and the syntax of the object can be changed if need be). I wonder if this is interfering with ReactToPrint.

from react-to-print.

I would probably start but just keeping references to the file locations and not importing the actual images into the project. Can you do that?

Keeping an object reference is fine and smart but have it be just the file names perhaps and then prefix the base url where the files will be hosted. Then you can remove the eval and just list the web url

from react-to-print.

I'm a bit confused.

So the dictionary object would have
img: "./portraits/Portrait_001.jpg"
and then they would be mapped as
<img src={require(x.img)} alt={x.name} />

is that correct?

Also, I doubt that this is causing the issue with the beta, as the print popup doesn't even show up at all.

from react-to-print.

I've never done it that way. What even comes into the markup if you require() and imagefile and src value to that? What I'm saying is do this:

<img src={"http://yourwebsite.com/${x.name}"} />

from react-to-print.

I've modified an example using the beta to follow what you're doing and it still works:

https://codesandbox.io/s/l7oq61y65q

from react-to-print.

But I'm using webpack and react router, so http://yourwebsite.com/${x.name} doesn't actually refer to an image file. I'll work on it and get back to you when I handle the images properly

from react-to-print.

Sure @dpett I don't think it matters though. I did follow the way you outlined by require() image files and it works still. You can click on the link I provided in my last post and see. Let me know if that link works for you if you print?

from react-to-print.

That link works, however mine still doesn't open the popup. The non-beta did, but had the image quality issue, but this one does not open the popup at all.

again, here is the debug={true} console output:

index.js:1 [Violation] Avoid using document.write().
o.onload @ index.js:1
r.handlePrint @ index.js:1
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
executeDispatch @ react-dom.development.js:461
executeDispatchesInOrder @ react-dom.development.js:483
executeDispatchesAndRelease @ react-dom.development.js:581
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:592
forEachAccumulated @ react-dom.development.js:562
runEventsInBatch @ react-dom.development.js:723
runExtractedEventsInBatch @ react-dom.development.js:732
handleTopLevel @ react-dom.development.js:4476
batchedUpdates$1 @ react-dom.development.js:16659
batchedUpdates @ react-dom.development.js:2131
dispatchEvent @ react-dom.development.js:4555
interactiveUpdates$1 @ react-dom.development.js:16714
interactiveUpdates @ react-dom.development.js:2150
dispatchInteractiveEvent @ react-dom.development.js:4532
index.js:1 ** DEBUG MODE **
index.js:1 undefined

I did just notice, however, that an iframe does get injected each time I click the print trigger, it's just that I'm not seeing it appear.

The contents of the iframe seem to be correct to me.

from react-to-print.

Is it possible that it's not playing nicely with react router?

from react-to-print.

The same happens exact console outputs and html behavior occur in firefox 61.0.1

For what it's worth, I'm just testing with yarn start on localhost with create-react-app

from react-to-print.

Can you isolate the code related to print into a simple repo I can look at and clone? That’ll help getting down to the issue a lot faster

from react-to-print.

https://github.com/dpett/publictest

i was able to reproduce the error by cloning the repository, yarn install and yarn start and navigating to /d4d-map/State/FL i.e. http://localhost:3000/d4d-map/State/FL and pressing the print icon

from react-to-print.

great thanks i'll work on it today

from react-to-print.

@dpett Try upgrading to beta-2 and remove the debug={true} prop

from react-to-print.

@gregnb That didn't solve the problem in either my own project or the isolated project in the repository I linked.
removed debug={true}
"react-to-print": "^2.0.0-beta-2",

from react-to-print.

@dpett is it at least printing with beta-2 in production?

from react-to-print.

https://drive.google.com/file/d/1VIkD3j6Lq7kaQzzqywwXL0J65_ZT5O-7/view

That's me running it locally with beta-2. The only reason I see low quality image is well the width is 32px but yea

from react-to-print.

Also give this latest beta a try i've done some more work to it for styled-components and other issues faced from CSS-in-JS libs

npm install [email protected]

from react-to-print.

I deployed a production build with beta-3 and it's printing now, but with the exact same image quality error as before. The full app is here if you'd like to look for now. Just click a state to get to the page with the print button. deleted. I tried this on two different Macbooks. See if it works on your computer.

from react-to-print.

Yeah, very nice app man! I'm clicking and when I click to print it's working as it should. The only issue I see is the image is tiny. Can you adjust the CSS so the image size is larger? I can see the constraint of 35px

Other than that I don't follow what the issue is? The size of the image is tiny

from react-to-print.

Thanks! And thank you for your help. Here's the problem I'm describing:
deleted

from react-to-print.

Hey @dpett I think if you even took away my package and created a static template with a couple images at that size (considering their natural sizes are like 400+px width if I remember?) you're going to have images that don't look right when printing.

My suggestion, if you truly need images at that small size if to properly crop them to that size. Trying to force and image down to that I think you're always going to have these quality issues

from react-to-print.

@gregnb after doing some tests it looks like you're right. In that case, I'm really sorry to have bothered you with all of this, and thank you for helping me out. To be honest, it's my first app (beyond ones from classes, etc), so these kinds of issues completely stump me. Thanks again, I really appreciate you working through it with me.

from react-to-print.

No problem good luck to you!

from react-to-print.