This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(86.4, 12%, 18%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EM%3C/text%3E%3C/svg%3E)
Target framework: net7.0-windows10.0.19041.0
I need to print some components from my app. When I read about JS interop I thought that's going to be easy. However printing like that seems to strip some (not all) of the applications styles - currently colors and icons.
I'm using MudBlazor components, so I dug in how they are doing their CSS and I found that they have defined placeholders in their CSS that are then dynamically replaced using C# and I thought maybe that's why it ends up missing half the styles. So using several tools I transformed my Blazor component to an HTML string with in-line styles that produce the same result in web-based HTML evaluators. However the Print result is still lacking any colors/icons. Why could that be?
Are there other ways to print MAUI Blazor components?
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(316.8, 40%, 40%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EYL%3C/text%3E%3C/svg%3E)
I'm using MudBlazor components
Neither .net 7.0 nor third-party frameworks are currently supported by Microsoft Q&A. If you update to the 8.0 framework and print with the official controls, does the issue still occur?
I haven't tried yet, as II spent a day trying to update my existing MAUI project to dotnet 8, but was unsuccessful. But that is another topic. Can you please indicate what are the official controls for printing, because I don't find anything about printing in "what's new": https://learn.microsoft.com/en-us/dotnet/maui/whats-new/dotnet-8?view=net-maui-8.0
Are you saying that JS interop should be working properly? I need to print the HTML content of the Blazor components. There is nothing special about MudBlazor.
I can try the JS interop printing on fresh dotnet 8 project. Is that what you mean by standard controls?
@Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) can you please share more about the official controls?
Thaks for your feedback.
For Blazor controls, Microsoft officially provides the open-source Fluent UI Blazor controls. And this package supports Maui applications.
You could refer to the Blazor Hybrid in this repository for configuration.
You can use this library in Blazor Hybrid (MAUI/WPF/Windows Forms) projects. Setup is almost the same as described in the "Getting started" section above, but to get everything to work you'll need to take one extra steps (for now) described below.
@Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) Thanks, I'll check the Fluent UI controls, however I have taken a liking of MudBlazor and will probably stick with them. This isn't relevant however as I am confident that the issue is not in the controls themselves.
Can you please share more information about printing in MAUI (Hybrid Blazor)? Is there anything other than JS interop? For example can I automate printing without preview? What are the limitations, if any, of JS interop printing? You can of course point me to resources on the matter, I'm happy to read myself but I'm barely able to find any official information regarding printing at all.
Thanks
Alex
@Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) I've updated to dotnet 8, targeting Windows and the problem still occurs. I've attached images and an HTML file you can use to reproduce the problem. In order to render the HTML I'm using MarkupString.
Sorry, this was a duplicate comment, not sure how it happened. Everything in the previous comment is relevant. The problem persists in dotnet 8.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(211.20000000000002, 61%, 30%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EBS%3C/text%3E%3C/svg%3E)
In the end, Blazor components just render html. The browser converts the html and style to a print image. You can better control with media css queries.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Printing
@Bruce (SqlWork.com) Are you sure you read my question? Which part makes you think I don't understand that Blazor renders HTML? How are media queries going to fix missing styles in the JS interop print?
Media queries are how you style html for printing. You can also use the webkit remote debugger and toogle media mode to debug styles.
I've found the solution of my problem. Turns out Edge's engine has an option that disables styles by default:
Now all styles are properly rendered.