From 380b8268063c047cce8f1484332b78041f54569a Mon Sep 17 00:00:00 2001 From: Tamilselvan-Durairaj <153176971+Tamilselvan-Durairaj@users.noreply.github.com> Date: Wed, 24 Sep 2025 14:34:44 +0530 Subject: [PATCH 1/6] 983689: Modified the content the How to section for the blazor pdfviewer --- .../blazor/how-to/content-security-policy.md | 24 ++++----- ...nversion-between-page-and-client-points.md | 50 +++++++++---------- .../deploy-maui-using-android-emulator.md | 49 +++++++++--------- .../how-to/get-data-from-sfpdfviewer.md | 11 ++-- ...the-values-in-the-undo-redo-collections.md | 12 ++--- .../how-to/improve-performance-using-CDN.md | 21 ++++---- .../blazor/how-to/load-custom-font-pdfium.md | 22 ++++---- ...df-for-initial-loading-in-hosted-sample.md | 12 ++--- .../blazor/how-to/load-font-collection.md | 18 +++---- .../how-to/perform-print-in-same-window.md | 13 +++-- 10 files changed, 117 insertions(+), 115 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/content-security-policy.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/content-security-policy.md index a134c787a..bcfda9640 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/content-security-policy.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/content-security-policy.md @@ -1,27 +1,27 @@ --- layout: post title: Use strict CSP in Blazor SfPdfViewer | Syncfusion -description: Learn here all about how to use the Content Security Policy in Syncfusion Blazor SfPdfViewer component. +description: Learn how to configure a strict Content Security Policy (CSP) for the Blazor SfPdfViewer, including required directives and their usage. platform: document-processing control: SfPdfViewer documentation: ug --- -# Use strict CSP in Blazor SfPdfViewer Component +# Use strict CSP in Blazor SfPdfViewer -Content Security Policy (CSP) is a security feature implemented by web browsers that helps to protect against attacks such as cross-site scripting (XSS) and data injection. It limits the sources from which content can be loaded on a web page. +Content Security Policy (CSP) is a browser security mechanism that mitigates attacks such as cross-site scripting (XSS) and data injection by restricting the allowed sources for loaded content. -To enable strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), certain browser features are disabled by default. In order to use Syncfusion PDF Viewer control with strict CSP mode, it is essential to include following directives in the CSP meta tag. +When enforcing a strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), some features are blocked by default. To use the Blazor SfPdfViewer under strict CSP, include the following directives in the CSP meta tag. -* Syncfusion PDF Viewer control are rendered with calculated **inline styles** and **base64** font icons, which are blocked on a strict CSP-enabled site. To allow them, add the [`style-src 'self' 'unsafe-inline' blob:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the meta tag as follows. +* The SfPdfViewer renders calculated inline styles and Base64 font icons, which are blocked by strict CSP. Allow these by adding the [`style-src 'self' 'unsafe-inline' blob:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives. -* Syncfusion **material** and **tailwind** built-in themes contain a reference to the [`Roboto's external font`](https://fonts.googleapis.com/css?family=Roboto:400,500), which is also blocked. To allow them, add the [`external font`](https://fonts.googleapis.com/css?family=Roboto:400,500) reference to the [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the above meta tag. +* The material and tailwind themes reference the Roboto font from Google Fonts, which is blocked under strict CSP. Allow it by including the Google Fonts endpoints in the [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives. -* Syncfusion PDF Viewer control uses **web workers** and makes network connections, which are blocked on a strict CSP-enabled site. To allow them, add the [`worker-src 'self' blob:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src) and [`connect-src 'self' https://cdn.syncfusion.com data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) directives in the above meta tag. +* The SfPdfViewer uses web workers and makes network requests. Allow these by adding [`worker-src 'self' blob:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src) and [`connect-src 'self' https://cdn.syncfusion.com data:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src). -* For JavaScript execution and WebAssembly operations, the [`script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.syncfusion.com blob:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) directive is required to allow inline scripts, eval operations, and blob-based scripts. +* For JavaScript execution and WebAssembly, include [`script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.syncfusion.com blob:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) to allow inline scripts, eval, and blob-based scripts. -The resultant meta tag is included within the `` tag and resolves the CSP violation on the application's side when utilizing Syncfusion PDF Viewer control with material and tailwind themes. +Include the following meta tag inside the `` element to address CSP violations when using the SfPdfViewer with material and tailwind themes. {% tabs %} {% highlight razor tabtitle="HTML" %} @@ -38,9 +38,9 @@ The resultant meta tag is included within the `` tag and resolves the CSP {% endhighlight %} {% endtabs %} -N> In accordance with the latest security practices, the Syncfusion PDF Viewer control requires `'unsafe-eval'` in the script-src directive for proper JavaScript execution and WebAssembly operations. The `worker-src` directive is also essential for web worker functionality used by the PDF Viewer. Make sure to update your CSP meta tags to include these directives for optimal functionality and security compliance. +N> The SfPdfViewer requires `unsafe-eval` in the `script-src` directive for JavaScript execution and WebAssembly operations. The `worker-src` directive is also required for web worker functionality. Ensure these directives are present for correct behavior under strict CSP. -### Please find the usage of each directives: +### Directive usage | Directive | Usage | |------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| @@ -53,4 +53,4 @@ N> In accordance with the latest security practices, the Syncfusion PDF Viewer c | `img-src 'self' blob: data:;` | Controls where images can be loaded from. `'self'` restricts to the same origin. `blob:` allows blob-based images. `data:` allows inline images (base64). | | `frame-src 'self' blob:;` | Controls where frames can be loaded from. `'self'` allows same-origin frames. `blob:` allows blob-based frames, which may be used by the PDF Viewer for certain operations. | -[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Pdfviewer%20Sample%20With%20CSP). \ No newline at end of file +[View the strict CSP sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Pdfviewer%20Sample%20With%20CSP). diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/coordinate-conversion-between-page-and-client-points.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/coordinate-conversion-between-page-and-client-points.md index 50ec3bb36..51be153a5 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/coordinate-conversion-between-page-and-client-points.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/coordinate-conversion-between-page-and-client-points.md @@ -1,34 +1,32 @@ --- layout: post -title: Coordinate Conversion Between Page and Client Points | Syncfusion -description: Learn here all about how to perform coordinate conversion between page and client points into Syncfusion Blazor SfPdfViewer component and more. +title: Convert between page and client coordinates | Syncfusion +description: Learn how to convert between page and client coordinates in the Blazor SfPdfViewer using JavaScript interop helper functions. platform: document-processing control: SfPdfViewer documentation: ug --- -# Coordinate Conversion Between Page and Client Points. +# Convert between page and client coordinates -The PDF viewer provides two essential conversion methods for translating between the document's internal page coordinate system and the client's browser coordinate system: +Use JavaScript interop helper functions to translate between the document page coordinate system and the browser client (viewport) coordinate system: -1. **Converting Page Coordinates to Client Coordinates** +1. Converting page coordinates to client coordinates - - `convertPagePointToClientPoint`: Transforms document page coordinates to browser viewport coordinates + - `convertPagePointToClientPoint`: Transforms document page coordinates to browser viewport coordinates. - +2. Converting client coordinates to page coordinates -2. **Converting Client Coordinates to Page Coordinates** + - `convertClientPointToPagePoint`: Transforms browser viewport coordinates to document page coordinates. - - `convertClientPointToPagePoint`: Transforms browser viewport coordinates to document page coordinates +## Converting page coordinates to client coordinates +- ConvertPagePointToClientPoint -## Converting Page Coordinates to Client Coordinates -- **ConvertPagePointToClientPoint** +Translate a point from the document page coordinate system to the browser client (viewport) coordinate system. -This method is used to translate a point from the document's page coordinate system to the browser's client (viewport) coordinate system. +The following example shows how to convert page coordinates to client coordinates in a Blazor component. -The following code example shows how to convert page coordinates to client coordinates into the blazor component. - -**Step 1:** Add a script file to your application and refer it to the head tag. +**Step 1:** Add a JavaScript file to the app and reference it in the head element. ```cshtml @@ -38,7 +36,7 @@ The following code example shows how to convert page coordinates to client coord ``` -**Step 2:** Add the following code to render the JS component in the blazor to the newly added JS file. +**Step 2:** Add the following code to the JavaScript file. ```javascript @@ -53,7 +51,7 @@ window.convertPagePointToClientPoint = function (pagePoint) { ``` -**Step 3:** Add the following code to the blazor component. +**Step 3:** Add the following code to the Blazor component. ```cshtml @@ -89,16 +87,16 @@ window.convertPagePointToClientPoint = function (pagePoint) { } ``` -[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Coordinate%20Conversion%20Between%20Page%20and%20Client%20Points) +[View the coordinate conversion sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Coordinate%20Conversion%20Between%20Page%20and%20Client%20Points) -## Converting Client Coordinates To Page Coordinates -- **ConvertClientPointToPagePoint** +## Converting client coordinates to page coordinates +- ConvertClientPointToPagePoint -This method is used to translate a point from the browser's client (viewport) coordinate system to the document's page coordinate system. +Translate a point from the browser client (viewport) coordinate system to the document page coordinate system. -The following code example shows how to convert client coordinates to page coordinates into the blazor component. +The following example shows how to convert client coordinates to page coordinates in a Blazor component. -**Step 1:** Add a script file to your application and refer it to the head tag. +**Step 1:** Add a JavaScript file to the app and reference it in the head element. ```cshtml @@ -108,7 +106,7 @@ The following code example shows how to convert client coordinates to page coord ``` -**Step 2:** Add the following code to render the JS component in the blazor to the newly added JS file. +**Step 2:** Add the following code to the JavaScript file. ```javascript @@ -123,7 +121,7 @@ window.convertClientPointToPagePoint = function (clientPoint) { ``` -**Step 3:** Add the following code to the blazor component. +**Step 3:** Add the following code to the Blazor component. ```cshtml @@ -161,4 +159,4 @@ window.convertClientPointToPagePoint = function (clientPoint) { } } ``` -[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Coordinate%20Conversion%20Between%20Page%20and%20Client%20Points) \ No newline at end of file +[View the coordinate conversion sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Coordinate%20Conversion%20Between%20Page%20and%20Client%20Points) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/deploy-maui-using-android-emulator.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/deploy-maui-using-android-emulator.md index 5c8f57f52..33f275fda 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/deploy-maui-using-android-emulator.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/deploy-maui-using-android-emulator.md @@ -1,21 +1,21 @@ --- layout: post -title: Deploy SfPdfViewer in Blazor MAUI in Android | Syncfusion -description: Learn how to deploy SfPdfViewer in Blazor MAUI Application on Android in Syncfusion Blazor SfPdfViewer component and much more details. +title: Deploy SfPdfViewer in Blazor MAUI on Android | Syncfusion +description: Learn how to render a PDF from an embedded resource and run the Syncfusion Blazor SfPdfViewer on Android using the .NET MAUI emulator. platform: document-processing control: SfPdfViewer documentation: ug --- -# Render PDF document from embedded source in the MAUI Android app +# Render a PDF from an embedded resource in a MAUI Android app -In this section, we'll guide you how to render PDF Viewer from embedded source in a MAUI app. We'll break it down into simple steps to make it easy to follow. +This section describes how to render the PDF Viewer from an embedded resource in a .NET MAUI Android app using the Android emulator. -Refer [here](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/deploy-maui-windows) to create MAUI app. +To create the .NET MAUI project, see Create a [MAUI app](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/deploy-maui-windows) -## Add PDF Viewer component +## Add the PDF Viewer component -Add the Syncfusion® PDF Viewer (Next Gen) component in the **~/Pages/Index.razor** file. +Add the Syncfusion Blazor PDF Viewer component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -45,41 +45,42 @@ Add the Syncfusion® PDF Viewer (Next Gen) c base.OnInitialized(); } } + {% endhighlight %} {% endtabs %} -N> When developing a Blazor Android MAUI application, passing the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) to the PDF Viewer component as a `base64 string` is needed. This ensures that the application can retrieve and render a PDF document correctly within the PDF Viewer component. +N> In a Blazor .NET MAUI Android app, pass the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) as a Base64 data URL. This ensures the viewer can retrieve and render the PDF correctly. -## Run on Android emulator +## Run on the Android emulator -To run the PDF Viewer in a Blazor Android MAUI application using the Android emulator, follow these steps: +To run the PDF Viewer in a Blazor .NET MAUI Android app using the Android emulator, follow these steps: -![Run Windows machine](../getting-started/gettingstarted-images/emulator_maui.png) +![Run on Windows machine](../getting-started/gettingstarted-images/emulator_maui.png) -**Step 1** Set up the necessary dependencies, SDKs, and tools for Blazor Android MAUI on your Windows machine. Ensure that you have installed the required `Android SDK licenses`. If any errors occur during installation, follow the provided prompts or instructions to resolve them. +**Step 1** Install the required dependencies, SDKs, and tools for .NET MAUI Android on Windows. Ensure the Android SDK licenses are accepted. If errors occur during installation, follow the prompts to resolve them. -![android-sdk-liscence](../getting-started/gettingstarted-images/android-sdk-liscence_maui.png) +![Android SDK license acceptance](../getting-started/gettingstarted-images/android-sdk-liscence_maui.png) -**Step 2** Right-click the **~wwwroot/data/pdf_succinctly.pdf** file in Solution Explorer, go to `Properties`, and set Build Action to `Embedded Resource` and Copy to Output Directory to `Copy Always`. +**Step 2** In Solution Explorer, right-click **~wwwroot/data/pdf_succinctly.pdf**, choose `Properties`, set Build Action to `Embedded Resource`, and set Copy to Output Directory to `Copy always`. -![android_maui_properties](../getting-started/gettingstarted-images/android_maui_properties.png) +![Set embedded resource properties for the PDF file](../getting-started/gettingstarted-images/android_maui_properties.png) -**Step 3** Install and launch the Android Device Manager. Open the Android SDK Manager, go to the `SDK Tools` tab, select the `Android Device Manager` checkbox, and click `Apply` or `OK`. This will allow you to create, manage, and launch Android Virtual Devices (AVD's) for testing and running Android applications. +**Step 3** Install and launch Android Device Manager. In Android SDK Manager, on the `SDK Tools` tab, select `Android Device Manager` and click `Apply` or `OK`. This enables creating and managing Android Virtual Devices (AVDs) for testing. -![picxel emulator](../getting-started/gettingstarted-images/pixcel-emulator_maui.png) +![Android Device Manager with a Pixel emulator](../getting-started/gettingstarted-images/pixcel-emulator_maui.png) -**Step 4** Ensure the Android emulator is running. Launch the Android Device Manager and create or select an existing AVD to run the emulator. +**Step 4** Ensure the Android emulator is running. In Android Device Manager, create or select an AVD and start the emulator. -Now, relaunch the project in emulator mode. It will render the PDF Viewer component using the Blazor Android MAUI application. +Finally, run the project with the emulator. The PDF Viewer component renders in the Blazor .NET MAUI Android app. -N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). +N> For emulator issues, see Troubleshooting Android Emulator: https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting -![Blazor SfPdfViewer Component](../getting-started/gettingstarted-images/emulator.png) +![Blazor SfPdfViewer rendering in the Android emulator](../getting-started/gettingstarted-images/emulator.png) ->[View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Server%20Deployment/Maui/MauiBlazorAndroid). +>[View sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Server%20Deployment/Maui/MauiBlazorAndroid). ## See also -* [Supported Features: Desktop vs Mobile](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/overview#supported-features-desktop-vs-mobile). +* [Supported features: Desktop vs mobile](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/overview#supported-features-desktop-vs-mobile). -* [Render PDF document from url in the MAUI app](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/deploy-maui-windows). \ No newline at end of file +* [Render a PDF document from a URL in the MAUI app](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/deploy-maui-windows). diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/get-data-from-sfpdfviewer.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/get-data-from-sfpdfviewer.md index b4e43f9ab..4861915e9 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/get-data-from-sfpdfviewer.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/get-data-from-sfpdfviewer.md @@ -1,17 +1,17 @@ --- layout: post -title: Get loaded PDF document's data from Blazor SfPdfViewer | Syncfusion -description: Learn here all about how to get loaded PDF document's data in Syncfusion Blazor SfPdfViewer component and more. +title: Get PDF document data in Blazor SfPdfViewer | Syncfusion +description: Learn how to retrieve the current PDF as a byte array using GetDocumentAsync and reload it with LoadAsync (data URI/base64) in Blazor SfPdfViewer. platform: document-processing control: SfPdfViewer documentation: ug --- -# Get PDF document's data from Blazor SfPdfViewer Component +# Get PDF document data from Blazor SfPdfViewer2 -You can get the loaded PDF document's data from the SfPdfViewer component using the [GetDocumentAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetDocumentAsync) method of SfPdfViewer. +Use the [GetDocumentAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_GetDocumentAsync) method of the SfPdfViewer2 component to retrieve the currently loaded PDF document as a byte array, including user edits, annotations, and form field data. -The following code example shows how to get the loaded/edited document data and re-load the document. +The following example retrieves the current document data and then reloads the same document into the viewer. ```cshtml @@ -51,6 +51,7 @@ The following code example shows how to get the loaded/edited document data and } ``` + [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Get%20the%20PDF%20document%20as%20a%20byte%20array). ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/identify-the-values-in-the-undo-redo-collections.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/identify-the-values-in-the-undo-redo-collections.md index ae478e361..6803a1e91 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/identify-the-values-in-the-undo-redo-collections.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/identify-the-values-in-the-undo-redo-collections.md @@ -1,17 +1,17 @@ --- layout: post -title: Identify if the Viewer has values in the Undo, Redo stack | Syncfusion -description: Learn how to identify if the Viewer has values in Undo, Redo stack in Syncfusion Blazor SfPdfViewer component and more. +title: Determine undo and redo availability in Blazor SfPdfViewer | Syncfusion +description: Learn how to determine whether undo and redo actions are available in the Blazor SfPdfViewer by binding CanUndo and CanRedo, with a working example. platform: document-processing control: SfPdfViewer documentation: ug --- -# Identify if the SfPdfViewer has values in the Undo, Redo collections +# Determine whether SfPdfViewer has values in the undo and redo collections -Syncfusion® Blazor SfPdfViewer component allows you to identify if the SfPdfViewer has values in the Undo and Redo collections using the [CanUndo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_CanUndo) and [CanRedo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_CanRedo) APIs of the SfPdfViewer. +The Blazor SfPdfViewer makes it possible to determine whether undo and redo history is available by using the [CanUndo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_CanUndo) and [CanRedo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_CanRedo). In SfPdfViewer2, bind these properties to boolean fields to reflect availability in the UI. -The following code example shows how to achieve this based on the Undo Redo actions. +The following example binds these properties and enables or disables the buttons as the undo and redo history changes. ```cshtml @@ -70,4 +70,4 @@ else ``` -[View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Identify%20the%20PdfViewer%20has%20Undo%2C%20Redo) \ No newline at end of file +[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Identify%20the%20PdfViewer%20has%20Undo%2C%20Redo) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md index d653ea4c9..801475c85 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md @@ -1,18 +1,21 @@ --- layout: post -title: Improve the performance using CDN | Syncfusion -description: Learn here all about how to improve the performance using CDN in Blazor SfPdfViewer component and more. +title: Improve performance using a CDN | Syncfusion +description: Learn how to improve performance in the Blazor SfPdfViewer by using versioned CDN script references, understanding caching behavior, and placing references correctly. platform: document-processing control: SfPdfViewer documentation: ug --- -# Improve the performance using CDN in Blazor SfPdfViewer component +# Improve performance using a CDN in the Blazor SfPdfViewer -When all the JavaScript files in the sample are referenced from the application's hosted location or NuGet location, each time we fetch them from that location, causing delays in fetching the script files. This delay can potentially slow down component rendering. To mitigate this performance issue, you can reference the script from a **CDN**. If the file is not available in the browser cache, it will be retrieved only from the hosted location. Subsequent fetches will retrieve the script file from the browser cache unless the file has been modified. +Referencing scripts from the application's hosted or NuGet location can add network overhead and slow initial rendering. To reduce latency, reference the scripts from a content delivery network (CDN). The browser will download the assets once and then reuse them from cache on subsequent loads (unless the version changes). -The Syncfusion® Blazor SfPdfViewer component allows to improve performance by referring the below **CDN** link in **~/Pages/Layout.cshtml** or **~/Pages/_Host.cshtml** file. +Improve load performance by referencing the following CDN links in the app's host page: +- Blazor Server: **~/Pages/_Host.cshtml** +- Blazor WebAssembly: **wwwroot/index.html** +Use version-pinned URLs and update them when upgrading the package. ```html @@ -25,10 +28,10 @@ The Syncfusion® Blazor SfPdfViewer component allows to improve performance b ``` -We have a file named pdfium.js in our source. Whenever that file is fetched, it is downloaded from the hosted location while referring to the script from the NuGet. Below is a clear image that illustrates this process. +The viewer depends on pdfium.js (and its companion pdfium.wasm). When scripts are referenced from NuGet or a hosted path, these files download from that location on first use. The following image shows the network behavior in this case. -![Using Nuget](../getting-started/gettingstarted-images/Filesize_using_NuGet.png) +![Network and file size when referencing scripts from NuGet](../getting-started/gettingstarted-images/Filesize_using_NuGet.png) -When referencing the script from the **CDN**, it is initially fetched from the hosted location. Subsequently, it is retrieved from the browser cache. The image below provides a clear illustration of this process. +When referencing scripts from a **CDN**, assets are fetched from the CDN on first load and then served from the browser cache on subsequent loads, improving perceived performance. The image below illustrates this behavior. -![Using CDN](../getting-started/gettingstarted-images/Filesize_using_CDN.png) \ No newline at end of file +![Network and file size when referencing scripts from a CDN](../getting-started/gettingstarted-images/Filesize_using_CDN.png) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/load-custom-font-pdfium.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/load-custom-font-pdfium.md index 07689c22e..ce7597e7c 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/load-custom-font-pdfium.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/load-custom-font-pdfium.md @@ -1,25 +1,25 @@ --- layout: post -title: Load Custom Fonts in a PDF Viewer | Syncfusion -description: Learn here all about Custom Fonts in Blazor application in Syncfusion Blazor SfPdfViewer component and more. +title: Load custom fonts with Pdfium in Blazor SfPdfViewer | Syncfusion +description: Learn how to load custom fonts in the Blazor SfPdfViewer using Pdfium CustomFonts, including hosting fonts in wwwroot or via a CDN. platform: document-processing control: SfPdfViewer documentation: ug --- -# Load Custom Fonts in a PDF Viewer +# Load custom fonts in the Blazor SfPdfViewer -Syncfusion® Blazor PDF Viewer utilizes Pdfium to extract the text and convert the PDF document as images. Pdfium supports a limited set of fonts by default. To expand this capability, [CustomFonts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_CustomFonts) can be used to load additional fonts that are not embedded within Pdfium. +The Blazor SfPdfViewer uses Pdfium to extract text and render pages as images. Pdfium includes a limited set of built-in fonts. Use [CustomFonts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_CustomFonts) to supply additional fonts when the required fonts are not available. -To implement CustomFonts, follow these steps: +To use CustomFonts, follow these steps: -1. Upload the font files you want to use into the `wwwroot` folder of your project. +1. Add the font files (TTF, TTC, or OTF) to the `wwwroot` folder so they are available as static assets at runtime. -2. Include the exact paths to these font files in the customFonts list for proper referencing. This ensures that Pdfium can utilize these fonts as needed. +2. Reference the exact paths to these font files in the customFonts list. Ensure the paths resolve correctly when the app is running. -![CustomFonts in Blazor PDFViewer](../../blazor-classic/images/customfont-files.png) +![Custom font files in wwwroot for Blazor SfPdfViewer](../../blazor-classic/images/customfont-files.png) -The following code demonstrates how to load the CustomFonts to PDF Viewer. +The following example shows how to load custom fonts into the PDF Viewer. ```cshtml @@ -36,7 +36,7 @@ The following code demonstrates how to load the CustomFonts to PDF Viewer. } ``` -Below code snippet illustrates how to load a CustomFonts using a CDN link. +The following example shows how to load a custom font using a CDN link. ```cshtml @@ -53,4 +53,4 @@ Below code snippet illustrates how to load a CustomFonts using a CDN link. } ``` -[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Load%20custom%20fonts%20in%20PDF%20document). +[View the custom fonts sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Load%20custom%20fonts%20in%20PDF%20document). diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/load-desired-pdf-for-initial-loading-in-hosted-sample.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/load-desired-pdf-for-initial-loading-in-hosted-sample.md index f460a0f3f..4f7d80b2b 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/load-desired-pdf-for-initial-loading-in-hosted-sample.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/load-desired-pdf-for-initial-loading-in-hosted-sample.md @@ -1,15 +1,15 @@ --- layout: post -title: Load PDF for initial loading in Blazor SfPdfViewer | Syncfusion -description: Learn here all about how to load desired PDF for initial loading in Syncfusion Blazor SfPdfViewer component and more. +title: Load a PDF on initial load in Blazor SfPdfViewer | Syncfusion +description: Learn how to display a specific PDF on initial load and switch documents at runtime using the DocumentPath property and base64 data URIs in Blazor SfPdfViewer. platform: document-processing control: SfPdfViewer documentation: ug --- -# Load desired PDF for initial loading in Blazor SfPdfViewer Component +# Load a specific PDF on initial load in Blazor SfPdfViewer2 -You can load your own PDF document for initial loading as well as change the document at runtime in the Blazor SfPdfViewer component.To load your desired PDF document for initial display, you need to set the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property of the SfPdfViewer component to the path of your PDF file. +Load a specific PDF on initial display and change the document at runtime in the Blazor SfPdfViewer2 component. To set the initial document, assign the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_DocumentPath) property to a file path/URL or a data URI (base64). Updating DocumentPath reloads the viewer with the new document. ```cshtml @@ -42,9 +42,9 @@ You can load your own PDF document for initial loading as well as change the doc ``` -In the above code, When the `Load Another Document` button is clicked, the `LoadAnotherDocument` method is triggered. This method uses the HttpClient service to retrieve the desired PDF document as a `byte` array. The byte array is then converted to a `base64` string, and the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is updated with the new document path. +When the `Load Another Document` button is clicked, the `LoadAnotherDocument` method runs. It uses HttpClient to download the PDF as a `byte` array, converts it to a `base64` string, and then updates the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_DocumentPath) property with a data URI. This updates the viewer to display the new document. -With this implementation, users can click the `Load Another Document` button to dynamically change the PDF document displayed in the Blazor SfPdfViewer component. +With this implementation, users can dynamically switch the displayed PDF at runtime using the `Load Another Document` button. [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Load%20Desire%20PDF%20in%20Blazor). diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/load-font-collection.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/load-font-collection.md index 1952d0d46..e1e128ffb 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/load-font-collection.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/load-font-collection.md @@ -1,23 +1,23 @@ --- layout: post -title: Load Font Collection in a PDF Viewer | Syncfusion -description: Learn here all about Font Collection in Blazor application in Syncfusion Blazor SfPdfViewer component and more. +title: Load a font collection in Blazor SfPdfViewer | Syncfusion +description: Learn how to load multiple fallback fonts using FallbackFontCollection in the Blazor SfPdfViewer to ensure accurate rendering of PDFs with diverse fonts. platform: document-processing control: SfPdfViewer documentation: ug --- -# Load Font collection in a PDF Viewer +# Load a font collection in Blazor SfPdfViewer -In addition to adding a single custom font, the Syncfusion® Blazor PDF Viewer also supports adding multiple fonts to the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection). This is particularly useful when a PDF document utilizes various fonts that may not be embedded or supported by default on the viewing system. By configuring multiple fonts, you ensure that the document renders accurately, preserving its diverse font styles and special characters. +In addition to loading a single custom font, the Blazor SfPdfViewer supports adding multiple fonts to the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection). This is useful when a PDF uses various fonts that are not embedded or not available by default. Configuring multiple fallback fonts helps preserve text shaping, special characters, and overall fidelity. -To implement FallbackFontCollection, follow these step: +To use FallbackFontCollection, follow these steps: -1. Upload the font files you want to use into the `wwwroot` folder of your project. +1. Add the required font files (for example, TTF/TTC/OTF) to the `wwwroot` folder so they are available as static assets at runtime. -![Font Collection in Blazor PDFViewer](../../blazor-classic/images/load-font-collection.png) +![Font files added under wwwroot for use with FallbackFontCollection](../../blazor-classic/images/load-font-collection.png) -The following code demonstrates how to load the font collection to PDF Viewer. +The following example shows how to add fonts to the fallback collection at runtime. ```cshtml @@ -40,4 +40,4 @@ The following code demonstrates how to load the font collection to PDF Viewer. } ``` -[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Load%20font%20collection%20in%20PDF%20document). +[View the font collection sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Load%20font%20collection%20in%20PDF%20document). diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/perform-print-in-same-window.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/perform-print-in-same-window.md index 9f91ab717..dc9aa6ea8 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/perform-print-in-same-window.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/perform-print-in-same-window.md @@ -1,7 +1,7 @@ --- layout: post title: Perform print in same window using SfPdfViewer | Syncfusion -description: Learn here all about how to perform print in same window in Syncfusion Blazor SfPdfViewer component and more. +description: Learn how to print in the same window in the Syncfusion Blazor SfPdfViewer using PrintMode, with notes on browser behavior and pop-up blockers. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,10 +9,10 @@ documentation: ug # Perform print in same window in Blazor SfPdfViewer Component -The `PrintMode` enum of SfPdfViewer2 allows you to decide whether to print in the same window or in a new window. The available enum values are `PrintMode.Default` and `PrintMode.NewWindow`. +Use the SfPdfViewer2 `PrintMode` enum to control whether printing occurs in the same window or a new window. Available values are `PrintMode.Default` and `PrintMode.NewWindow`. -* **Default** - If you set `PrintMode.Default`, printing will occur in the same window. -* **NewWindow** - If you set `PrintMode.NewWindow`, printing will open in a new window. +* **Default** - Prints in the same window using `PrintMode.Default`. +* **NewWindow** - Opens printing in a new browser window or tab (may be affected by pop-up blockers) using `PrintMode.NewWindow`. ```cshtml @using Syncfusion.Blazor.SfPdfViewer @@ -26,10 +26,9 @@ The `PrintMode` enum of SfPdfViewer2 allows you to decide whether to print in th private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; } ``` -In the provided code, `PrintMode.Default` is used to specify printing in the same window. ## See also -* [Print in Blazor SfPdfViewer Component](../print) +* [Printing options in Blazor SfPdfViewer](../print) -* [How to print the SfPdfViewer inside the Dialog](./print-the-sfpdfiewer-inside-the-dialog-component) \ No newline at end of file +* [Print the SfPdfViewer inside a Dialog](./print-the-sfpdfiewer-inside-the-dialog-component) From 389852f0fb1bfaec7bd051831555f56428b0ea56 Mon Sep 17 00:00:00 2001 From: Tamilselvan-Durairaj <153176971+Tamilselvan-Durairaj@users.noreply.github.com> Date: Wed, 24 Sep 2025 15:52:19 +0530 Subject: [PATCH 2/6] 983689: Update the CI failures --- .../blazor/how-to/deploy-maui-using-android-emulator.md | 2 +- .../identify-the-values-in-the-undo-redo-collections.md | 4 ++-- .../PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/deploy-maui-using-android-emulator.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/deploy-maui-using-android-emulator.md index 33f275fda..462ebb9a9 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/deploy-maui-using-android-emulator.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/deploy-maui-using-android-emulator.md @@ -65,7 +65,7 @@ To run the PDF Viewer in a Blazor .NET MAUI Android app using the Android emulat ![Set embedded resource properties for the PDF file](../getting-started/gettingstarted-images/android_maui_properties.png) -**Step 3** Install and launch Android Device Manager. In Android SDK Manager, on the `SDK Tools` tab, select `Android Device Manager` and click `Apply` or `OK`. This enables creating and managing Android Virtual Devices (AVDs) for testing. +**Step 3** Install and launch Android Device Manager. In Android SDK Manager, on the `SDK Tools` tab, select `Android Device Manager` and click `Apply` or `OK`. This enables creating and managing Android Virtual Devices (AVD) for testing. ![Android Device Manager with a Pixel emulator](../getting-started/gettingstarted-images/pixcel-emulator_maui.png) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/identify-the-values-in-the-undo-redo-collections.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/identify-the-values-in-the-undo-redo-collections.md index 6803a1e91..4cbcd689f 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/identify-the-values-in-the-undo-redo-collections.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/identify-the-values-in-the-undo-redo-collections.md @@ -1,13 +1,13 @@ --- layout: post -title: Determine undo and redo availability in Blazor SfPdfViewer | Syncfusion +title: Determine undo and redo availability in PDF Viewer | Syncfusion description: Learn how to determine whether undo and redo actions are available in the Blazor SfPdfViewer by binding CanUndo and CanRedo, with a working example. platform: document-processing control: SfPdfViewer documentation: ug --- -# Determine whether SfPdfViewer has values in the undo and redo collections +# Determine if SfPdfViewer has values in the undo, redo collections The Blazor SfPdfViewer makes it possible to determine whether undo and redo history is available by using the [CanUndo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_CanUndo) and [CanRedo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_CanRedo). In SfPdfViewer2, bind these properties to boolean fields to reflect availability in the UI. diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md index 801475c85..7544eb92a 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md @@ -1,7 +1,7 @@ --- layout: post title: Improve performance using a CDN | Syncfusion -description: Learn how to improve performance in the Blazor SfPdfViewer by using versioned CDN script references, understanding caching behavior, and placing references correctly. +description: Learn how to improve performance in the Blazor SfPdfViewer by using versioned CDN script references. platform: document-processing control: SfPdfViewer documentation: ug From 4ed362dde8083e860dd8d8406e447f6c41c7b6a8 Mon Sep 17 00:00:00 2001 From: Tamilselvan-Durairaj <153176971+Tamilselvan-Durairaj@users.noreply.github.com> Date: Thu, 25 Sep 2025 16:04:18 +0530 Subject: [PATCH 3/6] 983689: Update the review changes --- .../coordinate-conversion-between-page-and-client-points.md | 6 ++---- .../blazor/how-to/improve-performance-using-CDN.md | 4 +--- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/coordinate-conversion-between-page-and-client-points.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/coordinate-conversion-between-page-and-client-points.md index 51be153a5..fdc09b7a2 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/coordinate-conversion-between-page-and-client-points.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/coordinate-conversion-between-page-and-client-points.md @@ -20,9 +20,8 @@ Use JavaScript interop helper functions to translate between the document page c - `convertClientPointToPagePoint`: Transforms browser viewport coordinates to document page coordinates. ## Converting page coordinates to client coordinates -- ConvertPagePointToClientPoint -Translate a point from the document page coordinate system to the browser client (viewport) coordinate system. +- ConvertPagePointToClientPoint translates a point from the document page coordinate system to the browser client (viewport) coordinate system. The following example shows how to convert page coordinates to client coordinates in a Blazor component. @@ -90,9 +89,8 @@ window.convertPagePointToClientPoint = function (pagePoint) { [View the coordinate conversion sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Coordinate%20Conversion%20Between%20Page%20and%20Client%20Points) ## Converting client coordinates to page coordinates -- ConvertClientPointToPagePoint -Translate a point from the browser client (viewport) coordinate system to the document page coordinate system. +- ConvertClientPointToPagePoint translates a point from the browser client (viewport) coordinate system to the document page coordinate system. The following example shows how to convert client coordinates to page coordinates in a Blazor component. diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md index 7544eb92a..50e4a0b0b 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md @@ -11,9 +11,7 @@ documentation: ug Referencing scripts from the application's hosted or NuGet location can add network overhead and slow initial rendering. To reduce latency, reference the scripts from a content delivery network (CDN). The browser will download the assets once and then reuse them from cache on subsequent loads (unless the version changes). -Improve load performance by referencing the following CDN links in the app's host page: -- Blazor Server: **~/Pages/_Host.cshtml** -- Blazor WebAssembly: **wwwroot/index.html** +Improve load performance by injecting the following CDN links in **Components/App.razor**. Use version-pinned URLs and update them when upgrading the package. From b497a09a3da56177f157c83535ed8d9508ce0165 Mon Sep 17 00:00:00 2001 From: Tamilselvan-Durairaj <153176971+Tamilselvan-Durairaj@users.noreply.github.com> Date: Thu, 25 Sep 2025 17:13:43 +0530 Subject: [PATCH 4/6] 983689: Update the documentation for the smart pdfviewer --- .../blazor/getting-started/maui-blazor-app.md | 14 +++++++++++--- .../blazor/getting-started/web-app.md | 4 ++-- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md index ce43c156e..b4d2332ee 100644 --- a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md +++ b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md @@ -21,10 +21,18 @@ Create a new Blazor MAUI app and by selecting the template **.NET MAUI Blazor Hy ## Install Smart PDF Viewer NuGet package in Blazor Maui App -Add the following NuGet packages into the Blazor Maui app. +To Add the NuGet packages into the Blazor Maui app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.SfSmartPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfSmartPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) -* [Syncfusion.Blazor.SfSmartPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfSmartPdfViewer) -* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) +Alternatively, you can utilize the following package manager command to achieve the same. + +{% tabs %} +{% highlight razor tabtitle="Package Manager" %} + +Install-Package Syncfusion.Blazor.SfSmartPdfViewer -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} ## Register Syncfusion® Blazor Service diff --git a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md index 10fcb1a7d..8d681d99b 100644 --- a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md +++ b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md @@ -35,8 +35,8 @@ Alternatively, you can utilize the following package manager command to achieve {% tabs %} {% highlight razor tabtitle="Package Manager" %} -Install-Package Syncfusion.Blazor.SfSmartPdfViewer -Version 31.1.17 -Install-Package Syncfusion.Blazor.Themes -Version 31.1.17 +Install-Package Syncfusion.Blazor.SfSmartPdfViewer -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} From 7c353ae2d971848651c5df2561d17dce60cff68b Mon Sep 17 00:00:00 2001 From: Tamilselvan-Durairaj <153176971+Tamilselvan-Durairaj@users.noreply.github.com> Date: Thu, 25 Sep 2025 17:15:49 +0530 Subject: [PATCH 5/6] 983689: Revert the changes --- .../blazor/getting-started/maui-blazor-app.md | 14 +++----------- .../blazor/getting-started/web-app.md | 4 ++-- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md index b4d2332ee..ce43c156e 100644 --- a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md +++ b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md @@ -21,18 +21,10 @@ Create a new Blazor MAUI app and by selecting the template **.NET MAUI Blazor Hy ## Install Smart PDF Viewer NuGet package in Blazor Maui App -To Add the NuGet packages into the Blazor Maui app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.SfSmartPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfSmartPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) +Add the following NuGet packages into the Blazor Maui app. -Alternatively, you can utilize the following package manager command to achieve the same. - -{% tabs %} -{% highlight razor tabtitle="Package Manager" %} - -Install-Package Syncfusion.Blazor.SfSmartPdfViewer -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} - -{% endhighlight %} -{% endtabs %} +* [Syncfusion.Blazor.SfSmartPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfSmartPdfViewer) +* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) ## Register Syncfusion® Blazor Service diff --git a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md index 8d681d99b..10fcb1a7d 100644 --- a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md +++ b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md @@ -35,8 +35,8 @@ Alternatively, you can utilize the following package manager command to achieve {% tabs %} {% highlight razor tabtitle="Package Manager" %} -Install-Package Syncfusion.Blazor.SfSmartPdfViewer -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.SfSmartPdfViewer -Version 31.1.17 +Install-Package Syncfusion.Blazor.Themes -Version 31.1.17 {% endhighlight %} {% endtabs %} From 6dc3d2016c850818e87efd834fb0b086ad07abce Mon Sep 17 00:00:00 2001 From: sathiyaseelanksf3503 Date: Fri, 26 Sep 2025 13:44:50 +0530 Subject: [PATCH 6/6] 983689: updated the cdn links --- .../blazor/how-to/improve-performance-using-CDN.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md index 50e4a0b0b..92dda54b7 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/how-to/improve-performance-using-CDN.md @@ -19,10 +19,12 @@ Use version-pinned URLs and update them when upgrading the package. - - - + + + + + ```