Скачать или смотреть Creating a Simple Print Button in Blazor with Radzen

Learn how to easily implement a `Print` button in your Blazor application using Radzen components and JavaScript for seamless printing functionality.
---
This video is based on the question https://stackoverflow.com/q/76036884/ asked by the user 'ExecChef' ( https://stackoverflow.com/u/10156802/ ) and on the answer https://stackoverflow.com/a/76037464/ provided by the user 'MrC aka Shaun Curtis' ( https://stackoverflow.com/u/13065781/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Very Simple Print Button

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Creating a Simple Print Button in Blazor with Radzen

Transitioning an older application to a more modern framework like Blazor can present some challenges, especially when it comes to replicating familiar functionalities. One common request is the ability to add a print button to a Blazor application. If you've ever used a simple HTML link to trigger the print functionality, like this:

[[See Video to Reveal this Text or Code Snippet]]

you might find yourself wondering how to implement the same behavior using a Radzen button in Blazor. This post provides a clear walkthrough on how to achieve this using C# and JavaScript interops.

The Challenge: Adding Print Functionality

In the older application, a basic print link provided users a straightforward way to print pages. However, when using Radzen buttons, you may feel limited by the lack of direct support for an href attribute to trigger the print functionality. Here's a snippet of the Radzen button you're likely currently using:

[[See Video to Reveal this Text or Code Snippet]]

You might be asking:

How do I replicate that simple print action?

Can I invoke JavaScript functions directly from within the Radzen button context?

Let’s dive into the solution.

Solution: Using JavaScript with Radzen

Step 1: Inject JavaScript Runtime

To utilize JavaScript functions in your Blazor application, you need to inject the JS runtime. This is crucial for calling the window.print() method from C# code.

In your Blazor component, add the following line to inject the IJSRuntime:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Creating the Print Method

Next, define a method called PrintMe. This method will call the window.print() JavaScript function. Here’s how you can implement that:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Setting Up the Radzen Button

Now, integrate everything by setting up your Radzen button to trigger the print method when clicked. Here’s how it looks:

[[See Video to Reveal this Text or Code Snippet]]

Step 4: Complete Code Example

Putting it all together, here's how your Blazor page might look:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By following these steps, you can seamlessly implement a print functionality in your Blazor application using Radzen components. This approach not only retains the simple user experience of your previous application but also adheres to modern coding practices and frameworks. Now your users can enjoy the convenience of printing directly from the app with just a click of a button.

Feel free to customize the button styles and layout to fit your application’s design! Happy coding!