-
Notifications
You must be signed in to change notification settings - Fork 218
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
Styles not included in print #11
Comments
Hey @rrsilaya would you mind sharing your repo so I could take a look? |
Hey @gregnb this is working great for me on a project in a development environment, but when we do a production webpack build the styles seem to be missing. |
Hey @ShawnKoga would love to nail down the source of issues anyway you can provide a simple repo to look at? |
I'm checking the source map files for the production files real quick to see if I can find out what is going on. |
Ok, sounds good. If you don't see an obvious error any other items you can list to paint a picture of what your environment looks like would be helpful. It's my fault for not filling out the ISSUE template and it's on my todo list |
I'm having some issues with this as well, currently. I wish I could send you my code but it's in a fairly complicated App and copying and pasting code wouldn't be very feasible. I am using React Native for Web, not sure if that makes a difference. I can say that I have discovered if I use inline styles then they seem to get passed through to the printed content, but if I use a styles constant they do not. For example: Within my ComponentToPrint component the following works:
but the following does not:
I know that's not proper code as there's no Component or render method or anything, but hoping you get my drift. |
@dereksweet Understood. To be honest I've never tested this using React Native for web so I don't know if that could cause any issues |
Will keep mucking around and let you know if I get it working. Is a great tool, exactly what I'm looking for as I'd rather not make an entirely new endpoint just for the printed version of a "frame" on my page. Would be amazing if I could just throw a ref into the component and then make the print button use your tool. |
Yep, exactly why I wanted to make it. I saw a solution but it relied on an iframe. Where there's smoke there's fire and there's some uncovered bug I have to nail down. Need more info so hopefully this thread will point us in the right direction. I'm going to try to play around some more tonight and see if I can trigger this issue. |
I just took a look at your code and saw that it selects any elements that match |
@dereksweet Bummer! If you find anything useful let me know :) |
Brought it up with our frontend guy this morning and even he does not know how React Native for Web stylesheets end up getting rendered in the HTML, so just made a new endpoint for the printed content. Oh well, thanks for writing the component though, I'm sure it will come in handy one day. If you ever get it working for RN for Web let me know! |
Hi, if you need a repo to look at I made this one: https://github.com/ishraqiyun77/print-issue Well, this at least reflects my use case. If you change the The probably is the same no matter what solution I try: external styles are not being applied in printing but inline styles are. I've pretty much exhausted every option I can think of and Also, tried everything on this list: |
Ok, thanks for supplying the repo. I'll take a look into it! |
@ishraqiyun77 thanks for providing this repo. The issue appears to be from the fact that if someone is providing CSS with a relative path it is not setting up the proper relative link in the print window. I will address this tonight. I will make a change where if a relative path is detected we will provide the proper qualified path into the print window for that given stylesheet |
I've published a new version (1.0.15) that should resolve @ishraqiyun77 issues and maybe some others on this thread |
@gregnb any change to get it published on npm? I'm experiencing the same issue as OP.
Also very useful component, thanks for your work. |
@nvma Should be up there as 1.0.15. I screwed up and meant to say 1.0.15 |
@gregnb Aww, too bad for me. So I've poked around and indeed |
So just to make sure,
This kind of solves it, but I think it could be easily fixed by prepending slash when reading link for the DOM. |
@nvma Just published 1.0.16 that should resolve the missing slash issue |
Hi, |
Actually, it is working in the repo I made, but not in my actual app. I'm thinking that might be due to the .scss import being on the parent component... but wouldn't think that should matter since all of the SCSS is converted to CSS which is read in from the |
Had this issue too. To have it working in chrome: The issue is this line: https://github.com/gregnb/react-to-print/blob/d79b7fcb6f0644ee6ce4547e5454abdfcf7975a1/src/index.js#L94 Before:
After:
|
Also, if you are using webpack if you have a blob it won't append that file: so i had to add logic to line: Before: https://github.com/gregnb/react-to-print/blob/master/src/index.js#L106 After:
|
@chrisjlee thanks for finding these flaws. Would you like to send in a PR? |
Sure i'll try to put in a MR this weekend. |
@chrisjlee I went ahead and added those changes myself in hopes that it will help some others here. They are now published. Thanks for sharing that information! |
I upgraded react-to-print to 1.0.17 .this issue still exists. |
@downup2u can you share a repo to download and see your issue? |
It works! Thanks for digging into this, @gregnb. As far as I'm concerned, this issue can be closed. |
I will monitor the progress further if the positive feedback continues I will merge the beta into master |
The alpha has been released along with a fix for canvas issues.
I will soon look to close this thread as I believe the issue is now solved |
Looks like this is no longer an issue. Closing |
We are having a similar issue, using |
Hi @adam-ludgate, how are you loading the style in prod versus dev? |
It's definitely some sort of loading issue. Doing this inside a Ruby on Rails project. I don't think this is necessarily a bug with react-to-print, more likely the way rails projects are configured. Anyway, noting the above workaround for anyone else who might encounter this using |
Ok, thanks for the update. |
Seems like If I use Update: seems to be related to default props. If I pass |
@SidKH interesting, thanks for reporting that. I wonder if the |
@SidKH should be fixed in |
For anyone else arriving here with the same issue I mentioned above, and you need a solution to this as soon as possible, like me.. I worked around this by using styled-components ( this was already installed in my application as a dependency for another library I use, react-select ) on the component that I was passing into the ReactToPrint component's content prop. This made the print menu have styles regardless of it's ability to load the rest of the application's styles. I do still see ReactToPrint throwing errors to the console, so I'm still hoping for a workaround or some guidance from the devs. |
Hi @Earle-Poole any chance you can make a working codesandbox or similar that I can use to debug? |
Hey @MatthewHerbst, it looks like I'm not able to reproduce it in codesandbox, since the issue only occurs when the project gets built. I then attempted to recreate the issue in a new CRA, using the same-ish code I'm using in production, but I was unable to reproduce the error. This is making me think even more that the issue we're seeing is a combination of the package.json "homepage" property being a relative path instead of static (i.e. "./workloadReview/"), the usage of CSS modules, and the way that this application and it's files are being hosted. For some reason react-to-print is appending an additional "workloadReview" when it is performing it's copyStyles as the print window opens. This is just a guess, but I assume at the time of running the build scripts it is generating the minified CSS file which the application can find linked as "./static/css/file.css". When react-to-print is invoked, and it attempts to copy this element into the print window it is copying this link, but it is copying it as "./{homepage (in this case "workloadReview")}/static/css/file.css". |
So, the value with the double import already exists in your DOM. My guess is your import tool knows how to handle it because of the setup you have mentioned. Can you possibly share more about the build and hosting setup of your application? This question might do better on StackOverflow possibly since my guess is you have some configuration you need to change there |
@patrickJasonDuque does the file specified in that |
@MatthewHerbst Hi, thanks for your response. Yes it exist and It actually shows the the styles in the preview, for I am showing an editable preview which you can add contents. But when it is printed, it can't detect the styles |
@patrickJasonDuque any chance you can replicate the issue in a codesandbox? I've been having a hard time debugging this since I don't know how to replicate it locally |
Hello, ex: <div className="parent">
<p>Hello</p>
</div> css: div.parent p { color:red; } if you print only the p tag the red color won't be applied to the element unless you provide a style for the paragraph directly. Hope this helps. |
did you solve this issue? |
@Alimardon19 please make a new issue if you are having a problem, thank you |
I'm using create-react-app and CSS classes. The styles are not loaded on the print media.
The text was updated successfully, but these errors were encountered: