diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/accessibility.md b/Document-Processing/PDF/PDF-Viewer/blazor/accessibility.md index f82deba6f2..963265d37c 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/accessibility.md @@ -1,13 +1,13 @@ --- layout: post title: Keyboard accessibility in Blazor SfPdfViewer Component | Syncfusion -description: Checkout and learn here all about Keyboard accessibility in Syncfusion Blazor SfPdfViewer component and more. +description: Checkout and learn here all about Keyboard accessibility in Blazor SfPdfViewer component and more. platform: document-processing control: SfPdfViewer documentation: ug --- -# Accessibility in Syncfusion® Blazor SfPdfViewer +# Keyboard accessibility in Blazor SfPdfViewer The Blazor SfPdfViewer component follows established accessibility guidelines and standards, including the [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles), which are commonly used to evaluate accessibility. The accessibility compliance for the Blazor SfPdfViewer component is outlined below. @@ -94,7 +94,7 @@ The Blazor SfPdfViewer component follows the [keyboard interaction](https://www. ## Ensuring accessibility -The Blazor SfPdfViewer component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor SfPdfViewer component's accessibility is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. The accessibility compliance of the Blazor SfPdfViewer component is demonstrated in the following sample. Open the [SfPdfViewer accessibility sample](https://blazor.syncfusion.com/accessibility/sfpdfviewer) in a new window to evaluate the accessibility of the Blazor SfPdfViewer component with accessibility tools. diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md b/Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md index c597669ec4..d47aadc338 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md @@ -27,9 +27,11 @@ Use Microsoft Edge’s built-in Read Aloud to listen to the PDF content. - To start from a specific page, navigate to that page and click anywhere; reading begins from the first readable text at that location. - To read only selected text, select the sentence or portion of text you want, then use Read Aloud to read just that selection. +The following steps describe a custom Read Aloud implementation that is triggered when text is selected in the Blazor PDF Viewer. + **Step 1:** Create and add a JavaScript file to the app and reference it in the head element. -```cshtml +```html @@ -217,7 +219,7 @@ function insertSrNode(div) { } return sr; } -// Select SR text for screen reader - Mircosoft Reader +// Select SR text for screen reader - Microsoft Edge’s Screen Reader function selectSrText(div) { const sr = insertSrNode(div); const selection = window.getSelection(); @@ -226,7 +228,7 @@ function selectSrText(div) { selection.removeAllRanges(); selection.addRange(range); } -// Move caret to first visible text node - Mircosoft Reader +// Move caret to first visible text node - Microsoft Edge’s Screen Reader function collapseCaretToVisibleText(div) { const textLayer = div.querySelector('.e-pv-text-layer'); if (textLayer) { @@ -238,7 +240,7 @@ function collapseCaretToVisibleText(div) { selection.addRange(range); } } -// Focus page for accessibility - Mircosoft Reader +// Focus page for accessibility - Microsoft Edge’s Screen Reader function focusPageDiv(div) { if (!div) return; const textLayer = div.querySelector('.e-pv-text-layer'); @@ -251,7 +253,7 @@ function focusPageDiv(div) { selectSrText(div); collapseCaretToVisibleText(div); } -// Wire accessibility handlers to page div - Mircosoft Reader +// Wire accessibility handlers to page div - Microsoft Edge’s Screen Reader function wirePage(div) { if (!div || div.hasAttribute('data-a11y-init')) return; div.addEventListener('mousedown', () => focusPageDiv(div)); @@ -259,13 +261,13 @@ function wirePage(div) { div.setAttribute('data-a11y-init', 'true'); } -// Reader the selected text aloud - Mircosoft Reader +// Read the selected text aloud - Microsoft Edge’s Screen Reader function readAloudText(text) { window.speechSynthesis.cancel(); speakFromControls(text); } -// Cancel speech and remove highlights - Mircosoft Reader +// Cancel speech and remove highlights - Microsoft Edge’s Screen Reader function cancelReading() { if (window.speechSynthesis?.speaking) { window.speechSynthesis.cancel(); @@ -275,7 +277,7 @@ function wirePage(div) { {% endhighlight %} {% endtabs %} -**Step 3:** Add the following code to the `Home.razor` +**Step 3:** Add the following code to the `Home.razor` file. {% tabs %} {% highlight razor tabtitle="~/Home.razor" %} @@ -330,14 +332,14 @@ function wirePage(div) { ## Windows Speech Synthesis API Use the browser’s Windows Speech Synthesis API (speechSynthesis) to implement in-app Read Aloud functionality with custom controls. This approach: -- Provides playback controls, including Play and Pause/Resume. +- Provides playback controls, including Previous, Next, and Pause/Resume. - Reads content line by line and can continue across multiple pages. - Reads only the selected text when a selection is made. - Works on modern browsers and platforms that support the Speech Synthesis API. **Step 1:** Create and add a JavaScript file to the app and reference it in the head element. -```cshtml +```html @@ -737,7 +739,7 @@ function clearAllHighlights() { const speechSynth = window.speechSynthesis; isPaused ? speechSynth.resume() : speechSynth.pause(); } -// Cancel speech and remove highlights - Mircosoft Reader +// Cancel speech and remove highlights - Windows Speech Synthesis API function cancelReading() { if (window.speechSynthesis?.speaking) { window.speechSynthesis.cancel(); @@ -748,7 +750,7 @@ function clearAllHighlights() { {% endhighlight %} {% endtabs %} -**Step 3:** Add the following code to the `Home.razor` +**Step 3:** Add the following code to the `Home.razor` file. {% tabs %} {% highlight razor tabtitle="~/Home.razor" %} @@ -923,4 +925,4 @@ function clearAllHighlights() { ## See also -- [Blazor PDF Viewer example -Accessible PDF Reading](https://document.syncfusion.com/demos/pdf-viewer/blazor-server/pdf-viewer/accessible-pdf-reading?theme=fluent2) +- [Blazor PDF Viewer example - Accessible PDF Reading](https://document.syncfusion.com/demos/pdf-viewer/blazor-server/pdf-viewer/accessible-pdf-reading?theme=fluent2) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/create-modify-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/create-modify-annotation.md index 6d2e10a0cd..4c107b0b6d 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/create-modify-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/create-modify-annotation.md @@ -3,7 +3,7 @@ layout: post title: Create and modify annotations in Blazor PDF Viewer | Syncfusion description: Learn how to create and modify annotations in Syncfusion Blazor PDF Viewer with UI and programmatic examples, plus quick links to all annotation types. platform: document-processing -control: PDF Viewer +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/delete-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/delete-annotation.md index eed6b6d689..6f68762d69 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/delete-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/delete-annotation.md @@ -3,7 +3,7 @@ layout: post title: Remove annotations in Blazor PDF Viewer | Syncfusion description: Learn how to remove/delete PDF annotations in Syncfusion Blazor PDF Viewer using UI options (context menu, toolbar, Delete key) and programmatic APIs. platform: document-processing -control: PDF Viewer +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/command-manager.md b/Document-Processing/PDF/PDF-Viewer/blazor/command-manager.md index ec1f50bff3..ca6ae1650d 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/command-manager.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/command-manager.md @@ -1,7 +1,7 @@ --- layout: post title: Command Manager in Blazor SfPdfViewer Component | Syncfusion -description: Learn how to configure the Command Manager to add custom keyboard shortcuts and handle command execution in the Syncfusion Blazor PDF Viewer. +description: Learn how to configure the Command Manager to add custom keyboard shortcuts and handle command execution in the Blazor PDF Viewer. platform: document-processing control: SfPdfViewer documentation: ug @@ -48,39 +48,38 @@ The following example registers two custom keyboard commands (`FitToWidth` and ` SfPdfViewer2 pdfViewer; public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; -    /// -    /// Defines the list of custom commands -    /// - -    public List command = new List() -    { -        new KeyboardCommand() -        { -            ActionName = "FitToWidth", -            Gesture = new KeyGesture() { Key = PdfKeys.W, Modifiers = PdfModifierKeys.Shift } -        }, -        new KeyboardCommand() -        { -            ActionName = "FitToPage", -            Gesture = new KeyGesture() { Key = PdfKeys.P, Modifiers = PdfModifierKeys.Alt } - } -    }; - -    /// -    /// Custom command execution. -    /// - -    public void CommandExecute(CommandExecutedEventArgs args) -    { -        if(args.Modifiers == PdfModifierKeys.Shift && args.Key == PdfKeys.W) -        { -            pdfViewer.FitToWidthAsync(); -        } -        else if (args.Modifiers == PdfModifierKeys.Alt && args.Key == PdfKeys.P) -        { -            pdfViewer.FitToPageAsync(); -        } -    } + /// + /// Defines the list of custom commands + /// + public List command = new List() + { + new KeyboardCommand() + { + ActionName = "FitToWidth", + Gesture = new KeyGesture() { Key = PdfKeys.W, Modifiers = PdfModifierKeys.Shift } + }, + new KeyboardCommand() + { + ActionName = "FitToPage", + Gesture = new KeyGesture() { Key = PdfKeys.P, Modifiers = PdfModifierKeys.Alt } + } + }; + + /// + /// Custom command execution. + /// + + public async Task CommandExecute(CommandExecutedEventArgs args) + { + if (args.Modifiers == PdfModifierKeys.Shift && args.Key == PdfKeys.W) + { + await pdfViewer.FitToWidthAsync(); + } + else if (args.Modifiers == PdfModifierKeys.Alt && args.Key == PdfKeys.P) + { + await pdfViewer.FitToPageAsync(); + } + } } ``` diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/context-menu.md b/Document-Processing/PDF/PDF-Viewer/blazor/context-menu.md index 1a6c2db94d..3d4010b017 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/context-menu.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/context-menu.md @@ -1,9 +1,9 @@ --- layout: post title: Context Menu in Blazor PDF Viewer | Syncfusion -description: Learn how to customize the context menu in the Syncfusion Blazor PDF Viewer, including default items and custom configuration options using ContextMenuSettings. +description: Learn how to customize the context menu in the Blazor PDF Viewer, including default items and custom configuration options using ContextMenuSettings. platform: document-processing -control: PDF Viewer +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- @@ -21,9 +21,9 @@ The context menu is a right-click menu that displays relevant actions based on t The context menu in Blazor PDF Viewer supports the following: * **Enable or Disable**: Toggle the context menu availability using the [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_EnableContextMenu) property. -* **Trigger Action**: Choose between right-click or mouse-up actions to display the menu. +* **Trigger Action**: Choose between right-click, mouse-up, or `None` to display the menu. * **Customize Menu Items**: Select which menu items should appear in the context menu. -* **Default Items**: Support for standard actions like Copy, Cut, Paste, Delete, Comment, and annotation markup options (Highlight, Underline, Strikethrough, Squiggly). +* **Default Items**: Provides standard actions (Copy, Cut, Paste, Delete, Comment) and annotation markup options (Highlight, Underline, Strikethrough, Squiggly). ### Available Context Menu Items @@ -42,7 +42,7 @@ The Blazor PDF Viewer context menu supports the following built-in items, which | **Strikethrough** | Applies strikethrough markup to selected text. | | **Squiggly** | Applies squiggly underline markup to selected text. | | **Properties** | Opens the properties dialog for the selected element (e.g., form fields). | -| **ScaleRatio** | Displays scale ratio options for measurement annotations. | +| **ScaleRatio** | Displays scale ratio options for measurement annotations, allowing the user to set the measurement scale used by the PDF document. | The context menu adapts its items based on the selected element. The following screenshots show the context menu in different scenarios: @@ -54,7 +54,7 @@ The context menu adapts its items based on the selected element. The following s ![context menu on annotation](./images/context-menu-annotation.png) -* **On Form Fields** — Shows form field operations (designer mode only) +* **On Form Fields** — Shows form field operations (Designer mode only) ![context menu on form fields](./images/context-menu-forms.png) @@ -64,7 +64,7 @@ The context menu adapts its items based on the selected element. The following s ## Enable or Disable the Context Menu -By default, the context menu is enabled in the Blazor PDF Viewer. You can control its availability using the [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_EnableContextMenu) property within [PdfViewerContextMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html). +By default, the context menu is enabled in the Blazor PDF Viewer. You can control its availability using the [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_EnableContextMenu) property within [PdfViewerContextMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html). ### Basic Configuration @@ -145,7 +145,7 @@ The following example configures the context menu to appear on mouse-up: ## Disable the Context Menu Entirely -To prevent the context menu from appearing, set [ContextMenuAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_ContextMenuAction) to `None`: +To prevent the context menu from appearing, set the [ContextMenuAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_ContextMenuAction) property to `None`: {% tabs %} {% highlight razor%} @@ -168,7 +168,7 @@ The following example demonstrates how to configure the context menu using the [`PdfViewerContextMenuSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html) API, including [`EnableContextMenu`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_EnableContextMenu), [`ContextMenuAction`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_ContextMenuAction), and -[`ContextMenuItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_ContextMenuItems) properties +[`ContextMenuItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_ContextMenuItems) properties. {% tabs %} {% highlight razor %} @@ -206,7 +206,7 @@ The following example demonstrates how to configure the context menu using the After completing this configuration, the context menu will appear with all the specified items when users right-click on document elements. -## Related Topics +## See also * [Getting Started with PDF Viewer](./getting-started/web-app) * [Annotations in Blazor PDF Viewer](./annotation/overview) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/document-handling/load-large-pdf.md b/Document-Processing/PDF/PDF-Viewer/blazor/document-handling/load-large-pdf.md index aaa24a3bfb..2bf69c0928 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/document-handling/load-large-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/document-handling/load-large-pdf.md @@ -2,7 +2,7 @@ layout: post title: Document Handling in Blazor PDF Viewer Component | Syncfusion description: Learn how to load and render large PDF files in the Syncfusion Blazor PDF Viewer using chunk-based processing -control: PDF Viewer +control: SfPdfViewer platform: document-processing documentation: ug domainurl: ##DomainURL## diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/document-handling/load-password-pdf.md b/Document-Processing/PDF/PDF-Viewer/blazor/document-handling/load-password-pdf.md index e3eb1ac5ed..28f37f5131 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/document-handling/load-password-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/document-handling/load-password-pdf.md @@ -2,7 +2,7 @@ layout: post title: Load Password Protected PDFs in Blazor PDF Viewer | Syncfusion description: Learn how to open password-protected PDF files in the Syncfusion Blazor PDF Viewer by providing the password in the documentPath object. -control: PDF Viewer +control: SfPdfViewer platform: document-processing documentation: ug domainurl: ##DomainURL## diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/document-handling/preprocess-pdf.md b/Document-Processing/PDF/PDF-Viewer/blazor/document-handling/preprocess-pdf.md index 3f6a2106e4..2e475344a4 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/document-handling/preprocess-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/document-handling/preprocess-pdf.md @@ -2,7 +2,7 @@ layout: post title: Preprocess PDF Document in Blazor PDF Viewer | Syncfusion description: Learn how to preprocess PDF documents using Syncfusion PDF Library before displaying them in the Blazor PDF Viewer. -control: PDF Viewer +control: SfPdfViewer platform: document-processing documentation: ug domainurl: ##DomainURL## diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/document-security-overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/document-security-overview.md index 4dc12ee31d..762a259f6b 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/document-security-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/document-security-overview.md @@ -1,7 +1,7 @@ --- layout: post -title: Load the security documents in Blazor PDF Viewer | Syncfusion -description: Learn how Blazor SfPdfViewer opens password-protected PDFs and enforces owner permissions like print, copy and edit. +title: Document security in Blazor SfPdfViewer | Syncfusion +description: Learn how Blazor SfPdfViewer opens password-protected PDFs and enforces document permission restrictions like print, copy, and edit. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,13 +9,27 @@ documentation: ug # Document security in Blazor SfPdfViewer -This article explains how `SfPdfViewer` handles secured PDF documents, including password-protected files and documents with permission restrictions. It describes expected behavior when opening secured files and links to task-focused guides for implementation details. +This article explains how `SfPdfViewer` handles secured PDF documents, including password-protected files and documents with permission restrictions. It describes expected behavior when opening secured files. It links to task-focused guides for implementation details. The PDF specification defines two common security configurations: - [Password-protected documents](./document-security/password-protected) — a password is required to decrypt and open the file. - [Permission-restricted documents](./document-security/permission) — an owner password sets granular permissions such as printing, copying, editing, annotating, and form filling. -Behavior and expectations: +### Behavior and expectations + - When a password-protected PDF is loaded, the viewer prompts for the password. If the password is incorrect or omitted, the document does not open. -- For permission-restricted PDFs, the viewer reads and enforces the document’s security flags. Disallowed actions (for example, print, copy, or annotate) are disabled in the UI and blocked through APIs. +- For permission-restricted PDFs, the viewer reads and enforces the document's security flags. Disallowed actions (for example, print, copy, or annotate) are disabled in the UI and blocked through APIs. + +The viewer enforces the following document permission flags: + +- **Print**: when disallowed, the print action is not available. +- **Copy**: when disallowed, copy commands are disabled and text selection may be limited. +- **Edit / Modify content**: when disallowed, content editing actions are not available. +- **Annotate**: when disallowed, the annotation toolbar and related actions are disabled. +- **Form filling**: when disallowed, form fields are read-only. + +### See also + +- [Password-protected documents](./document-security/password-protected) +- [Permission-restricted documents](./document-security/permission) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/events.md b/Document-Processing/PDF/PDF-Viewer/blazor/events.md index 10398e9e2b..60e6ae40b6 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/events.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/events.md @@ -1,7 +1,7 @@ --- layout: post title: Events in Blazor SfPdfViewer Component | Syncfusion -description: Explore all events available in the Syncfusion Blazor SfPdfViewer component, including lifecycle, navigation, annotation, search, and printing events. +description: Explore all events available in the Blazor SfPdfViewer component, including lifecycle, navigation, annotation, search, and printing events. platform: document-processing control: SfPdfViewer documentation: ug @@ -35,37 +35,37 @@ The following events are available in the SfPdfViewer component. |[ExportSucceed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExportSucceed)|Triggers when exporting annotations succeeds in the SfPdfViewer.| |[ExtractTextCompleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExtractTextCompleted)|Triggers when text extraction is completed in the SfPdfViewer.| |[FormFieldAdded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldAdded)|Triggers when a form field is added to the PDF document.| -|[FormFieldAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldAdding)|Triggers before a new form field is added, allowing validation before insertion.| -|[FormFieldClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldClick)|Triggers when a user clicks on a form field while designer mode is off.| -|[FormFieldDeleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldDeleted)|Triggers when a form field is removed from the document.| -|[FormFieldDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldDoubleClick)|Triggers when a form field is double-clicked.| -|[FormFieldFocusIn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldFocusIn)|Triggers when focus enters a form field.| -|[FormFieldFocusOut](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldFocusOut)|Triggers when focus leaves a form field.| -|[FormFieldMouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldMouseEnter)|Triggers when the mouse hovers over a form field.| -|[FormFieldMouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldMouseLeave)|Triggers when the mouse leaves a form field.| -|[FormFieldPropertyChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldPropertyChanged)|Triggers when a form field's properties are modified.| -|[FormFieldResized](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldResized)|Triggers when a form field is resized.| -|[FormFieldSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldSelected)|Triggers when a form field is selected.| -|[FormFieldsExported](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsExported)|Triggers when form fields are successfully exported.| -|[FormFieldsExportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsExportFailed)|Triggers when form fields export operation fails.| -|[FormFieldsExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsExporting)|Triggers before form fields are exported, allowing customization of the export process.| -|[FormFieldsImported](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsImported)|Triggers when form fields are successfully imported.| -|[FormFieldsImportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsImportFailed)|Triggers when form fields import operation fails.| -|[FormFieldsImporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsImporting)|Triggers before form fields are imported, allowing validation or modifications.| -|[FormFieldUnselected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldUnselected)|Triggers when a form field is unselected.| -|[ImportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportFailed)|Triggers when importing annotations fails in the PDF document.| -|[ImportStarted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportStarted)|Triggers when importing annotations starts in the PDF document.| -|[ImportSucceed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportSucceed)|Triggers when importing annotations succeeds in the PDF document.| +|[FormFieldAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldAdding)|Triggers before a new form field is added, allowing validation before insertion.| +|[FormFieldClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldClick)|Triggers when a user clicks on a form field while designer mode is off.| +|[FormFieldDeleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldDeleted)|Triggers when a form field is removed from the document.| +|[FormFieldDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldDoubleClick)|Triggers when a form field is double-clicked.| +|[FormFieldFocusIn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldFocusIn)|Triggers when focus enters a form field.| +|[FormFieldFocusOut](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldFocusOut)|Triggers when focus leaves a form field.| +|[FormFieldMouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldMouseEnter)|Triggers when the mouse hovers over a form field.| +|[FormFieldMouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldMouseLeave)|Triggers when the mouse leaves a form field.| +|[FormFieldPropertyChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldPropertyChanged)|Triggers when a form field's properties are modified.| +|[FormFieldResized](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldResized)|Triggers when a form field is resized.| +|[FormFieldSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldSelected)|Triggers when a form field is selected.| +|[FormFieldsExported](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsExported)|Triggers when form fields are successfully exported.| +|[FormFieldsExportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsExportFailed)|Triggers when form fields export operation fails.| +|[FormFieldsExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsExporting)|Triggers before form fields are exported, allowing customization of the export process.| +|[FormFieldsImported](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsImported)|Triggers when form fields are successfully imported.| +|[FormFieldsImportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsImportFailed)|Triggers when form fields import operation fails.| +|[FormFieldsImporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsImporting)|Triggers before form fields are imported, allowing validation or modifications.| +|[FormFieldUnselected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldUnselected)|Triggers when a form field is unselected.| +|[ImportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportFailed)|Triggers when importing annotations fails in the PDF document.| +|[ImportStarted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportStarted)|Triggers when importing annotations starts in the PDF document.| +|[ImportSucceed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportSucceed)|Triggers when importing annotations succeeds in the PDF document.| |[MoveSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_MoveSignature)|Triggers when a signature is moved on a page in the PDF document.| |[OnAnnotationDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnAnnotationDoubleClick)|Triggers when an annotation is double-clicked.| |[OnHyperlinkClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnHyperlinkClick)|Triggers when a hyperlink in the PDF document is clicked.| |[OnHyperlinkMouseOver](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnHyperlinkMouseOver)|Triggers when a hyperlink in the PDF document is hovered.| |[OnPageClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnPageClick)|Triggers when a mouse click is performed on a page in the PDF document.| -|[OnTextSearchComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchComplete)|Triggers when a text search is completed.| -|[OnTextSearchHighlight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchHighlight)|Triggers when searched text is highlighted.| -|[OnTextSearchStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchStart)|Triggers when a text search starts.| -|[OnTextSelectionEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSelectionEnd)|Triggers when text selection ends.| -|[OnTextSelectionStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSelectionStart)|Triggers when text selection starts.| +|[OnTextSearchComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchComplete)|Triggers when a text search is completed.| +|[OnTextSearchHighlight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchHighlight)|Triggers when searched text is highlighted.| +|[OnTextSearchStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchStart)|Triggers when a text search starts.| +|[OnTextSelectionEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSelectionEnd)|Triggers when text selection ends.| +|[OnTextSelectionStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSelectionStart)|Triggers when text selection starts.| |[OnThumbnailClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnThumbnailClick)|Triggers when a thumbnail is clicked in the thumbnail panel of the SfPdfViewer.| |[PageChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_PageChanged)|Triggers when the current page number changes.| |[PageMouseover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_PageMouseover)|Triggers when the mouse pointer moves over a page.| @@ -76,7 +76,7 @@ The following events are available in the SfPdfViewer component. |[SignaturePropertiesChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_SignaturePropertiesChange)|Triggers when the properties of a signature are changed on a page in the PDF document.| |[SignatureSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_SignatureSelected)|Triggers when a signature is selected on a page in the PDF document.| |[SignatureUnselected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_SignatureUnselected)|Triggers when a signature is unselected on a page in the PDF document.| -|[ToolbarClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ToolbarClicked)|Triggers when a custom toolbar item is clicked in the toolbar.| +|[ToolbarClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ToolbarClicked)|Triggers when a custom toolbar item is clicked in the toolbar.| |[ValidateFormFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ValidateFormFields)|Triggers when form fields are validated.| |[ZoomChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ZoomChanged)|Triggers when the magnification value changes.| @@ -97,7 +97,7 @@ Wrap the SfPdfViewer events inside the [PdfViewerEvents](https://help.syncfusion private void DocumentLoaded(LoadEventArgs args) { - object PageData = args.PageData; + Console.WriteLine("Document loaded successfully."); } } @@ -105,16 +105,17 @@ Wrap the SfPdfViewer events inside the [PdfViewerEvents](https://help.syncfusion ## Created event -The Created event Triggers when the PDF Viewer component is rendered. +The Created event triggers when the PDF Viewer component is created. The following example illustrates how to load a PDF document in the Created event. ```cshtml @using Syncfusion.Blazor.SfPdfViewer +@using System.Net.Http - - + + @code @@ -122,7 +123,7 @@ The following example illustrates how to load a PDF document in the Created even public string DocumentPath { get; set; } //Triggers when the PDFViewer component is created. - public void created() + public void Created() { string Link = "http://infolab.stanford.edu/pub/papers/google.pdf"; System.Net.WebClient webClient = new System.Net.WebClient(); @@ -130,16 +131,16 @@ The following example illustrates how to load a PDF document in the Created even byte[] byteArray = webClient.DownloadData(Link); //Converting the byte array to Base64 string and sets the document path. DocumentPath = "data:application/pdf;base64," + Convert.ToBase64String(byteArray); - } + } } ``` -## DocumentEdited Event +## DocumentEdited event -The DocumentEdited event Triggers when the PDF document is edited. +The DocumentEdited event triggers when the PDF document is edited. -The following example illustrates how to handle the DocumentEdited event. In this example, [EditingAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.EditingAction.html) provides information related to the edit operation. +The following example illustrates how to handle the DocumentEdited event. The [EditingAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.EditingAction.html) argument indicates the type of edit operation performed. ```cshtml @@ -150,7 +151,7 @@ The following example illustrates how to handle the DocumentEdited event. In thi @code{ - private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succintly.pdf"; + private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; public async Task DocumentEdited(DocumentEditedEventArgs args) { Console.WriteLine(args.EditingAction); @@ -159,7 +160,7 @@ The following example illustrates how to handle the DocumentEdited event. In thi ``` -[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Load%20a%20PDF%20document%20using%20created%20event) +[Load a PDF document using created event](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Load%20a%20PDF%20document%20using%20created%20event) ## See Also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faq.md b/Document-Processing/PDF/PDF-Viewer/blazor/faq.md index 3e84d8b701..744fd9310f 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faq.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faq.md @@ -1,7 +1,7 @@ --- layout: post title: FAQ Section in Blazor SfPdfViewer Component | Syncfusion -description: In this section, you can know about the various questions asked about manipulation of in Blazor SfPdfViewer Component. +description: This section lists common questions and answers about the Blazor SfPdfViewer Component. platform: document-processing control: SfPdfViewer documentation: ug @@ -11,42 +11,65 @@ documentation: ug Common questions and answers for using the Blazor SfPdfViewer component. +## Loading and Document Management + * [How to Load PDF from URL to server-side PDF viewer?](./faqs/how-to-load-PDF-from-URL-to-server-side-PDF-viewer) -* [How to Create a SfPdfViewer within a popup window in Blazor?](./faqs/how-to-create-sfpdfviewer-in-a-popup-window) * [How to Load PDF documents dynamically in Blazor SfPdfViewer Component?](./faqs/how-to-load-pdf-document-dynamically) * [How to Load Office files in Blazor SfPdfViewer?](./faqs/how-to-load-office-files) * [How to View DOCX file in Blazor application?](./faqs/how-to-view-docx-file-in-blazor-application) * [How to Unload the PDF document from Viewer in Blazor SfPdfViewer Component?](./faqs/how-to-unload-the-pdf-document-from-viewer) +* [How to Load desired PDF for initial loading in Blazor SfPdfViewer Component?](./faqs/how-to-load-desired-pdf-for-initial-loading-in-hosted-sample) +* [How to Create PDF document in the created event of Blazor SfPdfViewer Component?](./faqs/how-to-create-pdf-document-in-the-created-event-of-sfpdfviewer) +* [How to Get PDF document's data from Blazor SfPdfViewer Component?](./faqs/how-to-get-data-from-sfpdfviewer) +* [How to View the created PDF document?](./faqs/how-to-create-sfpdfviewer) + +## UI Integration and Display + +* [How to Create a SfPdfViewer within a popup window in Blazor?](./faqs/how-to-create-sfpdfviewer-in-a-popup-window) +* [How to Show or hide the SfPdfViewer Component dynamically in Blazor?](./faqs/how-to-show-or-hide-sfpdfviewer-dynamically) +* [How to Update the viewer size at run-time in Blazor SfPdfViewer Component?](./faqs/how-to-stretch-the-sfpdfviewer-size-to-its-container) +* [How to Create SfPdfViewer Component in a Splitter Component in Blazor?](./faqs/how-to-create-sfpdfviewer-in-a-splitter-component) +* [How to Render JS PDF Viewer inside Blazor SfPdfViewer Component?](./faqs/how-to-render-ej2-pdf-viewer-in-blazor) +* [How to Render N number pages on scrolling?](./faqs/how-to-render-n-pages-scrolling) +* [How to Configure CSP in Blazor SfPdfViewer Component?](./faqs/how-to-configure-content-security-policy) +* [How to Coordinate Conversion Between Page and Client Points?](./faqs/how-to-coordinate-conversion-between-page-and-client-points) +* [How to Check the document's editing status in Blazor SfPdfViewer Component?](./faqs/how-to-check-whether-the-loaded-PDF-document-is-edited-or-not) + +## Annotations and Forms + * [How to Import annotations as objects in Blazor SfPdfViewer Component?](./faqs/how-to-import-annotations-as-objects) -* [How to Suppress the error dialog?](./faqs/how-to-suppress-error-message) * [How to Move the scrollbar to the exact location of annotations?](./faqs/how-to-move-scrollbar) -* [How to View the created PDF document?](./faqs/how-to-create-sfpdfviewer) * [How to Check the status of annotations or comments in Blazor SfPdfViewer Component?](./faqs/how-to-check-status-of-annotations-or-comments) * [How to Customize arrow annotation heads in Blazor SfPdfViewer?](./faqs/how-to-customize-arrow-annotation-heads) -* [How to Show or hide the SfPdfViewer Component dynamically in Blazor?](./faqs/how-to-show-or-hide-sfpdfviewer-dynamically) -* [How to Increase the connection buffer size in Blazor SfPdfViewer Component?](./faqs/how-to-increase-connection-buffer-size) -* [How to Print the SfPdfViewer component inside the Dialog component in Blazor?](./faqs/how-to-print-the-sfpdfiewer-inside-the-dialog-component) * [How to Change the highlight color of the text in Blazor SfPdfViewer Component?](./faqs/how-to-change-the-highlighted-color-of-the-text) -* [How to Check the document's editing status in Blazor SfPdfViewer Component?](./faqs/how-to-check-whether-the-loaded-PDF-document-is-edited-or-not) -* [How to Create PDF document in the created event of Blazor SfPdfViewer Component?](./faqs/how-to-create-pdf-document-in-the-created-event-of-sfpdfviewer) -* [How to Create SfPdfViewer Component in a Splitter Component in Blazor?](./faqs/how-to-create-sfpdfviewer-in-a-splitter-component) -* [How to Get PDF document's data from Blazor SfPdfViewer Component?](./faqs/how-to-get-data-from-sfpdfviewer) -* [How to Load desired PDF for initial loading in Blazor SfPdfViewer Component?](./faqs/how-to-load-desired-pdf-for-initial-loading-in-hosted-sample) -* [How to Update the viewer size at run-time in Blazor SfPdfViewer Component?](./faqs/how-to-stretch-the-sfpdfviewer-size-to-its-container) * [How to Update form field using context menu in Blazor SfPdfViewer?](./faqs/how-to-update-form-field-using-context-menu) -* [How to Identify if the SfPdfViewer has values in the Undo, Redo collections?](./faqs/how-to-identify-the-values-in-the-undo-redo-collections) -* [How to Render JS PDF Viewer inside Blazor SfPdfViewer Component?](./faqs/how-to-render-ej2-pdf-viewer-in-blazor) -* [How to Prevent the PDF from scrolling and remove the vertical scrollbar?](./faqs/how-to-prevent-scrolling) +* [How to Identify if the SfPdfViewer has values in the Undo/Redo collections?](./faqs/how-to-identify-the-values-in-the-undo-redo-collections) +* [How to Extract Particular Text and Highlight?](./faqs/how-to-extract-particular-text-and-highlight) + +## Printing + +* [How to Print the SfPdfViewer component inside the Dialog component in Blazor?](./faqs/how-to-print-the-sfpdfiewer-inside-the-dialog-component) * [How to Perform print in same window in Blazor SfPdfViewer Component?](./faqs/how-to-perform-print-in-same-window) * [How to Print large page document in SfPdfViewer Component?](./faqs/how-to-print-large-page-document) -* [How to Refer the SfPdfViewer script file in Blazor application?](./faqs/how-to-refer-sfpdfviewer-script-in-application) -* [How to Render PDF document from embedded source in the MAUI Android app?](./faqs/how-to-deploy-maui-using-android-emulator) -* [How to Improve the performance using CDN in Blazor SfPdfViewer Component?](./faqs/how-to-improve-performance-using-CDN) -* [How to Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component?](./faqs/how-to-processing-large-files-without-increasing-maximum-message-size) + +## Performance and Configuration + +* [How to Increase the connection buffer size in Blazor SfPdfViewer Component?](./faqs/how-to-increase-connection-buffer-size) +* [How to Improve the Performance using CDN in Blazor SfPdfViewer Component?](./faqs/how-to-improve-performance-using-CDN) +* [How to Process Large Files Without Increasing Maximum Message Size in SfPdfViewer Component?](./faqs/how-to-processing-large-files-without-increasing-maximum-message-size) +* [How to Reduce slowness while running the WASM sample in Visual Studio?](./faqs/how-to-reduce-slowness-while-running-the-wasm-sample-in-Visual-Studio) + +## Fonts + * [How to Load Custom Fonts in a PDF Viewer?](./faqs/how-to-load-custom-font-pdfium) -* [How to Render N number pages on scrolling?](./faqs/how-to-render-n-pages-scrolling) * [How to Load Font Collection in a PDF Viewer?](./faqs/how-to-load-font-collection) -* [How to Reduce slowness while running the WASM sample in Visual Studio?](./faqs/how-to-reduce-slowness-while-running-the-wasm-sample-in-Visual-Studio) -* [How to Coordinate Conversion Between Page and Client Points?](./faqs/how-to-coordinate-conversion-between-page-and-client-points) -* [How to Configure CSP in Blazor SfPdfViewer Component?](./faqs/how-to-configure-content-security-policy) -* [How to Extract Particular Text and Highlight?](./faqs/how-to-extract-particular-text-and-highlight) \ No newline at end of file + +## Mobile + +* [How to Render PDF document from embedded source in the MAUI Android app?](./faqs/how-to-deploy-maui-using-android-emulator) + +## Miscellaneous + +* [How to Suppress the error dialog?](./faqs/how-to-suppress-error-message) +* [How to Prevent the PDF from scrolling and remove the vertical scrollbar?](./faqs/how-to-prevent-scrolling) +* [How to Refer the SfPdfViewer script file in Blazor application?](./faqs/how-to-refer-sfpdfviewer-script-in-application) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-handling-best-practices.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-handling-best-practices.md index bac6aa18d0..3ea9f2df5a 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-handling-best-practices.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-handling-best-practices.md @@ -3,7 +3,7 @@ layout: post title: PDF Form Handling Best Practices in React PDF Viewer | Syncfusion description: Learn the recommended best practices for naming, validating, grouping, importing, and designing form fields in the Syncfusion React PDF Viewer. platform: document-processing -control: PDF Viewer +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/overview-create-forms.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/overview-create-forms.md index 4c8463c6cd..1705fb985d 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/forms/overview-create-forms.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/overview-create-forms.md @@ -3,7 +3,7 @@ layout: post title: Overview of Create form fields in React PDF Viewer | Syncfusion description: Learn how to create edit each form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion React PDF Viewer. platform: document-processing -control: PDF Viewer +control: SfPdfViewer documentation: ug --- diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md b/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md index 1c86b9eaf2..4946549808 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md @@ -1,7 +1,7 @@ --- layout: post title: Globalization and RTL in Blazor SfPdfViewer Component | Syncfusion -description: Learn how to localize UI text and enable RTL layout in the Syncfusion Blazor SfPdfViewer, including culture setup and API references. +description: Learn how to localize UI text and enable RTL layout in the Blazor SfPdfViewer, including culture setup and API references. platform: document-processing control: SfPdfViewer documentation: ug @@ -18,25 +18,21 @@ N> * Ensure the application culture (`CurrentCulture` and `CurrentUICulture`) is set before the component renders for correct resource lookup. * Localization applies to the viewer UI only; it does not translate PDF document content. -## Right to Left +## Right-to-Left (RTL) -To enable right-to-left (RTL) rendering for the viewer UI, set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableRtl) property to `true`. This mirrors the layout and aligns UI elements for RTL languages such as Arabic, Hebrew, Azerbaijani, Persian, and Urdu. The following code snippet demonstrates how to enable RTL rendering. - -When `EnableRtl` is `true`, the component adjusts its layout and appearance to align text, icons, and other elements from right to left, providing an optimized experience for RTL language users. +Set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableRtl) property to `true` to mirror the layout and align UI elements for RTL languages such as Arabic, Hebrew, Azerbaijani, Persian, and Urdu. ```cshtml - @using Syncfusion.Blazor.SfPdfViewer - @code { public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; } - ``` ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md b/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md index 65606b7b28..3ebca763ab 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md @@ -1,7 +1,7 @@ --- layout: post title: Handwritten Signature in Blazor SfPdfViewer Component | Syncfusion -description: Learn how to add and edit handwritten signatures in the Syncfusion Blazor SfPdfViewer component, including placement and property customization. +description: Learn how to add, place, and edit handwritten signatures in the Blazor SfPdfViewer component. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Handwritten Signature in Blazor SfPdfViewer Component -The SfPdfViewer component supports adding handwritten signatures to PDF documents. Handwritten signatures reduce paperwork during review and enable digital verification within the document. +The SfPdfViewer component supports adding handwritten signatures to PDF documents. Handwritten signatures reduce paperwork by capturing approvals directly within the PDF. ## Adding a handwritten signature to the PDF document @@ -30,12 +30,12 @@ Add a handwritten signature using the annotation toolbar. The added signature becomes part of the PDF annotations and is preserved when saving or exporting the document. -## Editing the properties of handwritten signature +## Editing the properties of a handwritten signature -Stroke color, thickness, and opacity can be adjusted using the annotation toolbar’s property editors. Select the signature on the page to enable these editors. After placement, the signature can be moved, resized, or removed like other annotations. +Select the signature on the page to enable the property editors in the annotation toolbar. ![Editing handwritten signature properties in Blazor SfPdfViewer](images/blazor-pdfviewer-signature-properties.png) ## See also -* [Form filling in Blazor SfPdfViewer Component](./form-filling) \ No newline at end of file +* [Form filling in Blazor SfPdfViewer Component](./forms/form-filling) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md b/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md index 6f3eadd012..8bfdbb1cd5 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md @@ -1,7 +1,7 @@ --- layout: post title: Interaction mode in Blazor SfPdfViewer Component | Syncfusion -description: Checkout and learn here all about interaction mode in Syncfusion Blazor SfPdfViewer component and more. +description: Checkout and learn here all about interaction mode in Blazor SfPdfViewer component and more. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Interaction mode in Blazor SfPdfViewer Component -SfPdfViewer provides two user interaction options to control how the document responds to pointer input. By default, text selection is enabled and the interaction mode is `Selection`. +SfPdfViewer provides two user interaction options to control how the viewer responds to pointer input. By default, text selection is enabled and the interaction mode is `Selection`. -The built-in toolbar of SfPdfViewer contains the following two interaction options: +SfPdfViewer's built-in toolbar provides two interaction options: * Selection mode * Panning mode @@ -24,6 +24,8 @@ N> In Selection mode, page panning by touch/drag is disabled. Users can still sc You can enable or disable text selection by setting the [EnableTextSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableTextSelection) property. +The following example enables text selection in the SfPdfViewer. + ```cshtml @using Syncfusion.Blazor.SfPdfViewer @@ -43,7 +45,9 @@ You can enable or disable text selection by setting the [EnableTextSelection](ht In this mode, users can pan and scroll pages in the loaded PDF document, but text selection is disabled. -The interaction mode of the SfPdfViewer component can be modified using the [InteractionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_InteractionMode) property. This property supports runtime updates, and any changes are applied immediately to the viewer. +The interaction mode of the SfPdfViewer component can be modified using the [InteractionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_InteractionMode) property. Changes to this property take effect immediately. + +The following example sets the SfPdfViewer to Panning mode. ```cshtml @@ -59,9 +63,9 @@ The interaction mode of the SfPdfViewer component can be modified using the [Int } ``` -## Disable annotation interaction +## Disabling annotation interaction -Annotation interactions, such as dragging, resizing, and deleting, can be disabled by setting the [IsLock](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerAnnotationSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerAnnotationSettings_IsLock) property in the [AnnotationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AnnotationSettings) configuration. +Annotation interactions, such as dragging, resizing, and deleting, can be disabled by setting the [IsLock](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerAnnotationSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerAnnotationSettings_IsLock) property in the [AnnotationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AnnotationSettings) configuration. When `IsLock` is set to `true`, existing annotations cannot be moved, resized, selected, or deleted, but new annotations can still be added. The following code illustrates how to lock annotation interactions. @@ -70,7 +74,8 @@ The following code illustrates how to lock annotation interactions. @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.SfPdfViewer -Lock Annotation +Lock Annotation +Unlock Annotation @@ -79,7 +84,7 @@ The following code illustrates how to lock annotation interactions. SfPdfViewer2 viewer; private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; - public async void OnClick(MouseEventArgs args) + public async Task LockAnnotations(MouseEventArgs args) { //Gets the annotation collection of the SfPdfViewer. var allAnnots = await viewer.GetAnnotationsAsync(); @@ -91,6 +96,19 @@ The following code illustrates how to lock annotation interactions. await viewer.EditAnnotationAsync(item); } } + + public async Task UnlockAnnotations(MouseEventArgs args) + { + //Gets the annotation collection of the SfPdfViewer. + var allAnnots = await viewer.GetAnnotationsAsync(); + + foreach (var item in allAnnots) + { + //Enabling the interaction with annotation. + item.AnnotationSettings.IsLock = false; + await viewer.EditAnnotationAsync(item); + } + } } ``` @@ -99,4 +117,6 @@ The following code illustrates how to lock annotation interactions. ## See also -* [Navigation in Blazor SfPdfViewer Component](./interactive-pdf-navigation-overview) \ No newline at end of file +* [Navigation in Blazor SfPdfViewer Component](./interactive-pdf-navigation-overview) +* [Magnification in Blazor SfPdfViewer Component](./magnification) +* [Events in Blazor SfPdfViewer Component](./events) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation-overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation-overview.md index 6e1c4f4f9d..d9d54ed8b9 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation-overview.md @@ -1,7 +1,7 @@ --- layout: post title: Navigation in Blazor SfPdfViewer Component | Syncfusion -description: Learn all about page navigation, bookmarks, thumbnails, hyperlinks, and the modern navigation panel in the Blazor SfPdfViewer component. +description: Learn how to navigate pages in the Blazor SfPdfViewer component using the toolbar, bookmarks, thumbnails, hyperlinks, and the table of contents. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,17 +9,15 @@ documentation: ug # Navigation in Blazor SfPdfViewer Component -Page navigation in the Syncfusion® SfPdfViewer component can be performed using the following methods: +You can navigate between pages in the SfPdfViewer component using any of the following methods: * Scroll through the pages. * Use the Go to page option in the built-in toolbar. * Select a bookmark in the bookmark panel. * Select a page in the thumbnail panel. * Click hyperlinks or entries in the table of contents. -* Modern navigation panel. +* Use the modern navigation panel. ## See also -* [Magnification in Blazor SfPdfViewer Component](./magnification) - -* [Getting Started with SmartPdfViewer in Blazor Web App](../../Smart-PDF-Viewer/blazor/getting-started/web-app) \ No newline at end of file +* [Magnification in Blazor SfPdfViewer Component](./magnification) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/magnification.md b/Document-Processing/PDF/PDF-Viewer/blazor/magnification.md index 0a2032262d..6889a4467f 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/magnification.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/magnification.md @@ -11,12 +11,12 @@ documentation: ug The built-in toolbar of SfPdfViewer includes the following zoom options: -* **Zoom** **In**: Increases the zoom level (document magnification) by preset steps. -* **Zoom** **Out**: Decreases the zoom level by preset steps. -* **Zoom** **To**: Sets the zoom level to a specified value. -* **Fit** **Page**: Fits the entire page within the available viewport. -* **Fit** **Width**: Fits the page to the viewport width. -* **Fit** **Height**: Fits the page to the viewport height. +* **Zoom In**: Increases the zoom level (document magnification) by preset steps. +* **Zoom Out**: Decreases the zoom level by preset steps. +* **Zoom To**: Sets the zoom level to a specified value. +* **Fit Page**: Fits the entire page within the available viewport. +* **Fit Width**: Fits the page to the viewport width. +* **Fit Height**: Fits the page to the viewport height. ![Zoom options in the Blazor SfPdfViewer](./images/magnification.png) @@ -103,8 +103,10 @@ Zoom operations can also be performed programmatically using APIs such as [ZoomI public async void OnZoomClick(MouseEventArgs args) { - int zoomValue = int.Parse(TextBox.Value.ToString()); - await Viewer.ZoomAsync(zoomValue); + if (int.TryParse(TextBox.Value, out int zoomValue)) + { + await Viewer.ZoomAsync(zoomValue); + } } public async void OnFitWidthClick(MouseEventArgs args) @@ -135,8 +137,6 @@ Configure minimum and maximum zoom levels using the [MinZoomValue](https://help. Specify the zoom limits during component initialization with integer values representing percentages. -N> SfPdfViewer supports zoom values from 10% to 400%. - ### Basic usage of Minimum and Maximum Zoom Values ```cshtml @@ -156,7 +156,7 @@ N> SfPdfViewer supports zoom values from 10% to 400%. ``` -See the following image. +The following image shows the viewer with the configured zoom limits. ![Viewer with minimum and maximum zoom](./images/minimum-and-maximum-zoom-values.png) @@ -172,7 +172,7 @@ See the following image. SfPdfViewer handles invalid input values as follows: * **Values below 1**: Automatically fall back to the default minimum (10) -* **MinZoomValue > MaxZoomValue**: MaxZoomValue is adjusted to match MinZoomValue +* **When MinZoomValue exceeds MaxZoomValue**: MaxZoomValue is adjusted to match MinZoomValue ### Dynamic zoom value configuration @@ -210,20 +210,22 @@ Minimum and maximum zoom values can be changed dynamically at runtime. public void SetValueBeyondLimit() { - maxZoom = 500; // Beyond default limit - minZoom = 2; // Beyond default limit + // Values exceed the supported 10%–400% range to demonstrate invalid input handling. + maxZoom = 500; + minZoom = 2; } public void SwapMinMaxValue() { - maxZoom = 50; // Less than minZoom - minZoom = 200; // Greater than maxZoom + // Intentionally assign an inverted range to demonstrate auto-correction behavior. + maxZoom = 50; + minZoom = 200; } } ``` -See the following image. +The following image shows the dynamic runtime configuration in action. ![Dynamic runtime configuration of minimum and maximum zoom values](./images/dynamic-zoom-value-configuration.png) @@ -238,9 +240,9 @@ The configured zoom limits apply to all zoom operations, including programmatic Zoom In Zoom Out -Fit Page -Fit Width -Fit Height +Fit To Page +Fit To Width +Fit To Height The same script file is used for both `Server application` and `WebAssembly a {% tabs %} -{% highlight html tabtitle="(~/Layout.cshtml/Host.cshtml)" hl_lines="7" %} +{% highlight html tabtitle="~/Layout.cshtml/Host.cshtml" hl_lines="7" %} @@ -101,7 +101,7 @@ N> The same script file is used for both `Server application` and `WebAssembly a {% tabs %} -{% highlight html tabtitle="(~/Layout.cshtml/Host.cshtml)" hl_lines="7" %} +{% highlight html tabtitle="~/Layout.cshtml/Host.cshtml" hl_lines="7" %} @@ -197,7 +197,7 @@ To render the PDF Viewer component, add the following code in the **Index.razor* -### Project.cs +### .csproj (WebAssembly) For WebAssembly applications, include the following properties in the project **.csproj** file to ensure proper functionality and compatibility. @@ -208,7 +208,7 @@ For WebAssembly applications, include the following properties in the project ** {% tabs %} -{% highlight C# tabtitle="csproj" hl_lines="2 6 7" %} +{% highlight C# tabtitle=".csproj" hl_lines="2 6 7" %} diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-amazon-s3.md index a65e3fd5d5..282b50c5bd 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-amazon-s3.md @@ -1,7 +1,7 @@ --- layout: post title: Open PDF files from AWS S3 in SfPdfViewer Component | Syncfusion -description: Learn how to open PDF files from AWS S3 in the Syncfusion Blazor SfPdfViewer component, including steps and configuration guidance. +description: Learn how to open PDF files from AWS S3 in the Blazor SfPdfViewer component, including steps and configuration guidance. platform: document-processing control: SfPdfViewer documentation: ug @@ -11,17 +11,25 @@ documentation: ug This article shows how to load a PDF stored in AWS S3 into the Blazor `SfPdfViewer` component. -## Step 1 — Create an S3 bucket and grant read access +## Step 1 — Create an S3 bucket and upload the PDF -Set up an AWS account by following the official guide: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket, upload a PDF file, and create an IAM user with permissions to read objects (for example, s3:GetObject). Generate access keys and store them securely. +Set up an AWS account by following the official guide: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket, upload a PDF file to the bucket, and create an IAM user with permissions to read objects (for example, `s3:GetObject`). -## Step 2 — Create a simple SfPdfViewer sample +## Step 2 — Configure AWS credentials -Follow the steps in the Blazor Server [getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app) guide for PDF Viewer to create a basic sample. This provides the required project setup and SfPdfViewer configuration. +Generate access keys for the IAM user and store them securely. Load the keys from configuration in your application: -## Step 3 — Add required namespaces +* Store the access key and secret key in `appsettings.json`, environment variables, or AWS Secrets Manager. +* When running on AWS infrastructure (EC2, ECS, Lambda), prefer IAM roles over long-lived access keys. +* Do not hard-code credentials in source files or client-side code. -1. Import the required namespaces at the top of the file: +## Step 3 — Create a simple SfPdfViewer sample + +Follow the steps in the Blazor Server [getting started](../getting-started/web-app) guide for SfPdfViewer to create a basic sample. This provides the required project setup and SfPdfViewer configuration. + +## Step 4 — Add required namespaces + +Add the following using directives to `_Imports.razor` (or to the top of the `.razor` file): ```csharp @using Amazon; @@ -30,58 +38,60 @@ Follow the steps in the Blazor Server [getting started](https://help.syncfusion. @using Syncfusion.Blazor.SfPdfViewer; ``` -## Step 4 — Example: load a PDF from S3 and set DocumentPath +## Step 5 — Load a PDF from S3 and assign it to DocumentPath The example below retrieves the PDF from S3, converts it to a base64 data URL, and assigns it to `DocumentPath`. ```csharp - @page "/" - - +@inject IConfiguration Configuration + + + @code { - private SfPdfViewer2 viewer; private string DocumentPath { get; set; } - private readonly string accessKey = "Your Access Key from AWS S3"; - private readonly string secretKey = "Your Secret Key from AWS S3"; - private readonly string bucketName = "Your Bucket name from AWS S3"; - private readonly string fileName = "File Name to be loaded into Syncfusion PDF Viewer"; + private string accessKey; + private string secretKey; + private string bucketName = "YourBucketName"; + private string fileName = "YourFileName.pdf"; + private RegionEndpoint bucketRegion = RegionEndpoint.USEast1; protected override async Task OnInitializedAsync() { - MemoryStream stream = new MemoryStream(); - RegionEndpoint bucketRegion = RegionEndpoint.USEast1; + accessKey = Configuration["AWS:AccessKey"]; + secretKey = Configuration["AWS:SecretKey"]; - // Configure the AWS SDK with your access credentials and other settings - var s3Client = new AmazonS3Client(accessKey, secretKey, bucketRegion); + // Configure the AWS SDK with your access credentials and region + using var s3Client = new AmazonS3Client(accessKey, secretKey, bucketRegion); - // Specify the document name or retrieve it from a different source + // Retrieve the PDF object from the S3 bucket var response = await s3Client.GetObjectAsync(bucketName, fileName); - Stream responseStream = response.ResponseStream; - responseStream.CopyTo(stream); + await using MemoryStream stream = new MemoryStream(); + await using Stream responseStream = response.ResponseStream; + await responseStream.CopyToAsync(stream); stream.Seek(0, SeekOrigin.Begin); + DocumentPath = "data:application/pdf;base64," + Convert.ToBase64String(stream.ToArray()); } } ``` -Replace `fileName` with the S3 object key for the PDF. Assign the resulting value to the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property of `SfPdfViewer`. +Replace `bucketName` with your S3 bucket name and `fileName` with the S3 object key (including the `.pdf` extension) for the PDF. The value is assigned to the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property of `SfPdfViewer`. -N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with valid values for your environment. Do not expose credentials in client-side code; store secrets securely using app settings, environment variables, or IAM roles. - -N> The `AWSSDK.S3` NuGet package must be installed to use the AWS SDK in this example. +N> +* Do not expose credentials in client-side code. Store the access key and secret key in `appsettings.json`, environment variables, or AWS Secrets Manager, and load them via `IConfiguration` as shown above. When running on AWS infrastructure, prefer IAM roles over long-lived access keys. +* The `AWSSDK.S3` NuGet package must be installed to use the AWS SDK in this example. In Blazor WebAssembly, call the AWS SDK from a server-side API rather than directly in the component. +* Ensure `RegionEndpoint` matches the region in which the S3 bucket is created to avoid authorization or not-found errors. [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Open%20and%20Save%20from%20AWS%20S3) -N> Ensure `RegionEndpoint` matches the S3 bucket region to avoid authorization or not-found errors. - ## See also -* [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../faqs/how-to-processing-large-files-without-increasing-maximum-message-size) \ No newline at end of file +* [SfPdfViewer getting started for Blazor Server app](../getting-started/web-app) +* [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer](../faqs/how-to-processing-large-files-without-increasing-maximum-message-size) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-azure-blob-storage.md index dd9f1795c6..dfe85f1832 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-azure-blob-storage.md @@ -1,7 +1,7 @@ --- layout: post -title: Open PDF files from Azure in SfPdfViewer Component | Syncfusion -description: Learn how to load a PDF from Azure Blob Storage into the Syncfusion Blazor SfPdfViewer component, including setup steps, and configuration guidance. +title: Open PDF from Azure Blob Storage in SfPdfViewer Component | Syncfusion +description: Learn how to load a PDF from Azure Blob Storage into the Blazor SfPdfViewer component, including setup steps, and configuration guidance. platform: document-processing control: SfPdfViewer documentation: ug @@ -13,15 +13,19 @@ This article shows how to load a PDF stored in Azure Blob Storage into the Blazo ## Step 1 — Create the storage account and container -Sign in to the Azure portal and create a Storage account with the required settings. Record the access keys or prepare a SAS token for secure access. Within the Storage Account, create a Blob Container following the steps in this [link](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal). +Sign in to the Azure portal and create a Storage account. Record the access keys or prepare a SAS token for secure access. Within the Storage Account, create a Blob Container following the steps in this [link](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal). ## Step 2 — Create a minimal SfPdfViewer sample -Create a basic Blazor Server application and integrate the SfPdfViewer component by following [Getting started with the Blazor PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app). This provides the required project configuration and a working viewer scaffold. +Create a basic Blazor Server application and integrate the SfPdfViewer component by following [Getting started with the Blazor PDF Viewer](../getting-started/web-app). This provides the required project configuration and a working viewer scaffold. -## Step 3 — Add required namespaces +## Step 3 — Configure secrets and the connection string -1. Add the required namespaces at the top of Index.razor: +Store the Azure Storage connection string in a secure configuration source such as `appsettings.json`, environment variables, or Azure Key Vault. Do not hard-code it in Razor components. Load it at runtime through `IConfiguration`, as shown in the next step. To retrieve the connection string from the Azure portal, refer to the [View account access keys](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-keys-manage) guide. + +## Step 4 — Add required namespaces + +Add the required namespaces to `_Imports.razor` (or to the top of `Index.razor`): ```csharp @using System.IO @@ -30,14 +34,21 @@ Create a basic Blazor Server application and integrate the SfPdfViewer component @using Syncfusion.Blazor.SfPdfViewer ``` -## Step 4 — Example: load a PDF from Azure Blob Storage +## Step 5 — Load a PDF from Azure Blob Storage -The example below downloads the blob to memory, converts it to a Base64 data URL, and assigns it to `DocumentPath`. +The example below downloads the blob to memory, converts it to a base64 data URL, and assigns it to [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath). + +N> Replace the placeholder values as follows: +* **Your connection string from Azure**: the actual connection string or SAS-based connection for the Azure Storage account. +* **Your container name in Azure**: the name of the Blob container that stores the PDF. +* **File name to load into the SfPdfViewer**: the file name to load from the Azure container into the SfPdfViewer. ```csharp @page "/" +@inject IConfiguration Configuration + @@ -46,32 +57,33 @@ The example below downloads the blob to memory, converts it to a Base64 data URL @code { private string DocumentPath { get; set; } - private readonly string connectionString = "Your Connection string from Azure"; private readonly string containerName = "Your container name in Azure"; private readonly string fileName = "File Name to be loaded into Syncfusion SfPdfViewer"; - - protected override void OnInitialized() + + protected override async Task OnInitializedAsync() { - //Connection String of Storage Account + string connectionString = Configuration["Azure:StorageConnectionString"]; + + // Connection String of Storage Account BlobServiceClient blobServiceClient = new BlobServiceClient(connectionString); BlobContainerClient blobContainerClient = blobServiceClient.GetBlobContainerClient(containerName); BlockBlobClient blockBlobClient = blobContainerClient.GetBlockBlobClient(fileName); - MemoryStream memoryStream = new MemoryStream(); - blockBlobClient.DownloadTo(memoryStream); + + await using MemoryStream memoryStream = new MemoryStream(); + await blockBlobClient.DownloadToAsync(memoryStream); + memoryStream.Position = 0; DocumentPath = "data:application/pdf;base64," + Convert.ToBase64String(memoryStream.ToArray()); } } ``` -N> Replace the placeholder values as follows: -• **Your Connection string from Azure**: the actual connection string or SAS-based connection for the Azure Storage account. -• **Your container name in Azure**: the name of the Blob container that stores the PDF. -• **File Name to be Loaded into Syncfusion® SfPdfViewer**: the file name to load from the Azure container to the SfPdfViewer. - -N> Ensure the `Azure.Storage.Blobs` NuGet package is installed. Prefer server-side retrieval or managed identities to avoid exposing secrets. +N> +* Install the `Azure.Storage.Blobs` NuGet package to use the preceding code. +* Do not expose credentials in client-side code. Load the connection string via `IConfiguration` as shown, and prefer managed identities or a SAS token over a full account key when possible. In Blazor WebAssembly, call Azure Storage from a server-side API rather than directly in the component. [View the Azure Blob Storage sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Open%20and%20Save%20from%20Azure%20blob%20storage). ## See also -* [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../faqs/how-to-processing-large-files-without-increasing-maximum-message-size) \ No newline at end of file +* [SfPdfViewer getting started for Blazor Server app](../getting-started/web-app) +* [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../faqs/how-to-processing-large-files-without-increasing-maximum-message-size) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-box-cloud-file-storage.md index 2b68705072..a3eb167f09 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-box-cloud-file-storage.md @@ -1,7 +1,7 @@ --- layout: post title: Open PDF files from cloud storage in Blazor SfPdfViewer | Syncfusion -description: Learn how to open PDF files from Box cloud storage in the Syncfusion Blazor SfPdfViewer component and the Box .NET SDK. +description: Learn how to open PDF files from Box cloud storage in the Blazor SfPdfViewer component and the Box .NET SDK. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Open PDF from Box cloud storage in SfPdfViewer -To load a PDF file from Box cloud file storage in the Blazor SfPdfViewer, follow the steps below. +To load a PDF from Box cloud storage in the Blazor SfPdfViewer, follow the steps below. ## Prerequisites @@ -36,7 +36,7 @@ Import the required namespaces at the top of your `Index.razor` file: @using Syncfusion.Blazor.SfPdfViewer; ``` -## Step 4 — Example: download a file and load into the viewer +## Step 2: Download a file from Box and load it into the viewer The example below locates a file in a Box folder, downloads it, converts it to a Base64 data URI, and assigns it to `DocumentPath`. @@ -67,10 +67,10 @@ The example below locates a file in a Box folder, downloads it, converts it to a var client = new BoxClient(config, auth); // Download the file from Box storage - var items = await client.FoldersManager.GetFolderItemsAsync(folderID, 1000, autoPaginate: true); + var items = await client.FoldersManager.GetFolderItemsAsync(folderID, 1000, 0); var files = items.Entries.Where(i => i.Type == "file"); - // Filter the files based on the objectName + // Filter the files based on the fileName var matchingFile = files.FirstOrDefault(file => file.Name == fileName); if (matchingFile != null) @@ -97,9 +97,9 @@ The example below locates a file in a Box folder, downloads it, converts it to a } ``` -N> replace **Your_Box_Storage_Access_Token** with your actual box access token, and **Your_Folder_ID** with the ID of the folder in your box storage where you want to perform specific operations. Remember to use your valid box API credentials, as **Your_Box_Storage_ClientID** and **Your_Box_Storage_ClientSecret"** are placeholders for your application's API key and secret. - -N> Ensure that the specified document name exists in the Box folder. Pass the resulting data URI to the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) of the SfPdfViewer component. +N> +* Replace **Your Box Storage Access Token** with your actual Box access token, and **Your Folder ID** with the ID of the folder in your Box storage where you want to perform specific operations. Remember to use your valid Box API credentials, as **Your Box Storage ClientID** and **Your Box Storage ClientSecret** are placeholders for your application's API key and secret. +* Ensure that the specified document name exists in the Box folder. Pass the resulting data URI to the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) of the SfPdfViewer component. [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Open%20and%20Save%20from%20box%20cloud%20storage) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-google-cloud-storage.md b/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-google-cloud-storage.md index 6c0c0df28e..3d2f16eb00 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-google-cloud-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-google-cloud-storage.md @@ -1,7 +1,7 @@ --- layout: post title: Open PDF from Google Cloud Storage in Blazor PDF Viewer | Syncfusion -description: Learn how to load a PDF from Google Cloud Storage into the Syncfusion Blazor SfPdfViewer. Includes required setup, permissions, and sample code. +description: Learn how to load a PDF from Google Cloud Storage into the Blazor SfPdfViewer. Includes required setup, permissions, and sample code. platform: document-processing control: SfPdfViewer documentation: ug @@ -13,7 +13,7 @@ This article shows how to load a PDF stored in Google Cloud Storage into the Bla ## Step 1 — Create a service account -Open the Google Cloud Console and navigate to `IAM & Admin` > `Service accounts`. Select `Create service account`, provide a name, assign the required role (for example, Storage Object Admin), and create a JSON key. Download the key file securely. Use this key file for authenticating your application to access the Google Cloud Storage bucket. For more information, refer to the [official Google Cloud documentation](https://cloud.google.com/iam/docs/service-accounts-create).. +Open the Google Cloud Console and navigate to `IAM & Admin` > `Service accounts`. Select `Create service account`, provide a name, assign the required role (for example, Storage Object Admin), and create a JSON key. Download the key file securely. Use this key file for authenticating your application to access the Google Cloud Storage bucket. For more information, refer to the [official Google Cloud documentation](https://cloud.google.com/iam/docs/service-accounts-create). ## Step 2 — Create a minimal SfPdfViewer sample @@ -56,20 +56,20 @@ The example below loads a PDF object from a GCS bucket into memory, converts it MemoryStream stream = new MemoryStream(); // Load the service account credentials from the key file. var credentials = GoogleCredential.FromFile(keyFilePath); - // Create a storage client with Application Default Credentials + // Create a storage client with the service account credentials. _storageClient = StorageClient.Create(credentials); _storageClient.DownloadObject(bucketName, fileName, stream); stream.Position = 0; DocumentPath = "data:application/pdf;base64," + Convert.ToBase64String(stream.ToArray()); + await stream.DisposeAsync(); } } ``` -N> Replace **Your Bucket name from Google Cloud Storage** with the actual Google Cloud Storage bucket name and **File Name to be Loaded into Syncfusion® SfPdfViewer** with the object name to load in the Syncfusion SfPdfViewer. - -N> Replace **path/to/service-account-key.json** with the absolute or application-accessible path to the service account key JSON file. - -N> Install the **Google.Cloud.Storage.V1** NuGet package in the application to use the preceding code. Ensure the Blazor packages are installed and a valid license key is registered. +N> +* Replace **YourBucketName** with the actual Google Cloud Storage bucket name and **FileName.pdf** with the object name to load in the SfPdfViewer. +* Replace **path/to/service-account-key.json** with a path the application can read at runtime to the service account key JSON file. +* Install the **Google.Cloud.Storage.V1** NuGet package in the application to use the preceding code. Ensure the Blazor packages are installed and a valid license key is registered. [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Open%20and%20Save%20from%20GCS) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-google-drive.md b/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-google-drive.md index c9e1dde2f7..86c99dc7fb 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-google-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/open-pdf-file/from-google-drive.md @@ -1,7 +1,7 @@ --- layout: post title: Open PDF files from Google Drive in Blazor SfPdfViewer | Syncfusion -description: Learn how to open PDF files from Google Drive in the Syncfusion Blazor SfPdfViewer component, including setup, and a working example. +description: Learn how to open PDF files from Google Drive in the Blazor SfPdfViewer component, including setup, and a working example. platform: document-processing control: SfPdfViewer documentation: ug @@ -17,7 +17,7 @@ Create a project in Google Developers Console and enable the Google Drive API. O ## Step 2 — Create a minimal SfPdfViewer sample -Follow the [getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app) guide to create a basic Blazor application with the SfPdfViewer component. +Follow the [getting started](../getting-started/web-app) guide to create a basic Blazor application with the SfPdfViewer component. ## Step 3 — Add required namespaces @@ -32,9 +32,9 @@ Follow the [getting started](https://help.syncfusion.com/document-processing/pdf @using Syncfusion.Blazor.SfPdfViewer; ``` -## Step 4 — Example: authorize, download, and load +## Step 4 — Example: Authorize, download, and load -The example below authenticates with OAuth 2.0, lists PDF files in a folder, downloads the selected file into memory, converts it to a Base64 data URI, and assigns it to `DocumentPath`. +The example below authenticates with OAuth 2.0, lists PDF files in the configured folder, downloads the file whose name matches `FileName` into memory, converts it to a Base64 data URI, and assigns it to `DocumentPath`. ```csharp @page "/" @@ -48,7 +48,7 @@ The example below authenticates with OAuth 2.0, lists PDF files in a folder, dow private string DocumentPath { get; set; } private readonly string FolderId = "Your Google Drive Folder ID"; - private readonly string CredentialPath = "Your Path to the OAuth 2.0 Client IDs json file"; + private readonly string CredentialPath = "Your Path to the OAuth 2.0 Client IDs JSON file"; private readonly string ApplicationName = "Your Application name"; private readonly string FileName = "File Name to be loaded into Syncfusion SfPdfViewer"; @@ -57,16 +57,14 @@ The example below authenticates with OAuth 2.0, lists PDF files in a folder, dow protected override async Task OnInitializedAsync() { UserCredential credential; - using (var stream1 = new FileStream(CredentialPath, FileMode.Open, FileAccess.Read)) - { - string credPath = "token.json"; - credential = await GoogleWebAuthorizationBroker.AuthorizeAsync( - GoogleClientSecrets.Load(stream1).Secrets, - Scopes, - "user", - CancellationToken.None, - new FileDataStore(credPath, true)); - } + using var stream1 = new FileStream(CredentialPath, FileMode.Open, FileAccess.Read); + string credPath = "token.json"; + credential = await GoogleWebAuthorizationBroker.AuthorizeAsync( + GoogleClientSecrets.Load(stream1).Secrets, + Scopes, + "user", + CancellationToken.None, + new FileDataStore(credPath, true)); var service = new DriveService(new BaseClientService.Initializer() { @@ -101,11 +99,10 @@ The example below authenticates with OAuth 2.0, lists PDF files in a folder, dow ``` -N> Replace the placeholders with real values: use the actual Google Drive folder ID for **Your Google Drive Folder ID**, the application display name for **Your Application name**, the exact PDF file name for **File Name to be loaded into Syncfusion SfPdfViewer**, and the full path to the OAuth 2.0 Client IDs JSON for **Your Path to the OAuth 2.0 Client IDs JSON file**. - -N> The **FolderId** is the unique identifier of the Drive folder. For example, for `https://drive.google.com/drive/folders/abc123xyz456`, the folder ID is `abc123xyz456`. - -N> Install the **Google.Apis.Drive.v3** NuGet package in the application to use the shown code. +N> +* Replace the placeholders in the code with real values: provide the actual Google Drive folder ID, the application display name, the exact PDF file name to load, and the full path to the OAuth 2.0 Client IDs JSON file. +* The **FolderId** is the unique identifier of the Drive folder. For example, for `https://drive.google.com/drive/folders/abc123xyz456`, the folder ID is `abc123xyz456`. +* Install the **Google.Apis.Drive.v3** NuGet package in the application to use the shown code. [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Open%20and%20Save%20from%20Google%20Drive) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/opening-pdf-file.md b/Document-Processing/PDF/PDF-Viewer/blazor/opening-pdf-file.md index 18cc1b955c..968a151fc4 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/opening-pdf-file.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/opening-pdf-file.md @@ -1,7 +1,7 @@ --- layout: post title: Opening PDF file in Blazor SfPdfViewer Component | Syncfusion -description: Learn how to load PDF files from various locations like database, cloud and remote URL in the Syncfusion Blazor SfPdfViewer component. +description: Learn how to load PDF files from various locations like database, cloud and remote URL in the Blazor SfPdfViewer component. platform: document-processing control: SfPdfViewer documentation: ug @@ -34,13 +34,15 @@ If a PDF file is hosted on the web, it can be opened in the viewer by providing Open PDF files stored in cloud storage by converting the file to a Base64 string and assigning it to `DocumentPath`. +### Azure Blob Storage + The following code example shows how to open and load a PDF file stored in Azure Blob Storage. ```cshtml @using Azure.Storage.Blobs @using Azure.Storage.Blobs.Specialized -@using System.IO; +@using System.IO @using Syncfusion.Blazor.SfPdfViewer The **Azure.Storage.Blobs** NuGet package must be installed in the application to use the previous code example. Configure credentials securely (for example, using configuration providers or managed identity) and ensure CORS is enabled on the storage account if the file is fetched from the browser. +### Azure File Shares + ```cshtml @using Azure.Storage.Files.Shares -@using System.IO; +@using System.IO @using Syncfusion.Blazor.SfPdfViewer The **Azure.Storage.Blobs** NuGet package must be installed in the applicatio Height="100%" /> @code { - public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf"; + public string DocumentPath { get; set; } protected override void OnInitialized() { //Connection String of Storage Account @@ -120,8 +124,9 @@ The following code example shows how to open a PDF file from a SQL Server databa string connectionString = "Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=C:\\Database.mdf;"; System.Data.SqlClient.SqlConnection connection = new System.Data.SqlClient.SqlConnection(connectionString); //Searches for the PDF document from the database - string query = "select Data from Table where DocumentName = '" + documentID + "'"; + string query = "select Data from Table where DocumentName = @documentID"; System.Data.SqlClient.SqlCommand command = new System.Data.SqlClient.SqlCommand(query, connection); + command.Parameters.AddWithValue("@documentID", documentID); connection.Open(); System.Data.SqlClient.SqlDataReader read = command.ExecuteReader(); read.Read(); @@ -132,11 +137,11 @@ The following code example shows how to open a PDF file from a SQL Server databa } ``` -Note: The System.Data.SqlClient package must be installed in the application to use the previous code example. For production scenarios, use parameterized queries and dispose database objects properly. Store connection strings securely (for example, appsettings.json or user secrets). +N> The System.Data.SqlClient package must be installed in the application to use the previous code example. For production scenarios, use parameterized queries and dispose database objects properly. Store connection strings securely (for example, appsettings.json or user secrets). -## Opening a PDF from file system +## Opening a PDF from the local file system -The built-in toolbar includes an Open option that loads a PDF from the local file system. To replicate this behavior in a custom toolbar, the following example uses the Syncfusion Uploader component to obtain a file and then loads it in the viewer. Ensure the application processes the file content correctly (for example, reading the stream and converting to a Base64 data URL) before assigning it to the viewer. +The built-in toolbar includes an Open option that loads a PDF from the local file system. The following example uses the Syncfusion Uploader component to obtain a file and then loads it in the viewer. The `LoadAsync` method accepts the file path as the first parameter and the password of a protected PDF as the second parameter. ```cshtml @@ -144,8 +149,8 @@ The built-in toolbar includes an Open option that loads a PDF from the local fil @using Syncfusion.Blazor.SfPdfViewer - - + @@ -157,7 +162,7 @@ The built-in toolbar includes an Open option that loads a PDF from the local fil @code { SfPdfViewer2 Viewer; - public async void onsuccess(UploadingEventArgs action) + public async void OnUploadStart(UploadingEventArgs action) { string filePath = action.FileData.RawFile.ToString(); await Viewer.LoadAsync(filePath, null); @@ -166,7 +171,7 @@ The built-in toolbar includes an Open option that loads a PDF from the local fil ``` -## Opening a PDF from base64 data +## Opening a PDF from a Base64 string The following code snippet shows how to load a PDF in SfPdfViewer using a Base64 string by assigning a data URL to DocumentPath. Large files encoded as Base64 increase memory usage; consider using a URL for very large documents. @@ -181,18 +186,22 @@ The following code snippet shows how to load a PDF in SfPdfViewer using a Base64 @code { - static byte[] byteArray = System.IO.File.ReadAllBytes("wwwroot/Data/PDF_Succinctly.pdf"); - static string base64String = Convert.ToBase64String(byteArray); - public string DocumentPath { get; set; } = "data:application/pdf;base64," + base64String; + public string DocumentPath { get; set; } + protected override void OnInitialized() + { + byte[] byteArray = System.IO.File.ReadAllBytes("wwwroot/Data/PDF_Succinctly.pdf"); + string base64String = Convert.ToBase64String(byteArray); + DocumentPath = "data:application/pdf;base64," + base64String; + } } ``` [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Load%20a%20PDF%20file%20from%20base%2064%20string) -## Opening a PDF from stream +## Opening a PDF from a file stream -Load a PDF from a stream by converting it to a Base64 string and assigning it to DocumentPath. This approach is useful when the file originates from an API or in-memory source. +Load a PDF from a file stream by converting it to a Base64 string and assigning it to DocumentPath. This approach is useful when the file originates from a file system stream. ```cshtml diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/duplicate-pages.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/duplicate-pages.md index aae3216324..07fdbec66a 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/duplicate-pages.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/duplicate-pages.md @@ -14,7 +14,7 @@ domainurl: ##DomainURL## This guide explains how to duplicate pages within the current PDF using the Organize Pages UI. -**Outcome**: Copied pages are inserted adjacent to the selection and included in exported PDFs. +**Outcome**: Duplicated pages are inserted adjacent to the selection and included in exported PDFs. ## Prerequisites @@ -25,7 +25,7 @@ This guide explains how to duplicate pages within the current PDF using the Orga 1. Open the Organize Pages view - - Click the **Organize Pages** button in the viewer toolbar to open the Organize Pages dialog. + - Click the **Organize Pages** button in the viewer toolbar to open it. 2. Select pages to duplicate @@ -33,28 +33,20 @@ This guide explains how to duplicate pages within the current PDF using the Orga 3. Duplicate selected pages - - Click the **Duplicate Pages** button in the Organize Pages toolbar; duplicated pages are inserted to the right of the selected thumbnails. + - Click the **Duplicate Pages** button in the Organize Pages toolbar; duplicated pages are inserted to the right of the selected thumbnails. When multiple thumbnails are selected, the Duplicate action duplicates every selected page in order. -4. Duplicate multiple pages at once + ![Duplicate pages in organize view](./images/Duplicate_Pages.gif) - - When multiple thumbnails are selected, the Copy action duplicates every selected page in order. - - ![Copy pages in organize view](./images/Duplicate_Pages.gif) - -5. Undo or redo changes +4. Undo or redo changes - Use **Undo** (Ctrl+Z) or **Redo** to revert or reapply recent changes. ![Undo and redo Organize Pages toolbar](./images/organize-ui-undo.png) -6. Persist duplicated pages +5. Persist duplicated pages - Click **Save** or **Save As** to include duplicated pages in the saved/downloaded PDF. -## Expected result - -- Selected pages are duplicated and included in the saved PDF. - ## Programmatic approach You can also duplicate pages programmatically using the Blazor PDF Viewer's `DuplicatePagesAsync` method: @@ -71,7 +63,7 @@ You can also duplicate pages programmatically using the Blazor PDF Viewer's `Dup @code { - SfPdfViewer2? Viewer; + private SfPdfViewer2? Viewer; private async Task DuplicateMethod() { await Viewer?.DuplicatePagesAsync([1,2]); @@ -88,9 +80,9 @@ To enable or disable the **Duplicate Pages** button in the Organize Pages toolba ## Troubleshooting -- If duplicates are not created: verify that the changes are persisted using **Save**. +- If duplicates are not created, verify that the changes are persisted by clicking **Save**. -## Related topics +## See also - [Organize pages toolbar customization](./toolbar) - [Organize pages event reference](./events) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/events.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/events.md index 23b9f7375f..1a5a99113f 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/events.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/events.md @@ -9,7 +9,7 @@ documentation: ug # Organize pages events -Use the page organizer events to react to rotations, rearranges, inserts, deletes, and other page-manipulation actions performed in the page organizer. +Use the page organizer events to react to rotations, rearrangements, inserts, deletes, and other page-manipulation actions performed in the page organizer. | Name | Description | |---|---| @@ -19,7 +19,7 @@ Use the page organizer events to react to rotations, rearranges, inserts, delete ## PageOrganizerSaveRequested -Raised when the user saves changes from the page organizer (for example, after clicking the **Save as** button). The event args include: +Raised when the user saves changes from the page organizer (for example, after clicking the **Save** or **Save as** button). The event args include: - `FileName`: the current PDF file name. - `DownloadDocument`: a base64 string containing the modified PDF bytes. @@ -48,7 +48,7 @@ Raised when the user saves changes from the page organizer (for example, after c Raised when the zoom slider in the page organizer changes value. Enable the slider by setting `PageOrganizerSettings.ShowImageZoomingSlider` to `true`. -Event args: +The event args include: - `PreviousZoom`: previous zoom value. - `CurrentZoom`: current zoom value. @@ -76,6 +76,10 @@ Event args: Raised when the page organizer dialog is opened or closed. +The event args include: + +- `IsVisible`: `true` when the dialog is opened, `false` when it is closed. + {% tabs %} {% highlight razor %} @@ -100,4 +104,4 @@ Raised when the page organizer dialog is opened or closed. - Overall viewer events: [Event](../events) - Annotation events: [Annotation events](../annotation/events) -- Form designer events: [Form field events](../form-designer/events) +- Form designer events: [Form field events](../forms/form-field-events) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/extract-pages.md index bb69f3e431..8dd0d85b2f 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/extract-pages.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/extract-pages.md @@ -1,14 +1,14 @@ --- layout: post title: Extract Pages in Blazor PDF Viewer | Syncfusion -description: Learn here all about Extract Pages in Organize Pages in Syncfusion Blazor PDF Viewer component and more. +description: Learn all about extracting pages using the Organize Pages tool in the Blazor PDF Viewer component and more. platform: document-processing control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- -# Extract pages in Blazor PDF Viewer +# Extract Pages in Blazor PDF Viewer The Blazor PDF Viewer component provides an Extract Pages tool in the Organize Pages UI to export selected pages as a new PDF file. The Extract Pages tool is enabled by default. @@ -19,7 +19,7 @@ To extract pages from the PDF document: 1. Open the Organize Pages panel in the PDF Viewer toolbar. 2. Select the pages you want to extract by clicking the checkboxes next to the page thumbnails. 3. Click the **Extract Document** button in the Organize Pages toolbar. -4. The selected pages will be downloaded as a new PDF document. +4. The viewer downloads the selected pages as a new PDF document. ![Extract Document button](./images/Extract_Pages.gif) @@ -27,7 +27,7 @@ To extract pages from the PDF document: ## Programmatic options and APIs -You can control the Extract Pages experience via settings and invoke extraction through code. +You can also extract pages through code using the following methods: ### Extract pages programmatically @@ -35,6 +35,7 @@ You can extract pages programmatically using the Blazor PDF Viewer's `ExtractPag {% tabs %} {% highlight razor %} +@using System.Collections.Generic @using Syncfusion.Blazor.Buttons Extract @@ -44,10 +45,10 @@ You can extract pages programmatically using the Blazor PDF Viewer's `ExtractPag @code { - SfPdfViewer2? Viewer; + private SfPdfViewer2? Viewer; private async Task ExtractMethod() { - await Viewer?.ExtractPagesAsync([1,2]); + await Viewer?.ExtractPagesAsync(new List { 1, 2 }); } } {% endhighlight %} @@ -59,6 +60,7 @@ You can also extract pages and immediately load the extracted pages back into th {% tabs %} {% highlight razor %} +@using System.Collections.Generic @using Syncfusion.Blazor.Buttons Extract Stream @@ -68,9 +70,9 @@ You can also extract pages and immediately load the extracted pages back into th @code { - SfPdfViewer2? Viewer; - Stream docStream; - + private SfPdfViewer2? Viewer; + Stream? docStream; + private async Task ExtractMethodStream() { docStream = await Viewer?.ExtractPagesAsStreamAsync([1,2]); await Viewer?.LoadAsync(docStream, null); diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/import-pages.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/import-pages.md index ccd235d2bc..d2177a1fbb 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/import-pages.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/import-pages.md @@ -1,7 +1,7 @@ --- layout: post title: Import pages in Organize Pages in Blazor PDF Viewer | Syncfusion -description: How to import pages from another PDF into the current document using the Organize Pages UI in the Syncfusion Blazor PDF Viewer. +description: How to import pages from another PDF into the current document using the Organize Pages UI in the Blazor PDF Viewer. platform: document-processing control: SfPdfViewer documentation: ug @@ -29,11 +29,11 @@ This guide explains how to import pages from another PDF into the current docume 2. Start import - - Click **Import Document** button and choose a valid PDF file from your local file system. + - Click the **Import Document** button and choose a valid PDF file from your local file system. 3. Import pages - - The selected PDF pages will be imported and added to the document. If a page is selected in the current document, the imported pages are inserted after the selected page; otherwise, they are appended at the end of the document. + - The selected PDF pages are imported and added to the document. If a page is selected in the current document, the imported pages are inserted after the selected page; otherwise, they are appended at the end of the document. ![Import Document button](./images/Import_Pages.gif) @@ -54,6 +54,7 @@ You can also import pages from another PDF programmatically using the `InsertPag {% tabs %} {% highlight razor %} @using Syncfusion.Blazor.Buttons +@using System.IO Import @code { - SfPdfViewer2? Viewer; + private SfPdfViewer2? Viewer; private async Task ImportMethod() { byte[] byteArray = System.IO.File.ReadAllBytes("wwwroot/pdf-succinctly.pdf"); @@ -77,6 +78,7 @@ You can also import pages from another PDF programmatically using the `InsertPag {% tabs %} {% highlight razor %} @using Syncfusion.Blazor.Buttons +@using System.IO Import Stream @code { - SfPdfViewer2? Viewer; + private SfPdfViewer2? Viewer; private async Task ImportMethodStream() { byte[] byteArray = System.IO.File.ReadAllBytes("wwwroot/pdf-succinctly.pdf"); - MemoryStream stream = new MemoryStream(byteArray); + using var stream = new MemoryStream(byteArray); await Viewer?.InsertPagesAsync(2, stream, null); } } @@ -103,7 +105,7 @@ You can also import pages from another PDF programmatically using the `InsertPag [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Page%20Organizer/Organize-API-Support/Components/Pages/Home.razor) -## Related topics +## See also - [Organize pages toolbar customization](./toolbar) - [Organize pages event reference](./events) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/insert-blank-pages.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/insert-blank-pages.md index 2e59d0b1c4..2757c9df77 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/insert-blank-pages.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/insert-blank-pages.md @@ -1,14 +1,14 @@ --- layout: post title: Insert blank pages in Organize Pages in Blazor PDF Viewer | Syncfusion -description: How to insert blank pages into a PDF using the Organize Pages UI in the Syncfusion Blazor PDF Viewer. +description: How to insert blank pages into a PDF using the Organize Pages UI in the Blazor PDF Viewer. platform: document-processing control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- -# Insert blank pages using the Organize Pages tool in Blazor +# Insert blank pages using the Organize Pages tool in Blazor PDF Viewer ## Overview @@ -43,10 +43,6 @@ This guide describes inserting new blank pages into a PDF using the **Organize P - Click **Save** or **Save As** to include the blank pages in the exported PDF. -## Expected result - -- Blank page thumbnails appear at the chosen position and are present in any saved or downloaded PDF. - ## Programmatic insert You can also insert blank pages programmatically using the `InsertBlankPagesAsync` method. @@ -62,7 +58,7 @@ You can also insert blank pages programmatically using the `InsertBlankPagesAsyn @code { - SfPdfViewer2? Viewer; + private SfPdfViewer2? Viewer; private async Task InsertBlankMethod() { await Viewer?.InsertBlankPagesAsync(2, 3); @@ -71,7 +67,7 @@ You can also insert blank pages programmatically using the `InsertBlankPagesAsyn {% endhighlight %} {% endtabs %} -In this example, `InsertBlankPagesAsync(2, 3)` inserts 3 blank pages starting at index 2. +In this example, `InsertBlankPagesAsync(2, 3)` calls the API with the page index and the number of blank pages to insert as its two arguments; here, 3 blank pages are inserted starting at index 2. For more details on programmatic support, see [Programmatic support for Organize Pages](./programmatic-support). @@ -82,7 +78,7 @@ For more details on programmatic support, see [Programmatic support for Organize [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Page%20Organizer/Organize-API-Support/Components/Pages/Home.razor) -## Related topics +## See also - [Organize pages toolbar customization](./toolbar) - [Programmatic support for Organize Pages](./programmatic-support) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/mobile-view.md index 133c2f8a9b..d5abdf4036 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/mobile-view.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/mobile-view.md @@ -8,33 +8,39 @@ documentation: ug --- # Organize Pages in Mobile PDF Viewer Blazor -The PDF Viewer provides a mobile-responsive experience for the Organize Pages feature so users can manage pages comfortably on small screens. + +The PDF Viewer provides a mobile-responsive experience for the Organize Pages feature so users can manage pages comfortably on small screens. The mobile UI uses the same APIs as the desktop experience, so you can reuse the [programmatic support](./programmatic-support) when needed. ![Organize pages mobile view](./images/organize-mobile-view.png) ## Mobile toolbar -On mobile, the `Organize Pages` toolbar appears in a bottom-anchored layout for easy one-handed use. It exposes the same core tools as desktop (insert, delete, rotate, etc.) with mobile-optimized spacing and icons. +On mobile, the `Organize Pages` toolbar appears in a bottom-anchored layout for easy one-handed use. It exposes the same core tools as desktop (insert, delete, rotate, and so on) with mobile-optimized spacing and icons. For toolbar configuration, see [Organize pages toolbar customization](./toolbar). ## Context menu Tap-and-hold a page thumbnail to open the context menu. Available actions include: -* **Rotate clockwise** — rotate the page 90° clockwise. -* **Rotate counter-clockwise** — rotate the page 90° counter-clockwise. -* **Rearrange pages** — drag thumbnails to update order. -* **Insert page** — insert a new page at the selected position. -* **Duplicate page** — create a copy of the selected page. -* **Delete page** — remove the selected page. +* **Rotate clockwise** — rotate the page 90° clockwise. See [Rotate pages](./rotate-pages). +* **Rotate counter-clockwise** — rotate the page 90° counter-clockwise. See [Rotate pages](./rotate-pages). +* **Rearrange pages** — drag thumbnails to update the page order. See [Rearrange pages](./reorder-pages). +* **Insert page** — insert a blank page at the selected position. See [Insert blank pages](./insert-blank-pages). +* **Duplicate page** — create a copy of the selected page. See [Duplicate pages](./duplicate-pages). +* **Delete page** — remove the selected page. See [Remove pages](./remove-pages). * **Select all** — select all pages in the document. -* **Import a PDF** — merge pages from another PDF file. -* **Extract pages** — export selected pages as a new PDF. +* **Import a PDF** — merge pages from another PDF file. See [Import pages](./import-pages). +* **Extract pages** — export selected pages as a new PDF. See [Extract pages](./extract-pages). * **Save updates** — apply changes and use **Save** or **Save as** to download the modified PDF. ![Organize mobile options](./images/organize-mobile-options.png) -## Rearranging pages +## Rearrange pages + +To rearrange pages on mobile, tap-and-hold a thumbnail to select it, then drag it to the target position. A drop indicator (a highlighted line between thumbnails) shows the insertion point. Release the thumbnail to drop it at the indicated position. For more details, see [Rearrange pages](./reorder-pages). -To rearrange pages on mobile, tap-and-hold a thumbnail to select it, then drag it to the target position. A drop indicator shows the insertion point. +## See also -The mobile UI ensures users can manage document pages efficiently from any device. +- [Organize pages overview](./overview) +- [Organize pages toolbar customization](./toolbar) +- [Programmatic support for Organize Pages](./programmatic-support) +- [Organize pages events](./events) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/overview.md index 755975de9b..a7288fe7fb 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/overview.md @@ -1,7 +1,7 @@ --- layout: post title: Organize pages in Blazor PDF Viewer | Syncfusion -description: Learn how to reorder, rotate, insert, delete, and save pages with the Syncfusion Blazor PDF Viewer component. +description: Learn how to reorder, rotate, insert, delete, and save pages with the Blazor PDF Viewer component. platform: document-processing control: SfPdfViewer documentation: ug @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Organize pages in Blazor PDF Viewer -The Blazor PDF Viewer includes an Organize Pages panel for preparing documents before sharing. Use this panel to reorder pages, correct orientation, insert or remove pages, and duplicate content without leaving the viewer. +The Blazor PDF Viewer includes an Organize Pages panel for preparing documents before sharing. Use this panel to reorder pages, correct orientation, insert or remove pages, and duplicate pages without leaving the viewer. Check out the following video to learn how to organize pages in a PDF document using the Blazor PDF Viewer. {% youtube "https://www.youtube.com/watch?v=CQwfp5arshQ" %} @@ -21,16 +21,16 @@ To open the Organize Pages panel, load a document and choose **Organize Pages** The Organize Pages panel supports the following actions: -* **Rotate pages**: Fix page orientation in 90-degree increments to correct scanned pages. -* **Rearrange pages**: Drag and drop thumbnails to update the reading order. -* **Insert new pages**: Add blank pages at the required position. -* **Delete pages**: Remove pages that are no longer needed. -* **Duplicate pages**: Duplicate selected pages to reuse content elsewhere in the document. -* **Import a PDF document**: Merge the current document with pages from another PDF file. -* **Select all pages**: Apply bulk actions, such as rotation or deletion, to every page. -* **Save updates**: Review changes in real time and use **Save** or **Save As** to download the revised document. +* **Rotate pages**: Fix page orientation in 90-degree increments to correct scanned pages. See [Rotate pages](./rotate-pages). +* **Rearrange pages**: Drag and drop thumbnails to update the reading order. See [Reorder pages](./reorder-pages). +* **Insert blank pages**: Add blank pages at the required position. See [Insert blank pages](./insert-blank-pages). +* **Delete pages**: Remove pages that are no longer needed. See [Remove pages](./remove-pages). +* **Duplicate pages**: Duplicate selected pages to reuse content elsewhere in the document. See [Duplicate pages](./duplicate-pages). +* **Import a PDF document**: Merge the current document with pages from another PDF file. See [Import pages](./import-pages). +* **Select all pages**: Apply bulk actions, such as rotation or deletion, to every page. See [Extract pages](./extract-pages). +* **Zoom pages**: Change the thumbnail zoom level in the Organize Pages panel. See [Zoom pages](./zoom-pages). -After completing the changes, apply them by selecting **Save** to overwrite the current document or **Save As** to download a new copy that retains the updated page order. +Changes are previewed in real time. After completing the changes, apply them by selecting **Save** to overwrite the loaded document or **Save As** to download a new copy that retains the updated page order. ## See also: diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/programmatic-support.md index ca327db1fe..68e7f3e410 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/programmatic-support.md @@ -1,22 +1,23 @@ --- layout: post title: Programmatic Support Organize Pages in Blazor PDF Viewer | Syncfusion -description: Learn here all about Programmatic Support for Organize Pages in Syncfusion Blazor PDF Viewer control. +description: Learn here all about Programmatic Support for Organize Pages in Blazor PDF Viewer control. platform: document-processing control: SfPdfViewer documentation: ug --- -# Programmatic support for Organize Pages in Blazor +# Programmatic support for Organize Pages in Blazor PDF Viewer -The Blazor PDF Viewer exposes programmatic APIs for organizing pages so applications can integrate page-management workflows (for example: enable/disable organizer, open/close the organizer, and customize behavior). This section documents the available properties, methods, and settings used to control the Organize Pages experience. +The Blazor PDF Viewer exposes programmatic APIs for organizing pages so applications can integrate page-management workflows (for example: enable/disable the Organize Pages panel, open/close the panel, and customize behavior). This section documents the available properties, settings, and events used to control the Organize Pages experience. ## Enable or disable the page organizer -The page organizer feature can be enabled or disabled using the `EnablePageOrganizer` property. By default, the page organizer is enabled. +The page organizer can be enabled or disabled using the `EnablePageOrganizer` property. By default, the page organizer is enabled. {% tabs %} {% highlight razor %} +@using Syncfusion.Blazor.PdfViewer - + @bind-PageOrganizerVisibility="isVisible"> + + @code { private bool isVisible = false; private void OnDocumentLoaded() @@ -50,42 +58,21 @@ Use the `PageOrganizerVisibility` property to control whether the page organizer {% endhighlight %} {% endtabs %} -## Customize page organizer settings +### Toggle from button clicks -The `PageOrganizerSettings` API customizes page-management capabilities. Use it to enable or disable actions (delete, insert, rotate, duplicate, import, rearrange) and to configure thumbnail zoom settings. By default, actions are enabled and standard zoom settings apply. - -{% tabs %} -{% highlight razor %} - - - - - - -{% endhighlight %} -{% endtabs %} - -## Open and close the page organizer panel - -The page organizer panel can be opened or closed programmatically by binding the `PageOrganizerVisibility` property to a state variable. Set it to `true` to open the page organizer panel and `false` to close it. This approach provides easy control over the visibility of page management tools through button clicks or other user interactions. +Bind `PageOrganizerVisibility` with `@bind-` so that updates from the click handlers flow back to the component. {% tabs %} {% highlight razor %} +@using Syncfusion.Blazor.PdfViewer @using Syncfusion.Blazor.Buttons -Open PageOrganizer Pane -Close PageOrganizer Pane +Open PageOrganizer Panel +Close PageOrganizer Panel + @bind-PageOrganizerVisibility="isVisible"> @code { @@ -103,4 +90,36 @@ The page organizer panel can be opened or closed programmatically by binding the {% endhighlight %} {% endtabs %} +## Customize page organizer settings + +The `PageOrganizerSettings` API customizes page-management capabilities. Use it to enable or disable actions (delete, insert, rotate, duplicate, import, rearrange) and to configure thumbnail zoom settings. By default, actions are enabled and standard zoom settings apply. + +{% tabs %} +{% highlight razor %} +@using Syncfusion.Blazor.PdfViewer + + + + + + +{% endhighlight %} +{% endtabs %} + +For information about the page organizer events (such as `PageOrganizerSaveRequested`, `PageOrganizerZoomChanged`, and `PageOrganizerVisibilityChanged`), see [Organize pages events](./events). + [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Page%20Organizer/Organize-API-Support/Components/Pages/Home.razor) + +## See also + +- [Organize pages overview](./overview) +- [Organize pages events](./events) +- [Organize pages toolbar customization](./toolbar) +- [Insert blank pages using the Organize Pages tool](./insert-blank-pages) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/remove-pages.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/remove-pages.md index 91134a04b1..ad2922b76f 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/remove-pages.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/remove-pages.md @@ -1,14 +1,14 @@ --- layout: post title: Remove pages using Organize Pages in Blazor PDF Viewer | Syncfusion -description: How to remove one or more pages from a PDF using the Organize Pages view in the Syncfusion Blazor PDF Viewer. +description: How to remove one or more pages from a PDF using the Organize Pages view in the Blazor PDF Viewer. platform: document-processing -control: PDF Viewer +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- -# Remove pages using the Organize Pages tool in Blazor +# Remove pages using the Organize Pages tool in Blazor PDF Viewer ## Overview @@ -25,7 +25,7 @@ This guide shows how to delete single or multiple pages from a PDF using the **O 1. Open the Organize Pages view - - Click the **Organize Pages** button in the viewer navigation toolbar to open the Organize Pages dialog. + - Click the **Organize Pages** button in the viewer toolbar to open the Organize Pages dialog. 2. Select pages to remove @@ -39,33 +39,24 @@ This guide shows how to delete single or multiple pages from a PDF using the **O ![Delete selected pages using the Organize Pages delete control](./images/organize-ui-delete.png) -4. Multi-page deletion - - - When multiple thumbnails are selected, the Delete action removes all selected pages at once. - -5. Undo or redo deletion +4. Undo or redo deletion - Use **Undo** (Ctrl+Z) to revert the last deletion. - - Use **Redo** (Ctrl+Y) to revert the last undone deletion. + - Use **Redo** (Ctrl+Y) to reapply the last undone deletion. ![Redo Organize Pages toolbar](./images/organize-ui-redo.png) -6. Save the PDF after deletion +5. Save the PDF after deletion - Click **Save** to apply changes to the currently loaded document, or **Save As** / **Download** to download a copy with the removed pages permanently applied. -## Expected result - -- Selected pages are removed from the document immediately in the Organize Pages dialog. -- After clicking **Save** or **Save As**, the resulting PDF reflects the deletions. - ## Enable or disable Remove Pages button To enable or disable the **Remove Pages** button in the Organize Pages toolbar, update the `PageOrganizerSettings`. The following code snippet demonstrates how to enable or disable the delete functionality: {% tabs %} -{% highlight razor tabtitle="Standalone" %} +{% highlight razor %} @using Syncfusion.Blazor.SfPdfViewer Delete Pages +Delete Pages @code { - private SfPdfViewer2 viewer; + private SfPdfViewer2? viewer; - private async Task DeletePageAsync() + private async Task DeletePagesAsync() { // Delete pages at indices 5 and 6 (0-based indexing) int[] pagesToDelete = { 5, 6 }; @@ -115,7 +106,8 @@ You can delete pages programmatically using the `DeletePagesAsync` method. This [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Page%20Organizer/Organize-API-Support/Components/Pages/Home.razor) -## Related topics +## See also - [Organize pages toolbar customization](./toolbar) +- [Programmatic support for Organize Pages](./programmatic-support) - [Organize pages event reference](./events) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/reorder-pages.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/reorder-pages.md index 98f321f467..28fe39144b 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/reorder-pages.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/reorder-pages.md @@ -1,14 +1,14 @@ --- layout: post title: Reorder pages in Organize Pages in Blazor PDF Viewer | Syncfusion -description: How to rearrange pages using drag-and-drop and programmatic methods in the Organize Pages UI of the Syncfusion Blazor PDF Viewer. +description: How to rearrange pages using drag-and-drop in the Organize Pages UI of the Blazor PDF Viewer. platform: document-processing control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- -# Reorder pages using the Organize Pages view in Blazor +# Reorder pages using the Organize Pages view in Blazor PDF Viewer ## Overview @@ -18,14 +18,14 @@ This guide describes how to rearrange pages in a PDF using the **Organize Pages* ## Prerequisites -- Syncfusion Blazor PDF Viewer component installed +- Blazor PDF Viewer component installed - `EnablePageOrganizer` property enabled in the viewer ## Steps 1. Open the Organize Pages view - - Click the **Organize Pages** button in the navigation toolbar to open the page thumbnails panel. + - Click the **Organize Pages** button in the viewer toolbar to open the page thumbnails panel. 2. Reorder a single page @@ -39,7 +39,7 @@ This guide describes how to rearrange pages in a PDF using the **Organize Pages* 4. Verify and undo - - Use **Undo** / **Redo** options to revert accidental changes. + - Use the **Undo** / **Redo** options in the Organize Pages toolbar to revert accidental changes. ![Undo and redo Organize Pages toolbar](./images/organize-ui-undo.png) @@ -47,13 +47,9 @@ This guide describes how to rearrange pages in a PDF using the **Organize Pages* - Click **Save** or download the document using **Save As** to persist the new page sequence. -## Expected result - -- Thumbnails reflect the new page order immediately and saved / downloaded PDFs preserve the reordered sequence. - ## Enable or disable reorder option -To enable or disable the **Reorder pages** option in the Organize Pages, update the `PageOrganizerSettings.CanRearrange`. See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-rearrange-option) for the guidelines +To enable or disable the **Reorder pages** option in the Organize Pages, update the `PageOrganizerSettings.CanRearrange`. See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-rearrange-option) for details ## Troubleshooting @@ -64,7 +60,7 @@ To enable or disable the **Reorder pages** option in the Organize Pages, update [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Page%20Organizer/Page-Organizer-Settings) -## Related topics +## See also - [Organize pages toolbar customization](./toolbar) - [Organize pages event reference](./events) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/rotate-pages.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/rotate-pages.md index b92c9491ea..74968ff339 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/rotate-pages.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/rotate-pages.md @@ -1,41 +1,41 @@ --- layout: post title: Rotate pages in Organize Pages (Blazor PDF Viewer) | Syncfusion -description: Learn how to rotate one or more pages using the Organize Pages UI in the Syncfusion Blazor PDF Viewer and more. +description: Learn how to rotate one or more pages using the Organize Pages UI in the Blazor PDF Viewer and more. platform: document-processing -control: PDF Viewer +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- -# Rotate pages using the Organize Pages view in Blazor +# Rotate pages using the Organize Pages view in Blazor PDF Viewer ## Overview -This guide explains how to rotate individual or multiple pages using the **Organize Pages** UI in the Syncfusion Blazor PDF Viewer. Supported rotations: 90°, 180°, 270° clockwise and counter-clockwise. +This guide explains how to rotate individual or multiple pages using the **Organize Pages** UI in the Blazor PDF Viewer. Each click rotates the selected page(s) by 90°; repeated clicks achieve 180° and 270° rotations. **Outcome**: Pages are rotated in the viewer and persisted when saved or exported. ## Prerequisites -- Syncfusion Blazor PDF Viewer (SfPdfViewer2) installed +- Blazor PDF Viewer (SfPdfViewer2) installed - PDF Viewer configured with `DocumentPath` property or document loaded via `LoadAsync()` method ## Steps 1. Open the Organize Pages view - - Click the **Organize Pages** button in the viewer toolbar to open the Organize Pages dialog. + - Click the **Organize Pages** button in the viewer toolbar to open the Organize Pages panel. 2. Select pages to rotate - - Click a single thumbnail or use Shift+click/Ctrl+click to select multiple pages. + - Click a single thumbnail, or use Shift+click or Ctrl+click to select multiple pages. 3. Rotate pages using toolbar buttons - Use **Rotate Right** to rotate 90° clockwise. - Use **Rotate Left** to rotate 90° counter-clockwise. - - Repeat the action to achieve 180° or 270° rotations. + - Click the button again to apply additional 90° increments. ![Rotate Pages](./images/rotate-pages.png) @@ -45,8 +45,8 @@ This guide explains how to rotate individual or multiple pages using the **Organ 5. Undo or reset rotation - - Use **Undo** (Ctrl+Z) to revert the last rotation. - - Use the reverse rotation button (Rotate Left/Rotate Right) until the page returns to 0°. + - Use **Undo** (Ctrl+Z) or **Redo** (Ctrl+Y) in the Organize Pages toolbar to revert or reapply the last rotation. + - Alternatively, click **Rotate Left** or **Rotate Right** again to step the page in 90° increments. ![Undo and redo Organize Pages toolbar](./images/organize-ui-undo.png) @@ -56,12 +56,12 @@ This guide explains how to rotate individual or multiple pages using the **Organ ## Expected result -- Pages rotate in-place in the Organize Pages dialog when using the rotate controls. +- Pages rotate in-place in the Organize Pages panel when using the rotate controls. - Saving or exporting the document preserves the new orientation. ## Enable or disable Rotate Pages button -To enable or disable the **Rotate Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_PageOrganizerSettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-rotate-option) for the guidelines +To enable or disable the **Rotate Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_PageOrganizerSettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-rotate-option) for details ## Troubleshooting @@ -70,7 +70,7 @@ To enable or disable the **Rotate Pages** button in the Organize Pages toolbar, [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Page%20Organizer/Page-Organizer-Settings) -## Related topics +## See also -- [Organize page toolbar customization](./toolbar) +- [Organize pages toolbar customization](./toolbar) - [Organize pages event reference](./events) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/toolbar.md index 3d5f05d4b1..ffde1af804 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/toolbar.md @@ -1,13 +1,13 @@ --- layout: post title: Organize Page Toolbar in Blazor PDF Viewer control | Syncfusion -description: Learn here all about how to Organize Page Toolbar Customization in Syncfusion Blazor PDF Viewer and more. +description: Learn here all about how to Organize Page Toolbar Customization in Blazor PDF Viewer and more. platform: document-processing control: SfPdfViewer documentation: ug --- -# Organize page toolbar +# Organize Pages toolbar The PDF Viewer lets applications customize the Organize Pages toolbar to enable or disable tools according to project requirements. Use the [PageOrganizerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_PageOrganizerSettings) to control each tool's interactivity and behavior. @@ -56,13 +56,12 @@ The `CanRotate` property controls the rotate tool visibility. Set it to `false` {% endhighlight %} {% endtabs %} -## Enable or disable the Duplicate option +## Enable or disable the duplicate option -The `CanDuplicate` property controls the Duplicate tool visibility. Set it to `false` to disable the Duplicate tool. +The `CanDuplicate` property controls the duplicate tool visibility. Set it to `false` to disable the duplicate tool. {% tabs %} {% highlight razor %} - @@ -78,7 +77,6 @@ The `CanImport` property controls the import tool visibility. Set it to `false` {% tabs %} {% highlight razor %} - @@ -90,11 +88,10 @@ The `CanImport` property controls the import tool visibility. Set it to `false` ## Enable or disable the extract option -The `CanExtractPages` property controls the extract tool visibility. Set it to `false` to disable the extract tool. +The `CanExtractPages` property controls the extract pages tool visibility. Set it to `false` to disable the extract pages tool. {% tabs %} {% highlight razor %} - @@ -106,11 +103,10 @@ The `CanExtractPages` property controls the extract tool visibility. Set it to ` ## Enable or disable the rearrange option -The `CanRearrange` property controls whether pages can be rearranged. Set it to `false` to disable page reordering. +The `CanRearrange` property controls the rearrange tool visibility. Set it to `false` to disable the rearrange tool. {% tabs %} {% highlight razor %} - @@ -120,4 +116,18 @@ The `CanRearrange` property controls whether pages can be rearranged. Set it to {% endhighlight %} {% endtabs %} +## Configure multiple options + +The `PageOrganizerSettings` properties can be combined to enable or disable multiple tools at once. + +{% tabs %} +{% highlight razor %} + + + +{% endhighlight %} +{% endtabs %} + [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Page%20Organizer/Page-Organizer-Settings) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/zoom-pages.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/zoom-pages.md index af9e91906c..bcb555dc10 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/zoom-pages.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/zoom-pages.md @@ -1,9 +1,9 @@ --- layout: post title: Zoom pages in Organize Pages in Blazor PDF Viewer | Syncfusion -description: How to adjust thumbnail zoom levels inside the Organize Pages UI of the Syncfusion Blazor PDF Viewer. +description: How to adjust thumbnail zoom levels inside the Organize Pages UI of the Blazor PDF Viewer. platform: document-processing -control: PDF Viewer +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- @@ -12,9 +12,7 @@ domainurl: ##DomainURL## ## Overview -This guide explains how to change the thumbnail zoom level in the **Organize Pages** UI so you can view more detail or an overview of more pages. - -**Outcome**: Page thumbnails resize interactively to suit your task. +This guide explains how to change the thumbnail zoom level in the **Organize Pages** UI so you can view more detail or see more pages at once. ## Prerequisites @@ -37,8 +35,6 @@ This guide explains how to change the thumbnail zoom level in the **Organize Pag ![Thumbnail zoom slider and preview](./images/organize-zoom-panel.png) -4. Choose an optimal zoom level - - Select a zoom level that balances page detail and the number of visible thumbnails for your task. ## Expected result @@ -66,9 +62,9 @@ To customize the thumbnail zoom behavior, use the [`PageOrganizerSettings`](http N> The `ImageZoomMin` and `ImageZoomMax` properties accept values from 2 to 5 only. -## Show or hide Zoom Pages button +## Show or hide the Zoom Pages slider -To enable or disable the **Zoom Pages** button in the Organize Pages toolbar, set the `ShowImageZoomingSlider` property in [`PageOrganizerSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_PageOrganizerSettings). +To show or hide the **Zoom Pages** slider in the Organize Pages toolbar, set the `ShowImageZoomingSlider` property in [`PageOrganizerSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_PageOrganizerSettings). ## Troubleshooting @@ -77,7 +73,7 @@ To enable or disable the **Zoom Pages** button in the Organize Pages toolbar, se [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Page%20Organizer/Page-Organizer-Settings) -## Related topics +## See also - [Organize pages toolbar customization](./toolbar) - [Organize pages event reference](./events) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/overview.md index b36937e77f..7e911af18a 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/overview.md @@ -1,7 +1,7 @@ --- layout: post title: Overview of Blazor PDF Viewer Component | Syncfusion -description: Learn about Blazor SfPdfViewer including, performance, offline loading, annotations, form filling, printing, and support for Server & WebAssembly. +description: Learn about Blazor SfPdfViewer including performance, offline loading, annotations, form filling, printing, and support for Server & WebAssembly. platform: document-processing control: SfPdfViewer documentation: ug @@ -15,34 +15,39 @@ The Blazor `SfPdfViewer` component enables viewing, annotating, printing, and do ## Key Features -* Accurate, reliable rendering of PDF pages. -* Easy page navigation with: - * [Thumbnail page view](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/page-thumbnail) - * [Bookmark panel](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/bookmark) - * [Hyperlink navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/hyperlink) - * [Table of contents navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/table-of-content) -* Core interactions: - * [Zooming](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/magnification) and [panning](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interaction#panning-mode) - * [Text searching](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/text-search) - * Text selection and copy -* [Print](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/print) PDF files. -* Annotate PDFs with: - * [Highlight](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/annotation/text-markup-annotation#highlight-a-text), [underline](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/annotation/text-markup-annotation#underline-a-text), and [strikethrough](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/annotation/text-markup-annotation#strikethrough-a-text) text markup - * [Shape annotations](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/annotation/shape-annotation): rectangle, circle, polygon, line, and arrow - * [Stamp annotations](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/annotation/stamp-annotation): built-in and custom stamps - * [Measurement annotations](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/annotation/measurement-annotation) - * [Free text annotations](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/annotation/free-text-annotation) - * [Redaction annotations](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/redaction/overview) - * [Comments](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/annotation/comments) and [sticky notes](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/annotation/sticky-notes-annotation) -* [Form filling](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/form-filling) -* [Form designer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/form-designer) -* [Handwritten signature](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/hand-written-signature) +### Page Navigation +* [Thumbnail page view](./interactive-pdf-navigation/page-thumbnail) +* [Bookmark panel](./interactive-pdf-navigation/bookmark) +* [Hyperlink navigation](./interactive-pdf-navigation/hyperlink) +* [Table of contents navigation](./interactive-pdf-navigation/table-of-content) + +### Core Interactions +* [Zooming](./magnification) and [panning](./interaction#panning-mode) +* [Text searching](./text-search/overview) +* [Text selection and copy](./text-selection/overview) +* [Print](./print/overview) PDF files. + +### Annotations +* [Highlight](./annotation/text-markup/highlight-annotation), [underline](./annotation/text-markup/underline-annotation), and [strikethrough](./annotation/text-markup-annotation#strikethrough-a-text) text markup +* Shape annotations including [rectangle](./annotation/shape/rectangle-annotation), [circle](./annotation/shape/circle-annotation), [polygon](./annotation/shape/polygon-annotation), [line](./annotation/shape/line-annotation), and [arrow](./annotation/shape/arrow-annotation) +* [Stamp annotations](./annotation/stamp-annotation) with built-in and custom stamps +* Measurement annotations including [area](./annotation/measurement/area-annotation), [distance](./annotation/measurement/distance-annotation), [perimeter](./annotation/measurement/perimeter-annotation), [radius](./annotation/measurement/radius-annotation) and [volume](./annotation/measurement/volume-annotation) +* [Free text annotations](./annotation/free-text-annotation) +* [Comments](./annotation/comments) and [sticky notes](./annotation/sticky-notes-annotation) +* [Redaction annotations](./redaction/overview) + +### Forms +* [Form filling](./forms/form-filling) +* [Form designer](./forms/form-designer) + +### Signatures +* [Handwritten signature](./hand-written-signature) ## Supported Features: Desktop vs Mobile The following table summarizes feature support on desktop and mobile devices. -| Feature | Desktop | Mobile devices | +| Feature | Desktop | Mobile | |--|--|--| | Keyboard interaction | Yes | No | | Open file from a different origin | Yes | Yes | @@ -66,4 +71,4 @@ The following table summarizes feature support on desktop and mobile devices. | Modern Navigation Panel | Yes | Yes | | Organize Pages | Yes | Yes | -N> See the [Blazor SfPdfViewer feature tour](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) for a concise overview of capabilities and the [Blazor SfPdfViewer demo](https://liveviewereditorblazorapp.azurewebsites.net/demos/pdf-viewer/blazor-server/pdf-viewer/default-functionalities) to explore core features interactively. \ No newline at end of file +N> See the [Blazor SfPdfViewer feature tour](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) for a concise overview of capabilities; the [Blazor SfPdfViewer demo](https://liveviewereditorblazorapp.azurewebsites.net/demos/pdf-viewer/blazor-server/pdf-viewer/default-functionalities) is also available to explore core features interactively. \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/print.md b/Document-Processing/PDF/PDF-Viewer/blazor/print.md index 2506758b6e..32eee66231 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/print.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/print.md @@ -1,7 +1,7 @@ --- layout: post title: Print in Blazor SfPdfViewer Component | Syncfusion -description: Learn how to print PDF files in the Syncfusion Blazor SfPdfViewer component using the toolbar or programmatically. +description: Learn how to print PDF files in the Blazor SfPdfViewer component using the toolbar or programmatically. platform: document-processing control: SfPdfViewer documentation: ug @@ -9,7 +9,9 @@ documentation: ug # Print in Blazor SfPdfViewer Component -The `SfPdfViewer` component supports printing the loaded PDF by default. Enable or disable the toolbar Print option by setting the [EnablePrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnablePrint) property. Code examples in this topic use the local component reference name shown in the snippets (for example, `SfPdfViewer2`); the component class is `SfPdfViewer`. +The `SfPdfViewer` component supports printing the loaded PDF by default. Enable or disable the toolbar Print option by setting the [EnablePrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnablePrint) property. The component tag used in the examples is `SfPdfViewer2`; the component class is `SfPdfViewer`. + +## Toolbar print ```cshtml @@ -28,6 +30,8 @@ The `SfPdfViewer` component supports printing the loaded PDF by default. Enable ![Print a PDF using the SfPdfViewer](../blazor-classic/images/blazor-pdfviewer-print.png) +## Programmatic print + ```cshtml @using Syncfusion.Blazor.SfPdfViewer @@ -41,8 +45,7 @@ The `SfPdfViewer` component supports printing the loaded PDF by default. Enable @code{ SfPdfViewer2 Viewer; - public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf"; - + public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; public async void OnClick(MouseEventArgs args) { await Viewer.PrintAsync(); @@ -53,7 +56,7 @@ The `SfPdfViewer` component supports printing the loaded PDF by default. Enable ## EnablePrintRotation -[EnablePrintRotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnablePrintRotation) controls whether landscape pages are auto-rotated to best fit when printing. Default: true. Set to false to preserve the original page orientation and suppress automatic rotation during print. +[EnablePrintRotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnablePrintRotation) controls whether landscape pages are automatically rotated to best fit when printing. Default: true. Set to false to preserve the original page orientation and suppress automatic rotation during print. ```cshtml @@ -72,10 +75,10 @@ The `SfPdfViewer` component supports printing the loaded PDF by default. Enable ## Print modes -[PrintMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_PrintMode) specifies how the print dialog is opened. Default: PrintMode.Default (prints from the same window). Supported values: +[PrintMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_PrintMode) specifies how the print dialog is opened. Default value: `PrintMode.Default` (prints from the same window). Supported values: - [PrintMode.Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintMode.html#Syncfusion_Blazor_SfPdfViewer_PrintMode_Default): Opens the print dialog in the same window. -- [PrintMode.NewWindow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintMode.html#Syncfusion_Blazor_SfPdfViewer_PrintMode_NewWindow): Opens the print dialog from a new browser window/tab, which can be useful depending on browser popup policies. +- [PrintMode.NewWindow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintMode.html#Syncfusion_Blazor_SfPdfViewer_PrintMode_NewWindow): Opens the print dialog from a new browser window/tab. Use this option when browser popup policies may block the same-window print dialog. ```cshtml @@ -94,7 +97,7 @@ The `SfPdfViewer` component supports printing the loaded PDF by default. Enable ## PrintScaleFactor -[PrintScaleFactor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_PrintScaleFactor) sets the scale used when rendering pages for printing. By default, `PrintScaleFactor` is `1.0` (prints at the on-screen scale). The valid range is `0.5` to `5.0`. Increasing the scale can improve clarity for documents with small page dimensions but may increase print processing time and memory usage. +[PrintScaleFactor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_PrintScaleFactor) sets the scale used when rendering pages for printing. By default, `PrintScaleFactor` is `1.0` (prints at the on-screen scale). The valid range is `0.5` to `5.0`. Increasing the scale can improve clarity for documents with small page dimensions. Larger values may also increase print processing time and memory usage. ```cshtml @@ -122,11 +125,7 @@ The following events are available for print in the SfPdfViewer component. ### PrintStart Event -The [PrintStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_PrintStart) event triggers when a print action begins. - -#### Event arguments - -See [PrintStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintStartEventArgs.html) for details such as `FileName` and the `Cancel` option. +The [PrintStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_PrintStart) event triggers when a print action begins. See [PrintStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintStartEventArgs.html) for details such as `FileName` and the `Cancel` option. - If the [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintStartEventArgs.html#Syncfusion_Blazor_SfPdfViewer_PrintStartEventArgs_Cancel) property is set to `true` in the `PrintStart` event handler, the print operation is canceled and the print dialog does not open. - By default, `Cancel` is `false`. @@ -140,10 +139,11 @@ The following example illustrates how to handle the `PrintStart` event. @code{ - private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succintly.pdf"; + private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; public async Task PrintStart(PrintStartEventArgs args) { Console.WriteLine($"Printed File Name: {args.FileName}"); + // args.Cancel = true; // Uncomment to cancel the print operation } } @@ -151,11 +151,7 @@ The following example illustrates how to handle the `PrintStart` event. ### PrintEnd Event -The [PrintEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_PrintEnd) event triggers when a print action completes. - -#### Event arguments - -See [PrintEndEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintEndEventArgs.html) for details such as `FileName`. +The [PrintEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_PrintEnd) event triggers when a print action completes. See [PrintEndEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintEndEventArgs.html) for details such as `FileName`. The following example illustrates how to handle the `PrintEnd` event. @@ -166,7 +162,7 @@ The following example illustrates how to handle the `PrintEnd` event. @code{ - private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succintly.pdf"; + private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; public async Task PrintEnd(PrintEndEventArgs args) { Console.WriteLine($"Printed File Name: {args.FileName}"); diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/print/enable-print-rotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/print/enable-print-rotation.md index 9c9b4dcd5a..83db983e4c 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/print/enable-print-rotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/print/enable-print-rotation.md @@ -1,27 +1,32 @@ --- layout: post title: Enable Print Rotation in Blazor PDF Viewer | Syncfusion -description: Learn how to enable print rotation for landscape documents in the Syncfusion Blazor PDF Viewer component. +description: Learn how to enable print rotation for landscape documents in the Blazor PDF Viewer component. platform: document-processing -control: Print +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- -# Enable print rotation in Blazor PDF Viewer +# Enable Print Rotation in Blazor PDF Viewer -The [EnablePrintRotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnablePrintRotation) property in the Blazor PDF Viewer controls how landscape pages are handled during printing. When enabled, the viewer automatically rotates landscape-oriented pages to match the printer’s paper orientation. This ensures that content fits properly on the page and avoids clipping. +The [EnablePrintRotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnablePrintRotation) property in the Blazor PDF Viewer controls how landscape pages are handled during printing. When enabled, the viewer automatically rotates landscape-oriented pages to match the printer's paper orientation, so the content fits within the paper margins and is not clipped. Portrait pages are unaffected. -By default, this property is set to **true**, meaning landscape pages are automatically adjusted for optimal printing. If set to **false**, pages retain their original orientation and are printed without any automatic rotation. +| Property | Type | Default | Applies to | +|----------|------|---------|------------| +| `EnablePrintRotation` | `bool` | `true` | `SfPdfViewer2` (via `PdfViewerBase`) | + +When set to `false`, pages retain their original orientation and are printed without any automatic rotation. ## When to use print rotation -Enable this feature when printing documents that include landscape pages and you want them to align with the printer’s paper orientation. This helps improve readability and ensures that content is not cut off during printing. +Enable this feature when printing documents that include landscape pages and you want them to align with the printer's paper orientation. This helps improve readability and ensures that content is not cut off during printing. Rotation is applied regardless of the [print mode](./print-modes) (Default or NewWindow). ## Enabling print rotation -You can enable print rotation during the initialization of the PDF Viewer component by setting the `EnablePrintRotation` property to **true**. +The `EnablePrintRotation` property is set during the initialization of the PDF Viewer component. Since the default is `true`, explicit configuration is normally used only to disable rotation. +The following example keeps the default behavior. {% tabs %} {% highlight razor %} @@ -38,6 +43,25 @@ You can enable print rotation during the initialization of the PDF Viewer compon {% endhighlight %} {% endtabs %} +## Disabling print rotation + +Set `EnablePrintRotation` to `false` to print pages in their original orientation without any automatic rotation. + +{% tabs %} +{% highlight razor %} +@using Syncfusion.Blazor.SfPdfViewer + + + +@code{ + public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; +} +{% endhighlight %} +{% endtabs %} + ![Print rotation demo showing landscape pages rotated for printing](../images/print-rotate.gif) [View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Print) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/print/events.md b/Document-Processing/PDF/PDF-Viewer/blazor/print/events.md index 1c7b244f51..9642e6cf54 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/print/events.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/print/events.md @@ -1,83 +1,134 @@ --- layout: post title: Print Events in Blazor PDF Viewer | Syncfusion -description: Learn how to configure print events and track usage and implements workflows in the Syncfusion Blazor PDF Viewer component. +description: Learn how to configure print events and track usage and implements workflows in the Blazor PDF Viewer component. platform: document-processing -control: Print +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- # Print events in Blazor PDF Viewer -This page lists each event emitted by the Blazor PDF Viewer's print feature, the argument schema, and the minimal behavior notes needed for implementation. +This page lists each event emitted by the Blazor PDF Viewer's print feature, the argument schema, and the minimal usage notes. ## Events | Name | Description | |--------------|-------------| -| [PrintStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_PrintStart) | Raised when a print action begins. Use the event to log activity or cancel printing. | -| [PrintEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_PrintEnd) | Raised after a print action completes. Use the event to notify users or clean up resources. | +| [PrintStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_PrintStart) | Raised when a print operation begins. Use the event to log activity or cancel printing. | +| [PrintEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_PrintEnd) | Raised after a print operation completes. Use the event to notify users or clean up resources. | -### PrintStart Event +### PrintStart -The [PrintStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_PrintStart) event triggers when a print action begins. +The [PrintStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_PrintStart) event triggers when a print operation begins. #### Event arguments -See [PrintStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintStartEventArgs.html) for details such as `FileName` and the `Cancel` option. +The [PrintStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintStartEventArgs.html) exposes the following members: -- If the [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintStartEventArgs.html#Syncfusion_Blazor_SfPdfViewer_PrintStartEventArgs_Cancel) property is set to `true` in the `PrintStart` event handler, the print operation is canceled and the print dialog does not open. +| Property | Type | Description | +|----------|------|-------------| +| `FileName` | `string` | The name of the PDF file being printed. | +| `Cancel` | `bool` | Set to `true` to cancel the print operation and prevent the print dialog from opening. | + +- If the `Cancel` property is set to `true` in the `PrintStart` event handler, the print operation is canceled and the print dialog does not open. - By default, `Cancel` is `false`. The following example illustrates how to handle the `PrintStart` event. {% tabs %} {% highlight razor %} -@using Syncfusion.Blazor.SfPdfViewer - +@using Syncfusion.Blazor.SfPdfViewer + -@code{ - private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succintly.pdf"; - public async Task PrintStart(PrintStartEventArgs args) +@code{ + private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; + public async Task PrintStart(PrintStartEventArgs args) { Console.WriteLine($"Printed File Name: {args.FileName}"); - } + } +} +{% endhighlight %} +{% endtabs %} + +The following example shows how to cancel the print operation from the `PrintStart` handler. + +{% tabs %} +{% highlight razor %} +@using Syncfusion.Blazor.SfPdfViewer + + + +@code{ + private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; + public async Task PrintStart(PrintStartEventArgs args) + { + args.Cancel = true; + Console.WriteLine($"Print canceled for file: {args.FileName}"); + } } {% endhighlight %} {% endtabs %} -### PrintEnd Event +### PrintEnd -The [PrintEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_PrintEnd) event triggers when a print action completes. +The [PrintEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_PrintEnd) event triggers when a print operation completes. #### Event arguments -See [PrintEndEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintEndEventArgs.html) for details such as `FileName`. +The [PrintEndEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintEndEventArgs.html) exposes the following member: + +| Property | Type | Description | +|----------|------|-------------| +| `FileName` | `string` | The name of the PDF file that was printed. | The following example illustrates how to handle the `PrintEnd` event. {% tabs %} {% highlight razor %} -@using Syncfusion.Blazor.SfPdfViewer - +@using Syncfusion.Blazor.SfPdfViewer + -@code{ - private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succintly.pdf"; - public async Task PrintEnd(PrintEndEventArgs args) +@code{ + private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; + public async Task PrintEnd(PrintEndEventArgs args) { Console.WriteLine($"Printed File Name: {args.FileName}"); - } + } } {% endhighlight %} {% endtabs %} -[View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Print) +The following example shows how to handle both `PrintStart` and `PrintEnd` together. + +{% tabs %} +{% highlight razor %} +@using Syncfusion.Blazor.SfPdfViewer + + + +@code{ + private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; + public async Task OnPrintStart(PrintStartEventArgs args) + { + Console.WriteLine($"Print started: {args.FileName}"); + } + public async Task OnPrintEnd(PrintEndEventArgs args) + { + Console.WriteLine($"Print completed: {args.FileName}"); + } +} +{% endhighlight %} +{% endtabs %} + +[View the print sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Print) ## See also -- [Overview](./overview) +- [Print overview](./overview) - [Enable print rotation](./enable-print-rotation) - [Print modes](./print-modes) + diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/print/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/print/overview.md index 18cf35bc24..f5be8be779 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/print/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/print/overview.md @@ -1,9 +1,9 @@ --- layout: post title: Print PDF in Blazor PDF Viewer | Syncfusion -description: Enable and customize printing, configure print events, cancel print, and monitor printing in the Syncfusion Blazor PDF Viewer component. +description: Enable and customize printing, configure print events, cancel print, and monitor printing in the Blazor PDF Viewer component. platform: document-processing -control: Print +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- @@ -18,7 +18,7 @@ Select **Print** in the built-in toolbar to open the browser print dialog. ## Enable or Disable Print in Blazor PDF Viewer -The Syncfusion Blazor PDF Viewer component lets users print a loaded PDF document through the built-in toolbar or programmatic calls. Control whether printing is available by setting the [EnablePrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnablePrint) property (`true` enables printing; `false` disables it). +Control whether printing is available by setting the [EnablePrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnablePrint) property (`true` enables printing; `false` disables it). The following Blazor example renders the PDF Viewer with printing disabled. @@ -39,12 +39,15 @@ The following Blazor example renders the PDF Viewer with printing disabled. ## Print programmatically in Blazor PDF Viewer -To start printing from code, call the [PrintAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer_PrintAsync) method after the document is fully loaded. This approach is useful when wiring up custom UI or initiating printing automatically; calling print before the document finishes loading can result in no output or an empty print dialog. +To start printing from code, call the [PrintAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer_PrintAsync) method after the document is fully loaded. This approach is useful when wiring up custom UI or initiating printing automatically. + +> If called before the document finishes loading, `PrintAsync()` produces no output or an empty print dialog. {% tabs %} {% highlight razor %} @using Syncfusion.Blazor.SfPdfViewer @using Syncfusion.Blazor.Buttons +@using Microsoft.AspNetCore.Components.Web Print @code{ - SfPdfViewer2 Viewer; - public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf"; + private SfPdfViewer2? Viewer; + public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; - public async void OnClick(MouseEventArgs args) + public async Task OnClick(MouseEventArgs args) { await Viewer.PrintAsync(); } diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/print/print-modes.md b/Document-Processing/PDF/PDF-Viewer/blazor/print/print-modes.md index b76bb5321e..def4b914ca 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/print/print-modes.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/print/print-modes.md @@ -1,21 +1,21 @@ --- layout: post title: Print Modes in Blazor PDF Viewer | Syncfusion -description: Learn how to configure print modes for PDF Documents in the Syncfusion Blazor PDF Viewer component and more. +description: Learn how to configure print modes for PDF Documents in the Blazor PDF Viewer component and more. platform: document-processing -control: Print +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- # Print Modes in Blazor PDF Viewer -The [`PrintMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_PrintMode) property determines how the print dialog is opened in the PDF Viewer. By default, it is set to PrintMode.Default, which prints the document from the same browser window. +The [`PrintMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_PrintMode) property determines how the print dialog is opened in the PDF Viewer. By default, it is set to `PrintMode.Default`, which opens the print dialog from the same browser window. ## Available print modes -- [PrintMode.Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintMode.html): Prints the document from the current browser window. -- [PrintMode.NewWindow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintMode.html): Opens the print dialog in a new window or tab. This may be affected by browser pop-up blockers. +- [PrintMode.Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintMode.html#Syncfusion_Blazor_SfPdfViewer_PrintMode_Default): Opens the print dialog from the current browser window. +- [PrintMode.NewWindow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintMode.html#Syncfusion_Blazor_SfPdfViewer_PrintMode_NewWindow): Opens the print dialog in a new browser window or tab. This mode may be blocked by browser pop-up blockers. ## Set print mode @@ -40,7 +40,7 @@ You can configure the print mode during the initialization of the PDF Viewer com ![Print in New Window](../images/print-newwindow.gif) -> **Note:** Ensure that browser pop-up blockers allow new windows or tabs when using `PrintMode.NewWindow`. +> Disable the browser's pop-up blocker for the site, or allow new windows/tabs, when using `PrintMode.NewWindow`. [View samples on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Print) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/redaction/create-programmatically.md b/Document-Processing/PDF/PDF-Viewer/blazor/redaction/create-programmatically.md index 7b288562da..f557349dc6 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/redaction/create-programmatically.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/redaction/create-programmatically.md @@ -1,7 +1,7 @@ --- layout: post title: Programmatic redaction in Blazor SfPdfViewer | Syncfusion -description: Learn how to add, edit, delete, and apply redaction annotations programmatically in the Syncfusion Blazor SfPdfViewer component. +description: Learn how to add, edit, delete, and apply redaction annotations programmatically in the Blazor SfPdfViewer component. platform: document-processing control: SfPdfViewer documentation: ug @@ -13,7 +13,7 @@ documentation: ug Use the [AddAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) method to add a redaction annotation by creating a [PdfAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfAnnotation.html) instance. Configure redaction-specific settings with [RedactionProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.RedactionProperties.html). -The example below creates a redaction annotation with custom appearance, redaction options, and position on the first page. +Page numbers use a 0-based index, where `0` represents the first page. The example below creates a redaction annotation with custom appearance, redaction options, and a position on the first page. ```cshtml @page "/" @@ -75,7 +75,33 @@ The **RedactionProperties** settings control the annotation’s appearance and b ## Delete redaction annotations programmatically -Delete redaction annotations programmatically using the [DeleteAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteAnnotationsAsync) method by passing the annotation ID or object reference. +Delete redaction annotations programmatically using the [DeleteAnnotationsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteAnnotationsAsync) method. + +The following example retrieves all annotations, locates the first redaction annotation, and removes it from the viewer. + +````cshtml +@page "/" + +Delete Redaction + + + + +@code{ + private string DocumentPath { get; set; } = "wwwroot/data/Annotations.pdf"; + private SfPdfViewer2? SfPdfViewer2; + + private async Task DeleteRedaction() + { + List annotations = await SfPdfViewer2.GetAnnotationsAsync(); + PdfAnnotation redaction = annotations.FirstOrDefault(a => a.AnnotationProperties is RedactionProperties); + if (redaction != null) + { + await SfPdfViewer2.DeleteAnnotationsAsync(new List { redaction }); + } + } +} +```` For additional examples, see [Delete annotation programmatically](../annotation/text-markup-annotation#delete-annotation-programmatically). @@ -130,7 +156,7 @@ The following example retrieves an existing redaction annotation, updates proper ## Add page redactions programmatically -Entire pages can be marked for redaction using the [AddPageRedactionsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddPageRedactionsAsync_System_Collections_Generic_List_System_Int32__) method. +Entire pages can be marked with redaction annotations using the [AddPageRedactionsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddPageRedactionsAsync_System_Collections_Generic_List_System_Int32__) method. This is useful when the full page contains confidential data. @@ -165,7 +191,7 @@ The following example adds redaction annotations to specific pages in a PDF usin ## Apply redaction programmatically -Use the [RedactAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_RedactAsync) method to apply all redaction annotations. +Use the [RedactAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_RedactAsync) method to permanently apply all redaction annotations to the document. N> Applying redaction is permanent and cannot be undone. Consider saving a copy of the document before applying redaction. @@ -195,7 +221,7 @@ N> Applying redaction is permanent and cannot be undone. Consider saving a copy Use [PdfViewerRedactionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerRedactionSettings.html) inside the viewer to set default redaction properties for newly created annotations, including fill color, overlay text, font style, and alignment. -These defaults apply to newly added annotations created from the toolbar unless overridden. +These defaults apply to annotations created from the toolbar unless overridden. The following example shows how to set default properties for redaction annotations using [PdfViewerRedactionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerRedactionSettings.html). @@ -211,8 +237,8 @@ The following example shows how to set default properties for redaction annotati IsRepeat="false" FillColor="#F8F8F8" FontColor="#333333" - FontSize="14" - FontFamily="Symbol" + FontSize="14" + FontFamily="Symbol" TextAlignment="TextAlignment.Right" /> diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/redaction/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/blazor/redaction/mobile-view.md index 4244a27a0e..e00b84e4a6 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/redaction/mobile-view.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/redaction/mobile-view.md @@ -1,7 +1,7 @@ --- layout: post title: Redaction in mobile view in Blazor PDF Viewer | Syncfusion -description: Learn how to add, customize, and apply redactions in mobile view using the Syncfusion Blazor PDF Viewer with a complete toolbar setup and redaction workflow. +description: Learn how to add, customize, and apply redactions in mobile view using the Blazor PDF Viewer with a complete toolbar setup and redaction workflow. platform: document-processing control: SfPdfViewer documentation: ug @@ -13,7 +13,7 @@ Redaction mode in mobile view provides a touch-optimized toolbar and tools to ma ![Redaction in mobile view](./redaction-annotations-images/redaction-mobile-view.png) -N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens. +N> In mobile view, the redaction toolbar appears at the bottom of the viewer for thumb-friendly access. The mobile layout activates automatically on small screens. ## Enable redaction in mobile view @@ -32,7 +32,7 @@ Configure the viewer toolbar to include redaction tools for both desktop and mob @code { - SfPdfViewer2? SfPdfViewer2; + private SfPdfViewer2? SfPdfViewer2; private string DocumentPath { get; set; } = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; public List? ToolbarItems { get; set; } @@ -93,9 +93,9 @@ Customize overlay color, outline, overlay text, font, alignment, and size before ![Redaction properties](./redaction-annotations-images/redaction-properties-annot.png) -## Enabling Redaction Mode in Mobile View +## Enabling redaction mode in mobile view -**Step 1:** Tap the **Redaction** button in the mobile toolbar to activate redaction mode. The redaction toolbar will appear at the bottom of the viewer. +**Step 1:** Tap the **Redaction** button in the mobile toolbar to activate redaction mode. The redaction toolbar appears at the bottom of the viewer. ![Redaction toolbar displayed at bottom of mobile PDF viewer with three distinct tools](./redaction-annotations-images/redaction-mobile-view.png) @@ -104,59 +104,61 @@ Customize overlay color, outline, overlay text, font, alignment, and size before - **Second Tool (Page Redaction)**: For page-wide or pattern-based redaction - **Third Tool (Redaction Properties)**: For appearance customization -**Step 3:** Configure your redaction parameters using the selected tool interface +**Step 3:** Configure your redaction parameters using the selected tool interface. -## Applying Different Redaction Types in Mobile View +## Applying different redaction types in mobile view -### Selective Content Redaction -1. **Select Redaction Annotation** tool (first button) -2. **Choose Content**: Tap and drag over text or draw rectangular areas -3. **Preview**: Check redaction overlays for accuracy -4. **Apply**: Tap "Apply Redactions" button +### Selective content redaction +1. Select the **Redaction Annotation** tool (first button). +2. **Choose Content**: Tap and drag over text or draw rectangular areas. +3. **Preview**: Check redaction overlays for accuracy. +4. **Apply**: Tap the **Apply Redactions** button. -### Page-Wide Redaction -1. **Select Page Redaction** tool (second button) -2. **Choose Pattern**: Select odd pages, even pages, or custom range -3. **Review**: Verify affected pages in the viewer -4. **Apply**: Confirm page redaction scope and apply +### Page-wide redaction +1. Select the **Page Redaction** tool (second button). +2. **Choose Pattern**: Select odd pages, even pages, or custom range. +3. **Review**: Verify affected pages in the viewer. +4. **Apply**: Confirm the page redaction scope and apply. -### Custom Appearance Redaction -1. **Select Redaction Properties** tool (third button) -2. **Customize**: Adjust colors, overlay text, and formatting -3. **Preview**: See changes applied to existing annotations -4. **Apply**: Use customized appearance for final redaction +### Custom appearance redaction +1. Select the **Redaction Properties** tool (third button). +2. **Customize**: Adjust colors, overlay text, and formatting. +3. **Preview**: See changes applied to existing annotations. +4. **Apply**: Use the customized appearance for the final redaction. ## Apply redactions N> Applying redactions is permanent. After applying, the underlying content and text are removed from the document and cannot be recovered. -Once you have configured redactions using any combination of tools. +After configuring redactions using any combination of tools, follow these steps: **Step 1:** Review all redaction marks and configurations. ![Review Redaction Annotation](./redaction-annotations-images/review-redaction-annotation-mv-annot.png) -**Step 2:** Tap the **Apply Redactions** button in the redaction toolbar +**Step 2:** Tap the **Apply Redactions** button in the redaction toolbar. ![Apply Redaction Button](./redaction-annotations-images/apply-redaction-button-mv.png) -**Step 3:** Confirm the action when prompted - this operation is permanent and cannot be undone +**Step 3:** Confirm the action when prompted. This operation is permanent and cannot be undone. ![Apply Redaction Dialog](./redaction-annotations-images/apply-redaction-dialog-mv-annot.png) -The selected content will be permanently removed and replaced according to your redaction properties (solid color blocks or custom overlay text). +The selected content is permanently removed and replaced according to your redaction properties (solid color blocks or custom overlay text). ![Applied Redaction](./redaction-annotations-images/applied-redaction-annot.png) -## Removing Redaction Annotations +## Removing redaction annotations To remove existing redaction annotations before they are applied: -- **Step 1:** Tap the **Redaction Edit** button in the mobile toolbar to enter annotation editing mode -- **Step 2:** Tap on any existing redaction annotation you wish to remove -- **Step 3:** Select **Delete** from the context menu that appears +**Step 1:** Tap the **Redaction Edit** button in the mobile toolbar to enter annotation editing mode. -**Alternative**: Tap redaction annotation → Use delete button in annotation properties panel +**Step 2:** Tap on any existing redaction annotation you wish to remove. + +**Step 3:** Select **Delete** from the context menu that appears. + +**Alternative**: Tap a redaction annotation, then use the delete button in the annotation properties panel. ![Delete Redaction Annotation](./redaction-annotations-images/delete-redaction-annotation-annot.png) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/redaction/overview.md index 37a73af5f9..753d530cca 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/redaction/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/redaction/overview.md @@ -1,68 +1,73 @@ --- layout: post title: Redaction in Blazor PDF Viewer | Syncfusion -description: Learn how to add, delete, redact pages, and apply redaction in the Syncfusion Blazor PDF Viewer, including comments and import/export. +description: Learn how to add, delete, redact pages, and apply redaction in the Blazor PDF Viewer, including comments and import/export. platform: document-processing control: SfPdfViewer documentation: ug --- -# Redaction annotations in Blazor SfPdfViewer Component +# Redaction annotations in Blazor SfPdfViewer -Check the following video to learn how to work with redaction annotations in the Blazor PDF Viewer. +Watch the following video to learn how to work with redaction annotations in the Blazor PDF Viewer. {% youtube "https://youtu.be/pUlTIazVyUU" %} -N> Prerequisites: Add the `SfPdfViewer` component to your Blazor app and ensure your Syncfusion package version includes the redaction feature. Applying redactions permanently removes underlying content. +The video above demonstrates how to add, update, and apply redaction annotations using the toolbar, context menu, and built-in dialogs in the Blazor PDF Viewer. ![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) ## Add a redaction annotation -Add redaction annotations using the toolbar or programmatically. Click the Redaction tool and draw over content to mark it for redaction. You can optionally add overlay text (for example, "Confidential") and customize appearance such as fill color, border color, and opacity. +Add a redaction annotation by clicking the Redaction tool on the toolbar and drawing over the content to mark it for redaction. You can optionally add overlay text (for example, "Confidential") and customize the fill color, border color, and opacity. ![Drawing a redaction region over page content](redaction-annotations-images/adding-redaction-annotation.png) +For step-by-step UI instructions, see [UI Interaction in Redaction Annotation](./ui-interactions). To add a redaction annotation programmatically, see [Programmatic Support in Redaction](./create-programmatically). + ## Delete redaction annotations -Remove redaction annotations through the UI or the API: +Delete a redaction annotation by using any of the following: -* Click the Delete button on the toolbar, or +* Click the Delete button on the toolbar. * Press the **Delete** key after selecting the annotation. +* Right-click the annotation and choose Delete from the context menu. ![Toolbar showing the Delete command for redaction](redaction-annotations-images/redaction-delete-icon.png) +For more deletion options, see [UI Interaction in Redaction Annotation](./ui-interactions#delete-redaction-annotations). To delete a redaction annotation programmatically, see [Programmatic Support in Redaction](./create-programmatically#delete-redaction-annotations-programmatically). + ## Page redaction -Redact entire pages or page ranges using the built-in page-redaction dialog, or perform page redaction programmatically. +Redact entire pages or page ranges using the built-in **Redact Pages** dialog. The dialog offers **Current Page**, **Odd Pages Only**, **Even Pages Only**, and **Specific Pages** (for example, `1, 3–5, 7`). ![Toolbar showing the Redact Page option](redaction-annotations-images/redact-page-icon.png) +For step-by-step UI instructions, see [UI Interaction in Redaction Annotation](./ui-interactions#redact-pages-using-the-ui). To redact pages programmatically, see [Programmatic Support in Redaction](./create-programmatically). + ## Apply redaction to the document -Applying redactions permanently removes the marked content from the PDF. Use the toolbar button or API to apply redactions. +Applying redactions permanently removes the marked content from the PDF. Click the Apply Redaction button on the toolbar, or use the API, to apply redactions. * The Apply Redaction button is disabled when no redaction annotations exist. * It enables automatically when at least one redaction annotation is present. ![Toolbar showing the Apply Redaction button](redaction-annotations-images/redact-button-icon.png) -A confirmation dialog appears before applying redactions to confirm this irreversible operation. +A confirmation dialog appears before redactions are applied because the operation is permanent and irreversible. ![Confirmation dialog for applying redaction](redaction-annotations-images/apply-redaction-dialog.png) N> The redaction process is irreversible. Once applied, the original content cannot be recovered. -## Comment panel support +To apply redactions programmatically, see [Programmatic Support in Redaction](./create-programmatically). -Redaction annotations support comments via the built-in comment panel. Use comments to add notes, track reviews, or record reasons for redaction. Comments are available through both the UI and API; see the Comments documentation for details. +## Comment panel support -For details, see the [Comments documentation](../annotation/comments). +Use the built-in comment panel to add notes, track reviews, or record reasons for redaction. Access comments via the UI or the API; see the [Comments documentation](../annotation/comments) for details. ## Export and import support -The viewer supports exporting and importing redaction annotations in JSON format so annotations can be saved and reloaded later. - -For details, see the [Export and import annotations documentation](../annotation/import-export-annotation). +Export and import redaction annotations in JSON format so annotations can be saved and reloaded later. See the [Export and import annotations documentation](../annotation/import-export-annotation) for details. ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/redaction/ui-interactions.md b/Document-Processing/PDF/PDF-Viewer/blazor/redaction/ui-interactions.md index f009f07f02..ea190e39c6 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/redaction/ui-interactions.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/redaction/ui-interactions.md @@ -1,7 +1,7 @@ --- layout: post title: Redaction UI interactions in Blazor PDF Viewer | Syncfusion -description: Learn about UI interactions in Redaction annotation of the Syncfusion Blazor PDF Viewer (SfPdfViewer2) component. +description: Learn about UI interactions in Redaction annotation of the Blazor PDF Viewer (SfPdfViewer2) component. platform: document-processing control: SfPdfViewer documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Add redaction annotations from the toolbar -Use the redaction tool on the toolbar to draw over content to be redacted. After marking, an annotation can display overlay text (for example, "Confidential") and be styled with fill color and other properties. +Use the redaction tool on the toolbar to draw over content to be redacted. A mark can display overlay text (for example, "Confidential") and be styled with fill color and other properties. ![Drawing a redaction annotation on the page](redaction-annotations-images/adding-redaction-annotation.png) @@ -25,15 +25,15 @@ Use the redaction tool on the toolbar to draw over content to be redacted. After ![Resizing a redaction annotation](redaction-annotations-images/resizing-redaction-annotation.png) -N> The redaction tool is hidden by default. Customize the toolbar to include it. For instructions, see [Toolbar customization](../toolbar-customization-overview). +N> The redaction tool is hidden by default. Customize the toolbar to include it. For instructions, see [Toolbar customization](../toolbar-customization-overview) in the See also section. ## Update redaction properties -Update redaction annotations after they are added. Changes can be made using the property panel for the selected redaction or programmatically via the [EditAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EditAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) API. +Update redaction marks after they are added. Changes can be made using the property panel for the selected redaction or programmatically via the [EditAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EditAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) API. ### Using the property panel -When a redaction annotation is selected, update properties such as overlay text, font, and fill color in the property panel. Changes appear immediately in the viewer. +Select a redaction mark and edit its properties (overlay text, font, and fill color) in the property panel. Changes appear immediately in the viewer. Access the panel by: @@ -45,9 +45,9 @@ Access the panel by: ![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) -## Delete redaction annotations +## Delete redaction marks -Delete redaction annotations using any of the following: +Delete a redaction mark using any of the following methods: * Right-click and select Delete from the context menu. @@ -59,29 +59,29 @@ Delete redaction annotations using any of the following: * Press the Delete key after selecting the annotation. -## Redact pages using the UI +## Mark pages for redaction using the UI -Use the Redact Pages option on the redaction toolbar to mark whole pages. The Mark Page Range dialog offers: +Use the Redact Pages option on the redaction toolbar to mark whole pages. This step adds redaction marks to pages only; the marks must be applied to become permanent (see the following section). The Mark Page Range dialog offers: -* **Current Page** – Redacts the currently visible page. -* **Odd Pages Only** – Redacts all odd-numbered pages. -* **Even Pages Only** – Redacts all even-numbered pages. -* **Specific Pages** – Enter a list or ranges (for example, 1, 3–5, 7). +* **Current Page**: Redacts the currently visible page. +* **Odd Pages Only**: Redacts all odd-numbered pages. +* **Even Pages Only**: Redacts all even-numbered pages. +* **Specific Pages**: Enter a list or ranges (for example, 1, 3–5, 7). -After choosing a range, select Save to apply redaction marks to the selected pages. +After choosing a range, select Save to add redaction marks to the selected pages. ![Page Redaction Panel](redaction-annotations-images/page-redaction-panel.png) ## Apply redaction from the toolbar -The redact button applies all redaction annotations in the document. +The Apply Redaction button permanently applies all redaction marks in the document. -* The button is disabled when no redaction annotations exist. -* It enables automatically when redaction annotations are present. +* The button is disabled when no redaction marks exist. +* It is enabled automatically when redaction marks are present. ![Redact Button Icon](redaction-annotations-images/redact-button-icon.png) -A confirmation dialog appears before applying redactions to confirm the operation is permanent and irreversible. +A confirmation dialog appears, warning that the operation is permanent and irreversible. ![Apply Redaction Dialog](redaction-annotations-images/apply-redaction-dialog.png) @@ -91,4 +91,5 @@ N> The redaction process is irreversible. Once applied, the original content can * [Overview of Redaction](./overview) * [Programmatic Support in Redaction](./create-programmatically) -* [Redaction in Mobile View](./mobile-view) \ No newline at end of file +* [Redaction in Mobile View](./mobile-view) +* [Toolbar customization](../toolbar/overview) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-amazon-s3.md index 8dde01fed7..43afd1ffc4 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-amazon-s3.md @@ -1,27 +1,29 @@ --- layout: post title: Save PDF files to AWS S3 in SfPdfViewer Component | Syncfusion -description: Learn here all about how to save PDF files to AWS S3 in Syncfusion Blazor SfPdfViewer component and much more details. +description: Learn here all about how to save PDF files to AWS S3 in Blazor SfPdfViewer component and much more details. platform: document-processing control: SfPdfViewer documentation: ug --- -# Save PDF to AWS S3 in Blazor SfPdfViewer +# Save PDF to AWS S3 in Blazor SfPdfViewer Component -To save a PDF file to AWS S3, you can follow the steps below +To save a PDF file to AWS S3, follow these steps: -**Step 1:** Create AWS S3 account +**Step 1:** Create an AWS account and an S3 bucket Set up an AWS account and configure Amazon S3 by following the official guide: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket, configure an IAM user or role with scoped permissions for S3 access, and generate access keys. Store credentials securely using environment variables. -**Step 2:** Create a Simple SfPdfViewer Sample in blazor +**Step 2:** Install the AWSSDK.S3 NuGet package -Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app) to create a simple SfPdfViewer sample in blazor. This will give you a basic setup of the SfPdfViewer component. +Install the **AWSSDK.S3** NuGet package in your application to use the AWS S3 client APIs. + +**Step 3:** Create a Simple SfPdfViewer Sample in blazor -**Step 3:** Include the following namespaces in the **Index.razor** file. +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app) to create a simple SfPdfViewer sample in blazor. This will give you a basic setup of the SfPdfViewer component. -1. Import the required namespaces at the top of the file: +**Step 4:** Include the following namespaces in the **Index.razor** file: ```csharp @using Amazon; @@ -32,11 +34,13 @@ Start by following the steps provided in this [link](https://help.syncfusion.com ``` -**Step 4:** Add the below code example to save the downloaded PDF files to AWS S3 bucket +**Step 5:** Add the below code example to save the downloaded PDF files to an AWS S3 bucket ```csharp @page "/" +@using System.IO + Save file to AWS S3 bucket Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name. +Replace the file name with the actual document name that you want to load from the AWS S3 bucket. Make sure to pass the document name from the AWS S3 bucket to the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property of the SfPdfViewer component. -N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. +N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key, and bucket name. [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Open%20and%20Save%20from%20AWS%20S3) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-azure-blob-storage.md index 49582dde70..28745b951e 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-azure-blob-storage.md @@ -1,40 +1,40 @@ --- layout: post title: Save PDF file to Azure Blob Storage in Blazor SfPdfViewer | Syncfusion -description: Learn how to save PDF files to Azure Blob Storage using the Syncfusion Blazor SfPdfViewer component, including setup, and persistence workflow. +description: Learn how to save PDF files to Azure Blob Storage using the Blazor SfPdfViewer component, including setup, and persistence workflow. platform: document-processing control: SfPdfViewer documentation: ug --- -# Save PDF to Azure Blob Storage in Blazor SfPdfViewer +# Save PDF file to Azure Blob Storage in Blazor SfPdfViewer Component Follow these steps to save a PDF from the SfPdfViewer to Azure Blob Storage. **Step 1:** Create the Azure Blob Storage account -Sign in to the Azure portal and create a Storage account with the desired configuration. Record the connection string during setup. Within the Storage account, create a Blob container. For detailed guidance, see Create a Storage account and container in the [Azure portal](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal). +Sign in to the Azure portal and create a Storage account with the desired configuration. Record the connection string during setup. Within the Storage account, create a Blob container. For detailed guidance, see Create a Storage account and container in the [Azure portal](https://learn.microsoft.com/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal). -**Step 2:** Create a Simple SfPdfViewer Sample in Blazor +**Step 2:** Create a simple SfPdfViewer sample in Blazor Create a basic Blazor Web App Server application that hosts the SfPdfViewer component by following [Getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app) with Blazor SfPdfViewer. This provides the baseline configuration required for the viewer. -**Step 3:** Include the following namespaces in the **Index.razor** file. +**Step 3:** Include the following namespaces in the **Index.razor** file -1. Import the required namespaces at the top of the file: +Import the required namespaces at the top of the file: ```csharp @using System.IO; @using Azure.Storage.Blobs; @using Azure.Storage.Blobs.Specialized; +@using Microsoft.AspNetCore.Components.Web; @using Syncfusion.Blazor.Buttons; @using Syncfusion.Blazor.SfPdfViewer; ``` -**Step 4:** Add the below code example to save the downloaded PDF files to Azure Blob Storage container +**Step 4:** Replace **Index.razor** with the following code to save the currently loaded PDF in SfPdfViewer to an Azure Blob Storage container ```csharp - @page "/" Save file to Azure Blob Storage @code { - private string DocumentPath { get; set; } + private string DocumentPath { get; set; } = "https://example.com/sample.pdf"; private SfPdfViewer2 viewer; private readonly string connectionString = "Your Connection string from Azure"; private readonly string containerName = "Your container name in Azure"; - private readonly string fileName = "File Name to be loaded into Syncfusion SfPdfViewer"; + private readonly string fileName = "FileName.pdf"; - public async void OnClick(MouseEventArgs args) + public async Task OnClick(MouseEventArgs args) { - byte[] data = await viewer.GetDocumentAsync(); - - BlobServiceClient blobServiceClient = new BlobServiceClient(connectionString); + try + { + byte[] data = await viewer.GetDocumentAsync(); - BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(containerName); + BlobServiceClient blobServiceClient = new BlobServiceClient(connectionString); + BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(containerName); + await containerClient.CreateIfNotExistsAsync(); - string result = Path.GetFileNameWithoutExtension(fileName); + string result = Path.GetFileNameWithoutExtension(fileName); - // Get a reference to the blob - BlobClient blobClient = containerClient.GetBlobClient(result + "_downloaded.pdf"); + // Get a reference to the blob. Set overwrite to true to replace an existing blob with the same name. + BlobClient blobClient = containerClient.GetBlobClient(result + "_downloaded.pdf"); - using (MemoryStream stream = new MemoryStream(data)) + using (MemoryStream stream = new MemoryStream(data)) + { + // overwrite: true replaces the blob if it already exists + blobClient.Upload(stream, true); + } + } + catch (Exception ex) { - blobClient.Upload(stream, true); + // Surface the error to the user; replace with a UI notification as needed. + Console.Error.WriteLine($"Failed to save to Azure Blob Storage: {ex.Message}"); } } } - ``` -N> Replace **Your Connection string from Azure** with the actual connection string for the Azure Storage account, **File Name to be Loaded into Syncfusion® SfPdfViewer** with the file name to load from the Azure container into the SfPdfViewer, and **Your container name in Azure** with the actual container name. - -N> The **Azure.Storage.Blobs** NuGet package must be installed in the application to use the previous code example. +N> +* Replace **Your Connection string from Azure** with the actual connection string for the Azure Storage account, **File Name to be Loaded into SfPdfViewer** with the file name to load from the Azure container into the SfPdfViewer, and **Your container name in Azure** with the actual container name. +* Store the Azure connection string in application configuration (for example, appsettings.json or user secrets) rather than hardcoding it in source code. +* The **Azure.Storage.Blobs** NuGet package must be installed in the application. Install it using `dotnet add package Azure.Storage.Blobs` before running the sample. [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Open%20and%20Save%20from%20Azure%20blob%20storage). ## See also +* [Save PDF file to Amazon S3 in Blazor SfPdfViewer](to-amazon-s3.md) +* [Save PDF file to Google Cloud Storage in Blazor SfPdfViewer](to-google-cloud-storage.md) * [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../faqs/how-to-processing-large-files-without-increasing-maximum-message-size) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-box-cloud-file-storage.md index 24c219e08d..859d3e0335 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-box-cloud-file-storage.md @@ -1,29 +1,29 @@ --- layout: post title: Save PDF files to Box storage in SfPdfViewer Component | Syncfusion -description: Learn how to save PDF files to Box cloud file storage using the Syncfusion Blazor SfPdfViewer component, including setup, and upload workflow. +description: Learn how to save PDF files to Box cloud file storage using the Blazor SfPdfViewer component, including setup, and upload workflow. platform: document-processing control: SfPdfViewer documentation: ug --- -# Save PDF to Box cloud storage in Blazor SfPdfViewer +# Save PDF to Box cloud storage in Blazor SfPdfViewer Component Follow these steps to save a PDF from the SfPdfViewer to Box cloud storage. **Step 1:** Set up a Box developer account and create a Box application -To access Box storage programmatically, a Box developer account is required. Open the [Box Developer](https://developer.box.com/) Console and create a Box application. The application provides the Client ID and Client Secret used to authenticate with Box APIs. Before accessing files, the application must be authorized using `OAuth 2.0 authentication`. +To access Box storage programmatically, a Box developer account is required. Open the [Box Developer](https://developer.box.com/) Console and create a Box application. The application provides the Client ID, Client Secret, and an access token (obtained through the OAuth 2.0 flow) used to authenticate with Box APIs. Before accessing files, the application must be authorized using OAuth 2.0. **Step 2:** Create a simple SfPdfViewer sample in Blazor Create a basic Blazor Web App Server application that hosts the SfPdfViewer component by following [Getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app) with Blazor SfPdfViewer. This provides the baseline configuration required for the viewer. -**Step 3:** Include the following namespaces in the **Index.razor** file - -1. Import the required namespaces at the top of the file: +**Step 3:** Include the following namespaces in the **Index.razor** file: ```csharp +@using System.IO; +@using System.Threading.Tasks; @using Box.V2; @using Box.V2.Auth; @using Box.V2.Config; @@ -46,23 +46,27 @@ Create a basic Blazor Web App Server application that hosts the SfPdfViewer comp @code { private SfPdfViewer2 viewer; - private string DocumentPath { get; set; } + private string DocumentPath { get; set; } = "PDF_Succinctly.pdf"; private readonly string accessToken = "Your Box Storage Access Token"; private readonly string folderID = "Your Folder ID"; private readonly string clientID = "Your Box Storage ClientID"; private readonly string clientSecret = "Your Box Storage ClientSecret"; private readonly string fileName = "File Name to be loaded into Syncfusion SfPdfViewer"; - public async void OnClick(MouseEventArgs args) + public async Task OnClick(MouseEventArgs args) { + // Get the current PDF document from the SfPdfViewer as a byte array. byte[] data = await viewer.GetDocumentAsync(); string result = Path.GetFileNameWithoutExtension(fileName); string FileName = result + "_downloaded.pdf"; - // Initialize the Box API client with your authentication credentials + // Initialize the Box API client with your authentication credentials. + // YOUR_REFRESH_TOKEN: refresh token issued by Box. 3600: token lifetime in seconds. "bearer": token type. var auth = new OAuthSession(accessToken, "YOUR_REFRESH_TOKEN", 3600, "bearer"); + // "http://boxsdk": placeholder redirect URI registered in the Box app configuration. var config = new BoxConfigBuilder(clientID, clientSecret, new Uri("http://boxsdk")).Build(); var client = new BoxClient(config, auth); + // BoxFileRequest describes the file metadata (name and parent folder) for the upload. var fileRequest = new BoxFileRequest { Name = FileName, @@ -79,11 +83,10 @@ Create a basic Blazor Web App Server application that hosts the SfPdfViewer comp ``` -N> replace **Your_Box_Storage_Access_Token** with your actual box access token, and **Your_Folder_ID** with the ID of the folder in your box storage where you want to perform specific operations. Remember to use your valid box API credentials, as **Your_Box_Storage_ClientID** and **Your_Box_Storage_ClientSecret"** are placeholders for your application's API key and secret. - -N> Install the **Box.V2.Core** NuGet package in the application to use the Box SDK types referenced in the example. - -N> If loading a document by name, replace `PDF_Succinctly.pdf` with the actual file name, and assign it to the DocumentPath property of the SfPdfViewer component. For details, see the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property of the SfPdfViewer component. +N> +* replace **Your_Box_Storage_Access_Token** with your actual box access token, and **Your_Folder_ID** with the ID of the folder in your box storage where you want to perform specific operations. Remember to use your valid box API credentials, as **Your_Box_Storage_ClientID** and **Your_Box_Storage_ClientSecret** are placeholders for your application's API key and secret. +* Install the **Box.V2.Core** NuGet package in the application to use the Box SDK types referenced in the example. +* If loading a document by name, replace `PDF_Succinctly.pdf` with the actual file name, and assign it to the DocumentPath property of the SfPdfViewer component. For details, see the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property of the SfPdfViewer component. [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Open%20and%20Save%20from%20box%20cloud%20storage) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-google-cloud-storage.md b/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-google-cloud-storage.md index 754a7eb117..ee3d40947e 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-google-cloud-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-google-cloud-storage.md @@ -1,80 +1,78 @@ --- layout: post title: Save PDF files to Google Cloud Storage in SfPdfViewer | Syncfusion -description: Learn how to save PDF files to Google Cloud Storage from the Syncfusion Blazor SfPdfViewer component with a secure, step-by-step workflow. +description: Learn how to save PDF files to Google Cloud Storage from the Blazor SfPdfViewer component with a secure, step-by-step workflow. platform: document-processing control: SfPdfViewer documentation: ug --- -# Save PDF to Google Cloud Storage in Blazor SfPdfViewer +# Save PDF to Google Cloud Storage in Blazor SfPdfViewer Component Follow these steps to save a PDF from the SfPdfViewer to Google Cloud Storage (GCS). -**Step 1** Create a service account +**Step 1:** Create a service account. Open the Google Cloud Console. Navigate to `IAM & Admin` > `Service accounts`. Click `Create service account`, enter a name, assign only the required role (for uploads, Storage Object Creator; use broader roles such as Storage Object Admin only if necessary), and create a key in JSON format. Download the key file securely. Use the downloaded key file in the application for authentication and access to the Google Cloud Storage bucket. For details, refer to the [official documentation](https://cloud.google.com/iam/docs/service-accounts-create). -**Step 2:** Create a simple SfPdfViewer sample in Blazor +**Step 2:** Create a simple SfPdfViewer sample in Blazor. -Start by following the steps in this guide to create a [basic SfPdfViewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app) sample in Blazor. This provides the initial setup of the SfPdfViewer component. +Start by following the steps in this guide to create a [basic SfPdfViewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app) sample in Blazor. This provides the initial setup of the SfPdfViewer component, including the required services registered in `Program.cs` and the Syncfusion Blazor NuGet packages (`Syncfusion.Blazor.SfPdfViewer` and `Syncfusion.Blazor.Buttons`). **Step 3:** Include the following namespaces in the **Index.razor** file. -1. Import the required namespaces at the top of the file: - ```csharp +@using System.IO; +@using System.Threading.Tasks; @using Google.Cloud.Storage.V1; @using Google.Apis.Auth.OAuth2; @using Syncfusion.Blazor.SfPdfViewer; @using Syncfusion.Blazor.Buttons; ``` -**Step 4:** Add the below code example to the Index.razor file to upload the currently loaded document to GCS. +**Step 4:** Add the below code example to the **Index.razor** file to save the document currently shown in the SfPdfViewer to GCS. ```csharp @page "/" -Save file to google cloud storage +Save file to Google Cloud Storage @code { - private string DocumentPath { get; set; } + private string DocumentPath { get; set; } = "FileName.pdf"; private SfPdfViewer2 viewer; private readonly string keyFilePath = @"path/to/service-account-key.json"; private readonly string bucketName = "YourBucketName"; private readonly string fileName = "FileName.pdf"; - private StorageClient _storageClient; - public async void OnClick(MouseEventArgs args) + public async Task OnClick(MouseEventArgs args) { byte[] data = await viewer.GetDocumentAsync(); string result = Path.GetFileNameWithoutExtension(fileName); string FileName = result + "_downloaded.pdf"; // Load the service account credentials from the key file. var credentials = GoogleCredential.FromFile(keyFilePath); - // Create a storage client with Application Default Credentials - _storageClient = StorageClient.Create(credentials); - // Upload the document to Google Cloud Storage + // Create a storage client with the explicit service account credentials. + var storageClient = StorageClient.Create(credentials); + // Upload the document to Google Cloud Storage. using (var memoryStream = new MemoryStream(data)) { - _storageClient.UploadObject(bucketName, result + "_downloaded.pdf", null, memoryStream); + storageClient.UploadObject(bucketName, FileName, "application/pdf", memoryStream); } } } ``` -N> Replace **Your Bucket name from Google Cloud Storage** with the actual name of your Google Cloud Storage bucket and **File Name to be Loaded into Syncfusion® SfPdfViewer** with the actual file name you want to load from the cloud bucket. - -N> Replace **path/to/service-account-key.json** with the actual file path to the service account key JSON file. Make sure to provide the correct path and filename. - -N> The **Google.Cloud.Storage.V1** NuGet package is required. Install it in the application before running the sample. +N> +* Replace **YourBucketName** with the actual name of your Google Cloud Storage bucket and **FileName.pdf** with the actual file name you want to load from the cloud bucket. +* Replace **path/to/service-account-key.json** with the actual file path to the service account key JSON file. Make sure to provide the correct path and filename. +* The **Google.Cloud.Storage.V1** NuGet package is required. Install it in the application before running the sample. [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Open%20and%20Save%20from%20GCS) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-google-drive.md b/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-google-drive.md index 9065af0805..87342cd52b 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-google-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/save-pdf-file/to-google-drive.md @@ -1,40 +1,44 @@ --- layout: post title: Save PDF files to Google Drive in Blazor SfPdfViewer | Syncfusion -description: Learn how to save PDF files to Google Drive using the Syncfusion Blazor SfPdfViewer, including required setup, and a working example. +description: Learn how to save PDF files to Google Drive using the Blazor SfPdfViewer, including required setup, and a working example. platform: document-processing control: SfPdfViewer documentation: ug --- -# Save PDF files to Google Drive in Blazor SfPdfViewer +# Save PDF files to Google Drive in Blazor SfPdfViewer Component Use the following steps to download the currently loaded PDF from the viewer and upload it to a specified Google Drive folder. **Step 1:** Set up the Google Drive API -Create a project in Google Cloud Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For detailed instructions, see Enable the [Google Drive API](https://developers.google.com/drive/api/guides/enable-sdk). +Create a project in Google Cloud Console and enable the Google Drive API. Obtain the OAuth 2.0 Client ID credentials to access the API. For detailed instructions, see Enable the [Google Drive API](https://developers.google.com/drive/api/guides/enable-sdk). **Step 2:** Create a simple SfPdfViewer sample in Blazor Follow the [Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app) guide to create a basic Blazor application with the SfPdfViewer component. -**Step 3:** Include the following namespaces in the `Index.razor` file. +**Step 3:** Install the **Google.Apis.Drive.v3** NuGet package in the application to use the Google Drive client. -Import the required namespaces at the top of the file: +**Step 4:** Include the following namespaces at the top of the `Index.razor` file. ```csharp @using Google.Apis.Drive.v3; @using Google.Apis.Auth.OAuth2; @using Google.Apis.Services; @using Google.Apis.Util.Store; +@using System.IO; +@using System.Collections.Generic; +@using System.Threading; @using System.Threading.Tasks; +@using Microsoft.AspNetCore.Components.Web; @using Syncfusion.Blazor.SfPdfViewer; @using Syncfusion.Blazor.Buttons; ``` -**Step 4:** Add the following example to save the downloaded PDF file to `Google Drive`. - +**Step 5:** Add the following example to save the downloaded PDF file to `Google Drive`. +File to Google D ```csharp @page "/" @@ -55,7 +59,7 @@ Import the required namespaces at the top of the file: private readonly string FileName = "File Name to be loaded into Syncfusion SfPdfViewer"; private static readonly string[] Scopes = { DriveService.Scope.DriveFile, DriveService.Scope.DriveReadonly }; - public async void OnClick(MouseEventArgs args) + public async Task OnClick(MouseEventArgs args) { byte[] data = await viewer.GetDocumentAsync(); string result = Path.GetFileNameWithoutExtension(FileName); @@ -99,11 +103,9 @@ Import the required namespaces at the top of the file: ``` -N> Replace **Your Google Drive Folder ID** your actual Google Drive folder ID, **Your Application name** with the actual application name, **File Name to be loaded into Syncfusion® SfPdfViewer** with the file to load into the viewer, and **Your Path to the OAuth 2.0 Client IDs JSON file** with the path to the downloaded OAuth client credentials JSON file. - -N> The **FolderId** is the unique identifier found in the folder URL. For example, for `https://drive.google.com/drive/folders/abc123xyz456`, the folder ID is `abc123xyz456`. - -N> Install the **Google.Apis.Drive.v3** NuGet package in the application to use the Google Drive client. +N> +* Replace **Your Google Drive Folder ID** with your actual Google Drive folder ID, **Your Application name** with the actual application name, **File Name to be loaded into Syncfusion® SfPdfViewer** with the file to load into the viewer, and **Your Path to the OAuth 2.0 Client IDs JSON file** with the path to the downloaded OAuth 2.0 Client IDs JSON file. +* The **FolderId** is the unique identifier found in the folder URL. For example, for `https://drive.google.com/drive/folders/abc123xyz456`, the folder ID is `abc123xyz456`. [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Load%20and%20Save/Open%20and%20Save%20from%20Google%20Drive) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/saving-pdf-file.md b/Document-Processing/PDF/PDF-Viewer/blazor/saving-pdf-file.md index 518f88d53a..9694549daf 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/saving-pdf-file.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/saving-pdf-file.md @@ -1,7 +1,7 @@ --- layout: post title: Saving PDF file in Blazor SfPdfViewer Component | Syncfusion -description: Checkout and learn here all about saving PDF file in Syncfusion Blazor SfPdfViewer component and more. +description: Checkout and learn here all about saving PDF file in Blazor SfPdfViewer component and more. platform: document-processing control: SfPdfViewer documentation: ug @@ -13,7 +13,7 @@ After editing a PDF with annotations or form fields, the updated document can be ## Save PDF file to Server -Use this approach to persist the modified PDF to a server-side folder. Ensure the application has write permissions to the target directory and use framework services (for example, `IWebHostEnvironment`) to resolve application paths. +Use this approach to persist the modified PDF to a server-side folder. Ensure the application has write permissions to the target directory. ```cshtml @using Syncfusion.Blazor.SfPdfViewer @@ -26,22 +26,21 @@ Use this approach to persist the modified PDF to a server-side folder. Ensure th Height="100%" Width="100%"> -@code{ +@code { SfPdfViewer2 viewer; - public async void OnClick(MouseEventArgs args) + private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; + + public async Task OnClick(MouseEventArgs args) { byte[] data = await viewer.GetDocumentAsync(); //PDF document file stream Stream stream = new MemoryStream(data); - using (var fileStream = new FileStream(@"wwwroot/Data/PDF_Succinctly_Updated.pdf", FileMode.Create, FileAccess.Write)) + await using (var fileStream = new FileStream(@"wwwroot/Data/PDF_Succinctly_Updated.pdf", FileMode.Create, FileAccess.Write)) { //Saving the new file in root path of application - stream.CopyTo(fileStream); - fileStream.Close(); + await stream.CopyToAsync(fileStream); } - stream.Close(); } - public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; } ``` @@ -65,27 +64,27 @@ Use this method to update PDF content stored in a relational database when docum @code{ SfPdfViewer2 viewer; + private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; - public async void OnClick(MouseEventArgs args) + public async Task OnClick(MouseEventArgs args) { - string DocumentName = "PDF_Succinctly"; + string documentName = "PDF_Succinctly"; byte[] data = await viewer.GetDocumentAsync(); string connectionString = @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=D:\database.mdf;"; - string queryStmt = "Update PDFFiles SET Content = @Content where DocumentName = '" + DocumentName + "'"; + string queryStmt = "Update PDFFiles SET Content = @Content where DocumentName = @DocumentName"; using (SqlConnection con = new SqlConnection(connectionString)) { using (SqlCommand cmd = new SqlCommand(queryStmt, con)) { - SqlParameter param = cmd.Parameters.Add("@Content", System.Data.SqlDbType.VarBinary); - param.Value = data; + SqlParameter contentParam = cmd.Parameters.Add("@Content", System.Data.SqlDbType.VarBinary, -1); + contentParam.Value = data; + SqlParameter nameParam = cmd.Parameters.Add("@DocumentName", System.Data.SqlDbType.VarChar, 255); + nameParam.Value = documentName; con.Open(); cmd.ExecuteNonQuery(); - con.Close(); } } - } - private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; } ``` @@ -93,7 +92,7 @@ N> Use parameterized queries for all user or variable input to prevent SQL injec ## Download -The `SfPdfViewer` includes a built-in toolbar button to download the loaded or modified PDF. Control this behavior with the [EnableDownload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableDownload) API. +The `SfPdfViewer` includes a built-in toolbar button to download the loaded or modified PDF. Control this behavior with the [EnableDownload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableDownload) property. ```cshtml @@ -110,7 +109,7 @@ The `SfPdfViewer` includes a built-in toolbar button to download the loaded or m ![Blazor SfPdfViewer with Download Option](../blazor-classic/images/blazor-pdfviewer-download-option.png) -Programmatic download can also be triggered from application UI, for example by calling `DownloadAsync()` from a button click handler. +Programmatic download can also be triggered from a button click handler by calling `DownloadAsync()`. ```cshtml @@ -125,8 +124,8 @@ Programmatic download can also be triggered from application UI, for example by @code { SfPdfViewer2 Viewer; - public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; - public async void OnClick(MouseEventArgs args) + private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; + public async Task OnClick(MouseEventArgs args) { await Viewer.DownloadAsync(); } @@ -134,7 +133,7 @@ Programmatic download can also be triggered from application UI, for example by ``` -### Download filename +### Download file name Use the [DownloadFileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DownloadFileName) property to set the default file name for the downloaded PDF. @@ -153,7 +152,7 @@ The following example shows how to specify a custom file name. @code { //Sets the PDF document path for initial loading. - public string documentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; + private string documentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; //Sets the name of the file to be downloaded. private string downloadFileName { get; set; } = "TOP-View_CutSheets.pdf"; @@ -165,28 +164,28 @@ The following example shows how to specify a custom file name. ### Download PDF file as a copy -Use the built-in toolbar option or the programmatic API to download the updated PDF as a copy to the local file system. +Use the built-in toolbar option or the programmatic API to download a separate copy of the PDF to the local file system. ```cshtml @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.SfPdfViewer -Download +Download @code{ -SfPdfViewer2 viewer; -public async void OnClick(MouseEventArgs args) -{ - await viewer.DownloadAsync(); -} -public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf"; + private SfPdfViewer2 viewer; + private string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf"; + public async Task OnClick(MouseEventArgs args) + { + await viewer.DownloadAsync(); + } } ``` ## See also -* [How to open PDF files various storage location](./opening-pdf-file) \ No newline at end of file +* [How to open PDF files from various storage locations](./opening-pdf-file) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/text-search/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/text-search/overview.md index b2222c418f..3fee870c35 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/text-search/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/text-search/overview.md @@ -1,30 +1,57 @@ --- layout: post title: Text search and Extraction in Blazor PDF Viewer | Syncfusion -description: Overview of text search capabilities, UI features, programmatic APIs, events and text extraction in the Syncfusion Blazor PDF Viewer. +description: Overview of text search capabilities, UI features, programmatic APIs, events and text extraction in the Blazor PDF Viewer. platform: document-processing -control: Text search +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- -# Text search and extraction in Blazor PDF Viewer +# Text search in Blazor PDF Viewer -The Blazor PDF Viewer provides an integrated text search experience that supports both interactive UI search and programmatic searches. Enable the feature by setting [`EnableTextSearch`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableTextSearch) as needed. To give more low-level information about text, methods like [`SearchTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchTextAsync_System_String_System_Boolean_) can be used. +The Blazor PDF Viewer provides an integrated text search experience that supports both interactive UI search and programmatic searches. Enable the feature by setting [`EnableTextSearch`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableTextSearch) to `true`. To start a search programmatically, call [`SearchTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchTextAsync_System_String_System_Boolean_). -The text search functionality allows you to retrieve and locate content within PDF documents with case-sensitive or case-insensitive matching, enabling integration with search analytics and downstream processing workflows. +Enable text search as shown below. -## Key capabilities +{% tabs %} +{% highlight razor %} +@using Syncfusion.Blazor.SfPdfViewer -- **Text search UI**: real‑time search from the toolbar, match‑case option, and search navigation controls. -- **Text search programmatic APIs**: mirror UI behavior with [`SearchTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchTextAsync_System_String_System_Boolean_), [`SearchNextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchNextAsync), [`SearchPreviousAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchPreviousAsync), and [`CancelTextSearchAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_CancelTextSearchAsync). -- **Text search events**: respond to [`OnTextSearchStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchStart), [`OnTextSearchHighlight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchHighlight), and [`OnTextSearchComplete`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchComplete) for UI sync, analytics, and custom overlays. + + +{% endhighlight %} +{% endtabs %} -## When to use which API +The text search functionality allows you to retrieve and locate content within PDF documents with case-sensitive or case-insensitive matching, enabling integration with search analytics and downstream processing workflows. + +## Key capabilities -- Use the toolbar/search panel for typical interactive searches and navigation. -- Use [`SearchTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchTextAsync_System_String_System_Boolean_) / [`SearchNextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchNextAsync) / [`SearchPreviousAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchPreviousAsync) when driving search programmatically but keeping behavior consistent with the UI. -- Use [`OnTextSearchStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchStart), [`OnTextSearchHighlight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchHighlight), and [`OnTextSearchComplete`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchComplete) events when you need to respond to search lifecycle changes for UI updates or logging. +- **Text search UI**: Search from the toolbar with the Match Case option and navigation controls. +- **Text search programmatic APIs**: Start a search with [`SearchTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchTextAsync_System_String_System_Boolean_), which accepts the search text and an `isMatchCase` flag for case sensitivity. [`SearchNextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchNextAsync) and [`SearchPreviousAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchPreviousAsync) navigate to the next and previous occurrence of the most recent search query. [`CancelTextSearchAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_CancelTextSearchAsync) cancels the current search and removes the highlighted occurrences. +- **Text search events**: [`OnTextSearchStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchStart) fires when a search begins, [`OnTextSearchHighlight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchHighlight) fires for each match brought into view, and [`OnTextSearchComplete`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchComplete) fires when the search finishes. Wire up an event handler as shown below. + +{% tabs %} +{% highlight razor %} +@using Syncfusion.Blazor.SfPdfViewer + + + + + +@code { + private void OnTextSearchComplete(TextSearchCompleteEventArgs args) + { + // Handle search completion + } +} +{% endhighlight %} +{% endtabs %} ## Further reading diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/text-search/text-search-events.md b/Document-Processing/PDF/PDF-Viewer/blazor/text-search/text-search-events.md index b4c8d9c804..56f4e1e718 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/text-search/text-search-events.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/text-search/text-search-events.md @@ -1,22 +1,22 @@ --- layout: post -title: Text search Events in Blazor PDF Viewer control | Syncfusion -description: Learn how to handle text search events, and run programmatic searches in the Syncfusion Blazor PDF Viewer. +title: Text Search Events in Blazor PDF Viewer control | Syncfusion +description: Learn how to handle text search events, and run programmatic searches in the Blazor PDF Viewer. platform: document-processing -control: Text search +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- # Text Search Events in Blazor PDF Viewer -The Blazor PDF Viewer triggers events during text search operations, allowing you to customize behavior and respond to different stages of the search process. +The Blazor PDF Viewer raises events during text search operations, allowing you to customize behavior and respond to different stages of the search process. ## OnTextSearchStart -The [OnTextSearchStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchStart) event fires as soon as a search begins from the toolbar interface or through the [`SearchTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchTextAsync_System_String_System_Boolean_) method. Use to reset UI state, log analytics, or cancel the default search flow before results are processed. +The [`OnTextSearchStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchStart) event fires as soon as a search begins from the toolbar interface or through the [`SearchTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchTextAsync_System_String_System_Boolean_) method. Use it to reset UI state or log analytics before results are processed. -- Event arguments: [TextSearchStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSearchStartEventArgs.html) exposes: +- **Event arguments**: [`TextSearchStartEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSearchStartEventArgs.html) exposes: - `SearchText`: the term being searched. - `MatchCase`: indicates whether case-sensitive search is enabled. @@ -40,9 +40,9 @@ The [OnTextSearchStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ## OnTextSearchHighlight -The [OnTextSearchHighlight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchHighlight) event triggers whenever a search result is brought into view, including navigation between matches. Use to draw custom overlays or synchronize adjacent UI elements when a match is highlighted. +The [`OnTextSearchHighlight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchHighlight) event fires whenever a search result is brought into view, including navigation between matches. Use it to draw custom overlays when a match is highlighted. -- Event arguments: [TextSearchHighlightEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSearchHighlightEventArgs.html) exposes: +- **Event arguments**: [`TextSearchHighlightEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSearchHighlightEventArgs.html) exposes: - `Bound`: represents the highlighted match position and dimensions. - `PageNumber`: page index where the match is highlighted. @@ -66,13 +66,9 @@ The [OnTextSearchHighlight](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla ## OnTextSearchComplete -The [OnTextSearchComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchComplete) event runs after the search engine finishes scanning the document for the current query. Use to update match counts, toggle navigation controls, or notify users when no results were found. +The [`OnTextSearchComplete`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchComplete) event fires after the search engine finishes scanning the document for the current query. Use it to update match counts, toggle navigation controls, or notify users when no results were found. -- **Typical uses**: - - Update UI with the total number of matches and enable navigation controls. - - Hide loading indicators or show a "no results" message if none were found. - - Record analytics for search effectiveness. -- **Event arguments**: [TextSearchCompleteEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSearchCompleteEventArgs.html) exposes: +- **Event arguments**: [`TextSearchCompleteEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSearchCompleteEventArgs.html) exposes: - `SearchText`: the searched term. - `MatchCase`: indicates whether case-sensitive search was used. diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/text-search/text-search-features.md b/Document-Processing/PDF/PDF-Viewer/blazor/text-search/text-search-features.md index 803cd0e7e9..3a5e3fa5e6 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/text-search/text-search-features.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/text-search/text-search-features.md @@ -1,16 +1,16 @@ --- layout: post -title: Text search Features in Blazor PDF Viewer Component | Syncfusion -description: Learn how to configure text search and run programmatic searches in the Syncfusion Blazor PDF Viewer. +title: Text Search Features in Blazor PDF Viewer Component | Syncfusion +description: Learn how to configure text search and run programmatic searches in the Blazor PDF Viewer. platform: document-processing -control: Text search +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- -# Text search in Blazor PDF Viewer +# Text search in Blazor PDF Viewer Component -The text search feature in the Blazor PDF Viewer locates and highlights matching content within a document. Enable or disable this capability with the following configuration. +The text search feature in the Blazor PDF Viewer locates and highlights matching content within a document. Enable or disable this capability using the following configuration. ![Text Search](../images/text-search.png) @@ -24,22 +24,22 @@ Enable the Match Case checkbox to limit results to case-sensitive matches. Navig ![Text Search With Match Case](../images/text-search-matchcase.png) -### Search text without Match Case +### Search text without the Match Case option Leave the Match Case option cleared to highlight every occurrence of the query, regardless of capitalization, and navigate through each result. ![Text Search Without Match Case](../images/text-search-without-matchcase.png) -## Programmatic text Search +## Programmatic text search -The Blazor PDF Viewer provides options to toggle text search feature and APIs to customize the text search behavior programmatically. +The Blazor PDF Viewer provides options to toggle the text search feature and APIs to customize the text search behavior programmatically. -### Enable or Disable Text Search +### Enable or disable text search -Use the following snippet to enable or disable text search features +Use the following snippet to enable text search. {% tabs %} -{% highlight razor%} +{% highlight razor %} @using Syncfusion.Blazor.SfPdfViewer + +{% endhighlight %} +{% endtabs %} + +### Programmatic text search APIs While the PDF Viewer toolbar offers an interactive search experience, you can also trigger and customize searches programmatically by calling the following APIs. @@ -70,9 +84,11 @@ Set the `isMatchCase` parameter to `true` to perform a case-sensitive search tha await pdfViewer.SearchTextAsync("PDF", true); ``` +If `SearchNextAsync` or `SearchPreviousAsync` is called before `SearchTextAsync`, no navigation occurs because there is no active search query. + #### `SearchNextAsync` -[`SearchNextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchNextAsync) method searches the next occurrence of the current query from the active match. +[`SearchNextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchNextAsync) method searches for the next occurrence of the current query starting from the currently active match. ```cshtml // SearchNextAsync() @@ -81,7 +97,7 @@ await pdfViewer.SearchNextAsync(); #### `SearchPreviousAsync` -[`SearchPreviousAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchPreviousAsync) method searches the previous occurrence of the current query from the active match. +[`SearchPreviousAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_PdfViewer2_SearchPreviousAsync) method searches for the previous occurrence of the current query starting from the currently active match. ```cshtml // SearchPreviousAsync() @@ -90,19 +106,21 @@ await pdfViewer.SearchPreviousAsync(); #### `CancelTextSearchAsync` -[`CancelTextSearchAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_CancelTextSearchAsync) method cancels the current text search and removes the highlighted occurrences from the PDF Viewer. +[`CancelTextSearchAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_PdfViewer2_CancelTextSearchAsync) method cancels the current text search and removes the highlighted occurrences from the PDF Viewer. ```cshtml // CancelTextSearchAsync() await pdfViewer.CancelTextSearchAsync(); ``` -#### Complete Example +#### Complete example -Use the following code snippet to implement text search using SearchTextAsync API +Use the following code snippet to implement text search using the `SearchTextAsync` API. Place the sample PDF in `wwwroot/Data` so the `DocumentPath` resolves at runtime. {% tabs %} {% highlight razor %} +@using Syncfusion.Blazor.SfPdfViewer + @@ -119,7 +137,7 @@ Use the following code snippet to implement text search using SearchTextAsync AP private async Task SearchText() { - await pdfViewer.SearchTextAsync("pdf", false); + await pdfViewer.SearchTextAsync("search text", false); } private async Task PreviousSearch() @@ -140,11 +158,11 @@ Use the following code snippet to implement text search using SearchTextAsync AP {% endhighlight %} {% endtabs %} -**Expected result:** the viewer highlights occurrences of `pdf` and navigation commands jump between matches. +**Expected result:** the viewer highlights occurrences of `search text` and navigation commands jump between matches. -### Customize text search highlight colors +## Customize text search highlight colors -Use the [PdfViewerTextSearchColorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerTextSearchColorSettings.html) to customize the highlight appearance used for search results. Configure [SearchColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerTextSearchColorSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerTextSearchColorSettings_SearchColor) for other matches and [SearchHighlightColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerTextSearchColorSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerTextSearchColorSettings_SearchHighlightColor) for the current match. By default, distinct colors are applied for the current occurrence and other matches; adjust these to align with application theme and accessibility contrast requirements. +Use [PdfViewerTextSearchColorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerTextSearchColorSettings.html) to customize the highlight appearance used for search results. Configure [SearchColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerTextSearchColorSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerTextSearchColorSettings_SearchColor) for other matches and [SearchHighlightColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerTextSearchColorSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerTextSearchColorSettings_SearchHighlightColor) for the current match. By default, distinct colors are applied for the current occurrence and other matches; adjust these to align with application theme and accessibility contrast requirements. The `SearchColor` and `SearchHighlightColor` properties accept CSS color values, such as named colors (`red`, `blue`) or hex codes (`#FF0000`). {% tabs %} {% highlight razor %} @@ -166,5 +184,5 @@ Use the [PdfViewerTextSearchColorSettings](https://help.syncfusion.com/cr/blazor ## See also - [Text Search Events](./text-search-events) -- [Text Selection](../text-selection/overview) -- [Extract and Highlight Text in Blazor PDF Viewer Component](../faqs/how-to-extract-particular-text-and-highlight) \ No newline at end of file +- [Text Selection overview](../text-selection/overview) +- [Extract and highlight text in Blazor PDF Viewer component](../faqs/how-to-extract-particular-text-and-highlight) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/text-selection/enable-text-selection.md b/Document-Processing/PDF/PDF-Viewer/blazor/text-selection/enable-text-selection.md index 6ef1deba95..3f354a7e5e 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/text-selection/enable-text-selection.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/text-selection/enable-text-selection.md @@ -2,7 +2,7 @@ layout: post title: Enable or disable text selection in Blazor PDF Viewer | Syncfusion description: Learn how to enable or disable text selection in the Blazor PDF Viewer using the EnableTextSelection property. -control: PDF Viewer +control: SfPdfViewer platform: document-processing documentation: ug domainurl: ##DomainURL## @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Enable or disable text selection in Blazor PDF Viewer -This guide explains how to enable or disable text selection in the Syncfusion Blazor PDF Viewer using both initialization-time settings and runtime toggling. +This guide explains how to enable or disable text selection in the Blazor PDF Viewer using both initialization-time settings and runtime toggling. Text selection is enabled by default; set `EnableTextSelection` to `false` to disable it. -### Disable text selection at initialization +## Disable or enable text selection at initialization -Use the [EnableTextSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableTextSelection) property during initialization to disable or enable text selection. The following example disables the text selection during initialization. +Use the [EnableTextSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableTextSelection) property during initialization to disable or enable text selection. The default value is `true`. The following example disables the text selection during initialization. {% tabs %} {% highlight razor %} @@ -31,9 +31,9 @@ Use the [EnableTextSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.B {% endhighlight %} {% endtabs %} -### Toggle text selection at runtime +## Toggle text selection at runtime -The [EnableTextSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableTextSelection) property can be toggled at runtime using buttons to enable or disable text selection dynamically. The following example demonstrates how to toggle text selection using button click events while also updating the [InteractionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_InteractionMode) and reloading the document. +The [`EnableTextSelection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableTextSelection) property can be toggled at runtime using buttons to enable or disable text selection dynamically. The following example demonstrates how to toggle text selection using button click events while also updating the [`InteractionMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_InteractionMode) and reloading the document. {% tabs %} {% highlight razor %} @@ -50,23 +50,23 @@ The [EnableTextSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo @ref="@Viewer" /> @code { - SfPdfViewer2 Viewer; - public Boolean EnableTextSelection=true; - public InteractionMode InteractionMode=InteractionMode.TextSelection; + private SfPdfViewer2? Viewer; + public bool EnableTextSelection = true; + public InteractionMode InteractionMode = InteractionMode.TextSelection; public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; - public void EnableTextSelections() + public async Task EnableTextSelections() { - EnableTextSelection=true; - InteractionMode=InteractionMode.TextSelection; - Viewer.LoadAsync(DocumentPath,null); + EnableTextSelection = true; + InteractionMode = InteractionMode.TextSelection; + await Viewer.LoadAsync(DocumentPath, null); } - public void DisableTextSelections() + public async Task DisableTextSelections() { - EnableTextSelection=false; - InteractionMode=InteractionMode.Pan; - Viewer.LoadAsync(DocumentPath,null); + EnableTextSelection = false; + InteractionMode = InteractionMode.Pan; + await Viewer.LoadAsync(DocumentPath, null); } } {% endhighlight %} diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/text-selection/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/text-selection/overview.md index 316274d360..68b1642eb3 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/text-selection/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/text-selection/overview.md @@ -1,16 +1,16 @@ --- layout: post title: Text selection in Blazor PDF Viewer | Syncfusion -description: Learn the text selection concepts, copy behavior, and interaction capabilities of the Syncfusion Blazor PDF Viewer. +description: Learn the text selection concepts, copy behavior, and interaction capabilities of the Blazor PDF Viewer. platform: document-processing -control: Text selection +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- # Text selection in Blazor PDF Viewer -The Text Selection module in the Syncfusion Blazor PDF Viewer enables users to select and copy text from a loaded PDF document. Text selection is available by default and gives users direct interaction with the content through dragging, keyboard shortcuts, and context menus. +The Text Selection module in the Blazor PDF Viewer enables users to select and copy text from a loaded PDF document. Text selection is available by default and gives users direct interaction with the content through dragging, keyboard shortcuts, and context menus. This overview explains the behavior of text selection, how copy actions work, and how it relates to other interaction features in the viewer. @@ -18,11 +18,11 @@ This overview explains the behavior of text selection, how copy actions work, an Text selection allows users to: -- Highlight text using mouse or touch -- Copy the selected text to the clipboard -- Access contextual commands such as Copy through the built‑in context menu -- Use keyboard shortcuts such as Ctrl+C or Cmd+C to copy text -- Trigger application behavior through selection events +- Highlight text using mouse or touch +- Copy the selected text to the clipboard +- Access contextual commands such as Copy through the built-in context menu +- Use keyboard shortcuts such as Ctrl+C or Cmd+C to copy text +- Respond to selection events such as [OnTextSelectionStart](./text-selection-api-events#ontextselectionstart) and [OnTextSelectionEnd](./text-selection-api-events#ontextselectionend) The feature behaves consistently across single-page and multi-page documents. @@ -32,18 +32,20 @@ You can copy selected text using the following options: ### Using the context menu -When text is selected, the built‑in context menu shows a Copy option. Selecting this option copies the highlighted text to the clipboard. See the [context menu](../context-menu) documentation for further explanation. +When text is selected, the built-in context menu shows a Copy option. Selecting this option copies the highlighted text to the clipboard. See the [context menu](../context-menu) documentation for more information. ### Using keyboard shortcuts The following keyboard shortcuts copy the selected text: -- Ctrl+C (Windows and Linux) +- Ctrl+C (Windows and Linux) - Cmd+C (macOS) +- Ctrl+A (Windows, Linux, and macOS) to select all text on the current page -## Related topics +## See also These topics describe how selection interacts with other features or how copy behavior may be limited depending on viewer configuration or PDF security settings. +- [Blazor PDF Viewer overview](../overview) — general introduction to the Blazor PDF Viewer component. - [Toggle text selection](./enable-text-selection) -- [Text selection API reference](./text-selection-api-events) +- [Text selection API and events](./text-selection-api-events) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/text-selection/text-selection-api-events.md b/Document-Processing/PDF/PDF-Viewer/blazor/text-selection/text-selection-api-events.md index 3959538a37..5c9f169eb2 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/text-selection/text-selection-api-events.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/text-selection/text-selection-api-events.md @@ -1,24 +1,24 @@ --- layout: post title: Text selection API and events in Blazor PDF Viewer | Syncfusion -description: Reference documentation for text selection properties, methods, and events in the Syncfusion Blazor PDF Viewer. +description: Reference documentation for text selection properties, methods, and events in the Blazor PDF Viewer. platform: document-processing -control: Text selection +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- # Text selection API and events in Blazor PDF Viewer -This document provides the reference details for text selection APIs and events in the Syncfusion Blazor PDF Viewer. It includes the available configuration property, programmatic methods, and event callbacks that allow applications to react to selection behavior. +This document provides the reference details for text selection APIs and events in the Blazor PDF Viewer. It includes the available programmatic methods and event callbacks that allow applications to react to selection behavior. ## Methods ### SelectTextRegionAsync -The [SelectTextRegionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SelectTextRegionAsync_System_Int32_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_Bound__) method programmatically selects text within a specified page and bounds. Use to highlight specific text regions based on user interactions, search results, or application logic. +The [`SelectTextRegionAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SelectTextRegionAsync_System_Int32_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_Bound__) method programmatically selects text within a specified page and bounds. Use this method to highlight specific text regions based on user interactions, search results, or application logic. -The following example illustrates how to handle the SelectTextRegionAsync Method. +The following example illustrates how to handle the SelectTextRegionAsync method. {% tabs %} {% highlight razor %} @@ -54,9 +54,9 @@ The following example illustrates how to handle the SelectTextRegionAsync Method ### ClearTextSelectionAsync -The [ClearTextSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ClearTextSelectionAsync) event clears all text selection in the PDF document. Removes any highlighted or selected text regions and resets the selection state. Use to reset the UI when users start a new operation or when clearing filtered results. +The [`ClearTextSelectionAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ClearTextSelectionAsync) method clears all text selection in the PDF document. It clears any highlighted or selected text regions and resets the selection state. Use this method to reset the UI when users start a new operation or when clearing filtered results. -The following example illustrates how to handle the ClearTextSelectionAsync Method. +The following example illustrates how to handle the ClearTextSelectionAsync method. {% tabs %} {% highlight razor %} @@ -86,10 +86,11 @@ The following example illustrates how to handle the ClearTextSelectionAsync Meth ### OnTextSelectionStart -The [OnTextSlectionStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSelectionStart) event is triggered when the user begins selecting text. Use to perform actions when text selection starts, such as logging, updating UI elements, or starting data collection. +The [OnTextSelectionStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSelectionStart) event is triggered when the user begins selecting text. Use this event to perform actions when text selection starts, such as logging, updating UI elements, or starting data collection. -- Event arguments: [TextSelectionStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSelectionStartEventArgs.html) exposes: -- `PageNumber` - The page where the selection started (1‑based indexing). +**Event arguments:** [`TextSelectionStartEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSelectionStartEventArgs.html) exposes: + +- `PageNumber` (int) – The page where the selection started (1-based indexing). The following example illustrates how to handle the OnTextSelectionStart event. @@ -117,13 +118,15 @@ The following example illustrates how to handle the OnTextSelectionStart event. ### OnTextSelectionEnd -The [OnTextSlectionEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSelectionEnd) event is triggered when the selection operation completes. Use to capture and process selected text, update UI elements, or perform operations based on the selection bounds and content. +The [`OnTextSelectionEnd`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSelectionEnd) event is triggered when the selection operation completes. Use this event to capture and process selected text, update UI elements, or perform operations based on the selection bounds and content. + +**Event arguments:** [TextSelectionEndEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSelectionEndEventArgs.html) exposes: -- Event arguments: [TextSelectionEndEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSelectionEndEventArgs.html) exposes: -- `TextBounds` - Defines the bounds of the selected text in the page. -- `TextContent` - Defines the text content selected in the page. +- `PageNumber` (int) – The page where the selection ended (1-based indexing). +- `TextBounds` (List<[TextBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBound.html)>) – The bounds of the selected text in the page. +- `TextContent` (string) – The text content selected in the page. -The following example illustrates how to handle the OnTextSelectionEnd Event. +The following example illustrates how to handle the OnTextSelectionEnd event. {% tabs %} {% highlight razor %} @@ -149,5 +152,5 @@ The following example illustrates how to handle the OnTextSelectionEnd Event. ## See also -- [Toggle text selection](./enable-text-selection) +- [Enable or disable text selection in Blazor PDF Viewer](./enable-text-selection) - [Blazor PDF Viewer events](../events) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/annotation-toolbar.md index df0e365007..0f6fba9be2 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/annotation-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/annotation-toolbar.md @@ -1,28 +1,27 @@ --- layout: post title: Customize the Annotation Toolbar in Blazor PDF Viewer | Syncfusion -description: Let here all about how to Show or hide and customize the annotation toolbar in the Blazor PDF Viewer with runnable examples. +description: Learn how to show, hide, and customize the annotation toolbar in the Blazor PDF Viewer component. platform: document-processing -control: PDF Viewer +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- # Customize the Annotation Toolbar in Blazor PDF Viewer -This guide shows how to show or hide the annotation toolbar and how to -Customize the annotation toolbar by selecting which tools to display, arranging their order, and controlling its visibility programmatically. +This guide shows how to show or hide the annotation toolbar and how to customize the annotation toolbar by selecting which tools to display, arranging their order, and controlling its visibility programmatically. ## Show or hide the annotation toolbar -Use the [ShowAnnotationToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ShowAnnotationToolbar_System_Boolean_) method on the viewer to control visibility. Toggle the annotation toolbar during initialization or at runtime using the [EnableAnnotationToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableAnnotationToolbar) property or the ShowAnnotationToolbar method. +Use the [`ShowAnnotationToolbar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ShowAnnotationToolbar_System_Boolean_) method on the viewer to control visibility. Use the [`EnableAnnotationToolbar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableAnnotationToolbar) property during initialization, or call the ShowAnnotationToolbar method at runtime. {% tabs %} {% highlight razor tabtitle="Toolbar.razor" %} @using Syncfusion.Blazor.SfPdfViewer @using Syncfusion.Blazor.Buttons -Show/Hide Annotation Toolbar +Show/Hide Annotation Toolbar Properties tools (color, opacity, thickness, font, etc.) now appear only after you select or add the related annotation. Until you select or add one, these tools are hidden. +N> Property tools (color, opacity, thickness, font, etc.) now appear only after you select or add the related annotation. Until you select or add an annotation, these tools are hidden. N> This change reduces clutter and shows options only when they're relevant to the selected annotation. diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/custom-toolbar.md index f4372886e1..c34a88ed72 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/custom-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/custom-toolbar.md @@ -1,8 +1,8 @@ --- layout: post title: Create a custom toolbar in Blazor PDF Viewer Component | Syncfusion -description: Learn here all about custom toolbar in Syncfusion Blazor PDF Viewer component of Syncfusion and more. -control: PDF Viewer +description: Learn how to build a custom toolbar in the Blazor PDF Viewer component, including navigation, zoom, annotation, save, print, and download actions. +control: SfPdfViewer platform: document-processing documentation: ug domainurl: ##DomainURL## @@ -12,14 +12,14 @@ domainurl: ##DomainURL## ## Overview -The Syncfusion Blazor PDF Viewer component provides extensive APIs for user interaction through its built-in toolbar. However, if you need a custom toolbar that matches your application's design and functionality requirements, you can hide the default toolbar and create your own using the Syncfusion Blazor Toolbar component. +The Blazor PDF Viewer component provides extensive APIs for user interaction through its built-in toolbar. However, if you need a custom toolbar that matches your application's design and functionality requirements, you can hide the default toolbar and create your own using the Blazor Toolbar component. A custom toolbar allows you to: - Control which features are available to end users - Match your application's design language - Organize toolbar items according to your workflow -- Add custom logic to toolbar actions -- Implement conditional button visibility +- Bind custom behavior to toolbar button clicks +- Show or hide buttons based on application state ## Key Concepts @@ -54,9 +54,9 @@ Common actions you can wire to custom toolbar buttons: | `ZoomOutAsync()` | Decrease zoom level | Yes | | `PrintAsync()` | Print the PDF document | Yes | | `DownloadAsync()` | Download the PDF document | Yes | -| `GetDocumentAsync()` | Retrieve PDF as bytes (with changes) | Yes | -| `LoadAsync()` | Load a PDF document | Yes | -| `ShowAnnotationToolbar(bool)` | Show or hide annotation toolbar | No | +| `GetDocumentAsync()` | Retrieve the current PDF as a byte array, including annotations and form-field changes | Yes | +| `LoadAsync()` | Load a PDF document from a byte array, stream, or data URI | Yes | +| `ShowAnnotationToolbar(bool)` | Show or hide the annotation toolbar | Sync (`void`) | ## Create Your First Custom Toolbar @@ -72,26 +72,26 @@ Use the following code snippet to create a fully functional custom toolbar with + Align="@ItemAlign.Left" OnClick="@previousClicked"> + Align="@ItemAlign.Left" OnClick="@nextClicked"> + Align="@ItemAlign.Right" OnClick="@save"> + Align="@ItemAlign.Right" OnClick="@annotations"> + Align="@ItemAlign.Right" OnClick="@print"> + Align="@ItemAlign.Right" OnClick="@download"> @@ -153,7 +153,7 @@ Use the following code snippet to create a fully functional custom toolbar with public void zoomoutClicked(ClickEventArgs args) { - //Magnifies the page to the previous value in the zoom drop down list. + //Decreases the page to the previous value in the zoom drop down list. PDFViewer.ZoomOutAsync(); } } @@ -192,7 +192,7 @@ Use the following code snippet to create a fully functional custom toolbar with Refer to the image below for the Custom Toolbar. -![Custom toolbar](../images/custom-toolbar.png) +![Blazor PDF Viewer with a custom toolbar showing Previous Page, Next Page, Zoom In, Zoom Out, Save, Edit Annotation, Print, and Download buttons](../images/custom-toolbar.png) [View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Custom%20Toolbar) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/form-designer-toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/form-designer-toolbar.md index 921dad1dfd..bb3ee46f11 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/form-designer-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/form-designer-toolbar.md @@ -1,9 +1,9 @@ --- layout: post title: Customize the Form Designer Toolbar in Blazor PDF Viewer | Syncfusion -description: Learn how to show or hide and customize the Form Designer toolbar in the Syncfusion Blazor PDF Viewer. +description: Learn how to show or hide and customize the Form Designer toolbar in the Blazor PDF Viewer. platform: document-processing -control: PDF Viewer +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- @@ -12,9 +12,9 @@ domainurl: ##DomainURL## This guide shows how to show or hide the form designer toolbar, and how to configure which tools appear and their order. -## Show or hide Form Designer toolbar at initialization +## Show or hide form designer toolbar at initialization -Set the [EnableFormDesigner](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableFormDesigner) property to `true` or `false` to control initial visibility. +Set the [`EnableFormDesigner`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableFormDesigner) property to `true` to display the Form Designer toolbar initially, or `false` to hide it. {% tabs %} {% highlight razor tabtitle="Toolbar.razor" %} @@ -30,7 +30,7 @@ Set the [EnableFormDesigner](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl ## Show or hide form designer toolbar at runtime -Use the [EnableFormDesigner](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableFormDesigner) property to toggle visibility at runtime. +Use the [`IsDesignerMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsDesignerMode) property to toggle visibility at runtime. {% tabs %} {% highlight razor tabtitle="Toolbar.razor" %} @@ -61,7 +61,7 @@ Use the [EnableFormDesigner](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl ## Customize form designer toolbar items -Use [PdfViewerToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html) to specify which form-design tools are shown and their order. The property accepts a list of [FormDesignerToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormDesignerToolbarItem.html) values; only listed items are rendered, and the displayed order follows the list sequence. +Use [`PdfViewerToolbarSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html) to specify which form designer tools are shown and their order. The property accepts a list of [`FormDesignerToolbarItem`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormDesignerToolbarItem.html) values; only listed items are rendered, and the displayed order follows the list sequence. {% tabs %} {% highlight razor tabtitle="Toolbar.razor" %} @@ -92,11 +92,11 @@ Use [PdfViewerToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion. {% endhighlight %} {% endtabs %} -Refer to the image below for the desktop view. +The desktop view is shown below. ![Form designer toolbar with selected tools on desktop](../images/Form_Designer_Toolbar_Customization_Desktop.png) -Refer to the image below for the mobile view. +The mobile view is shown below. ![Form designer toolbar with selected tools on mobile](../images/Form_Designer_Toolbar_Customization_Mobile.png) @@ -111,13 +111,13 @@ The following is a complete, runnable example. It wires a toggle button and a vi @using Syncfusion.Blazor.SfPdfViewer @using Syncfusion.Blazor.Buttons -Hide Form Designer Toolbar +Show/Hide Form Designer Toolbar - @@ -149,4 +149,4 @@ The following is a complete, runnable example. It wires a toggle button and a vi - [Customize primary toolbar](./primary-toolbar) - [Customize annotation toolbar](./annotation-toolbar) -- [Form designer in PDF viewer](../form-designer/overview) +- [Form designer in PDF viewer](../forms/form-designer) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/mobile-toolbar.md index e9e851961b..b78ca7aabd 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/mobile-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/mobile-toolbar.md @@ -1,9 +1,9 @@ --- layout: post -title: Customize mobile Toolbar in Blazor PDF Viewer | Syncfusion -description: Learn how to customize the toolbar for mobile devices in the Syncfusion Blazor PdfViewer and ensure smooth touch interactions. +title: Customize mobile toolbar in Blazor PDF Viewer | Syncfusion +description: Learn how to customize the toolbar for mobile devices in the Blazor PdfViewer and ensure smooth touch interactions. platform: document-processing -control: PDF Viewer +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- @@ -29,14 +29,14 @@ The primary toolbar in mobile includes the following options: ### Reorder mobile toolbar items -Use [MobileToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_MobileToolbarItems) to control the display order. The toolbar renders items in the order they appear in the collection. +Use [`MobileToolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_MobileToolbarItems) to control the display order. The toolbar renders items in the order they appear in the collection. {% tabs %} -{% highlight razor tabtitle="Toolbar.razor" %} +{% highlight razor tabtitle="MobileToolbar.razor" %} @using Syncfusion.Blazor.SfPdfViewer - @@ -89,14 +89,14 @@ The annotation toolbar appears when annotation features are enabled and provides ### Customize annotation toolbar items in mobile -Use [AnnotationToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_AnnotationToolbarItems) to configure which annotation tools are shown on mobile devices. +Use [`AnnotationToolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_AnnotationToolbarItems) to configure which annotation tools are shown on mobile devices. {% tabs %} -{% highlight razor tabtitle="Toolbar.razor" %} +{% highlight razor tabtitle="AnnotationToolbar.razor" %} @using Syncfusion.Blazor.SfPdfViewer - @@ -122,19 +122,19 @@ Use the form designer toolbar to add and configure interactive form fields in th * Edit helpers: Delete * Close -![Blazor PDF Viewer primary toolbar with customized items](../images/form-designer-toolbar-mobile-view.png) +![Blazor PDF Viewer form designer toolbar in mobile view](../images/form-designer-toolbar-mobile-view.png) ### Customize form designer toolbar items in mobile -Use [FormDesignerToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_FormDesignerToolbarItems) to configure which form design tools are shown on mobile devices. +Use [`FormDesignerToolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_FormDesignerToolbarItems) to configure which form design tools are shown on mobile devices. {% tabs %} -{% highlight razor tabtitle="Toolbar.razor" %} +{% highlight razor tabtitle="FormDesignerToolbar.razor" %} @using Syncfusion.Blazor.SfPdfViewer @@ -155,24 +155,25 @@ Use [FormDesignerToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion. The redaction toolbar provides tools to mark and permanently remove sensitive content from the document. In mobile mode, it appears at the bottom of the viewer. -* Redaction marks: Mark for redaction, Redact page +* Mark for redaction +* Redact page * Apply redactions: Permanently remove marked content * Properties: Redaction properties * Edit helpers: Delete * Close -![Blazor PDF Viewer primary toolbar with customized items](../images/mobile-redaction-toolbar.png) +![Blazor PDF Viewer redaction toolbar in mobile view](../images/mobile-redaction-toolbar.png) ### Enable redaction toolbar in mobile -Show the redaction toolbar on mobile by configuring the [MobileToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_MobileToolbarItems) property. +Show the redaction toolbar on mobile by configuring the [`MobileToolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_MobileToolbarItems) property. {% tabs %} -{% highlight razor tabtitle="Toolbar.razor" %} +{% highlight razor tabtitle="RedactionToolbar.razor" %} @using Syncfusion.Blazor.SfPdfViewer - @@ -198,15 +199,15 @@ Show the redaction toolbar on mobile by configuring the [MobileToolbarItems](htt ## Enable desktop mode on mobile -Enable the desktop toolbar on mobile devices with the [EnableDesktopMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableDesktopMode) API. This replaces the mobile toolbar with the desktop layout and provides access to additional actions and controls. +Enable the desktop toolbar on mobile devices with the [`EnableDesktopMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableDesktopMode) API. This replaces the mobile toolbar with the desktop layout and provides access to additional actions and controls. {% tabs %} -{% highlight razor tabtitle="Toolbar.razor" %} +{% highlight razor tabtitle="DesktopMode.razor" %} @using Syncfusion.Blazor.SfPdfViewer {% endhighlight %} @@ -222,15 +223,15 @@ On mobile devices, the navigation toolbar collapses into a toggle menu to save s ## Enable modern navigation panel in mobile view -On mobile devices, the navigation toolbar collapses into a toggle menu to save space. Enable the modern navigation panel by setting [EnableNavigationPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigationPanel) to true. +Enable the modern navigation panel by setting [`EnableNavigationPanel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigationPanel) to true. {% tabs %} -{% highlight razor tabtitle="Toolbar.razor" %} +{% highlight razor tabtitle="NavigationPanel.razor" %} @using Syncfusion.Blazor.SfPdfViewer {% endhighlight %} @@ -240,16 +241,16 @@ On mobile devices, the navigation toolbar collapses into a toggle menu to save s ## Enable scrolling in desktop mode with touch gestures -To enable smooth scrolling of PDF documents on mobile while in desktop mode, disable text selection by setting [EnableTextSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableTextSelection) to false to allow touch panning. +To enable smooth scrolling of PDF documents on mobile while in desktop mode, disable text selection by setting [`EnableTextSelection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableTextSelection) to false to allow touch panning. {% tabs %} -{% highlight razor tabtitle="Toolbar.razor" %} +{% highlight razor tabtitle="DesktopModeScrolling.razor" %} @using Syncfusion.Blazor.SfPdfViewer {% endhighlight %} @@ -259,7 +260,7 @@ To enable smooth scrolling of PDF documents on mobile while in desktop mode, dis ## Print option availability in mobile -The Print option is not available in mobile mode by default. To use printing on mobile, enable the desktop toolbar with the [EnableDesktopMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableDesktopMode) API. Availability and behavior may vary by mobile browser. +The Print option is not available in mobile mode by default. To use printing on mobile, enable the desktop toolbar with the [`EnableDesktopMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableDesktopMode) API. Availability and behavior may vary by mobile browser. ## Related topics diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/overview.md index 657375cefc..725db78978 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/overview.md @@ -1,14 +1,14 @@ --- layout: post title: Toolbar in Blazor PDF Viewer component | Syncfusion -description: Check out and learn about the primary, annotation, form designer, and redaction toolbars in the Syncfusion Blazor SfPdfViewer component. -control: PDF Viewer +description: Check out and learn about the primary, annotation, form designer, and redaction toolbars in the Blazor SfPdfViewer component. +control: SfPdfViewer platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Toolbar overview in Blazor PDF Viewer +# Toolbar in Blazor PDF Viewer component This page provides a concise reference describing the toolbars available in the Blazor PDF Viewer component. It also explains what each toolbar is for and when it appears. @@ -21,11 +21,11 @@ This page provides a concise reference describing the toolbars available in the - [Redaction toolbar](#redaction-toolbar) - [Custom toolbar](./custom-toolbar) -## Functional overview of each toolbar +## Functional Overview of Each Toolbar ### Primary toolbar -The primary toolbar provides quick access to common viewer actions and entry points to feature-specific toolbars. It adapts to available width and presents controls appropriate for the current device and layout. +The primary toolbar provides quick access to common viewer actions and entry points to feature-specific toolbars. It adapts to the available width and shows controls appropriate for the current device and layout. Primary toolbar options include: @@ -68,7 +68,7 @@ Annotation toolbar options include: ![annotation desktop toolbar](../images/blazor-annotation-toolbar.png) -See [Annotation toolbar Customization](./annotation-toolbar) for configuration options and examples. +See [Annotation toolbar customization](./annotation-toolbar) for configuration options and examples. ### Form Designer toolbar @@ -82,17 +82,17 @@ Form designer toolbar options include: ![form designer toolbar](../images/blazor-form-deigner-toolbar.png) -See [FormDesigner toolbar Customization](./form-designer-toolbar) for configuration options and examples. +See [Form designer toolbar customization](./form-designer-toolbar) for configuration options and examples. ### Mobile toolbar - A compact toolbar layout optimized for small screens and touch interactions. It appears automatically on mobile-sized view ports and contains the most frequently used actions in a space-efficient arrangement. - ![mobile toolbar](../images/primary-toolbar-mobile-view.png) +![mobile toolbar](../images/primary-toolbar-mobile-view.png) - Annotation toolbar in mobile mode appears at the bottom of the PDF Viewer component. - ![mobile annotation toolbar](../images/annotation-toolbar-mobile-view.png) +![mobile annotation toolbar](../images/annotation-toolbar-mobile-view.png) ### Redaction toolbar @@ -108,18 +108,18 @@ Redaction toolbar options include: ![redaction toolbar](../images/mobile-redaction-toolbar.png) -See [Redaction toolbar Customization](./redaction-toolbar) for configuration options and examples. +See [Redaction toolbar customization](./redaction-toolbar) for configuration options and examples. -## Show or hide toolbar items +## Customize toolbars The following quick links describe how to customize, show, or hide specific toolbar items. Each linked page defines custom toolbar configurations and examples. -- [Show or hide primary toolbar items](./primary-toolbar#customize-the-default-toolbar-items) +- [Show or hide primary toolbar items](./primary-toolbar#customize-the-primary-toolbar-in-blazor-pdf-viewer) - [Show or hide annotation toolbar items](./annotation-toolbar#customize-annotation-toolbar-items) - [Show or hide form designer toolbar items](./form-designer-toolbar#customize-form-designer-toolbar-items) -- [Add a custom primary toolbar item](./primary-toolbar#disable-default-items-and-add-custom-items-in-the-primary-toolbar) -- [Enable mobile toolbar](./mobile-toolbar#primary-toolbar-in-mobile-mode) -- [Enable redaction toolbar](./primary-toolbar#enable-the-redaction-toolbar-on-desktop) +- [Add a custom primary toolbar item](./primary-toolbar#customize-the-primary-toolbar-in-blazor-pdf-viewer) +- [Enable mobile toolbar](./mobile-toolbar) +- [Enable redaction toolbar](./redaction-toolbar) ## Further Reading diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/primary-toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/primary-toolbar.md index cd552664fe..2df521d1d8 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/primary-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/primary-toolbar.md @@ -1,20 +1,20 @@ --- layout: post title: Customize the Primary Toolbar in Blazor PDF Viewer | Syncfusion -description: Learn how to show or hide, reorder, and add items to the primary toolbar in the Syncfusion Blazor PDF Viewer. +description: Learn how to show or hide, reorder, and add items to the primary toolbar in the Blazor PDF Viewer. platform: document-processing -control: PDF Viewer +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- -# Customize Primary Toolbar in Blazor PDF Viewer +# Customize the Primary Toolbar in Blazor PDF Viewer This guide explains how to show or hide the primary toolbar, remove default items, reorder toolbar items, and add custom toolbar items. ## Show or hide primary toolbar at initialization -Set [EnableToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableToolbar) to `false` to hide the built-in toolbar. +Set [`EnableToolbar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableToolbar) to `false` to hide the built-in toolbar. {% tabs %} {% highlight razor tabtitle="Toolbar.razor" %} @@ -30,7 +30,7 @@ Set [EnableToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPd ## Show or hide primary toolbar at runtime -Use the [ShowToolbarAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ShowToolbarAsync_System_Boolean_) method to show or hide the toolbar dynamically. +Use the [`ShowToolbarAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ShowToolbarAsync_System_Boolean_) method to show or hide the toolbar dynamically. {% tabs %} {% highlight razor tabtitle="Toolbar.razor" %} @@ -46,9 +46,9 @@ Use the [ShowToolbarAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz @code { - SfPdfViewer2 PdfViewer; + private SfPdfViewer2 PdfViewer; - public async void OnClick(MouseEventArgs args) + public async Task OnClick() { await PdfViewer.ShowToolbarAsync(false); } @@ -58,11 +58,11 @@ Use the [ShowToolbarAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Custom%20Toolbar/Custom%20Toolbar). -## Customize the default toolbar items +## Customize the default toolbar items in the primary toolbar -Display only the required default actions and control their order. +Show only the required default actions and control their order in the primary toolbar. -Use [PdfViewerToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html) to specify which toolbar items are shown and their order. The toolbar renders only the items listed in the [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) collection. +Use [`PdfViewerToolbarSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html) to specify which toolbar items are shown and their order. The toolbar renders only the items listed in the [`ToolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) collection. For a full list of available values, see the [`ToolbarItem`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ToolbarItem.html) enum. {% tabs %} {% highlight razor tabtitle="Toolbar.razor" %} @@ -87,9 +87,9 @@ Use [PdfViewerToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion. {% endhighlight %} {% endtabs %} -## Rearrange the default toolbar items +## Rearrange the default toolbar items in the primary toolbar -Change the visual order of default items by reordering the [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) collection. +Change the visual order of default items in the primary toolbar by reordering the [`ToolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) collection. {% tabs %} {% highlight razor tabtitle="Toolbar.razor" %} @@ -122,11 +122,11 @@ Change the visual order of default items by reordering the [ToolbarItems](https: [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Custom%20Toolbar/Primary%20Custom%20Toolbar/Rearrange-Default-Options). -## Disable default items and add custom items in the primary toolbar +## Remove default items and add custom items to the primary toolbar -Replace built-in items with custom buttons rendered via templates at specific indexes. +Render custom buttons in place of the default items by using templates positioned at specific indexes. -Set [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) to `null` and provide a list of [PdfToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfToolbarItem.html) objects with custom templates. Each item defines a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_PdfToolbarItem_Template) and [Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_PdfToolbarItem_Index) for positioning. +Set [`ToolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) to `null` and provide a list of [`PdfToolbarItem`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfToolbarItem.html) objects with custom templates. Each item defines a [`Template`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_PdfToolbarItem_Template) and [`Index`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_PdfToolbarItem_Index) for positioning. {% tabs %} {% highlight razor tabtitle="Toolbar.razor" %} @@ -158,28 +158,28 @@ Set [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdf { if (name == "PreviousPage") { - } else if (name == "NextPage") { - } else if (name == "Print") { - } @@ -218,13 +218,13 @@ Set [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdf {% endhighlight %} {% endtabs %} -![Primary toolbar with custom items including Save](../images/primary-toolbar-customization-with-save-option.png) +![Primary toolbar with custom items Previous Page, Next Page, Print, and Download](../images/primary-toolbar-customization-with-save-option.png) [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Custom%20Toolbar/Primary%20Custom%20Toolbar/Without-Default-Options). ## Customize the primary toolbar with default options -Combine default and custom items by using both [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) and [CustomToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_CustomToolbarItems). Custom items are inserted at specified index positions among the default items. +Combine default and custom items by using both [`ToolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) and [`CustomToolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_CustomToolbarItems). Custom items are inserted at specified index positions among the default items. {% tabs %} {% highlight razor tabtitle="Toolbar.razor" %} @@ -340,7 +340,7 @@ Customize the appearance of toolbar icons for custom toolbar items. The followin { if (name == "PreviousPage") { - - .e-icons.e-chevron-up::before { + .e-icons.e-chevron-left::before { content: '\e87a'; } - .e-icons.e-chevron-down::before { + .e-icons.e-chevron-right::before { content: '\e70d'; } @@ -424,11 +424,11 @@ Customize the appearance of toolbar icons for custom toolbar items. The followin [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Custom%20Toolbar/Primary%20Custom%20Toolbar/Icon-Style-Change). -N> This applies only to a custom toolbar. +N> This applies only to custom toolbar items. -## Enable the redaction toolbar on desktop +## Add the redaction tool to the primary toolbar on desktop -Show the redaction toolbar on desktop by including [ToolbarItem.Redaction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_ToolbarItem_Redaction) in the [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) collection. +Show the redaction tool in the primary toolbar on desktop by including [`ToolbarItem.Redaction`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_ToolbarItem_Redaction) in the [`ToolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) collection. {% tabs %} {% highlight razor tabtitle="Toolbar.razor" %} @@ -468,7 +468,7 @@ Show the redaction toolbar on desktop by including [ToolbarItem.Redaction](https ## Show or hide the navigation toolbar -Control the sidebar that toggles bookmarks and thumbnails using the [EnableNavigationToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigationToolbar) property. +Control the sidebar that displays thumbnails using the [`EnableNavigationToolbar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigationToolbar) property. {% tabs %} {% highlight razor tabtitle="Toolbar.razor" %} diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/redaction-toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/redaction-toolbar.md index 8cfaf5bbf1..94ee403dfa 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/redaction-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/redaction-toolbar.md @@ -1,26 +1,26 @@ --- layout: post title: Customize the Redaction Toolbar in Blazor PDF Viewer | Syncfusion -description: Learn how to customize the redaction toolbar in the Syncfusion Blazor PDF Viewer by showing or hiding default items with runnable examples. +description: Learn how to customize the redaction toolbar in the Blazor PDF Viewer by showing or hiding default items with runnable examples. platform: document-processing -control: PDF Viewer +control: SfPdfViewer documentation: ug domainurl: ##DomainURL## --- # Customize the Redaction Toolbar in Blazor PDF Viewer -This guide shows how to show or hide the redaction toolbar and how to enable it on desktop and mobile devices. +This guide shows how to display or hide the redaction toolbar and how to enable it on desktop and mobile devices. ## Enable the redaction toolbar on desktop Show the redaction toolbar on desktop by including the required [ToolbarItem.Redaction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_ToolbarItem_Redaction) in the [PdfViewerToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html). {% tabs %} -{% highlight razor tabtitle="Toolbar.razor" %} +{% highlight razor tabtitle="DesktopToolbar.razor" %} @using Syncfusion.Blazor.SfPdfViewer - + @@ -50,19 +50,19 @@ Show the redaction toolbar on desktop by including the required [ToolbarItem.Red {% endhighlight %} {% endtabs %} -Refer to the image below for the desktop view. +The redaction toolbar appears in the desktop view when the page is loaded. -![Enable redaction toolbar for desktop](../redaction/redaction-annotations-images/enable-redaction-toolbar-for-desktop.png) +![Redaction toolbar enabled in the desktop view](../redaction/redaction-annotations-images/enable-redaction-toolbar-for-desktop.png) ## Enable the redaction toolbar on mobile -Show the redaction toolbar on mobile by configuring the [MobileToolbarItem.Redaction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.MobileToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_MobileToolbarItem_Redaction) in the [PdfViewerToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html). +Show the redaction toolbar on mobile by configuring the [`MobileToolbarItem.Redaction`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.MobileToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_MobileToolbarItem_Redaction) in the [`PdfViewerToolbarSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html). {% tabs %} -{% highlight razor tabtitle="Toolbar.razor" %} +{% highlight razor tabtitle="MobileToolbar.razor" %} @using Syncfusion.Blazor.SfPdfViewer - + @@ -84,25 +84,25 @@ Show the redaction toolbar on mobile by configuring the [MobileToolbarItem.Redac {% endhighlight %} {% endtabs %} -Refer to the image below for the mobile view. +The redaction toolbar appears in the mobile view when the page is loaded. -![Enable redaction toolbar for mobile](../redaction/redaction-annotations-images/mobile-redaction-toolbar.png) +![Redaction toolbar enabled in the mobile view](../redaction/redaction-annotations-images/mobile-redaction-toolbar.png) ## Show or hide the redaction toolbar -Use the [ShowRedactionToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ShowRedactionToolbar) method on the viewer to control visibility. +Use the [`ShowRedactionToolbar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ShowRedactionToolbar) method on the viewer to control visibility. The method accepts a `bool` parameter: `true` shows the redaction toolbar and `false` hides it. ### Display the redaction toolbar using the toolbar icon -When [ToolbarItem.Redaction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_ToolbarItem_Redaction) or [MobileToolbarItem.Redaction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.MobileToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_MobileToolbarItem_Redaction) is enabled, selecting the redaction icon in the primary toolbar toggles the redaction toolbar. +When [`ToolbarItem.Redaction`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_ToolbarItem_Redaction) or [`MobileToolbarItem.Redaction`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.MobileToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_MobileToolbarItem_Redaction) is enabled, selecting the redaction icon in the primary toolbar opens the redaction toolbar. Selecting the icon again hides it. -Refer to the image below for details. +Selecting the redaction icon in the primary toolbar opens the redaction toolbar. -![Show redaction toolbar from the primary toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) +![Redaction toolbar opened from the primary toolbar icon](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) ### Display the redaction toolbar programmatically -Control visibility through application logic by invoking the `ShowRedactionToolbar` method on the viewer instance. +Control visibility through application logic by invoking the `ShowRedactionToolbar` method on the viewer instance. The `isRedactionToolbarVisible` flag tracks the current state so the toggle button switches between show and hide. {% tabs %} {% highlight razor tabtitle="Toolbar.razor" %} @@ -145,13 +145,13 @@ Control visibility through application logic by invoking the `ShowRedactionToolb {% endhighlight %} {% endtabs %} -Refer to the image below for details. +Invoking the `ShowRedactionToolbar` method opens the redaction toolbar. -![Programmatically show the Redaction toolbar](../redaction/redaction-annotations-images/show-redaction-toolbar.png) +![Programmatically shown redaction toolbar](../redaction/redaction-annotations-images/show-redaction-toolbar.png) ## Complete example with redaction toolbar customization -The following is a complete, runnable example. It wires a toggle button and a viewer with the redaction toolbar enabled on desktop. +The following is a complete, runnable example. It wires a toggle button and a viewer with the redaction toolbar enabled on both desktop and mobile. {% tabs %} {% highlight razor tabtitle="Toolbar.razor" %} @@ -160,11 +160,13 @@ The following is a complete, runnable example. It wires a toggle button and a vi Toggle Redaction Toolbar - - + + @code { @@ -172,6 +174,7 @@ The following is a complete, runnable example. It wires a toggle button and a vi private bool isRedactionToolbarVisible = true; private List ToolbarItems = new List(); + private List MobileToolbarItems = new List(); protected override void OnInitialized() { @@ -192,6 +195,16 @@ The following is a complete, runnable example. It wires a toggle button and a vi ToolbarItem.PrintOption, ToolbarItem.DownloadOption }; + + MobileToolbarItems = new List() + { + MobileToolbarItem.Open, + MobileToolbarItem.UndoRedo, + MobileToolbarItem.EditAnnotation, + MobileToolbarItem.Redaction, + MobileToolbarItem.FormDesigner, + MobileToolbarItem.Search + }; } private void ToggleRedactionToolbar() @@ -207,4 +220,4 @@ The following is a complete, runnable example. It wires a toggle button and a vi - [Customize primary toolbar](./primary-toolbar) - [Customize annotation toolbar](./annotation-toolbar) -- [Adding redaction annotations](../redaction/overview) \ No newline at end of file +- [Redaction overview](../redaction/overview) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/ui-builder-skill.md b/Document-Processing/PDF/PDF-Viewer/blazor/ui-builder-skill.md index f068a8bb91..e1af5c46de 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/ui-builder-skill.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/ui-builder-skill.md @@ -1,18 +1,18 @@ --- layout: post -title: Blazor UI Builder Skill with PDF Viewer | Syncfusion® -description: Install Syncfusion® Blazor UI Builder to generate production-ready Blazor components with PDF Viewer from natural-language prompts. -control: PDF Viewer +title: Blazor UI Builder Skill with PDF Viewer | Syncfusion +description: Install Syncfusion Blazor UI Builder to generate production-ready Blazor components with PDF Viewer from natural-language prompts. +control: SfPdfViewer platform: document-processing documentation: ug keywords: Blazor UI Builder, Skills, AI Assistants, PDF Viewer SDK, Agent Skills --- -# Syncfusion® Blazor UI Builder Skill with PDF Viewer for AI Assistants +# Syncfusion® Blazor UI Builder Skill with PDF Viewer for AI Assistants -**Syncfusion® Blazor UI Builder Skill** is an AI-powered skill and companion agent that accelerates Blazor PDF Viewer application development by transforming natural-language UI requirements into production-ready components using Syncfusion® Blazor UI libraries. +**Syncfusion® Blazor UI Builder Skill** is an AI-powered skill and companion agent that accelerates Blazor PDF Viewer application development by transforming natural-language UI requirements into production-ready components using Syncfusion® Blazor UI libraries. -Integrated with your AI-powered IDE, it leverages deep knowledge of **Syncfusion® PDF Viewer** to deliver accurate and ready-to-use code. +Integrated with your AI-powered IDE, it leverages deep knowledge of **PDF Viewer** to deliver accurate and ready-to-use code. By combining intelligent code generation with best practices, accessibility standards, and design-system consistency, Blazor UI Builder helps you rapidly build scalable PDF viewing applications and user interfaces without leaving your development workflow. ## Prerequisites @@ -23,7 +23,7 @@ Before installing Blazor UI Builder Skill with PDF Viewer, ensure the following: - Microsoft **.NET SDK 8.0 or later** with .NET CLI tools installed - Required [Node.js](https://nodejs.org/en) version ≥ 18 - **Agent Package Manager** (APM) installed — follow [Installation Guidelines](https://microsoft.github.io/apm/quickstart/#1-install-apm) -- A supported AI agent or IDE that integrates with the Skills (VS Code, Cursor, Syncfusion® Code Studio, etc.) +- A supported AI agent or IDE that integrates with the Skills (VS Code, Cursor, Syncfusion® Code Studio, etc.) - Active Syncfusion® license (any of the following): - [Commercial](https://www.syncfusion.com/sales/unlimitedlicense) - [Community License](https://www.syncfusion.com/products/communitylicense) @@ -32,13 +32,13 @@ Before installing Blazor UI Builder Skill with PDF Viewer, ensure the following: ## Key Benefits ### **AI-Driven UI Generation** -- Converts prompts into complete Blazor components-not just snippets -- Automatically selects appropriate Syncfusion® components and features +- Converts prompts into complete Blazor components — not just snippets +- Automatically selects appropriate Syncfusion® components and features - Produces structured, maintainable code ### **Component Usage & API Accuracy** -- Uses correct Syncfusion® component APIs -- Injects required feature modules (paging, sorting, filtering, etc.) +- Uses correct Syncfusion® component APIs +- Injects only the feature modules required by the generated component - Avoids unsupported or deprecated patterns ### **Patterns & Best Practices** @@ -53,7 +53,7 @@ Before installing Blazor UI Builder Skill with PDF Viewer, ensure the following: ### **Design-System Integration** - Supports Tailwind, Bootstrap, Material, or custom themes -- Ensures consistent Syncfusion® styling and theme usage +- Ensures consistent Syncfusion® styling and theme usage ## Installation @@ -67,7 +67,7 @@ Run the following command to confirm APM is installed: apm --version ``` -### Install the Syncfusion® Blazor UI Builder Skill with PDF Viewer package using APM +### Install the Syncfusion® Blazor UI Builder Skill with PDF Viewer package using APM Use the APM CLI to install the Blazor UI Builder Skill with PDF Viewer for your preferred environment: @@ -104,30 +104,30 @@ After installation, the following artifacts are added to your project for the Gi Refer to the [documentation](https://microsoft.github.io/apm/reference/cli/targets/#detection-signals) for details about supported deployment targets. -> For [Syncfusion® Code Studio](https://help.syncfusion.com/code-studio/reference/configure-properties/custom-agents#predefined-agents), use the Copilot command above to install the Blazor UI Builder. +> For [Syncfusion® Code Studio](https://help.syncfusion.com/code-studio/reference/configure-properties/custom-agents#predefined-agents), use the Copilot command above to install the Blazor UI Builder. -## How the Syncfusion® Blazor UI Builder Skill Works with PDF Viewer +## How the Syncfusion® Blazor UI Builder Skill Works with PDF Viewer 1. **Intent Analysis** - Parse the user's prompt to identify component types and high-level layout intent. 2. **Project Detection** - Automatically detects project framework, package manager, existing themes, and PDF Viewer configuration. -3. **Component Mapping** - Map intent to Syncfusion® PDF Viewer and components and required feature modules. +3. **Component Mapping** - Map intent to the appropriate Syncfusion® components, including the PDF Viewer, and required feature modules. 4. **Theming & Design System** Load required theming guidelines and confirm key design choices: - - CSS framework (Tailwind, Bootstrap, Material, or Greenfield(custom theme)). If no themes detected in the existing project, Greenfield and Syncfusion Tailwind3 theme are shown as the default option-proceed with this or change the theme as preferred. + - CSS framework (Tailwind, Bootstrap, Material, or Greenfield (custom theme)). If no themes are detected in the existing project, Greenfield and the Syncfusion® Tailwind3 theme are shown as the default option-proceed with this or change the theme as preferred. - Syncfusion theme (Tailwind3, Bootstrap5, Material3, fluent2) - Light and Dark Mode - Core design basics (colors, spacing, typography, responsiveness, accessibility) 5. **Code Generation** - Produce C# Blazor components with PDF Viewer, parameter interfaces, and CSS/styling scaffolding. -6. **Dependency Management** - Recommend or install required Syncfusion® packages and peer dependencies. +6. **Dependency Management** - Recommend or install required Syncfusion® packages and peer dependencies. 7. **Validation** - Run accessibility and basic security checks, request confirmation for changes. 8. **Code Insertion** - Create files or patch existing files following project structure and conventions. **Key enforcement points:** -- Adds correct theme and CSS imports for chosen Syncfusion® themes +- Adds correct theme and CSS imports for chosen Syncfusion® themes - Injects only the feature modules required by generated components - Generates semantic HTML with ARIA attributes and keyboard support -- Avoids unsupported or deprecated API usages for Syncfusion® components +- Avoids unsupported or deprecated API usages for Syncfusion® components > The assistant handles most stages automatically and may request confirmation where required. @@ -142,10 +142,10 @@ To start using the skill: 1. Open your supported IDE. 2. In the chat panel, select the `syncfusion-blazor-ui-builder` agent from the **Agent dropdown**. - ![Set Agent](./images/blazor-ui-builder.png) + ![Blazor UI Builder agent selected in the Agent dropdown](./images/blazor-ui-builder.png) 3. Start prompting the agent with a clear description of your UI requirements. -> For Syncfusion® Code Studio, if the UI Builder agent is not shown, ensure that the agent location is configured to use it in the chat, and refer to the [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/usersettings#agent-file-locations) to configure the agent location properly. +> For Syncfusion® Code Studio, if the UI Builder agent is not shown, ensure that the agent location is configured to use it in the chat, and refer to the [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/usersettings#agent-file-locations) to configure the agent location properly. **Example Prompts:** @@ -165,7 +165,7 @@ Generated code follows best practices with accessible, semantic HTML, responsive Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready results: - **Stay consistent** - Maintain consistent file organization, naming conventions, and coding standards throughout your project. -- **Use advanced AI models** - For best results, use **Claude Sonnet 4.6 or higher** capability models to produce better code quality and more accurate implementations. +- **Use advanced AI models** - For best results, use **Claude Sonnet 4.6 or higher** or an equivalent model to produce better code quality and more accurate implementations. - **Review all content and assets before production** - Replace any placeholder images or icons (e.g., from emoji sets) with your brand assets. Also validate the logic, security, and compatibility with your existing code before deployment. ## Troubleshooting @@ -174,9 +174,9 @@ Follow these guidelines to get the most out of UI Builder and ensure high-qualit - **Skills not loading**: Ensure the **.agent/** and **.github/agents/** folders exist in your project and that the skill was installed successfully using APM. Verify that the correct agent is selected from the Agent dropdown in your IDE. -- **Component not rendering**: Retry generation using the specific component skill to resolve the issue, and ensure required Syncfusion® packages and themes are properly configured. +- **Component not rendering**: Retry generation using the specific component skill to resolve the issue, and ensure required Syncfusion® packages and themes are properly configured. -- **Syncfusion license banner appears**: Use the licensing skill to correctly register and validate your Syncfusion® license key in the application. +- **Syncfusion license banner appears**: Use the licensing skill to correctly register and validate your Syncfusion® license key in the application. ## FAQ @@ -184,7 +184,7 @@ Follow these guidelines to get the most out of UI Builder and ensure high-qualit **Which agents/IDEs are supported?** Any Skills-compatible agent that reads local skill files (Code Studio, VS Code, Cursor, etc.). -**Are skills loaded automatically?** +**Are skills loaded automatically?** Yes. Supported agents automatically load relevant skills based on your query. **Can I customize the generated styles?** @@ -197,4 +197,6 @@ The skill proposes changes and requires confirmation for insertion; automatic de - [Agent Skills Standards](https://agentskills.io/home) - [Agent Package Manager](https://microsoft.github.io/apm/getting-started/quick-start/) +- [Example Prompts for AI Agent Tools](https://help.syncfusion.com/document-processing/ai-agent-tools/example-prompts) +- [AI Agent Tools Overview](https://help.syncfusion.com/document-processing/ai-agent-tools/overview)