diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-change-the-highlighted-color-of-the-text.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-change-the-highlighted-color-of-the-text.md index 4b080c32f0..93b4a61276 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-change-the-highlighted-color-of-the-text.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-change-the-highlighted-color-of-the-text.md @@ -1,7 +1,7 @@ --- layout: post title: Change highlight color of text in Blazor PDF Viewer | Syncfusion -description: Learn how to change the highlight color of text markup highlights in the Syncfusion Blazor SfPdfViewer using the PdfViewerHighlightSettings. +description: Learn how to change the highlight color of text markup highlights in the Blazor SfPdfViewer using the PdfViewerHighlightSettings. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,12 +9,11 @@ documentation: ug # Change the highlight color of the text in Blazor SfPdfViewer Component -Use the `Color` property of [PdfViewerHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerHighlightSettings.html) to set the default highlight color for text markup highlights. This applies only to Highlight annotations; other text-markup types (such as Underline or Strikethrough) use their own settings. +Use the `Color` property of [PdfViewerHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerHighlightSettings.html) to set the default highlight color for text markup annotations. This property applies only to Highlight annotations; other text-markup types, such as [Underline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerUnderlineSettings.html) and [Strikethrough](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerStrikethroughSettings.html), use their own settings. The following example shows how to set the highlight color. ```cshtml -@using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.SfPdfViewer @@ -24,17 +23,30 @@ The following example shows how to set the highlight color. -@code{ - SfPdfViewer2 PDFViewer; - //Sets the PDF document path for initial loading. +@code { + // Reference to the PDF Viewer instance. + private SfPdfViewer2 PDFViewer; + + // Sets the PDF document path for initial loading. private string DocumentPath { get; set; } = "Data/PDF_Succinctly.pdf"; - //Defines the color for text markup annotations like highlight. + // Defines the color for text markup annotations like highlight. private string highlightColor = "Green"; - } ``` ![Highlighted text in Blazor PDF Viewer](../images/highlighttext.png) -[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Text%20Markup/Customize%20highlight%20annotation). \ No newline at end of file +> [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Text%20Markup/Customize%20highlight%20annotation) + +## Supported properties + +In addition to `Color`, [PdfViewerHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerHighlightSettings.html) exposes additional properties such as `Opacity`, `IsLocked`, `Author`, `Subject`, and `ModifiedDate`. Refer to the [PdfViewerHighlightSettings API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerHighlightSettings.html) for the full list. + +The value assigned to `Color` also sets the default selection in the highlight tool's color picker in the toolbar. +N> Highlight annotations rendered using the default color set by `PdfViewerHighlightSettings.Color`. + +## See also + +- [Highlight Annotation](../annotation/text-markup/highlight-annotation) +- [Customize Annotation](../annotation/customize-annotation) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-check-status-of-annotations-or-comments.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-check-status-of-annotations-or-comments.md index 2e731ed9eb..5150cf94f7 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-check-status-of-annotations-or-comments.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-check-status-of-annotations-or-comments.md @@ -1,7 +1,7 @@ --- layout: post title: Check the status of the comments in Blazor SfPdfViewer | Syncfusion -description: Learn how to retrieve the review status of comments using the Review property and GetAnnotationsAsync in the Syncfusion Blazor SfPdfViewer component. +description: Learn how to retrieve the review status of comments using the Review property and GetAnnotationsAsync in the Blazor SfPdfViewer component. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,7 +9,9 @@ documentation: ug # Check the status of annotations or comments in Blazor SfPdfViewer -The Blazor SfPdfViewer component supports retrieving the review status of annotations and comments through the [Review](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.Review.html) property of the [PdfAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfAnnotation.html) class. This enables identifying the State (for example, Accepted, Rejected) and the StateModel (for example, Review, Comment) associated with each annotation. +The Blazor SfPdfViewer component supports retrieving the review status of annotations and comments through the [Review](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.Review.html) property of the [PdfAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfAnnotation.html) class. This enables identifying the `State` and the `StateModel` associated with each annotation. + +The `PdfAnnotation` class represents a single annotation in the viewer. Its `Review` property exposes the review-tracking metadata. The [GetAnnotationsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetAnnotationsAsync) method returns a `List` containing all annotations (including text markup, free text, ink, stamp, and shape annotations) that exist on the currently loaded PDF document. The following code example shows how to obtain the review status of each annotation and log it to the browser console. @@ -28,10 +30,10 @@ The following code example shows how to obtain the review status of each annotat @code{ private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; - SfPdfViewer2 pdfviewer; + private SfPdfViewer2 pdfviewer; - //Prints the comment status of the PDF document in console. - public async void reviewStatus() + //Prints the comment status of the PDF document in the console. + private async Task reviewStatus() { //Gets the annotation collection. List annotationCollection = await pdfviewer.GetAnnotationsAsync(); @@ -40,9 +42,14 @@ The following code example shows how to obtain the review status of each annotat PdfAnnotation annotation = annotationCollection[x]; //Gets the review status details of the comment. Review review = annotation.Review; + if (review == null) + { + continue; + } var reviewState = review.State; var reviewStateModel = review.StateModel; - await this.JsRuntime.InvokeVoidAsync("console.log", reviewState.ToString()); + await this.JsRuntime.InvokeVoidAsync("console.log", + $"State: {reviewState}, StateModel: {reviewStateModel}"); } } } @@ -52,9 +59,7 @@ The following code example shows how to obtain the review status of each annotat ## See also * [Free text annotations in Blazor SfPdfViewer Component](../annotation/free-text-annotation) - * [Ink Annotation in the Blazor SfPdfViewer component](../annotation/ink-annotation) - * [Stamp annotations in Blazor SfPdfViewer Component](../annotation/stamp-annotation) - -* [Comments in Blazor SfPdfViewer Component](../annotation/comments) \ No newline at end of file +* [Comments in Blazor SfPdfViewer component](../annotation/comments) +* [SfPdfViewer getting started (Web App)](../getting-started/web-app) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-check-whether-the-loaded-PDF-document-is-edited-or-not.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-check-whether-the-loaded-PDF-document-is-edited-or-not.md index 8a31df65e5..ea378b2df2 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-check-whether-the-loaded-PDF-document-is-edited-or-not.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-check-whether-the-loaded-PDF-document-is-edited-or-not.md @@ -1,17 +1,17 @@ --- layout: post title: Check document editing status in Blazor PDF Viewer | Syncfusion -description: Learn how to check whether a loaded PDF is edited using the IsDocumentEdited property in the Syncfusion Blazor SfPdfViewer component. +description: Learn how to check whether a loaded PDF is edited using the IsDocumentEdited property in the Blazor SfPdfViewer component. platform: document-processing control: SfPdfViewer documentation: ug --- -# Check document editing status in Blazor SfPdfViewer Component +# Check whether the loaded PDF document is edited in Blazor SfPdfViewer Use the [IsDocumentEdited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsDocumentEdited) property to determine whether the loaded PDF has unsaved changes. A document is considered edited when users modify annotations, fill form fields, add or update signatures, apply redactions, or perform other in-viewer changes. The property returns `true` when the document has unsaved edits. -The following example shows how to check the document's edited status and log it. +The following example shows how to check the document's edited status and log it to the server console. ```cshtml @using Syncfusion.Blazor.SfPdfViewer @@ -25,11 +25,11 @@ The following example shows how to check the document's edited status and log it @code{ - public SfPdfViewer2 Viewer { get; set; } - private string DocumentPath { get; set; } = "Data/PDF_Succinctly.pdf"; + private SfPdfViewer2 Viewer { get; set; } + private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; - // Logs the document's edited status to the console (null-safe). - public void OnClick(MouseEventArgs args) + // Logs the document's edited status to the console. + private void OnClick() { Console.WriteLine(Viewer.IsDocumentEdited); } diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-configure-content-security-policy.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-configure-content-security-policy.md index d5bec77472..1fd4b3da67 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-configure-content-security-policy.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-configure-content-security-policy.md @@ -11,51 +11,50 @@ documentation: ug 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. -When enforcing a strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), some browser features are blocked by default. To use the Blazor `SfPdfViewer` with a strict CSP, add the directives below to your CSP meta tag. +When enforcing a strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), some browser features are blocked by default. To use the Blazor `SfPdfViewer` with a strict CSP, add the following directives to your CSP meta tag. This guidance applies to the SfPdfViewer in Blazor WebAssembly. -* 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. +- The SfPdfViewer renders dynamic inline styles and base64 font icons, which are blocked by strict CSP. Allow these by adding the [`style-src 'self' 'unsafe-inline' blob: https://cdn.syncfusion.com https://fonts.googleapis.com`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data: https://fonts.googleapis.com https://fonts.gstatic.com`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives. -* 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. +- 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. -* 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). +- 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, include [`script-src 'self' 'unsafe-inline' 'wasm-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. +- For JavaScript execution and WebAssembly, include [`script-src 'self' 'unsafe-inline' 'wasm-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. 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" %} +{% highlight razor tabtitle="Head" %} + font-src 'self' data: https://fonts.googleapis.com https://fonts.gstatic.com;" /> {% endhighlight %} {% endtabs %} -N>The `SfPdfViewer` component requires specific Content Security Policy (CSP) directives to function properly in Blazor WebAssembly applications. -- In **.NET 9.0**, include `'wasm-unsafe-eval'` in the `script-src` directive to support WebAssembly operations. -- In **.NET 8.0**, you must also include `'unsafe-eval'` in the `script-src` directive to avoid runtime errors caused by restricted dynamic JavaScript execution. -- Ensure the `worker-src` directive includes `'self'` and `blob:` to enable web worker functionality. +N>The `SfPdfViewer` component requires specific Content Security Policy (CSP) directives to function properly in Blazor WebAssembly applications. +- In **.NET 9.0**, include `'wasm-unsafe-eval'` in the `script-src` directive to support WebAssembly operations. +- In **.NET 8.0**, include `'unsafe-eval'` in the `script-src` directive (in addition to `'wasm-unsafe-eval'`) to avoid runtime errors caused by restricted dynamic JavaScript execution. +- Ensure the `worker-src` directive includes `'self'` and `blob:` to enable web worker functionality. These directives are essential for correct behavior under strict CSP environments. - ### Directive usage | Directive | Usage | |------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `default-src 'self';` | Sets the default policy for loading resources. `'self'` means only allow resources from the same origin (same domain). | -| `script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://cdn.syncfusion.com blob:;` | Defines where JavaScript code can come from. `'self'` allows scripts from the same origin. `'unsafe-inline'` allows inline scripts. `'wasm-unsafe-eval'` allows eval() operations for WebAssembly in **.NET 9.0**. `'unsafe-eval'` allows eval() operations for WebAssembly in **.NET 8.0**. `blob:` allows loading scripts from Blob URLs. | +| `script-src 'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval' https://cdn.syncfusion.com blob:;` | Defines where JavaScript code can come from. `'self'` allows scripts from the same origin. `'unsafe-inline'` allows inline scripts. `'wasm-unsafe-eval'` allows eval() operations for WebAssembly in **.NET 9.0**. `'unsafe-eval'` allows eval() operations for WebAssembly in **.NET 8.0**. `blob:` allows loading scripts from Blob URLs. | | `worker-src 'self' blob:;` | Controls where workers can be loaded from. `'self'` allows same-origin workers. `blob:` allows blob-based workers, common in PDF viewers and heavy JS applications. | -| `connect-src 'self' https://cdn.syncfusion.com data:;` | Controls where the application can make network requests, such as `fetch()`, XHR, and WebSockets. `'self'` restricts to the same origin, with additional allowances for Syncfusion CDN and data URLs. | -| `style-src 'self' 'unsafe-inline' blob: https://cdn.syncfusion.com https://fonts.googleapis.com;` | Defines the sources for stylesheets. `'self'` restricts to the same origin. `'unsafe-inline'` allows inline styles. `blob:` allows dynamically generated styles. External font CDNs are also allowed. | -| `font-src 'self' data: https://fonts.googleapis.com/ https://fonts.gstatic.com/;` | Controls where fonts can be loaded from. `'self'` allows local fonts. `data:` allows inline fonts (base64 embedded), and the URLs allow loading from external font CDNs. | +| `connect-src 'self' https://cdn.syncfusion.com data:;` | Controls where the application can make network requests, such as `fetch()`, XHR, and WebSockets. `'self'` restricts to the same origin, with additional allowances for the Syncfusion CDN and data URLs. | +| `style-src 'self' 'unsafe-inline' blob: https://cdn.syncfusion.com https://fonts.googleapis.com;` | Defines the sources for stylesheets. `'self'` restricts to the same origin. `'unsafe-inline'` allows inline styles. `blob:` allows dynamically generated styles. `https://cdn.syncfusion.com` and `https://fonts.googleapis.com` allow external font CDNs. | +| `font-src 'self' data: https://fonts.googleapis.com https://fonts.gstatic.com;` | Controls where fonts can be loaded from. `'self'` allows local fonts. `data:` allows inline fonts (base64 embedded). `https://fonts.googleapis.com` and `https://fonts.gstatic.com` allow loading from external font CDNs. | | `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. | +| `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 SfPdfViewer for certain operations. | [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/faqs/how-to-coordinate-conversion-between-page-and-client-points.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-coordinate-conversion-between-page-and-client-points.md index 80dc6f380d..ba552dcaf5 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-coordinate-conversion-between-page-and-client-points.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-coordinate-conversion-between-page-and-client-points.md @@ -21,7 +21,7 @@ Use JavaScript interop helper functions to translate between the document page c ## Converting page coordinates to client coordinates -- ConvertPagePointToClientPoint translates 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. @@ -40,7 +40,7 @@ The following example shows how to convert page coordinates to client coordinate ```javascript window.convertPagePointToClientPoint = function (pagePoint) { - const pagediv = document.getElementsByClassName('e-pv-page-div')[pageIndex]; + const pagediv = document.getElementsByClassName('e-pv-page-div')[0]; const rect = pagediv.getBoundingClientRect(); return { x: pagePoint.x + rect.left, @@ -72,16 +72,16 @@ window.convertPagePointToClientPoint = function (pagePoint) { @code { private SfPdfViewer2 SfPdfViewer2; - private async void OnPageClick(PageClickEventArgs args) + private async Task OnPageClick(PageClickEventArgs args) { Point pagePoint = new Point { x = args.PageX, y = args.PageY }; Point clientPoint = await JS.InvokeAsync("convertPagePointToClientPoint", pagePoint); - Console.WriteLine($"PagePoint to ClientPoint : X: {clientPoint.x} Y: {clientPoint.y} "); + Console.WriteLine($"PagePoint to ClientPoint: X: {clientPoint.x} Y: {clientPoint.y}"); } - public class Point + private class Point { - public double x { get; set; } - public double y { get; set; } + private double x { get; set; } + private double y { get; set; } } } @@ -90,7 +90,7 @@ window.convertPagePointToClientPoint = function (pagePoint) { ## Converting client coordinates to page coordinates -- ConvertClientPointToPagePoint translates 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. @@ -142,19 +142,20 @@ window.convertClientPointToPagePoint = function (clientPoint) { private int currentClientX; private int currentClientY; - private async void HandleMouseDown(MouseEventArgs e) + private async Task HandleMouseDown(MouseEventArgs e) { currentClientX = (int)e.ClientX; currentClientY = (int)e.ClientY; Point clientPoint = new Point { x = currentClientX, y = currentClientY }; Point pagePoint = await JS.InvokeAsync("convertClientPointToPagePoint", clientPoint); - Console.WriteLine($"ClientPoint to PagePoint : X: {pagePoint.x} Y: {pagePoint.y} "); + Console.WriteLine($"ClientPoint to PagePoint: X: {pagePoint.x} Y: {pagePoint.y}"); } - public class Point + private class Point { - public double x { get; set; } - public double y { get; set; } + private double x { get; set; } + private double y { get; set; } } } ``` + [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/faqs/how-to-create-pdf-document-in-the-created-event-of-sfpdfviewer.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-create-pdf-document-in-the-created-event-of-sfpdfviewer.md index 06197374e8..45c93e5b0a 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-create-pdf-document-in-the-created-event-of-sfpdfviewer.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-create-pdf-document-in-the-created-event-of-sfpdfviewer.md @@ -1,7 +1,7 @@ --- layout: post title: Create a PDF document in the SfPdfViewer Created event | Syncfusion -description: Learn how to create a PDF document in the Created event of the Syncfusion Blazor SfPdfViewer component and load it into the viewer. +description: Learn how to create a PDF document in the Created event of the Blazor SfPdfViewer component and load it into the viewer. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,9 +9,7 @@ documentation: ug # Create a PDF in the Created event of SfPdfViewer -A PDF document can be created during the SfPdfViewer `Created` event and immediately loaded in the viewer. - -The following example creates a PDF in memory using the Syncfusion PDF library, converts it to a Base64 data URL, and assigns it to `DocumentPath` to load it in the SfPdfViewer. +A PDF document can be created during the SfPdfViewer `Created` event and loaded in the viewer by converting it to a Base64 data URL and assigning it to `DocumentPath`. ```cshtml @using Syncfusion.Blazor.SfPdfViewer; @@ -27,10 +25,10 @@ The following example creates a PDF in memory using the Syncfusion PDF library, @code{ - public SfPdfViewer2 PdfViewer { get; set; } + private SfPdfViewer2 PdfViewer { get; set; } - //Sets the PDF document path for initial loading. - public string DocumentPath { get; set; } + //Sets the PDF document path after the viewer is created. + private string DocumentPath { get; set; } //This event triggers when the SfPdfViewer is created. private void created() @@ -52,7 +50,7 @@ The following example creates a PDF in memory using the Syncfusion PDF library, string base64string = Convert.ToBase64String(bytes); //Sets the document path as base64 string. DocumentPath = "data:application/pdf;base64," + base64string; - //close the document + //Close the document document.Close(true); } } diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-create-sfpdfviewer-in-a-popup-window.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-create-sfpdfviewer-in-a-popup-window.md index 35e9d818f3..965cd9b6a5 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-create-sfpdfviewer-in-a-popup-window.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-create-sfpdfviewer-in-a-popup-window.md @@ -1,7 +1,7 @@ --- layout: post title: Create a SfPdfViewer within a popup window in Blazor | Syncfusion -description: Learn everything about integrating the Syncfusion Blazor SfPdfViewer component within a popup window. +description: Learn here all about how to integrating the Blazor SfPdfViewer Component within a Dialog popup window. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Create a SfPdfViewer within a popup window in Blazor -For a quick preview experience, the PDF viewer can be hosted inside a dialog (popup) window. The following example demonstrates placing the SfPdfViewer component inside a Syncfusion® Dialog in a Blazor application. Selecting the Open PDF Viewer button opens a modal dialog sized to its container, and the viewer loads the specified document in the Created event. +The PDF viewer can be hosted inside a dialog (popup) window. The following example demonstrates placing the `SfPdfViewer` component inside a Syncfusion® Dialog in a Blazor application. Selecting the **Open PDF Viewer** button opens a modal dialog that fills the target container, and the viewer loads the specified document in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_Created) event. ```cshtml @@ -21,7 +21,7 @@ For a quick preview experience, the PDF viewer can be hosted inside a dialog (po Open PDF Viewer - @code { - public SfPdfViewer2 Viewer { get; set; } - SfDialog Dialog; + private SfPdfViewer2 Viewer { get; set; } + private SfDialog Dialog = new SfDialog(); - public async void OnClick(MouseEventArgs args) + private async Task OnClick(MouseEventArgs args) { await this.Dialog.ShowAsync(); } - private async void Created() + private async Task Created() { await Viewer.LoadAsync(DocumentPath, null); } - public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf"; - public string Header { get; set; } = "PDF Viewer"; + private string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf"; + private string Header { get; set; } = "PDF Viewer"; } ``` @@ -60,5 +60,4 @@ For a quick preview experience, the PDF viewer can be hosted inside a dialog (po ## See also * [How to create SfPdfViewer Component in a Splitter Component](./how-to-create-sfpdfviewer-in-a-splitter-component) - -* [How to view the created PDF document](./how-to-create-sfpdfviewer) \ No newline at end of file +* [How to preview the newly created PDF document](./how-to-create-sfpdfviewer) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-create-sfpdfviewer-in-a-splitter-component.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-create-sfpdfviewer-in-a-splitter-component.md index acd98c4b43..ab959622c6 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-create-sfpdfviewer-in-a-splitter-component.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-create-sfpdfviewer-in-a-splitter-component.md @@ -1,7 +1,7 @@ --- layout: post title: Host the PDF Viewer in a Splitter pane in Blazor | Syncfusion -description: Learn how to place the Syncfusion Blazor PDF Viewer inside a Splitter pane and display a document alongside other content. +description: Learn how to place the Blazor PDF Viewer inside a Splitter pane and display a document alongside other content. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Create the PDF Viewer in a Splitter component in Blazor -The Blazor Splitter organizes content into resizable panes. The following example shows how to place the PDF Viewer inside a Splitter pane so users can view a document alongside other UI content. +The Blazor Splitter organizes content into resizable, draggable panes. The following example shows how to place the PDF Viewer inside a Splitter pane so users can view a document alongside other UI content. The sample renders two panes a left pane with placeholder content and a right pane that hosts the `SfPdfViewer` loading the sample document. ```cshtml @@ -32,7 +32,9 @@ The Blazor Splitter organizes content into resizable panes. The following exampl + DocumentPath="@DocumentPath" + Height="100%" + Width="100%"> @@ -43,10 +45,14 @@ The Blazor Splitter organizes content into resizable panes. The following exampl @code { - SfPdfViewer2 viewer; + private SfPdfViewer2 viewer; private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; } - ``` -[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Render%20the%20PDF%20Viewer%20on%20Splitter). \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Render%20the%20PDF%20Viewer%20on%20Splitter). + +## See also + +* [How to preview the newly created PDF document](./how-to-create-sfpdfviewer) +* [How to create a SfPdfViewer within a popup window in Blazor](./how-to-create-sfpdfviewer-in-a-popup-window) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-create-sfpdfviewer.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-create-sfpdfviewer.md index 236edf6290..7df6883dbe 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-create-sfpdfviewer.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-create-sfpdfviewer.md @@ -1,32 +1,36 @@ --- layout: post -title: Preview the Generated PDF Document | Syncfusion -description: Learn how to display a runtime-generated PDF in the Syncfusion Blazor SfPdfViewer using the Created event. +title: Create a PDF document in the SfPdfViewer Created event | Syncfusion +description: Learn how to create a PDF document in the Created event of the Blazor SfPdfViewer component and load it into the viewer. platform: document-processing control: SfPdfViewer documentation: ug --- -# Preview the newly created PDF file +# Create a PDF in the Created event of SfPdfViewer -Use the Syncfusion® Blazor PDF Viewer to display a PDF that is generated at runtime when the viewer initializes using the [**Created**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_Created) event. The sample below targets the SfPdfViewer component and binds the generated document to the [**DocumentPath**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_DocumentPath) property via a data URI. - -The following example demonstrates generating a PDF in memory and rendering it as soon as the viewer is created. +A PDF document can be created during the SfPdfViewer [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_Created) event and loaded in the viewer by converting it to a Base64 data URL and assigning it to the [`DocumentPath`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_DocumentPath) property. ```cshtml +@using Syncfusion.Blazor.SfPdfViewer; +@using Syncfusion.Pdf; +@using Syncfusion.Pdf.Interactive; +@using System.IO; +@using Syncfusion.Drawing; - + + @code{ - public SfPdfViewer2 PdfViewer { get; set; } - public string documentPath { get; set; } + private SfPdfViewer2 PdfViewer { get; set; } + + //Sets the PDF document path after the viewer is created. + private string DocumentPath { get; set; } + + //This event triggers when the SfPdfViewer is created. private void created() { var document = new PdfDocument(); @@ -44,12 +48,12 @@ The following example demonstrates generating a PDF in memory and rendering it a document.Save(stream); bytes = stream.ToArray(); string base64string = Convert.ToBase64String(bytes); - documentPath = "data:application/pdf;base64," + base64string; - //close the document + //Sets the document path as base64 string. + DocumentPath = "data:application/pdf;base64," + base64string; + //Close the document document.Close(true); } } - ``` [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Create%20PDF%20using%20base%20library) @@ -57,7 +61,6 @@ The following example demonstrates generating a PDF in memory and rendering it a ## See also * [How to create SfPdfViewer Component in a Splitter Component](./how-to-create-sfpdfviewer-in-a-splitter-component) - * [How to create a SfPdfViewer within a popup window in Blazor](./how-to-create-sfpdfviewer-in-a-popup-window) - -* [How to get PDF document's data](./how-to-get-data-from-sfpdfviewer) \ No newline at end of file +* [How to get PDF document's data](./how-to-get-data-from-sfpdfviewer) +* [Events of SfPdfViewer Component](../events) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-customize-arrow-annotation-heads.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-customize-arrow-annotation-heads.md index d2f0a46191..493a5f9428 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-customize-arrow-annotation-heads.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-customize-arrow-annotation-heads.md @@ -1,17 +1,17 @@ --- layout: post title: Customize the arrow annotation head in Blazor SfPdfViewer | Syncfusion -description: Learn how to customize or remove the start and end arrow heads in the Syncfusion Blazor SfPdfViewer using ArrowSettings and LineHeadStyle. +description: Learn how to customize or remove the start and end arrow heads in the Blazor SfPdfViewer using ArrowSettings and LineHeadStyle. platform: document-processing control: SfPdfViewer documentation: ug --- -# Customize the arrow annotation heads in Blazor SfPdfViewer Component +# Customize the arrow annotation head in Blazor SfPdfViewer Component Use the [ArrowSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerArrowSettings.html) API to customize arrow annotations, including the start and end arrow head styles. -The following example shows how to remove the start and end arrow heads for arrow annotations. +The following example shows how to remove arrow heads from arrow annotations. ```cshtml @using Syncfusion.Blazor.SfPdfViewer @@ -26,20 +26,20 @@ The following example shows how to remove the start and end arrow heads for arro @code { - public SfPdfViewer2 Viewer { get; set; } + private SfPdfViewer2 Viewer { get; set; } private string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf"; PdfViewerArrowSettings ArrowSettings = new PdfViewerArrowSettings { - //To remove the starting arrow. + //Removes the start arrow head. LineHeadStartStyle=LineHeadStyle.None, - //To remove the end arrow. + //Removes the end arrow head. LineHeadEndStyle=LineHeadStyle.None }; - //Invokes while loading document in the PDFViewer. - public void DocumentLoad(LoadEventArgs args) + //Invoked when the document is loaded in the PDF Viewer. + private void DocumentLoad(LoadEventArgs args) { //Shows the AnnotationToolbar on initial loading. Viewer.ShowAnnotationToolbar(true); @@ -47,12 +47,13 @@ The following example shows how to remove the start and end arrow heads for arro } ``` -N> ArrowSettings controls the default arrow head styles for annotations created using the toolbar or programmatically. Set `LineHeadStartStyle` and `LineHeadEndStyle` to `LineHeadStyle.None` to remove heads. Other common values include `LineHeadStyle.Closed`, `LineHeadStyle.Round`, `LineHeadStyle.Square`, `LineHeadStyle.ClosedArrow`, `LineHeadStyle.Diamond`, and `LineHeadStyle.Open`. - [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Shapes/Remove%20arrow%20annotation%20heads). +N> ArrowSettings controls the default arrow head styles for annotations created using the toolbar or programmatically. Set `LineHeadStartStyle` and `LineHeadEndStyle` to `LineHeadStyle.None` to remove heads. Other common values include `LineHeadStyle.Closed`, `LineHeadStyle.Round`, `LineHeadStyle.Square`, `LineHeadStyle.ClosedArrow`, `LineHeadStyle.Diamond`, and `LineHeadStyle.Open`. + ## See also +* [Arrow Annotation](../annotation/shape/arrow-annotation) +* [Events in Blazor SfPdfViewer](../events) * [Shape annotations in Blazor SfPdfViewer Component](../annotation/shape-annotation) - -* [Measurement annotations in Blazor SfPdfViewer Component](../annotation/measurement-annotation) \ No newline at end of file +* [Measurement annotations in Blazor SfPdfViewer Component](../annotation/measurement-annotation) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md index 1430b92f73..86df3d5601 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md @@ -1,31 +1,33 @@ --- layout: post 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. +description: Learn how to render a PDF from an embedded resource and run the Blazor SfPdfViewer on Android using the .NET MAUI emulator. platform: document-processing control: SfPdfViewer documentation: ug --- -# Render a PDF from an embedded resource in a MAUI Android app +# Render a PDF from an embedded resource in a .NET MAUI Android app This article describes how to render the PDF Viewer from an embedded resource in a .NET MAUI Android app using the Android emulator. -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) +To create the .NET MAUI project, see [Create a .NET MAUI app](../getting-started/maui-blazor-app). ## Add the PDF Viewer component Add the Blazor PDF Viewer component in the **~/Pages/Index.razor** file. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} @page "/" +@using Syncfusion.Blazor.SfPdfViewer + @code { - SfPdfViewer2 viewer; + private SfPdfViewer2 viewer; private string DocumentPath { get; set; } = ""; protected override void OnInitialized() @@ -57,7 +59,7 @@ To run the PDF Viewer in a Blazor .NET MAUI Android app using the Android emulat ![Run on Windows machine](../getting-started/gettingstarted-images/emulator_maui.png) -**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. +**Step 1** Install the required dependencies, SDKs, and tools for .NET MAUI Android on Windows. Accept the Android SDK licenses when prompted. If errors occur during installation, follow the prompts to resolve them. ![Android SDK license acceptance](../getting-started/gettingstarted-images/android-sdk-liscence_maui.png) @@ -65,13 +67,13 @@ 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 (AVD) 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 the creation and management of Android Virtual Devices (AVD) for testing. ![Android Device Manager with a Pixel emulator](../getting-started/gettingstarted-images/pixcel-emulator_maui.png) **Step 4** Ensure the Android emulator is running. In Android Device Manager, create or select an AVD and start the emulator. -Finally, run the project with the emulator. The PDF Viewer component renders in the Blazor .NET MAUI Android app. +**Step 5** In Visual Studio, set the run target to the Android emulator and press `F5` to build and run the project. The PDF Viewer component renders in the Blazor .NET MAUI Android app. N> For emulator issues, see Troubleshooting Android Emulator: https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting @@ -82,5 +84,4 @@ N> [View sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-view ## See also * [Supported features: Desktop vs mobile](../overview#supported-features-desktop-vs-mobile). - * [Render a PDF document from a URL in the MAUI app](../getting-started/maui-blazor-app). diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md index a375f54f70..836f796c47 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md @@ -1,7 +1,7 @@ --- layout: post title: Extract and Highlight Text in Blazor PDF Viewer | Syncfusion -description: Learn here all about how to extract specific text and highlight it in the Syncfusion Blazor PDF Viewer component. +description: Learn here all about how to extract specific text and highlight it in the Blazor PDF Viewer component. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,18 +9,15 @@ documentation: ug # Extract and Highlight Text in Blazor PDF Viewer Component -The Syncfusion® Blazor PDF Viewer component provides powerful capabilities to extract text from a PDF document and **highlight** specific text. This functionality enables users to interactively process PDF content, making it easier to emphasize important information. +The Blazor PDF Viewer component allows extracting text from a PDF document and highlighting specific text. This functionality enables users to interactively process PDF content, making it easier to emphasize important information. -To extract text, the PDF Viewer utilizes the **FindText** method, which identifies the positions of specified text within the PDF. Once the text is found, user can highlight it by creating a highlight annotation and adding it asynchronously using the [**AddAnnotationAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) method. +To extract text, the Syncfusion PDF Library provides the `FindText` method on `PdfLoadedDocument`, which identifies the positions of specified text within the PDF. Once the text is found, users can highlight it by creating a highlight annotation and asynchronously adding it via the [`AddAnnotationAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) method. -The following code example demonstrates how to extract text from a PDF document and highlight it in the Syncfusion® Blazor PDF Viewer component. +The following code example demonstrates how to extract text from a PDF document and highlight it in the Blazor PDF Viewer component. ```cshtml @page "/" @using Microsoft.Extensions.Caching.Memory; -@using Syncfusion.Blazor.Popups; -@using Syncfusion.Blazor.Buttons; -@using Syncfusion.Blazor.Navigations; @using Syncfusion.Blazor.SfPdfViewer; @using System.Drawing; @using Syncfusion.Pdf.Parsing; @@ -38,11 +35,11 @@ The following code example demonstrates how to extract text from a PDF document @code { - SfPdfViewer2 viewer; + private SfPdfViewer2 viewer; private string DocumentPath { get; set; } = "wwwroot/data/pdf-succinctly.pdf"; private Dictionary> matchRects = new Dictionary>(); - public async void loadDocument() + private void loadDocument() { using (FileStream docStream = new FileStream(Path.GetFullPath("wwwroot/data/pdf-succinctly.pdf"), FileMode.Open, FileAccess.Read)) { @@ -54,7 +51,7 @@ The following code example demonstrates how to extract text from a PDF document } } - public async void highlightText() + private async void highlightText() { if (matchRects != null && matchRects.Count > 0) { @@ -105,4 +102,11 @@ The following code example demonstrates how to extract text from a PDF document } ``` - [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Extract%20Particular%20Text%20and%20Highlight). +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Extract%20Particular%20Text%20and%20Highlight). + +## See also + +* [Highlight Annotation](../annotation/text-markup/highlight-annotation) +* [Events in Blazor PDF Viewer](../events) +* [Supported features: Desktop vs mobile](../overview#supported-features-desktop-vs-mobile). +* [Render a PDF document from a URL in the MAUI app](../getting-started/maui-blazor-app). diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-get-data-from-sfpdfviewer.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-get-data-from-sfpdfviewer.md index 000751e2c5..b06517fc0b 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-get-data-from-sfpdfviewer.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-get-data-from-sfpdfviewer.md @@ -7,9 +7,11 @@ control: SfPdfViewer documentation: ug --- -# Get PDF document data from Blazor SfPdfViewer2 +# Get PDF document data from Blazor SfPdfViewer Component -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. +Use the [GetDocumentAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_GetDocumentAsync) method of the SfPdfViewer component to retrieve the currently loaded PDF document as a byte array (`Task`), including user edits, annotations, and form field data. The byte array can be reloaded into the viewer using [LoadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_LoadAsync_System_String_System_String_), which accepts a data URI/base64 string and an optional document password. + +## Retrieve and reload the document The following example retrieves the current document data and then reloads the same document into the viewer. @@ -20,7 +22,7 @@ The following example retrieves the current document data and then reloads the s Retrieve Document -ReloadRetrievedDocument +Reload Retrieved Document ExportAnnot - + + @code { - public SfPdfViewer2 PdfViewer { get; set; } + private SfPdfViewer2 PdfViewer { get; set; } private string DocumentPath { get; set; } = "PDF_Succinctly.pdf"; - public object annotation; + private object annotation; //Export the annotations as an object - public async void ExportAnnot() + private async Task ExportAnnotation() { await PdfViewer.ExportAnnotation(); annotation = await PdfViewer.ExportAnnotationsAsObjectAsync(); } //Import the annotations that are exported as objects - public async void ImportAnnot() + private async Task ImportAnnotation() { await PdfViewer.ImportAnnotation(annotation); } @@ -48,8 +48,8 @@ The following example shows how to export annotations as an object and import th [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Import-Export/Annotations%20as%20JSON%20object). -N> Refer to the [Blazor SfPdfViewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) feature tour for an overview of key capabilities. Explore the [Blazor SfPdfViewer example](https://document.syncfusion.com/demos/pdf-viewer/blazor-server/pdf-viewer/default-functionalities?theme=bootstrap4) to see the core features in action. - ## See also -* [Import and Export annotations in Blazor SfPdfViewer Component](../annotation/import-export-annotation) \ No newline at end of file +* [Import and Export annotations in Blazor SfPdfViewer Component](../annotation/import-export-annotation) +* [Blazor SfPdfViewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) feature tour +* [Blazor SfPdfViewer example](https://document.syncfusion.com/demos/pdf-viewer/blazor-server/pdf-viewer/default-functionalities?theme=bootstrap4) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-improve-performance-using-CDN.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-improve-performance-using-CDN.md index 92dda54b76..aec1fb3eea 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-improve-performance-using-CDN.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-improve-performance-using-CDN.md @@ -9,29 +9,39 @@ documentation: ug # Improve performance using a CDN in the Blazor SfPdfViewer -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). +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 injecting the following CDN links in **Components/App.razor**. Use version-pinned URLs and update them when upgrading the package. -```html +Add the theme stylesheet inside the `` element. +```html - - + + - - - - +``` + +Add the script reference at the end of the `` element. +```html + + + + ``` -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. +The viewer depends on pdfium.js (and its companion pdfium.wasm). When scripts are referenced from the NuGet package or a hosted path, these files download from that location on first use. The following image shows the network behavior when scripts are referenced from the NuGet package. + +![Network panel showing the request and file size of pdfium.js and pdfium.wasm when scripts are referenced from the NuGet package](../getting-started/gettingstarted-images/Filesize_using_NuGet.png) + +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 the file size and caching behavior when scripts are referenced from the CDN. -![Network and file size when referencing scripts from NuGet](../getting-started/gettingstarted-images/Filesize_using_NuGet.png) +![Network panel showing assets served from the browser cache on subsequent loads when scripts are referenced from the CDN](../getting-started/gettingstarted-images/Filesize_using_CDN.png) -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. +## See also -![Network and file size when referencing scripts from a CDN](../getting-started/gettingstarted-images/Filesize_using_CDN.png) +* [Reference SfPdfViewer scripts in a Blazor application](how-to-refer-SfPdfViewer-script-in-application) +* [SfPdfViewer getting started (Web App)](../getting-started/web-app) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-increase-connection-buffer-size.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-increase-connection-buffer-size.md index 718f65600f..1dd4cdc5c1 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-increase-connection-buffer-size.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-increase-connection-buffer-size.md @@ -1,7 +1,7 @@ --- layout: post title: Increase buffer size in Blazor SfPdfViewer | Syncfusion -description: Learn how to increase the SignalR connection buffer size (MaximumReceiveMessageSize) for the Syncfusion Blazor SfPdfViewer to handle large PDF documents. +description: Learn how to increase the SignalR connection buffer size (MaximumReceiveMessageSize) for the Blazor SfPdfViewer to handle large PDF documents. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Increase the connection buffer size in Blazor SfPdfViewer Component -The Syncfusion® Blazor SfPdfViewer supports increasing the SignalR connection buffer size by configuring MaximumReceiveMessageSize in `Program.cs`. This setting applies to Blazor Server and it does not apply to purely client-side WebAssembly apps. +The Blazor SfPdfViewer supports increasing the SignalR connection buffer size by configuring the `MaximumReceiveMessageSize` in the `Program.cs`. This setting applies to Blazor Server and does not apply to purely client-side Blazor WebAssembly apps. ```cshtml builder.Services.AddSignalR(o => { o.MaximumReceiveMessageSize = 102400000; }); @@ -19,4 +19,5 @@ builder.Services.AddSignalR(o => { o.MaximumReceiveMessageSize = 102400000; }); ## See also -* [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](./how-to-processing-large-files-without-increasing-maximum-message-size) \ No newline at end of file +* [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](./how-to-processing-large-files-without-increasing-maximum-message-size) +* [SfPdfViewer getting started (Web App)](../getting-started/web-app) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-PDF-from-URL-to-server-side-PDF-viewer.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-PDF-from-URL-to-server-side-PDF-viewer.md index e32d1d7a4a..56b3e195e9 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-PDF-from-URL-to-server-side-PDF-viewer.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-PDF-from-URL-to-server-side-PDF-viewer.md @@ -1,7 +1,7 @@ --- layout: post title: Load PDF from a URL in a server-side PDF Viewer | Syncfusion -description: Learn how to download a PDF from a server-side URL and load it into the Syncfusion Blazor SfPdfViewer component using a base64 data. +description: Learn how to download a PDF from a server-side URL and load it into the Blazor SfPdfViewer component using a base64 data. platform: document-processing control: SfPdfViewer documentation: ug @@ -21,7 +21,7 @@ Syncfusion PDF Viewer supports loading PDF documents from remote URLs. For detai @code { - public string DocumentPath { get; set; } + private string DocumentPath { get; set; } protected override void OnInitialized() { string Url = "https://s3.amazonaws.com/files2.syncfusion.com/dtsupport/directtrac/general/pd/HTTP_Succinctly-1719682472.pdf"; @@ -33,4 +33,10 @@ Syncfusion PDF Viewer supports loading PDF documents from remote URLs. For detai ``` -[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Load%20PDF%20file%20from%20URL) \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Load%20PDF%20file%20from%20URL) + +## See also + +* [How to load Microsoft Office files in Blazor SfPdfViewer Component](./how-to-load-office-files) +* [How to unload the PDF document from Viewer](./how-to-unload-the-pdf-document-from-viewer) +* [How to show or hide the Component dynamically](./how-to-show-or-hide-sfpdfviewer-dynamically) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-custom-font-pdfium.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-custom-font-pdfium.md index ce7597e7ca..7719540680 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-custom-font-pdfium.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-custom-font-pdfium.md @@ -7,9 +7,9 @@ control: SfPdfViewer documentation: ug --- -# Load custom fonts in the Blazor SfPdfViewer +# Load custom fonts in the Blazor SfPdfViewer Component -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. +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 use CustomFonts, follow these steps: @@ -25,14 +25,12 @@ The following example shows how to load custom fonts into the PDF Viewer. + Width="100%" + CustomFonts="@customFonts"> - @code { - - public List customFonts = new List { "wwwroot/SIMSUN.TTC", "wwwroot/SIMSUNB.TTF"} - + private List customFonts = new List { "wwwroot/SIMSUN.TTC", "wwwroot/SIMSUNB.TTF"}; } ``` @@ -42,15 +40,21 @@ The following example shows how to load a custom font using a CDN link. + Width="100%" + CustomFonts="@customFonts"> - @code { - public List customFonts = new List { "https://cdn.jsdelivr.net/npm/arial-geo-bold@1.0.0/fonts/arial-geo-bold-webfont.ttf" }; + private List customFonts = new List { "https://cdn.jsdelivr.net/npm/arial-geo-bold@1.0.0/fonts/arial-geo-bold-webfont.ttf" }; } ``` + [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). + +## See also + +* [SfPdfViewer getting started (Web App)](../getting-started/web-app) +* [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](./how-to-processing-large-files-without-increasing-maximum-message-size) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-desired-pdf-for-initial-loading-in-hosted-sample.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-desired-pdf-for-initial-loading-in-hosted-sample.md index 2b108bb216..0485311f80 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-desired-pdf-for-initial-loading-in-hosted-sample.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-desired-pdf-for-initial-loading-in-hosted-sample.md @@ -7,9 +7,9 @@ control: SfPdfViewer documentation: ug --- -# Load a specific PDF on initial load in Blazor SfPdfViewer2 +# Load a specific PDF on initial load in Blazor SfPdfViewer -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. +Load a specific PDF on initial display and change the document at runtime in the Blazor SfPdfViewer 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 the DocumentPath property reloads the viewer with the new document. ```cshtml @@ -27,11 +27,11 @@ Load a specific PDF on initial display and change the document at runtime in the @code { - public String DocumentPath = "Data/PDF_Succinctly.pdf"; + private string DocumentPath = "Data/PDF_Succinctly.pdf"; private async Task LoadAnotherDocument() { - //Sends a GET request to a specified Uri and return the response body as a byte array. + //Sends a GET request to a specified Uri and returns the response body as a byte array. byte[] byteArray = await Http.GetByteArrayAsync("Data/FormFillingDocument.pdf"); //Converts the byte array into base64 string. string base64String = Convert.ToBase64String(byteArray); @@ -42,16 +42,12 @@ Load a specific PDF on initial display and change the document at runtime in the ``` -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 dynamically switch the displayed PDF at runtime using the `Load Another Document` button. +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. [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Load%20Desire%20PDF%20in%20Blazor). ## See also * [How to load Microsoft Office files in Blazor SfPdfViewer Component](./how-to-load-office-files) - * [How to load PDF documents dynamically in Blazor SfPdfViewer Component](./how-to-load-pdf-document-dynamically) - -* [How to unload the PDF document from Viewer](./how-to-unload-the-pdf-document-from-viewer) \ No newline at end of file +* [How to unload the PDF document from the Viewer in Blazor SfPdfViewer Component](./how-to-unload-the-pdf-document-from-viewer) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-font-collection.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-font-collection.md index e1e128ffbb..ad3b1c4f41 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-font-collection.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-font-collection.md @@ -7,37 +7,43 @@ control: SfPdfViewer documentation: ug --- -# Load a font collection in Blazor SfPdfViewer +# Load a font collection in Blazor SfPdfViewer Component -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. +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 in the document or are not available by default. Configuring multiple fallback fonts helps preserve text shaping, special characters, and visual fidelity. To use FallbackFontCollection, follow these steps: 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 files added under wwwroot for use with FallbackFontCollection](../../blazor-classic/images/load-font-collection.png) +![Font files added under wwwroot for use with the FallbackFontCollection.](../../blazor-classic/images/load-font-collection.png) The following example shows how to add fonts to the fallback collection at runtime. ```cshtml +@using Syncfusion.Blazor.SfPdfViewer +@using System.IO - - @code { - SfPdfViewer2 Viewer; - - public void Created() + private SfPdfViewer2 Viewer; + + private void Created() { - Stream font = new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/seguiemj.ttf")); - Viewer.FallbackFontCollection.Add("seguiemj", font); + Stream font = new MemoryStream(File.ReadAllBytes("wwwroot/seguiemj.ttf")); + Viewer.FallbackFontCollection.Add("seguiemj", font); } } - ``` -[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). +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Load%20font%20collection%20in%20PDF%20document). + +## See also + +* [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](./how-to-processing-large-files-without-increasing-maximum-message-size) +* [SfPdfViewer getting started (Web App)](../getting-started/web-app) +* [Events in SfPdfViewer Component](../events) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-office-files.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-office-files.md index 273c773c0a..28711b88d9 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-office-files.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-office-files.md @@ -1,7 +1,7 @@ --- layout: post title: Load Office files in Blazor SfPdfViewer | Syncfusion -description: Learn how to load Microsoft Word, Excel, PowerPoint, and image files by converting into PDF and load into Syncfusion Blazor SfPdfViewer component. +description: Learn how to load Microsoft Word, Excel, PowerPoint, and image files by converting into PDF and load into Blazor SfPdfViewer component. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Load Microsoft Office files in Blazor SfPdfViewer Component -The SfPdfViewer component displays PDF documents. To load Microsoft Office or image files (Word, Excel, PowerPoint, and common image formats), upload the file, convert it to a PDF, and then load the resulting PDF in the viewer using the uploader success event. +In the following example, a Word document is converted to a PDF and then loaded into the SfPdfViewer as a base64 data URL. The same approach is applied for PowerPoint, Excel, and image files. In the following example, a Word document is converted to a PDF and then loaded into the SfPdfViewer as a Base64 data URL. The same approach is applied for PowerPoint, Excel, and image files. @@ -48,9 +48,9 @@ In the following example, a Word document is converted to a PDF and then loaded @code { - SfPdfViewer2 viewerInstance; + private SfPdfViewer2 viewerInstance; - public PdfViewerToolbarSettings ToolbarSettings = new PdfViewerToolbarSettings() + private PdfViewerToolbarSettings ToolbarSettings = new PdfViewerToolbarSettings() { ToolbarItems = new List() { @@ -137,7 +137,7 @@ In the following example, a Word document is converted to a PDF and then loaded } } - public async void loadPDFdocument(byte[] bytes) + private async void loadPDFdocument(byte[] bytes) { // Convert a PDF document into a base64 string. string base64String = Convert.ToBase64String(bytes); @@ -145,7 +145,7 @@ In the following example, a Word document is converted to a PDF and then loaded await viewerInstance.LoadAsync("data:application/pdf;base64," + base64String, null); } - public static WFormatType GetWFormatType(string format) + private static WFormatType GetWFormatType(string format) { if (string.IsNullOrEmpty(format)) throw new NotSupportedException("EJ2 DocumentEditor does not support this file format."); @@ -178,5 +178,4 @@ In the following example, a Word document is converted to a PDF and then loaded ## See also * [How to load PDF documents dynamically in Blazor SfPdfViewer Component](./how-to-load-pdf-document-dynamically) - -* [How to unload the PDF document from Viewer](./how-to-unload-the-pdf-document-from-viewer) \ No newline at end of file +* [How to unload the PDF document from Viewer](./how-to-unload-the-pdf-document-from-viewer) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-pdf-document-dynamically.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-pdf-document-dynamically.md index eb82c7118c..2c62602ab4 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-pdf-document-dynamically.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-pdf-document-dynamically.md @@ -1,7 +1,7 @@ --- layout: post -title: Load PDF File dynamically in Blazor SfPdfViewer component| Syncfusion -description: Learn here all about how to load PDF documents dynamically in Syncfusion Blazor SfPdfViewer component and more. +title: Load PDF documents dynamically in Blazor SfPdfViewer| Syncfusion +description: Learn here all about how to load PDF documents dynamically in Blazor SfPdfViewer component and more. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,9 +9,11 @@ documentation: ug # Load PDF documents dynamically in Blazor SfPdfViewer Component -In many scenarios, a PDF document must be switched or reloaded after the initial load. Use the [LoadAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_LoadAsync_System_Byte___System_String_) method of the SfPdfViewer component to load a PDF from a base64 data URL or from a file/URL path at runtime. +In many scenarios, a PDF document must be switched or reloaded after the initial load. Use the [LoadAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_LoadAsync_System_String_System_String_) method of the SfPdfViewer component to load a PDF at runtime. The `LoadAsync` method accepts a data URI string (for base64 content) or an accessible file/URL path as its first argument, and an optional document password as the second argument. -The following code example shows how to load a base64 string dynamically. +## Load from a base64 string + +The following code example shows how to load a PDF document from a base64 string dynamically. ```cshtml @using Syncfusion.Blazor.SfPdfViewer @@ -25,10 +27,10 @@ The following code example shows how to load a base64 string dynamically. @code{ - SfPdfViewer2 Viewer; + private SfPdfViewer2 Viewer; private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; - public async void clicked() + private async Task clicked() { byte[] byteArray = System.IO.File.ReadAllBytes("wwwroot/Data/Python_Succinctly.pdf"); string base64String = Convert.ToBase64String(byteArray); @@ -36,13 +38,16 @@ The following code example shows how to load a base64 string dynamically. } } ``` + [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/LoadAsync). N> * In Blazor Server, files can be read from the server file system. Ensure the path points to an existing file and that casing matches the actual folder and file names. * In Blazor WebAssembly, direct access to the server file system is not available. To generate a base64 string, fetch the file using HttpClient or call a web API, then convert the received bytes to a base64 string before calling LoadAsync. -The following code example shows how to load the PDF dynamically by specifying file path. +## Load from a file path or URL + +The following code example shows how to load a PDF document dynamically by specifying a file path. ```cshtml @using Syncfusion.Blazor.SfPdfViewer @@ -56,10 +61,10 @@ The following code example shows how to load the PDF dynamically by specifying f @code{ - SfPdfViewer2 Viewer; + private SfPdfViewer2 Viewer; private string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf"; - public async void clicked() + private async Task clicked() { await Viewer.LoadAsync("wwwroot/data/Python_Succinctly.pdf", null); } @@ -75,7 +80,5 @@ N> You can refer to our [Blazor SfPdfViewer](https://www.syncfusion.com/pdf-view ## See also * [How to load Microsoft Office files in Blazor SfPdfViewer Component](./how-to-load-office-files) - * [How to unload the PDF document from Viewer](./how-to-unload-the-pdf-document-from-viewer) - -* [How to show or hide the Component dynamically](./how-to-show-or-hide-sfpdfviewer-dynamically) \ No newline at end of file +* [How to show or hide the Component dynamically](./how-to-show-or-hide-sfpdfviewer-dynamically) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-move-scrollbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-move-scrollbar.md index 3938694173..bfd2f95f59 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-move-scrollbar.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-move-scrollbar.md @@ -1,15 +1,15 @@ --- layout: post title: Move the scrollbar to the exact annotations location | Syncfusion -description: Learn how to scroll the scrollbar precisely to the location of annotations in the Syncfusion Blazor SfPdfViewer component. +description: Learn how to scroll the scrollbar precisely to the location of annotations in the Blazor SfPdfViewer component. platform: document-processing control: SfPdfViewer documentation: ug --- -# Scroll to the Exact Annotation position Using Scrollbar +# Scroll to an Annotation's Position -Use the Syncfusion® Blazor SfPdfViewer component to scroll to the location of an annotation in a loaded PDF by calling the [GoToBookmarkAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GoToBookmarkAsync_System_Int32_System_Double_) method with the target page number and vertical offset (from the top of the page). +Use the Blazor SfPdfViewer component to scroll to the location of an annotation in a loaded PDF by calling the [GoToBookmarkAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GoToBookmarkAsync_System_Int32_System_Double_) method, inherited from `PdfViewerBase`, with the target page number and vertical offset (from the top of the page). The following example shows how to scroll to an annotation. @@ -17,32 +17,39 @@ The following example shows how to scroll to an annotation. @using Syncfusion.Blazor.SfPdfViewer - + @code { - SfPdfViewer2 PdfViewer; - public string DocumentPath { get; set; } = "wwwroot/data/PDF Succinctly.pdf"; - public Dictionary pageSize { get; set; } + private SfPdfViewer2 PdfViewer; + private string DocumentPath { get; set; } = "wwwroot/data/PDF Succinctly.pdf"; + private Dictionary PageSize { get; set; } private void DocumentLoad(LoadEventArgs args) { - pageSize = args.PageData.PageSizes; + PageSize = args.PageData.PageSizes; } - private async void navigate() + private async Task ScrollToAnnotation() { var annotationCollection = await PdfViewer.GetAnnotationsAsync(); - var pageNumber = (annotationCollection[0].PageNumber); + var pageNumber = annotationCollection[0].PageNumber; + // Bound.Top is measured from the top of the page in PDF coordinates; subtract from the page height to convert to the viewer's vertical offset. var Y = annotationCollection[0].Bound.Top; - await PdfViewer.GoToBookmarkAsync(pageNumber, (pageSize[pageNumber].Height - Y)); + await PdfViewer.GoToBookmarkAsync(pageNumber, (PageSize[pageNumber].Height - Y)); } } ``` -[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Move%20scrollbar%20programmatically). \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Move%20scrollbar%20programmatically). + +## See also + +* [How to load Microsoft Office files in Blazor SfPdfViewer Component](./how-to-load-office-files) +* [How to unload the PDF document from Viewer](./how-to-unload-the-pdf-document-from-viewer) +* [How to show or hide the Component dynamically](./how-to-show-or-hide-sfpdfviewer-dynamically) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-perform-print-in-same-window.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-perform-print-in-same-window.md index fedd7e055f..3643cffaa1 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-perform-print-in-same-window.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-perform-print-in-same-window.md @@ -1,18 +1,18 @@ --- layout: post -title: Perform print in same window using SfPdfViewer | Syncfusion -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. +title: Perform print in the same window using SfPdfViewer | Syncfusion +description: Learn here all about how to print in the same window in the Blazor SfPdfViewer Component using PrintMode. platform: document-processing control: SfPdfViewer documentation: ug --- -# Perform print in same window in Blazor SfPdfViewer Component +# Perform print in the same window in Blazor SfPdfViewer Component -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`. +Use the `PrintMode` property on `SfPdfViewer2` to control whether printing occurs in the same window or a new window. The `PrintMode` enum supports the following values: -* **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`. +* **Default** - Prints from the same window. +* **NewWindow** - Opens printing in a new browser window or tab (may be affected by pop-up blockers). ```cshtml @using Syncfusion.Blazor.SfPdfViewer @@ -29,6 +29,5 @@ Use the SfPdfViewer2 `PrintMode` enum to control whether printing occurs in the ## See also -* [Printing options in Blazor SfPdfViewer](../print) - +* [Print in Blazor SfPdfViewer Component](../print) * [Print the SfPdfViewer inside a Dialog](./how-to-print-the-sfpdfiewer-inside-the-dialog-component) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-prevent-scrolling.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-prevent-scrolling.md index 9509e278ff..0b705e2889 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-prevent-scrolling.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-prevent-scrolling.md @@ -1,7 +1,7 @@ --- layout: post title: Prevent the PDF from scrolling | Syncfusion -description: Learn how to prevent scrolling and remove the vertical scrollbar in the Syncfusion Blazor SfPdfViewer. +description: Learn here all about how to prevent scrolling and remove the vertical scrollbar in the SfPdfViewer Component. platform: document-processing control: SfPdfViewer documentation: ug @@ -14,13 +14,26 @@ To prevent a PDF from scrolling and remove the vertical scrollbar in the Blazor Setting `overflow: hidden` removes scrollbars and disables user scrolling. To target only vertical scrolling, consider `overflow-y: hidden`. ```html - +``` + +To target only vertical scrolling, use `overflow-y` instead: +```html + ``` -[View the prevent scrolling sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Prevent%20the%20PDF%20from%20scrolling) +[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Prevent%20the%20PDF%20from%20scrolling) + +## See also + +* [SfPdfViewer overview](../overview) +* [Toolbar customization](../toolbar/overview) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-print-large-page-document.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-print-large-page-document.md index a8c0529ff3..e6efffd167 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-print-large-page-document.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-print-large-page-document.md @@ -1,36 +1,38 @@ --- layout: post title: Print large page document in SfPdfViewer | Syncfusion -description: Learn how to print large PDF documents in the Syncfusion Blazor SfPdfViewer using a custom toolbar action and a Blob URL. +description: Learn how to print large PDF documents in the Blazor SfPdfViewer using a custom toolbar action and a Blob URL. platform: document-processing control: SfPdfViewer documentation: ug --- -# Print large PDF documents in Blazor SfPdfViewer +# Print large-page documents in Blazor SfPdfViewer -This article shows how to implement a client-side printing approach for large PDFs in the Blazor SfPdfViewer component using JavaScript interop. +This article shows how to print large PDFs in the Blazor SfPdfViewer component. A custom toolbar action retrieves the loaded PDF as a byte array and uses JavaScript interop to open it in a new tab and trigger the browser's print dialog. ### Implement a print handler Add a custom print toolbar item to the primary toolbar, then handle its click to retrieve the loaded PDF as a byte array and invoke a JavaScript function to print the PDF on the client-side. -```cshtml +```csharp private async Task ClickAction(ClickEventArgs Item) { if (Item.Item.Id == "print" && Viewer != null) { - //get the byte array of loaded PDF + // Get the byte array of the loaded PDF. byte[] bytes = await Viewer.GetDocumentAsync(); - //send the byte array to client + // Pass the byte array to the JavaScript printPDF function. await JSRuntime.InvokeVoidAsync("printPDF", bytes); } } - ``` ### Add the JavaScript function -Add a `printPDF` function to a JavaScript file that converts the byte array into a Blob and generates a Blob URL for the loaded PDF. Reference the script in the app so it loads before use (for example, in wwwroot/js/site.js and referenced from index.html for WebAssembly, or _Host.cshtml for Server). The Blob URL can then be used to open the PDF in a new tab or trigger the print dialog. +Add a `printPDF` function to a JavaScript file. Reference the script in the app so it loads before use (for example, in `wwwroot/js/site.js` and referenced from `index.html` for WebAssembly, or `_Host.cshtml` for Server). + +#### Create the Blob URL +Convert the byte array into a Blob and generate a Blob URL for the loaded PDF. ```javascript // Convert the byte array to a Blob object @@ -38,12 +40,14 @@ const blob = new Blob([byteArray], { type: 'application/pdf' }); // Generate a Blob URL for the loaded PDF const blobUrl = URL.createObjectURL(blob); ``` -Open the Blob URL in a new browser window or tab, then call window.print() to display the browser's print dialog. + +#### Open the PDF and trigger the print dialog +Open the Blob URL in a new browser window or tab, then call `window.print()` to display the browser's print dialog. ```javascript // Open the Blob URL in a new window or tab const printWindow = window.open(blobUrl, '_blank'); -// open the print window of browser +// Open the browser's print dialog const tryPrint = () => { printWindow.focus(); printWindow.print(); @@ -57,4 +61,4 @@ N> Ensure that the browser allows pop-ups for the site, because this approach op ## See also -* [Primary Toolbar Customization in SfPdfViewer](../toolbar-customization/primary-toolbar) \ No newline at end of file +* [Primary Toolbar Customization in SfPdfViewer](../toolbar/primary-toolbar) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-print-the-sfpdfiewer-inside-the-dialog-component.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-print-the-sfpdfiewer-inside-the-dialog-component.md index f47eefe3a3..8b85c0c6eb 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-print-the-sfpdfiewer-inside-the-dialog-component.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-print-the-sfpdfiewer-inside-the-dialog-component.md @@ -1,17 +1,21 @@ --- layout: post -title: Print PDF Viewer inside the Dialog component in Blazor | Syncfusion -description: Learn here all about how to print the SfPdfViewer inside the Dialog in Syncfusion Blazor SfPdfViewer component and more. +title: Print the SfPdfViewer inside the Dialog component | Syncfusion +description: Learn here all about how to print the SfPdfViewer inside a Syncfusion Dialog in the Blazor SfPdfViewer. platform: document-processing control: SfPdfViewer documentation: ug --- -# Print the SfPdfViewer component inside the Dialog component in Blazor +# Print the SfPdfViewer inside the Dialog component in Blazor -The SfPdfViewer supports printing the loaded PDF document by default. The following example hosts the viewer inside a Syncfusion Dialog (popup) and triggers printing automatically after the PDF finishes loading. +The `SfPdfViewer` supports printing the loaded PDF document by default. The following example hosts the viewer inside a Syncfusion Dialog (popup) and prints the document after the PDF finishes loading. -The following code illustrates how to perform print action once SfPdfViewer is loaded. +The following code illustrates how to perform a print action once the SfPdfViewer is loaded. + +1. Click **Open PDF Viewer** to display the dialog. +2. Click **Open PDF Document** to load the PDF into the viewer. +3. The `DocumentLoaded` event triggers `PrintAsync()` to open the browser print dialog. ```cshtml @using Syncfusion.Blazor.Buttons @@ -20,54 +24,55 @@ The following code illustrates how to perform print action once SfPdfViewer is l
Open PDF Viewer - - Open PDF Document - - - - + CloseOnEscape="true" + AllowDragging="true" + Visible="false" + IsModal="true" + Header="@Header" + ShowCloseIcon="true"> + + + + + Open PDF Document
@code{ - SfPdfViewer2 viewer; - SfDialog dialog; + private SfPdfViewer2 viewer; + private SfDialog dialog; - public void OnClick(MouseEventArgs args) + // Shows the dialog window. + private void OnClick(MouseEventArgs args) { - //Method to show the dialog window. this.dialog.Show(true); } - //Triggers when the dialog is opened. - public async void OnClickopen(MouseEventArgs args) + // Loads the PDF document into the viewer. + private async Task OnClickopen(MouseEventArgs args) { - //Reads the contents of the file into a byte array, and then closes the file. + // Read the contents of the file into a byte array. byte[] byteArray = System.IO.File.ReadAllBytes("wwwroot/data/HTTP Succinctly.pdf"); - //Converts the byte array in to base64 string. + // Convert the byte array into a base64 string. string base64String = Convert.ToBase64String(byteArray); - //PDF document will get loaded from the base64 string. + // Load the PDF document from the base64 string. The second argument is the document password; pass null for an unprotected document. await viewer.LoadAsync("data:application/pdf;base64," + base64String, null); } - private async void documentLoad(LoadEventArgs args) + // Triggers when the document finishes loading. + private async Task documentLoad(LoadEventArgs args) { - //Perform print action on the SfPdfViewer. + // Performs the print action on the SfPdfViewer. await viewer.PrintAsync(); } - public string Header { get; set; } = "SfPdfViewer"; + private string Header { get; set; } = "SfPdfViewer"; } ``` @@ -76,5 +81,4 @@ The following code illustrates how to perform print action once SfPdfViewer is l ## See also * [Print in Blazor SfPdfViewer Component](../print) - -* [How to perform print in same window](./how-to-perform-print-in-same-window) \ No newline at end of file +* [How to perform print in same window](./how-to-perform-print-in-same-window) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-processing-large-files-without-increasing-maximum-message-size.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-processing-large-files-without-increasing-maximum-message-size.md index 3ebdf5d18c..05dec9cb8e 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-processing-large-files-without-increasing-maximum-message-size.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-processing-large-files-without-increasing-maximum-message-size.md @@ -9,23 +9,31 @@ documentation: ug # Process large files without increasing maximum message size -The Blazor SfPdfViewer component supports processing large files without increasing the SignalR hub maximum receive message size (MaximumReceiveMessageSize, 32 KB) by using chunk messaging. +The Blazor SfPdfViewer component can process large files under the default SignalR hub maximum receive message size (MaximumReceiveMessageSize, 32 KB) by using chunk messaging. -Enable this behavior by setting [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableChunkMessages) to true. The default is false. +Enable this behavior by setting [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableChunkMessages) to true (the default is false). When enabled, the viewer segments large payloads into smaller chunks and processes them sequentially, which improves reliability when loading large PDFs under SignalR message size limits. + +## Enable chunk messaging The following example shows how to enable chunk messaging: ```cshtml @using Syncfusion.Blazor.SfPdfViewer - + @code { - SfPdfViewer2 PdfViewer; - public string DocumentPath { get; set; } = "wwwroot/data/PDF Succinctly.pdf"; + private SfPdfViewer2 PdfViewer; + private string DocumentPath { get; set; } = "wwwroot/data/PDF Succinctly.pdf"; } ``` -With [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableChunkMessages) set to true, the viewer segments large payloads into smaller chunks and processes them sequentially. This improves reliability when loading large PDFs under SignalR message size limits. [View the chunk messaging sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Processing%20Large%20Files%20Without%20Increasing%20Maximum%20Message%20Size). + + +## See also + +* [How to load Microsoft Office files in Blazor SfPdfViewer Component](./how-to-load-office-files) +* [How to unload the PDF document from Viewer](./how-to-unload-the-pdf-document-from-viewer) +* [How to show or hide the Component dynamically](./how-to-show-or-hide-sfpdfviewer-dynamically) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-reduce-slowness-while-running-the-wasm-sample-in-Visual-Studio.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-reduce-slowness-while-running-the-wasm-sample-in-Visual-Studio.md index 7c30f9c083..17443ad256 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-reduce-slowness-while-running-the-wasm-sample-in-Visual-Studio.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-reduce-slowness-while-running-the-wasm-sample-in-Visual-Studio.md @@ -9,12 +9,31 @@ documentation: ug # Reduce slowness when running Blazor WebAssembly in Visual Studio -Performance issues may occur when running or debugging Blazor WebAssembly in Visual Studio. To improve execution speed, disable the .NET 9+ Mono WASM debugger, which can introduce overhead during debugging sessions. +You may experience slow performance when running or debugging Blazor WebAssembly apps in Visual Studio. This is caused by the **Enable .NET 9+ Mono WASM debugger** option, which can introduce overhead during debugging sessions. -![Visual Studio setting for the Mono WASM debugger](../images/mono_debugger.png) +## Solution -Disabling the Mono WASM debugger can provide a smoother experience while running or debugging WebAssembly projects. This change affects debugging behavior; re-enable it when full debugging features are required. +1. In Visual Studio, open **Tools > Options**. +2. Expand **Debugging** and select **General**. +3. Clear (uncheck) the **Enable .NET 9+ Mono WASM debugger** option. +4. Click **OK** to apply the change. +5. Restart your debugging session for the change to take effect. + +![Visual Studio Options dialog showing the Enable .NET 9+ Mono WASM debugger option unchecked](../images/mono_debugger.png) + +Disabling this option reduces startup time and improves responsiveness. The setting is per-user and applies to all Blazor WebAssembly projects on the machine. + +## Impact of disabling + +When the option is disabled, managed-code stepping and watch-window evaluation during Blazor WebAssembly debugging are not available. To re-enable full debugging, repeat steps 1–3, check the **Enable .NET 9+ Mono WASM debugger** option, and click **OK**. For background details and guidance, see the following resources: - * [Performance Regression debugging Blazor WebAssembly with .NET 9](https://developercommunity.visualstudio.com/t/Performance-Regression-debugging-Blazor/10773897) - * [Performance Regression in Blazor WebAssembly with .NET 9](https://github.com/dotnet/aspnetcore/issues/58507) + +* [Performance Regression debugging Blazor WebAssembly with .NET 9](https://developercommunity.visualstudio.com/t/Performance-Regression-debugging-Blazor/10773897) +* [Performance Regression in Blazor WebAssembly with .NET 9](https://github.com/dotnet/aspnetcore/issues/58507) + +## See also + +* [How to load Microsoft Office files in Blazor SfPdfViewer Component](./how-to-load-office-files) +* [How to unload the PDF document from Viewer](./how-to-unload-the-pdf-document-from-viewer) +* [How to show or hide the Component dynamically](./how-to-show-or-hide-sfpdfviewer-dynamically) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-refer-SfPdfViewer-script-in-application.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-refer-SfPdfViewer-script-in-application.md index 40b25bc47b..d752d3a2d0 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-refer-SfPdfViewer-script-in-application.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-refer-SfPdfViewer-script-in-application.md @@ -1,7 +1,7 @@ --- layout: post title: Reference SfPdfViewer scripts in a Blazor application | Syncfusion -description: Learn how to reference Syncfusion Blazor SfPdfViewer scripts using a CDN, static web assets, or custom resources, including deploying pdfium files. +description: Learn how to reference Blazor SfPdfViewer scripts using a CDN, static web assets, or custom resources, including deploying pdfium files. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,11 +9,22 @@ documentation: ug # Reference SfPdfViewer scripts in a Blazor application -* Use a CDN to include the scripts quickly without local files. For setup details, see the [CDN reference](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) +## CDN Usage -* Reference scripts from the NuGet package via static web assets. [Learn more](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets) +Use a CDN to include the scripts quickly without local files. For setup details, see the [CDN reference](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference). -* For custom bundles, use the [Custom Resource Generator](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) to include only required modules. When referencing scripts externally, also deploy [pdfium.js](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Common/Pdfium%20files/pdfium.js) and [pdfium.wasm](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Common/Pdfium%20files/pdfium.wasm) in the app and ensure paths are correct. +## NuGet static web assets -To reference the scripts and Pdfium files in a Blazor application, see the following image. -![Script references and Pdfium files for Blazor SfPdfViewer](../images/pdfium.png) \ No newline at end of file +Reference scripts from the NuGet package via static web assets. For more details, see [static web assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). + +## Custom Resource Generator + +To create a custom bundle, use the [Custom Resource Generator](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) to include only the required modules. When referencing scripts externally, also deploy [pdfium.js](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Common/Pdfium%20files/pdfium.js) and [pdfium.wasm](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Common/Pdfium%20files/pdfium.wasm) in the app and ensure paths are correct. + +![Script references and pdfium files for Blazor SfPdfViewer](../images/pdfium.png) + +## See also + +* [How to load Microsoft Office files in Blazor SfPdfViewer Component](./how-to-load-office-files) +* [How to unload the PDF document from Viewer](./how-to-unload-the-pdf-document-from-viewer) +* [How to show or hide the Component dynamically](./how-to-show-or-hide-sfpdfviewer-dynamically) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-ej2-pdf-viewer-in-blazor.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-ej2-pdf-viewer-in-blazor.md index 3091e9078e..2ba0a60ac7 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-ej2-pdf-viewer-in-blazor.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-ej2-pdf-viewer-in-blazor.md @@ -1,7 +1,7 @@ --- layout: post -title: Render JavaScript PDF Viewer in Blazor SfPdfViewer | Syncfusion -description: Learn how to render the EJ2 JavaScript PDF Viewer inside the Syncfusion Blazor SfPdfViewer using JavaScript interop, including setup and usage notes. +title: Render the EJ2 JavaScript PDF Viewer in Blazor SfPdfViewer | Syncfusion +description: Learn how to render the EJ2 JavaScript PDF Viewer inside a Blazor page using JavaScript interop, including setup and usage notes. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Render JS PDF Viewer inside Blazor SfPdfViewer Component -The Syncfusion® Blazor SfPdfViewer component supports rendering the EJ2 JavaScript PDF Viewer inside a Blazor page using JavaScript interop. +The Blazor SfPdfViewer component supports rendering the EJ2 JavaScript PDF Viewer inside a Blazor page using JavaScript interop. The following steps show how to embed the JavaScript PDF Viewer in a Blazor component. -N> Ensure that the EJ2 PDF Viewer scripts and styles are referenced in the application, and that the serviceUrl points to a reachable EJ2 PDF Viewer web service endpoint. +N> Ensure that the EJ2 PDF Viewer scripts and styles are referenced in the application. The `serviceUrl` must point to a reachable EJ2 PDF Viewer web service endpoint. **Step 1:** Add a JavaScript file to the application and reference it in the head element. @@ -30,11 +30,7 @@ N> Ensure that the EJ2 PDF Viewer scripts and styles are referenced in the appli ```javascript window.renderJsPdfViewer = (id) => { - // Render the PDF viewer control - var viewer = new ej.pdfviewer.PdfViewer({ - documentPath: "PDF_Succinctly.pdf", - serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer' - }); + // Inject the required modules before creating the PdfViewer instance. ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -48,6 +44,12 @@ window.renderJsPdfViewer = (id) => { ej.pdfviewer.Annotation, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner); + + // Render the PDF viewer control. The `id` argument must match the id of the target container element. + var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: "PDF_Succinctly.pdf", + serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer' + }); viewer.appendTo('#' + id); }; @@ -73,6 +75,11 @@ window.renderJsPdfViewer = (id) => { ``` -N> The PDF Viewer is rendered as a JavaScript component. C# APIs on SfPdfViewer are not available in this approach; use JavaScript interop to call the PDF Viewer APIs. +N> The PDF Viewer is rendered as a JavaScript component. Only the JavaScript PDF Viewer APIs are accessible; use JS interop to invoke them. + +[View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Render%20JS%20PDF%20Viewer%20component%20in%20Blazor) + +## See also -[View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Render%20JS%20PDF%20Viewer%20component%20in%20Blazor) \ No newline at end of file +* [Blazor PDF Viewer overview](../overview) +* [EJ2 Java Script PDF Viewer overview](../../javascript-es6/overview) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-n-pages-scrolling.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-n-pages-scrolling.md index 13ebeaeb01..9f1d3032d7 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-n-pages-scrolling.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-n-pages-scrolling.md @@ -11,16 +11,24 @@ documentation: ug Use the [OverscanCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_OverscanCount) property to preload a specified number of pages before and after the current viewport, improving perceived performance while scrolling through a PDF document. -To use this capability in the Blazor SfPdfViewer, set OverscanCount to the desired number of adjacent pages to render. This reduces wait time when navigating across pages. Tune the value based on device capability and document size. +To use this capability in the Blazor SfPdfViewer, set OverscanCount to the desired number of adjacent pages to render. This reduces wait time when navigating between pages. Tune the value based on the device capability and document size. The following example shows how to set OverscanCount: ```cshtml +@using Syncfusion.Blazor.SfPdfViewer + - + ``` [View the OverscanCount sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Render%20N%20number%20pages%20on%20scrolling). + +## See also + +* [How to load Microsoft Office files in Blazor SfPdfViewer Component](./how-to-load-office-files) +* [How to unload the PDF document from Viewer](./how-to-unload-the-pdf-document-from-viewer) +* [How to show or hide the Component dynamically](./how-to-show-or-hide-sfpdfviewer-dynamically) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-show-or-hide-sfpdfviewer-dynamically.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-show-or-hide-sfpdfviewer-dynamically.md index 8614e7425e..b0fc7a1903 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-show-or-hide-sfpdfviewer-dynamically.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-show-or-hide-sfpdfviewer-dynamically.md @@ -1,21 +1,21 @@ --- layout: post title: Show or hide the Blazor SfPdfViewer dynamically in Blazor | Syncfusion -description: Learn how to dynamically show or hide the Syncfusion Blazor SfPdfViewer, toggle visibility with a button, and load PDFs from a local file. +description: Learn how to dynamically show or hide the Blazor SfPdfViewer, toggle visibility with a button, and load PDFs from a local file. platform: document-processing control: SfPdfViewer documentation: ug --- -# Show or hide the SfPdfViewer Component dynamically in Blazor +# Show or hide the SfPdfViewer component dynamically in Blazor -The following example initializes the PDF Viewer hidden and toggles its visibility with a button. When shown, selecting a source loads a PDF either from a physical path or a remote URL into the same viewer instance using a Base64 data URI. Ensure the container has an explicit size so Height="100%" and Width="100%" render correctly. +The following example initializes the PDF Viewer hidden and toggles its visibility with a button. When shown, clicking one of the two buttons loads a PDF either from a physical path or a remote URL into the same viewer instance using a Base64 data URI. The wrapper div sets a fixed height so that `Height="100%"` and `Width="100%"` render correctly. The `.e-spinner-pane` rule suppresses the loading overlay during the toggle. ```cshtml @using Syncfusion.Blazor.Buttons; @using Syncfusion.Blazor.SfPdfViewer; -@using System.Net; +@inject HttpClient Http