Comments (28)
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
** 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.
Related Issues (20)
- Add dynamic colors to print function HOT 1
- How to check that the user click on Save in `onAfterPrint`? HOT 2
- getting Supplied Data is not a valid base64-String jsPDF.convertStringToImageData erorr while directly downloading image HOT 1
- Border top and bottom HOT 1
- Save as PDF hangs in print view HOT 1
- Blank PDF when trying to generate in production. HOT 2
- How should i handle large data to print? HOT 8
- Why does it render different content when in im browsing in mobile HOT 4
- Blank Page while printing after a certain period of time HOT 9
- How to add style using PageStyle prop, without it overriding component’s style HOT 5
- Warning: findDOMNode is deprecated outside StrictMode. HOT 13
- Unhandled error when trying to print not fully loaded canvas elements HOT 5
- HTML doctype declaration is displaying on top of the print dialog window HOT 10
- Print datatables HOT 4
- CSS "break-before" (replacing "page-break-before") not supported HOT 3
- '.brf' file : Change the save directory. HOT 3
- Disable option in browser window to automatically add headers and footers HOT 1
- img tag adds much more to the final PDF size than it should HOT 3
- State changes not effected fist time for print content HOT 9
- Content Overlaps with Footer in Printed Document HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-to-print.