Introducing the Next-Gen Blazor PDF Viewer Component
Tags: blazor, development, pdfviewer, web
Published: 2023-07-10 14:10:24

---
title: Introducing the Next-Gen Blazor PDF Viewer Component
published: true
date: 2023-07-10 11:58:13 UTC
tags: blazor, development, pdfviewer, web
canonical_url: https://www.syncfusion.com/blogs/post/next-gen-blazor-pdf-viewer.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0qnohsio9yvlgetmzxv.png
---
In our [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio 2023 Volume 2") release, we have introduced a next-gen Blazor PDF Viewer component that allows users to view, edit, print, and download PDF files without the web service dependency in Blazor applications. It is designed to be fast and responsive and supports all the features of the previous PDF Viewer.

In this blog, we will discuss the improvements that distinguish the [**next-gen Blazor PDF Viewer**](https://blazor.syncfusion.com/documentation/pdfviewer-2/getting-started/features "Getting started with Blazor PDF Viewer (Next-Gen)") component from its predecessor, [**PDF Viewer**](https://blazor.syncfusion.com/documentation/pdfviewer/getting-started/features "Getting started with Blazor PDF Viewer Component").
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Next-Gen-Blazor-PDF-Viewer-Component.png" alt="Next-Gen Blazor PDF Viewer Component" style="width:100%">

  <figcaption>Next-Gen Blazor PDF Viewer Component</figcaption>

</figure>

## Advantages of the next-gen Blazor PDF Viewer

Let’s briefly discuss the advantages of the next-gen Blazor PDF Viewer over the previous one:

- **Enhanced performance and memory** : The next-gen PDF Viewer uses the WebAssembly version of PDFium, reduces JS interop calls, and performs better. Also, it consumes less memory for both server and WebAssembly apps.
- **Unified package for multiple platforms** : A unified NuGet package supports various operating systems, including Windows, Linux, and MacOS, eliminating the need for separate packages.
- **No more web service dependency in Blazor WebAssembly** : Web service dependency is no longer required in Blazor WebAssembly apps. This means you can deploy the new PDF Viewer to any platform that supports Blazor without worrying about setting and maintaining a web service.
- **ARM64 support** : This new Blazor PDF Viewer can also be deployed to ARM64 machines.

## Performance improvements

In the previous PDF Viewer component, we used Pdfium.dll to acquire PDF document pages as images. The next-gen PDF Viewer component uses the WebAssembly version of PDFium. This change allows the new PDF Viewer to directly retrieve PDF images, text, and hyperlinks on the client side.

By adopting this approach, we have significantly reduced the need for JavaScript interop calls and alleviated the burden on the server. Thus we have observed notable enhancements in the performance of rendering, scrolling, zooming, panning, and printing operations.

To assess the improvements, we compared the speed of various operations between the old PDF Viewer and both server and WebAssembly instances of the next-gen PDF Viewer.
<table>
<tbody>
<tr>
<td width="219">
<p><strong>Action</strong></p>
</td>
<td colspan="2" width="420">
<p><strong>Speed improvements in the next-gen Blazor PDF Viewer </strong></p>
</td>
</tr>
<tr>
<td width="219">
<p> </p>
</td>
<td width="227">
<p><strong>Server</strong></p>
</td>
<td width="193">
<p><strong>WebAssembly</strong></p>
</td>
</tr>
<tr>
<td width="219">
<p>Initial loading</p>
</td>
<td width="227">
<p>~+ 104%</p>
</td>
<td width="193">
<p>~+ 413%</p>
</td>
</tr>
<tr>
<td width="219">
<p>Page navigation</p>
</td>
<td width="227">
<p>~+ 92%</p>
</td>
<td width="193">
<p>~+ 19%</p>
</td>
</tr>
<tr>
<td width="219">
<p>Zooming</p>
</td>
<td width="227">
<p>~+ 170%</p>
</td>
<td width="193">
<p>~+ 277%</p>
</td>
</tr>
<tr>
<td width="219">
<p>Panning and scrolling</p>
</td>
<td width="227">
<p>~+ 146%</p>
</td>
<td width="193">
<p>~+ 217%</p>
</td>
</tr>
<tr>
<td width="219">
<p>Printing</p>
</td>
<td width="227">
<p>~+ 142%</p>
</td>
<td width="193">
<p>~+ 706%</p>
</td>
</tr>
</tbody>
</table>
[Here is the PDF document](https://s3.amazonaws.com/files2.syncfusion.com/dtsupport/directtrac/general/pd/hive_succinctly_(1)-1346714691.pdf?AWSAccessKeyId=AKIAWH6GYCX3YH6S4NTZ&Expires=1688986706&Signature=0RyhlnQgGbG9%2BGfMg20IkIZjPXc%3D "E-Book: Hive Succinctly") we used to measure the performance improvements.

We are focusing on further enhancing the performance of our next-gen PDF Viewer in upcoming releases.

## Reduced JS interop calls

The previous PDF Viewer heavily relied on multiple JS interop calls to obtain essential document information, such as page text, hyperlinks, and images. Unfortunately, this approach often led to longer processing times and significant performance overhead.

In the next-gen PDF Viewer, we have entirely redesigned these functionalities to be executed on the client side. By leveraging client-side processing, we have achieved major performance improvements. This approach reduces server-side interactions and enables faster retrieval of document information.

The transition to client-side processing has delivered several benefits. One of the most important benefits is minimized JS interop calls to retrieve document information. Additional benefits include reduced server dependencies and improved UI responsiveness.

## Reduced memory consumption

As mentioned previously, the old PDF Viewer component used Pdfium.dll, which runs on the server, for managing images, hyperlinks, and text while viewing a PDF file. This approach put a heavy load on the server and consumed significant memory.

Since the next-gen PDF Viewer component uses the WebAssembly version of PDFium that runs on the client side, the server load is reduced remarkably. In fact, we have observed an impressive 57% reduction in memory consumption. This significant improvement in performance and memory delivers a smoother and more efficient experience for end users.

## Unified package for multiple platforms

In the previous PDF Viewer component, we maintained separate packages for each operating system, namely Windows, Linux, and MacOS. This required including specific PDFium dependencies in the published folder, which caused confusion and complications for developers during the hosting process in multiple environments.

Wielding the WebAssembly version of PDFium, the next-gen PDF Viewer component does not require separate packages for each operating system. The single common package is compatible with all environments. The former hosting complexities are resolved, making the hosting process smoother and more consistent, regardless of the operating system used.

## ARM64 support

WebAssembly PDFium also means that the next-gen PDF Viewer can be deployed to ARM64 machines. This means developers can create Blazor apps capable of viewing PDF files on all Blazor-supported devices.

## Migrate to the next-gen Blazor PDF Viewer

If you use the previous PDF Viewer, we recommend [migrating to the next-gen Blazor PDF Viewer component](https://blazor.syncfusion.com/documentation/pdfviewer-2/migration "Migration from PDF Viewer to PDF Viewer (Next-Gen)").

## References

For more details, refer to the new Blazor PDF Viewer component [user guide](https://blazor.syncfusion.com/documentation/pdfviewer-2/getting-started/features "Getting started with Blazor PDF Viewer(Next-Gen)"), [web demos](https://blazor.syncfusion.com/demos/pdf-viewer-2/default-functionalities?theme=fluent "Blazor PDF Viewer (Next-Gen) live demo"), and [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer%20%202 "Blazor PDF Viewer (Next-Gen) GitHub examples").

## Conclusion

Thanks for reading! In this blog, we had a quick overview of the enhanced performance, streamlined development, and improved deployment of the next-gen Blazor PDF Viewer component in the [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio 2023 Volume 2") release. Keep an eye out for our upcoming updates and tutorials, where we will guide you on harnessing the capabilities of this innovative component in your apps.

The new Blazor PDF Viewer is a powerful and versatile tool for viewing, annotating, and printing PDF documents. It has all the features of the previous PDF Viewer and is easy to migrate to.

You can also check out all the other updates in the 2023 Volume 2 release on our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v22.1.34 "Essential Studio Release Notes") and the [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New page") pages.

Try out these features and share your feedback in the comment section below. You can also reach us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 2 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2023-volume-2.aspx "Blog: Syncfusion Essential Studio 2023 Volume 2 Is Here!")
- [Simple Steps to Create Thumbnail Images Using the Blazor File Upload Component](https://www.syncfusion.com/blogs/post/create-thumbnail-images-blazor.aspx "Blog: Simple Steps to Create Thumbnail Images Using the Blazor File Upload Component")
- [Role-Based Authorization in Blazor File Manager: An Overview](https://www.syncfusion.com/blogs/post/role-based-authorization-blazor-file-manager.aspx "Blog: Role-Based Authorization in Blazor File Manager: An Overview")
- [Seamlessly Save and Load Reports from SQL Server Database to Blazor Pivot Table](https://www.syncfusion.com/blogs/post/save-load-report-sql-server-to-blazor-pivot-table.aspx "Blog: Seamlessly Save and Load Reports from SQL Server Database to Blazor Pivot Table")