From 4472bcecc8ecc52e29288ad71c0db27a864c8094 Mon Sep 17 00:00:00 2001 From: Tamilselvan Durairaj Date: Thu, 12 Feb 2026 11:00:22 +0530 Subject: [PATCH 1/5] 1009185: Revamp the content for the Blazor PDF Viewer --- .../PDF/PDF-Viewer/blazor/accessibility.md | 30 +- .../blazor/accessible-pdf-reading.md | 4 +- .../annotation/annotations-in-mobile-view.md | 42 +-- .../PDF-Viewer/blazor/annotation/comments.md | 52 ++-- .../PDF-Viewer/blazor/annotation/events.md | 272 +++++++++--------- .../annotation/import-export-annotation.md | 2 +- .../blazor/annotation/ink-annotation.md | 2 +- .../annotation/measurement-annotation.md | 6 +- .../blazor/annotation/shape-annotation.md | 8 +- .../blazor/annotation/stamp-annotation.md | 22 +- .../annotation/sticky-notes-annotation.md | 6 +- .../annotation/text-markup-annotation.md | 14 +- .../PDF/PDF-Viewer/blazor/command-manager.md | 24 +- .../blazor/document-security-overview.md | 8 +- .../PDF/PDF-Viewer/blazor/events.md | 60 ++-- .../PDF/PDF-Viewer/blazor/faq.md | 4 +- ...hange-the-highlighted-color-of-the-text.md | 4 +- ...check-status-of-annotations-or-comments.md | 4 +- ...he-loaded-PDF-document-is-edited-or-not.md | 8 +- ...ow-to-configure-content-security-policy.md | 2 +- ...nversion-between-page-and-client-points.md | 2 +- ...ent-in-the-created-event-of-sfpdfviewer.md | 2 +- ...how-to-customize-arrow-annotation-heads.md | 8 +- ...w-to-deploy-maui-using-android-emulator.md | 2 +- ...o-extract-particular-text-and-highlight.md | 2 +- ...df-for-initial-loading-in-hosted-sample.md | 2 +- .../blazor/faqs/how-to-load-office-files.md | 6 +- .../how-to-render-ej2-pdf-viewer-in-blazor.md | 2 +- ...to-show-or-hide-sfpdfviewer-dynamically.md | 2 +- .../form-designer/create-programmatically.md | 24 +- .../blazor/form-designer/custom-font.md | 16 +- .../PDF-Viewer/blazor/form-designer/events.md | 6 +- .../form-designer-in-mobile-view.md | 58 ++-- .../blazor/form-designer/overview.md | 88 +++--- .../blazor/form-designer/ui-interactions.md | 10 +- .../PDF/PDF-Viewer/blazor/form-filling.md | 16 +- .../blazor/getting-started/maui-blazor-app.md | 30 +- .../blazor/getting-started/web-app.md | 28 +- .../web-assembly-application.md | 38 +-- .../getting-started/winforms-blazor-app.md | 34 +-- .../blazor/getting-started/wpf-blazor-app.md | 35 +-- .../PDF/PDF-Viewer/blazor/globalization.md | 10 +- .../blazor/hand-written-signature.md | 8 +- .../PDF/PDF-Viewer/blazor/interaction.md | 12 +- .../interactive-pdf-navigation/bookmark.md | 8 +- .../interactive-pdf-navigation/hyperlink.md | 8 +- .../modern-panel.md | 32 +-- .../page-thumbnail.md | 10 +- .../interactive-pdf-navigation/pages.md | 22 +- .../table-of-content.md | 9 +- .../PDF/PDF-Viewer/blazor/migration.md | 12 +- .../blazor/open-pdf-file/from-amazon-s3.md | 20 +- .../open-pdf-file/from-azure-blob-storage.md | 24 +- .../from-box-cloud-file-storage.md | 6 +- .../from-google-cloud-storage.md | 14 +- .../blazor/open-pdf-file/from-google-drive.md | 22 +- .../PDF/PDF-Viewer/blazor/opening-pdf-file.md | 8 +- .../blazor/organize-pages/events.md | 59 ++-- .../blazor/organize-pages/mobile-view.md | 41 ++- .../blazor/organize-pages/overview.md | 149 ++++------ .../organize-pages/programmatic-support.md | 34 +-- .../blazor/organize-pages/toolbar.md | 30 +- .../blazor/organize-pages/ui-interactions.md | 97 +++---- .../PDF/PDF-Viewer/blazor/organize-pdf.md | 8 +- .../PDF/PDF-Viewer/blazor/overview.md | 24 +- .../PDF/PDF-Viewer/blazor/print.md | 26 +- .../blazor/redaction/mobile-view.md | 71 ++--- .../PDF-Viewer/blazor/redaction/overview.md | 42 ++- .../blazor/redaction/ui-interactions.md | 39 ++- .../blazor/save-pdf-file/to-amazon-s3.md | 4 +- .../save-pdf-file/to-azure-blob-storage.md | 4 +- .../to-box-cloud-file-storage.md | 6 +- .../save-pdf-file/to-google-cloud-storage.md | 6 +- .../blazor/save-pdf-file/to-google-drive.md | 6 +- .../PDF/PDF-Viewer/blazor/saving-pdf-file.md | 18 +- .../PDF/PDF-Viewer/blazor/text-search.md | 44 +-- .../blazor/toolbar-customization-overview.md | 32 ++- .../annotation-toolbar.md | 19 +- .../form-designer-toolbar.md | 16 +- .../toolbar-customization/mobile-toolbar.md | 5 +- .../toolbar-customization/primary-toolbar.md | 2 +- 81 files changed, 948 insertions(+), 1044 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/accessibility.md b/Document-Processing/PDF/PDF-Viewer/blazor/accessibility.md index bcfab5c1ab..b505dbd241 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/accessibility.md @@ -37,29 +37,29 @@ The accessibility compliance for the Blazor SfPdfViewer component is outlined be ## WAI-ARIA attributes -[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to enhance the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. The following ARIA attributes are used in the Blazor SfPdfViewer component: +[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to enhance the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. The following ARIA attributes are commonly applied in the SfPdfViewer component: | Attributes | Purpose | | --- | --- | -| `aria-disabled`| Indicates whether the Blazor SfPdfViewer component is in a disabled state or not.| -| `aria-expanded`| Indicates whether the suggestion list has expanded or not. | -| `aria-readonly` | Indicates the readonly state of the Blazor SfPdfViewer element. | -| `aria-haspopup` | Indicates whether the Blazor SfPdfViewer input element has a suggestion list or not. | -| `aria-label` | Indicates the breadcrumb item text. | -| `aria-labelledby` | Provides a label for the SfPdfViewer. Typically, the "aria-labelledby" attribute will contain the id of the element used as the Blazor SfPdfViewer's title. | -| `aria-describedby` | This attribute points to the Blazor SfPdfViewer element describing the one it's set on. | -| `aria-orientation` | Indicates whether the Blazor SfPdfViewer element is oriented horizontally or vertically. | -| `aria-valuetext` | Returns the current text of the SfPdfViewer. | -| `aria-valuemax` | Indicates the Maximum value of the SfPdfViewer. | -| `aria-valuemin` | Indicates the Minimum value of the SfPdfViewer. | -| `aria-valuenow` | Indicates the current value of the SfPdfViewer. | -| `aria-controls` | Attribute is set to the button and it points to the corresponding content. | +| `aria-disabled` | Indicates whether an interactive control (for example, a toolbar button) is disabled and not operable. | +| `aria-expanded` | Indicates whether an expandable element (for example, a panel or toolbar menu) is currently expanded. | +| `aria-readonly` | Indicates that the element is read-only and user input is not expected. | +| `aria-haspopup` | Identifies that the element opens a popup (menu, dialog, or toolbar). | +| `aria-label` | Provides an accessible name for controls or regions when a visible label is not available. | +| `aria-labelledby` | Identifies the element that labels this element by referencing that element's id. | +| `aria-describedby` | Identifies the element that provides a description for this element by referencing that element's id. | +| `aria-orientation` | Indicates the orientation (horizontal or vertical) of widgets such as sliders or splitters. | +| `aria-valuetext` | Provides a human-readable text alternative of the current value (for example, a zoom level). | +| `aria-valuemax` | Indicates the maximum value for range widgets (for example, maximum zoom). | +| `aria-valuemin` | Indicates the minimum value for range widgets (for example, minimum zoom). | +| `aria-valuenow` | Indicates the current numeric value for range widgets (for example, current zoom). | +| `aria-controls` | Identifies the element or region controlled by this element (for example, a button that opens a panel). | ## Keyboard interaction The Blazor SfPdfViewer component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it accessible to users who rely on assistive technologies (AT) and keyboard navigation. The following keyboard shortcuts are supported by the SfPdfViewer component. -| Windows | Mac | Actions | +| Windows | Mac | Action | | --- | --- | --- | |||**Shortcuts for page navigation**| | Ctrl + ← / Ctrl + ↑ | ⌘ + ← / ⌘ + ↑ |Navigate to the first page | 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 d1c6ec8805..c597669ec4 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md @@ -16,7 +16,7 @@ This accessible PDF reading feature supports two approaches: 2. Windows Speech Synthesis API The following demo illustrates both supported approaches: -- [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) ## Microsoft Edge’s Screen Reader @@ -917,7 +917,7 @@ function clearAllHighlights() { {% endhighlight %} {% endtabs %} -![Windows Speech Synthesis](./images/windows-speech-synthesis.png) +![Windows Speech Synthesis UI](./images/windows-speech-synthesis.png) [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Accessible/WebSynthesis) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/annotations-in-mobile-view.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/annotations-in-mobile-view.md index 722714e680..ee8ba6517d 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/annotations-in-mobile-view.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/annotations-in-mobile-view.md @@ -9,37 +9,37 @@ documentation: ug # Annotations in mobile view -This article explains how to work with annotations in the mobile view of the Blazor SfPdfViewer. It covers opening the annotation toolbar, adding each annotation type, adjusting properties, deleting annotations, and using the comments panel. +This topic explains how to work with annotations in the mobile view of the Blazor `SfPdfViewer`. It covers opening the annotation toolbar, adding annotation types, adjusting properties, deleting annotations, and using the comments panel. -## To open the annotation toolbar +## Open the annotation toolbar -To open the annotation toolbar, tap the **Edit Annotation** option in the mobile primary toolbar. The annotation toolbar appears at the bottom of the viewer. +Open the annotation toolbar by tapping the **Edit Annotation** option in the mobile primary toolbar. The annotation toolbar appears at the bottom of the viewer. ![Mobile Annotation Toolbar in Blazor SfPdfViewer](../images/open-annotation-toolbar.gif) -## To add sticky notes annotation +## Add a sticky note annotation Tap the **Sticky Note Annotation** icon, then tap anywhere in the viewer to place the note. ![Choose Sticky Note Annotation in Blazor SfPdfViewer](../images/click-stickynote-annotation.png) -The comments panel opens so the comment for the sticky note can be entered. +The comments panel opens to enter the comment associated with the sticky note. ![Sticky note annotation added in Blazor SfPdfViewer](../images/sticky-note-added.png) -## To add text markup annotation +## Add a text markup annotation -Long-press to select text in the PDF, then tap a **Text Markup Annotation** in the toolbar (for example, highlight, underline, strikethrough, or squiggly). +Long-press to select text in the PDF, then tap a **Text Markup Annotation** option in the toolbar (for example, highlight, underline, strikethrough, or squiggly). ![Select text for text markup in Blazor SfPdfViewer](../images/select-text-for-text-markup.png) -The toolbar then shows the available properties for the chosen annotation (such as color and opacity). +The toolbar then shows properties for the chosen annotation (such as color and opacity). ![Text markup applied to selected text in Blazor SfPdfViewer](../images/text-markup-added-for-selected-text.png) -## To add shape annotation +## Add a shape annotation -Tap the **Shape Annotation** icon in the toolbar to view the available shapes. +Tap the **Shape Annotation** icon in the toolbar to view available shapes. ![Open the shape annotations menu in Blazor SfPdfViewer](../images/click-shape-icon.png) @@ -47,11 +47,11 @@ Choose a shape, then tap and drag in the viewer to draw it. ![Select a shape type in Blazor SfPdfViewer](../images/select-required-shape.png) -After placement, the toolbar switches to the properties toolbar for the added annotation, where options such as fill color, stroke color, thickness, and opacity can be adjusted. +After placement, the toolbar switches to the properties toolbar for the added annotation; adjust options such as fill color, stroke color, thickness, and opacity. ![Draw a selected shape annotation in Blazor SfPdfViewer](../images/add-selected-shape-annotation.png) -## To add measure annotation +## Add a measurement annotation Tap the **Measure Annotation** icon in the toolbar to view supported measurement types. @@ -65,7 +65,7 @@ After placement, the properties toolbar appears with options relevant to the mea ![Draw a selected measurement annotation in Blazor SfPdfViewer](../images/add-selected-measure-annotation.png) -## To add free text annotation +## Add a free text annotation Tap the **Free Text Annotation** icon in the toolbar. The properties toolbar appears with options for text formatting (such as font size, color, and opacity). @@ -75,7 +75,7 @@ Tap anywhere in the viewer to insert the free text annotation. ![Add free text in the viewer in Blazor SfPdfViewer](../images/add-free-text-viewer.png) -## To add stamp annotation +## Add a stamp annotation Tap the **Stamp Annotation** icon, then choose a stamp from the available list. @@ -85,7 +85,7 @@ Tap anywhere in the viewer to place the stamp. The properties toolbar then appea ![Place the selected stamp in Blazor SfPdfViewer](../images/add-selected-stamp.png) -## To add signature +## Add a signature Tap the **Handwritten Signature** icon to open the signature dialog. @@ -99,7 +99,7 @@ Tap anywhere in the viewer to place the signature. The properties toolbar then a ![Add the signature to the viewer in Blazor SfPdfViewer](../images/add-signature-to-viewer.png) -## To add ink annotation +## Add an ink annotation Tap the **Ink Annotation** icon, then draw directly in the viewer. @@ -111,25 +111,25 @@ When finished, tap the Ink Annotation icon again to exit drawing mode. The prope ## Change annotation properties before adding -Annotation properties can be configured before placement. For example, tap the rectangle shape to show its properties toolbar, adjust the settings, and then tap and drag to place the annotation. The annotation is added using the modified properties. +Annotation properties can be configured before placement. For example, tap a shape to show its properties toolbar, adjust the settings, then tap and drag to place the annotation. The annotation is added with the modified properties. ![Change properties before adding an annotation in Blazor SfPdfViewer](../images/property-change-before-adding.gif) ## Change annotation properties after adding -After placement, select the annotation to display its properties toolbar. Adjust the required properties; the changes are applied immediately to the selected annotation. +After placement, select the annotation to display its properties toolbar. Adjust required properties; the changes are applied immediately to the selected annotation. ![Change properties after adding an annotation in Blazor SfPdfViewer](../images/property-change-after-adding.gif) -## Delete Annotation +## Delete an annotation Select the annotation to delete. In the properties toolbar, tap the Delete icon. The annotation is removed from the PDF, and any associated comment is also deleted. ![Delete the selected annotation in Blazor SfPdfViewer](../images/delete-selected-annotation.png) -## Open and Close Comment Panel +## Open and close the comments panel -Open the comments panel from the **more option** menu at the right end of the mobile primary toolbar. +Open the comments panel from the More options menu at the right end of the mobile primary toolbar. ![Open the comments panel from More options in Blazor SfPdfViewer](../images/select-comment-panel-icon.png) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/comments.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/comments.md index e9eb6dde24..8efcad93d0 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/comments.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/comments.md @@ -9,7 +9,7 @@ documentation: ug # Comments in Blazor SfPdfViewer Component -The SfPdfViewer component provides options to add, edit, and delete comments for the following annotation types in PDF documents: +The `SfPdfViewer` component provides options to add, edit, and delete comments for the following annotation types in PDF documents: * Shape annotation * Stamp annotation @@ -20,7 +20,7 @@ The SfPdfViewer component provides options to add, edit, and delete comments for ![Comments in Blazor SfPdfViewer](../images/blazor-pdfviewer-comments.png) -## Adding a comment to the annotation +## Add a comment to an annotation Comments, replies, and status can be added to a PDF document using the comment panel. @@ -28,17 +28,17 @@ Comments, replies, and status can be added to a PDF document using the comment p Annotation comments can be added using the comment panel. Open the comment panel in any of the following ways: -1. Using the annotation menu. +1. From the annotation menu - * Click the Edit Annotation button in the SfPdfViewer toolbar. A toolbar appears below it. + * Click the Edit Annotation button in the `SfPdfViewer` toolbar. A toolbar appears below it. * Click the Comment panel button. The comment panel opens. -2. Using the context menu. +2. From the context menu * Select an annotation in the PDF document and right-click it. * Select the Comment option in the context menu. -3. Using mouse click. +3. Using double-click * Select an annotation in the PDF document and double-click it to open the comment panel. @@ -52,12 +52,12 @@ If the comment panel is already open, select an annotation and add a comment usi ![Adding Comments in Blazor SfPdfViewer](../images/blazor-pdfviewer-add-new-comment.png) -### Adding Comment Replies +### Adding comment replies -* The SfPdfViewer supports adding multiple replies to a comment. +* The `SfPdfViewer` supports adding multiple replies to a comment. * After adding an annotation comment, add one or more replies as needed. -### Adding Comment or Reply Status +### Adding comment or reply status * Select the annotation comment in the comment panel. * Click the More options button in the comment or reply container. @@ -66,38 +66,38 @@ If the comment panel is already open, select an annotation and add a comment usi ![Blazor PDFViewer with Comment Status](../images/blazor-pdfviewer-comment-status.png) -### Editing the comments and comments replies of the annotations +### Edit comments and replies Edit the comment, its replies, and the status of an annotation using the comment panel. -### Editing Comment or Comment Replies +### Editing comments or replies Edit comments and replies in the following ways: -1. Using the context menu. +1. From the context menu * Select the annotation comment in the comment panel. * Click the More options button in the comment or reply container. * Select Edit in the context menu. * An editable text box appears to change the content of the comment or reply. -2. Using mouse click. +2. Using double-click * Select the annotation comment in the comment panel. * Double-click the comment or reply content. * An editable text box appears to change the content of the comment or reply. -### Editing Comment or Reply Status +### Editing comment or reply status * Select the annotation comment in the comment panel. * Click the More options button in the comment or reply container. * Select Set status in the context menu. * Choose the required status for the annotation comment. -* Status 'None' is the default. Choosing 'None' removes the status indicator from the comment or reply. +* Status `None` is the default. Choosing `None` removes the status indicator from the comment or reply. ![Editing Comment in Blazor SfPdfViewer](../images/blazor-pdfviewer-comment-editing.png) -### Delete Comment or Comment Replies +### Delete a comment or reply * Select the annotation comment in the comment panel. * Click the More options button in the comment or reply container. @@ -150,11 +150,11 @@ The following code snippet explains how to show the comment panel. ``` [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Comment%20Panel/Show%20or%20hide%20comment%20panel). -## Add Comments and Reply Comments Programmatically +## Add comments and replies programmatically -The Blazor SfPdfViewer supports programmatically adding a line annotation with a comment and reply comments using the [AddAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) method. +The `SfPdfViewer` supports programmatically adding a line annotation with a comment and replies using the [AddAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) method. -The following example demonstrates how to add a line annotation with a comment and reply comments to a PDF document: +The following example demonstrates how to add a line annotation with a comment and replies to a PDF document: ```cshtml @@ -242,17 +242,17 @@ The following example demonstrates how to add a line annotation with a comment a ``` -This code adds a line annotation with a comment and reply comments to the first page of the PDF document. +This code adds a line annotation with a comment and replies to the first page of the PDF document. ![Programmatically Added Comment and Reply Comment in Blazor SfPdfViewer](../images/blazor-sfpdfviewer-programmatically-add-comment-reply-comment.png) [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Programmatic%20Support/Comment/Add). -## Edit Comments and Reply Comments Programmatically +## Edit comments and replies programmatically -The Blazor SfPdfViewer supports programmatically editing the comment and reply comments of an annotation using the [EditAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EditAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) method. +The `SfPdfViewer` supports programmatically editing the comment and replies of an annotation using the [EditAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EditAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) method. -The following example demonstrates how to edit the comment and reply comments programmatically: +The following example demonstrates how to edit the comment and replies programmatically: ```cshtml @@ -296,13 +296,13 @@ The following example demonstrates how to edit the comment and reply comments pr } ``` -This code edits the comment and reply comments programmatically within the SfPdfViewer control. +This code edits the comment and replies programmatically within the `SfPdfViewer` control. ![Programmatically Edit Comment and Reply Comment in Blazor SfPdfViewer](../images/blazor-sfpdfviewer-programmatically-edit-comment-reply-comment.png) [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Programmatic%20Support/Comment/Edit). -## Customizing DateTime Format +## Customizing date and time format The PDF Viewer supports customizing the date and time format displayed in the comment panel using the [PdfViewerCommentPanelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerCommentPanelSettings.html). This feature tailors the appearance of date and time according to preferences or regional standards. @@ -358,7 +358,7 @@ This code implements date and time formatting for the comment panel of the PDF V [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Comment%20Panel/Customize%20DateTimeFormat). -## Enabling Multiline Support +## Enabling multiline support Multiline support in the comment panel allows users to input and display comments that span multiple lines. Enable multiline support using the [PdfViewerCommentPanelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerCommentPanelSettings.html). diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/events.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/events.md index 9347d4535b..aacb4eca63 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/events.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/events.md @@ -13,38 +13,38 @@ Annotation events notify the application when annotations are added, selected, m |Name|Description| |---|---| -|AddSignature|Triggers when a signature is added to a page in the PDF document.| -|AnnotationAdded|Triggers when an annotation is added to a page in the PDF document.| -|AnnotationMouseover|Triggers when the mouse pointer moves over an annotation object.| -|AnnotationMoved|Triggers when an annotation is moved on a page in the PDF document.| -|AnnotationPropertiesChanged|Triggers when annotation properties are modified on a PDF page.| -|AnnotationRemoved|Triggers when an annotation is removed from a page in the PDF document.| -|AnnotationResized|Triggers when an annotation is resized on a page in the PDF document.| -|AnnotationSelected|Triggers when an annotation is selected on a page in the PDF document.| -|AnnotationUnselected|Triggers when an annotation is unselected on a page in the PDF document.| -|ExportFailed|Triggers when exporting annotations fails in the SfPdfViewer.| -|ExportStarted|Triggers when exporting annotations starts in the SfPdfViewer.| -|ExportSucceed|Triggers when exporting annotations succeeds in the SfPdfViewer.| -|ImportFailed|Triggers when importing annotations fails in the PDF document.| -|ImportStarted|Triggers when importing annotations starts in the PDF document.| -|ImportSucceed|Triggers when importing annotations succeeds in the PDF document.| -|MoveSignature|Triggers when a signature is moved on a page in the PDF document.| -|OnAnnotationDoubleClick|Triggers when an annotation is double-clicked.| -|RemoveSignature|Triggers when a signature is removed from a page in the PDF document.| -|ResizeSignature|Triggers when a signature is resized on a page in the PDF document.| -|SignaturePropertiesChange|Triggers when the properties of a signature are changed on a page in the PDF document.| -|SignatureSelected|Triggers when a signature is selected on a page in the PDF document.| -|SignatureUnselected|Triggers when a signature is unselected on a page in the PDF document.| - -## AddSignature Event - -The [AddSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AddSignature) event triggers when a signature is added to a page in the PDF document. - -#### Event Arguments - -For event data, see [AddSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AddSignatureEventArgs.html) for properties such as Id, PageNumber, and Bounds. - -The following example illustrates how to handle the AddSignature event. +|AddSignature|Triggers when a signature is added to a page.| +|AnnotationAdded|Triggers when an annotation is added to a page.| +|AnnotationMouseover|Triggers when the mouse pointer moves over an annotation.| +|AnnotationMoved|Triggers when an annotation is moved on a page.| +|AnnotationPropertiesChanged|Triggers when annotation properties are modified.| +|AnnotationRemoved|Triggers when an annotation is removed from a page.| +|AnnotationResized|Triggers when an annotation is resized on a page.| +|AnnotationSelected|Triggers when an annotation is selected on a page.| +|AnnotationUnselected|Triggers when an annotation is unselected on a page.| +|ExportFailed|Triggers when an annotation export fails.| +|ExportStarted|Triggers when annotation export starts.| +|ExportSucceed|Triggers when annotation export succeeds.| +|ImportFailed|Triggers when an annotation import fails.| +|ImportStarted|Triggers when annotation import starts.| +|ImportSucceed|Triggers when annotation import succeeds.| +|MoveSignature|Triggers when a signature is moved on a page.| +|OnAnnotationDoubleClick|Triggers when an annotation is double-clicked.| +|RemoveSignature|Triggers when a signature is removed from a page.| +|ResizeSignature|Triggers when a signature is resized on a page.| +|SignaturePropertiesChange|Triggers when signature properties are changed on a page.| +|SignatureSelected|Triggers when a signature is selected on a page.| +|SignatureUnselected|Triggers when a signature is unselected on a page.| + +## AddSignature event + +The [AddSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AddSignature) event triggers when a signature is added to a page. + +#### Event arguments + +See [AddSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AddSignatureEventArgs.html) for properties such as `Id`, `PageNumber`, and `Bounds`. + +The following example illustrates handling the `AddSignature` event. ```cshtml @@ -64,15 +64,15 @@ The following example illustrates how to handle the AddSignature event. ``` -## AnnotationAdded Event +## AnnotationAdded event -The [AnnotationAdded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationAdded) event triggers when an annotation is added to a page in the PDF document. +The [AnnotationAdded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationAdded) event triggers when an annotation is added to a page. -#### Event Arguments +#### Event arguments -See [AnnotationAddedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationAddedEventArgs.html) for details such as AnnotationId, AnnotationType, PageNumber, and Bounds. +See [AnnotationAddedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationAddedEventArgs.html) for details such as `AnnotationId`, `AnnotationType`, `PageNumber`, and `Bounds`. -The following example illustrates how to handle the AnnotationAdded event. +The following example illustrates handling the `AnnotationAdded` event. ```cshtml @@ -92,15 +92,15 @@ The following example illustrates how to handle the AnnotationAdded event. ``` -## AnnotationMouseover Event +## AnnotationMouseover event -The [AnnotationMouseover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationMouseover) event triggers when the mouse pointer moves over an annotation object. +The [AnnotationMouseover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationMouseover) event triggers when the mouse pointer moves over an annotation. -#### Event Arguments +#### Event arguments -See [AnnotationMouseoverEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationMouseoverEventArgs.html) for details such as AnnotationId, AnnotationType, PageNumber, and cursor position. +See [AnnotationMouseoverEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationMouseoverEventArgs.html) for details such as `AnnotationId`, `AnnotationType`, `PageNumber`, and cursor position. -The following example illustrates how to handle the AnnotationMouseover event. +The following example illustrates handling the `AnnotationMouseover` event. ```cshtml @@ -120,15 +120,15 @@ The following example illustrates how to handle the AnnotationMouseover event. ``` -## AnnotationMoved Event +## AnnotationMoved event -The [AnnotationMoved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationMoved) event triggers when an annotation is moved on a page in the PDF document. +The [AnnotationMoved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationMoved) event triggers when an annotation is moved on a page. -#### Event Arguments +#### Event arguments -See [AnnotationMovedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationMovedEventArgs.html) for details such as AnnotationId, PageNumber, PreviousBounds, and Bounds. +See [AnnotationMovedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationMovedEventArgs.html) for details such as `AnnotationId`, `PageNumber`, `PreviousBounds`, and `Bounds`. -The following example illustrates how to handle the AnnotationMoved event. +The following example illustrates handling the `AnnotationMoved` event. ```cshtml @@ -148,15 +148,15 @@ The following example illustrates how to handle the AnnotationMoved event. ``` -## AnnotationPropertiesChanged Event +## AnnotationPropertiesChanged event -The [AnnotationPropertiesChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationPropertiesChanged) event triggers when annotation properties are modified on a PDF page. +The [AnnotationPropertiesChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationPropertiesChanged) event triggers when annotation properties are modified on a page. -#### Event Arguments +#### Event arguments -See [AnnotationPropertiesChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationPropertiesChangedEventArgs.html) for details such as AnnotationId, PageNumber, changed property names, and old/new values. +See [AnnotationPropertiesChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationPropertiesChangedEventArgs.html) for details such as `AnnotationId`, `PageNumber`, changed property names, and old/new values. -The following example illustrates how to handle the AnnotationPropertiesChanged event. +The following example illustrates handling the `AnnotationPropertiesChanged` event. ```cshtml @@ -176,15 +176,15 @@ The following example illustrates how to handle the AnnotationPropertiesChanged ``` -## AnnotationRemoved Event +## AnnotationRemoved event -The [AnnotationRemoved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationRemoved) event triggers when an annotation is removed from a page in the PDF document. +The [AnnotationRemoved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationRemoved) event triggers when an annotation is removed from a page. -#### Event Arguments +#### Event arguments -See [AnnotationRemovedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationRemovedEventArgs.html) for details such as AnnotationId, AnnotationType, and PageNumber. +See [AnnotationRemovedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationRemovedEventArgs.html) for details such as `AnnotationId`, `AnnotationType`, and `PageNumber`. -The following example illustrates how to handle the AnnotationRemoved event. +The following example illustrates handling the `AnnotationRemoved` event. ```cshtml @@ -204,15 +204,15 @@ The following example illustrates how to handle the AnnotationRemoved event. ``` -## AnnotationResized Event +## AnnotationResized event -The [AnnotationResized](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationResized) event triggers when an annotation is resized on a page in the PDF document. +The [AnnotationResized](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationResized) event triggers when an annotation is resized on a page. -#### Event Arguments +#### Event arguments -See [AnnotationResizedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationResizedEventArgs.html) for details such as AnnotationId, PageNumber, PreviousBounds, and Bounds. +See [AnnotationResizedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationResizedEventArgs.html) for details such as `AnnotationId`, `PageNumber`, `PreviousBounds`, and `Bounds`. -The following example illustrates how to handle the AnnotationResized event. +The following example illustrates handling the `AnnotationResized` event. ```cshtml @@ -232,15 +232,15 @@ The following example illustrates how to handle the AnnotationResized event. ``` -## AnnotationSelected Event +## AnnotationSelected event -The [AnnotationSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationSelected) event triggers when an annotation is selected on a page in the PDF document. +The [AnnotationSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationSelected) event triggers when an annotation is selected on a page. -#### Event Arguments +#### Event arguments -See [AnnotationSelectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationSelectedEventArgs.html) for details such as AnnotationId, AnnotationType, and PageNumber. +See [AnnotationSelectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationSelectedEventArgs.html) for details such as `AnnotationId`, `AnnotationType`, and `PageNumber`. -The following example illustrates how to handle the AnnotationSelected event. +The following example illustrates handling the `AnnotationSelected` event. ```cshtml @@ -260,15 +260,15 @@ The following example illustrates how to handle the AnnotationSelected event. ``` -## AnnotationUnselected Event +## AnnotationUnselected event -The [AnnotationUnselected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationUnselected) event triggers when an annotation is unselected on a page in the PDF document. +The [AnnotationUnselected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationUnselected) event triggers when an annotation is unselected on a page. -#### Event Arguments +#### Event arguments -See [AnnotationUnselectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationUnselectedEventArgs.html) for details such as AnnotationId, AnnotationType, and PageNumber. +See [AnnotationUnselectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationUnselectedEventArgs.html) for details such as `AnnotationId`, `AnnotationType`, and `PageNumber`. -The following example illustrates how to handle the AnnotationUnselected event. +The following example illustrates handling the `AnnotationUnselected` event. ```cshtml @@ -288,15 +288,15 @@ The following example illustrates how to handle the AnnotationUnselected event. ``` -## ExportFailed Event +## ExportFailed event -The [ExportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExportFailed) event triggers when an export annotations failed in the PDF Viewer. +The [ExportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExportFailed) event triggers when annotation export fails. -#### Event Arguments +#### Event arguments -See [ExportFailureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ExportFailureEventArgs.html) for details such as ErrorDetails. +See [ExportFailureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ExportFailureEventArgs.html) for details such as `ErrorDetails`. -The following example illustrates how to handle the ExportFailed event. +The following example illustrates handling the `ExportFailed` event. ```cshtml @@ -316,15 +316,15 @@ The following example illustrates how to handle the ExportFailed event. ``` -## ExportStarted Event +## ExportStarted event -The [ExportStarted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExportStarted) event triggers when an exported annotations started in the PDF Viewer. +The [ExportStarted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExportStarted) event triggers when annotation export starts. -#### Event Arguments +#### Event arguments -See [ExportStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ExportStartEventArgs.html) triggers when an exported annotations started in the PDF Viewer. +See [ExportStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ExportStartEventArgs.html) for details about the export start event. -The following example illustrates how to handle the ExportStarted event. +The following example illustrates handling the `ExportStarted` event. ```cshtml @@ -344,15 +344,15 @@ The following example illustrates how to handle the ExportStarted event. ``` -## ExportSucceed Event +## ExportSucceed event -The [ExportSucceed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExportSucceed) event triggers when an export annotations succeed in the PDF Viewer. +The [ExportSucceed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExportSucceed) event triggers when annotation export succeeds. -#### Event Arguments +#### Event arguments -See [ExportSuccessEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ExportSuccessEventArgs.html) for details such as FileName. +See [ExportSuccessEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ExportSuccessEventArgs.html) for details such as `FileName`. -The following example illustrates how to handle the ExportSucceed event. +The following example illustrates handling the `ExportSucceed` event. ```cshtml @@ -372,15 +372,15 @@ The following example illustrates how to handle the ExportSucceed event. ``` -## ImportFailed Event +## ImportFailed event -The [ImportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportFailed) event triggers when an imports annotations failed in the PDF document. +The [ImportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportFailed) event triggers when annotation import fails. -#### Event Arguments +#### Event arguments -See [ImportFailureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ImportFailureEventArgs.html) for details such as ErrorDetails. +See [ImportFailureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ImportFailureEventArgs.html) for details such as `ErrorDetails`. -The following example illustrates how to handle the ImportFailed event. +The following example illustrates handling the `ImportFailed` event. ```cshtml @@ -400,15 +400,15 @@ The following example illustrates how to handle the ImportFailed event. ``` -## ImportStarted Event +## ImportStarted event -The [ImportStarted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportStarted) event triggers when an imported annotations started in the PDF document. +The [ImportStarted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportStarted) event triggers when annotation import starts. -#### Event Arguments +#### Event arguments -See [ImportStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ImportStartEventArgs.html) triggers when an imported annotations started in the PDF document. +See [ImportStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ImportStartEventArgs.html) for details about the import start event. -The following example illustrates how to handle the ImportStarted event. +The following example illustrates handling the `ImportStarted` event. ```cshtml @@ -428,15 +428,15 @@ The following example illustrates how to handle the ImportStarted event. ``` -## ImportSucceed Event +## ImportSucceed event -The [ImportSucceed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportSucceed) event triggers when an imports annotations succeed in the PDF document. +The [ImportSucceed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportSucceed) event triggers when annotation import succeeds. -#### Event Arguments +#### Event arguments -See [ImportSuccessEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ImportSuccessEventArgs.html) triggers when an imports annotations succeed in the PDF document. +See [ImportSuccessEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ImportSuccessEventArgs.html) for details about successful import. -The following example illustrates how to handle the ImportSucceed event. +The following example illustrates handling the `ImportSucceed` event. ```cshtml @@ -456,15 +456,15 @@ The following example illustrates how to handle the ImportSucceed event. ``` -## MoveSignature Event +## MoveSignature event -The [MoveSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_MoveSignature) event triggers when a signature is moved on a page in the PDF document. +The [MoveSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_MoveSignature) event triggers when a signature is moved on a page. -#### Event Arguments +#### Event arguments -See [MoveSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.MoveSignatureEventArgs.html) for details such as Id, PageNumber, PreviousBounds, and Bounds. +See [MoveSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.MoveSignatureEventArgs.html) for details such as `Id`, `PageNumber`, `PreviousBounds`, and `Bounds`. -The following example illustrates how to handle the MoveSignature event. +The following example illustrates handling the `MoveSignature` event. ```cshtml @@ -484,15 +484,15 @@ The following example illustrates how to handle the MoveSignature event. ``` -## OnAnnotationDoubleClick Event +## OnAnnotationDoubleClick event The [OnAnnotationDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnAnnotationDoubleClick) event triggers when an annotation is double-clicked. -#### Event Arguments +#### Event arguments -See [AnnotationDoubleClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationDoubleClickEventArgs.html) for details such as AnnotationId, AnnotationType, PageNumber, and mouse position. +See [AnnotationDoubleClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationDoubleClickEventArgs.html) for details such as `AnnotationId`, `AnnotationType`, `PageNumber`, and mouse position. -The following example illustrates how to handle the OnAnnotationDoubleClick event. +The following example illustrates handling the `OnAnnotationDoubleClick` event. ```cshtml @@ -512,15 +512,15 @@ The following example illustrates how to handle the OnAnnotationDoubleClick even ``` -## RemoveSignature Event +## RemoveSignature event -The [RemoveSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_RemoveSignature) event triggers when a signature is removed from a page in the PDF document. +The [RemoveSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_RemoveSignature) event triggers when a signature is removed from a page. -#### Event Arguments +#### Event arguments -See [RemoveSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.RemoveSignatureEventArgs.html) for details such as Id and PageNumber. +See [RemoveSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.RemoveSignatureEventArgs.html) for details such as `Id` and `PageNumber`. -The following example illustrates how to handle the RemoveSignature event. +The following example illustrates handling the `RemoveSignature` event. ```cshtml @@ -540,15 +540,15 @@ The following example illustrates how to handle the RemoveSignature event. ``` -## ResizeSignature Event +## ResizeSignature event -The [ResizeSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ResizeSignature) event triggers when a signature is resized on a page in the PDF document. +The [ResizeSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ResizeSignature) event triggers when a signature is resized on a page. -#### Event Arguments +#### Event arguments -See [ResizeSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ResizeSignatureEventArgs.html) for details such as Id, PageNumber, PreviousBounds, and Bounds. +See [ResizeSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ResizeSignatureEventArgs.html) for details such as `Id`, `PageNumber`, `PreviousBounds`, and `Bounds`. -The following example illustrates how to handle the ResizeSignature event. +The following example illustrates handling the `ResizeSignature` event. ```cshtml @@ -568,15 +568,15 @@ The following example illustrates how to handle the ResizeSignature event. ``` -## SignaturePropertiesChange Event +## SignaturePropertiesChange event -The [SignaturePropertiesChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_SignaturePropertiesChange) event triggers when the properties of a signature are changed on a page in the PDF document. +The [SignaturePropertiesChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_SignaturePropertiesChange) event triggers when signature properties are changed on a page. -#### Event Arguments +#### Event arguments -See [SignaturePropertiesChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignaturePropertiesChangeEventArgs.html) for details such as Id, PageNumber, and changed property values. +See [SignaturePropertiesChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignaturePropertiesChangeEventArgs.html) for details such as `Id`, `PageNumber`, and changed property values. -The following example illustrates how to handle the SignaturePropertiesChange event. +The following example illustrates handling the `SignaturePropertiesChange` event. ```cshtml @@ -596,15 +596,15 @@ The following example illustrates how to handle the SignaturePropertiesChange ev ``` -## SignatureSelected Event +## SignatureSelected event -The [SignatureSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_SignatureSelected) event triggers when a signature is selected on a page in the PDF document. +The [SignatureSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_SignatureSelected) event triggers when a signature is selected on a page. -#### Event Arguments +#### Event arguments -See [SignatureSelectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureSelectedEventArgs.html) for details such as Id and PageNumber. +See [SignatureSelectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureSelectedEventArgs.html) for details such as `Id` and `PageNumber`. -The following example illustrates how to handle the SignatureSelected event. +The following example illustrates handling the `SignatureSelected` event. ```cshtml @@ -624,15 +624,15 @@ The following example illustrates how to handle the SignatureSelected event. ``` -## SignatureUnselected Event +## SignatureUnselected event -The [SignatureUnselected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_SignatureUnselected) event triggers when a signature is unselected on a page in the PDF document. +The [SignatureUnselected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_SignatureUnselected) event triggers when a signature is unselected on a page. -#### Event Arguments +#### Event arguments -See [SignatureUnselectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureUnselectedEventArgs.html) for details such as Id and PageNumber. +See [SignatureUnselectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureUnselectedEventArgs.html) for details such as `Id` and `PageNumber`. -The following example illustrates how to handle the SignatureUnselected event. +The following example illustrates handling the `SignatureUnselected` event. ```cshtml diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/import-export-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/import-export-annotation.md index 760d192609..8120064188 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/import-export-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/import-export-annotation.md @@ -80,7 +80,7 @@ Supported formats: [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Import-Export/Annotations%20as%20JSON%20object). -N> Ensure that the JSON file used for importing annotations is available at the specified path. Paths are case-sensitive in some hosting environments. +N> Ensure that the JSON file used for importing annotations is available at the specified path. Paths can be case-sensitive in some hosting environments. ## Exporting annotation from the PDF document diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/ink-annotation.md index d18c5dcd7e..ff8723fb0c 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/ink-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/ink-annotation.md @@ -116,7 +116,7 @@ Below is an example demonstrating how to add an ink annotation to a PDF document PdfAnnotation annotation = new PdfAnnotation(); // Set the annotation type of Ink annotation.Type = AnnotationType.Ink; - // Set the PageNumber starts from 0. So, if set 0 it repersent the page 1. + // Page numbers start from 0. So, if set to 0 it represents page 1. annotation.PageNumber = 0; // Bound of the Ink annotation diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/measurement-annotation.md index 7ee13844f5..c8606668f3 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/measurement-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/measurement-annotation.md @@ -24,11 +24,11 @@ The SfPdfViewer provides options to add and work with measurement annotations. U Measurement annotations can be added using the annotation toolbar. * Click the **Edit Annotation** button in the SfPdfViewer toolbar. A toolbar appears below it. -* Click the **measurement Annotation** dropdown button. A dropdown pop-up appears with the available measurement annotation types. +* Click the **measurement Annotation** dropdown button. A dropdown appears with the available measurement annotation types. * Select a measurement type to enable that annotation mode. * Click on the page to add and measure using the selected annotation. -When a measurement mode is enabled while in Pan mode, the SfPdfViewer switches to Text Select mode. +When a measurement mode is enabled while in Pan mode, the viewer automatically switches to Text Select mode. ![Adding Calibrate in Blazor SfPdfViewer Toolbar](../images/blazor-pdfviewer-add-calibrate-in-toolbar.png) @@ -219,7 +219,7 @@ The following example demonstrates adding a measurement annotation to a PDF docu PdfAnnotation annotation = new PdfAnnotation(); // Set the annotation type of measurement annotation like radius, distance, perimeter, area, volume annotation.Type = AnnotationType.Radius; - // Set the PageNumber starts from 0. So, if set 0 it represents the page 1. + // Page numbers start from 0. So, if set to 0 it represents page 1. annotation.PageNumber = 0; // Bound of the radius annotation diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/shape-annotation.md index f841b2833f..d8aa6f5ba9 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/shape-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/shape-annotation.md @@ -28,7 +28,7 @@ Shape annotations can be added from the annotation toolbar. * Choose a shape type to enable the corresponding drawing mode. * Draw the selected shape on the PDF page. -When the viewer is in pan mode and a shape drawing mode is activated, the control switches to text selection mode to enable drawing. +When the viewer is in Pan mode and a shape drawing mode is activated, the viewer switches to Text Select mode. ![Adding shape annotations in Blazor SfPdfViewer](../images/blazor-pdfviewer-add-shape-in-toolbar.png) @@ -161,7 +161,7 @@ The appearance of an annotation’s selector can be customized using [Annotation @@ -188,7 +188,7 @@ The appearance of an annotation’s selector can be customized using [Annotation [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Selector/Customize%20Annotation%20%20Selector). -## Add shape annotation Programmatically +## Add shape annotation programmatically The Blazor SfPdfViewer supports programmatic creation of shape annotations Rectangle, Line, Arrow, Circle, and Polygon using [AddAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_). Ensure the document is loaded and the component reference is available before invoking API calls. @@ -211,7 +211,7 @@ Below is an example demonstrating how to use this method to add a shape annotati PdfAnnotation annotation = new PdfAnnotation(); // Set the Shape annotation type like Rectangle, Line, Arrow, Circle, Polygon. annotation.Type = AnnotationType.Rectangle; - // Set the page number starts from 0. So, if set 0 it represents the page 1. + // Page numbers start from 0. So, if set to 0 it represents page 1. annotation.PageNumber = 0; // Bound of the rectangle annotation diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md index e3ddcd163b..0d22f9b88c 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md @@ -18,6 +18,12 @@ The SfPdfViewer component provides options to add, edit, delete, and rotate the ![Stamp annotations displayed in the Blazor SfPdfViewer](../images/blazor-pdfviewer-stamp-annotation.png) +## Prerequisites + +- Install and reference the `Syncfusion.Blazor.SfPdfViewer` package. +- Register the PDF Viewer services and include the viewer's scripts and styles in your app. +- Ensure images used for custom stamps are accessible to the hosting environment. + ## Adding stamp annotations to the PDF document Stamp annotations can be added using the annotation toolbar. @@ -33,7 +39,7 @@ Stamp annotations can be added using the annotation toolbar. * Place the annotation on the desired page in the PDF document. -When entering stamp mode while in pan mode, the SfPdfViewer automatically switches to text selection mode to enable annotation placement. +When entering stamp mode while in Pan mode, the viewer switches to Text Select mode to enable annotation placement. ## Adding custom stamp to the PDF document through interaction @@ -45,7 +51,7 @@ When entering stamp mode while in pan mode, the SfPdfViewer automatically switch * In the file explorer dialog, choose an image to add as a stamp on the PDF page. -N> Only JPEG (JPG/JPEG) image formats are supported for custom stamp annotations. +>**Note:** Only JPEG (JPG/JPEG) image formats are supported for custom stamp annotations. ## Setting default properties during control initialization @@ -59,7 +65,7 @@ After changing the default opacity using the Edit Opacity tool, the currently se @@ -237,7 +243,7 @@ This code adds a stamp annotation to the first page of the PDF document. Note th [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Programmatic%20Support/Stamp/Add). -N> To add a custom stamp annotation programmatically, set the annotation type to [Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationType.html#Syncfusion_Blazor_SfPdfViewer_AnnotationType_Image) and provide the custom image data using the [CustomStampSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfAnnotation.html#Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_CustomStampSource) API. Then call [AddAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) to add the annotation. +>**Note:** To add a custom stamp annotation programmatically, set the annotation type to [Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationType.html#Syncfusion_Blazor_SfPdfViewer_AnnotationType_Image) and provide the custom image data using the [CustomStampSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfAnnotation.html#Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_CustomStampSource) API. Then call [AddAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) to add the annotation. ## Edit stamp annotation programmatically @@ -302,4 +308,10 @@ The PDF Viewer supports smooth rotation for Custom stamps and customized templat ## See also -* [How to delete the annotation programmatically](./text-markup-annotation#delete-annotation-programmatically) \ No newline at end of file +* [How to delete the annotation programmatically](./text-markup-annotation#delete-annotation-programmatically) + +**Best practices** + +- Prefer JPEG images under a reasonable size to minimize load times for custom stamps. +- When adding stamps programmatically, validate image data and use streams to reduce memory usage for large images. +- Provide clear stamp names and use sufficient contrast for accessibility when stamping documents. \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/sticky-notes-annotation.md index cd69273b65..36e99f4bea 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/sticky-notes-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/sticky-notes-annotation.md @@ -9,7 +9,7 @@ documentation: ug # Sticky notes annotations in Blazor SfPdfViewer Component -The SfPdfViewer control provides options to add, edit, and delete sticky notes annotations in a PDF document. +The SfPdfViewer component provides options to add, edit, and delete sticky notes annotations in a PDF document. ![StickyNotes Annotation in Blazor SfPdfViewer](../images/blazor-pdfviewer-stickynotes-annotation.png) @@ -121,9 +121,9 @@ Below is an example demonstrating how to add a sticky note annotation to a PDF d public async void AddStickyNoteAnnotationAsync(MouseEventArgs args) { PdfAnnotation annotation = new PdfAnnotation(); - // Set the annotation type sticky note + // Set the annotation type to sticky note annotation.Type = AnnotationType.StickyNotes; - // Set the PageNumber starts from 0. So, if set 0 it represents the page 1. + // Page numbers start from 0. So, if set to 0 it represents page 1. annotation.PageNumber = 0; // Bound of the sticky note annotation diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/text-markup-annotation.md index 03de3e168f..4c950a5c71 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/text-markup-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/text-markup-annotation.md @@ -9,7 +9,7 @@ documentation: ug # Text markup annotations in Blazor SfPdfViewer Component -The SfPdfViewer control supports adding, editing, and deleting text markup annotations, including highlight, underline, strikethrough, and squiggly, in a PDF document. +The SfPdfViewer component supports adding, editing, and deleting text markup annotations, including highlight, underline, strikethrough, and squiggly, in a PDF document. ![Blazor SfPdfViewer showing text markup annotations](../images/blazor-pdfviewer-text-markup-annotation.png) @@ -37,7 +37,7 @@ There are two ways to highlight text in a PDF document. ![Highlighted text in Blazor SfPdfViewer](../images/blazor-pdfviewer-highlight-text.png) -In pan mode, entering highlight mode switches the viewer to text select mode to enable text selection for highlighting. +When entering highlight mode while in Pan mode, the viewer switches to Text Select mode to enable text selection for highlighting. ```cshtml @@ -83,7 +83,7 @@ There are two ways to underline text in a PDF document. ![Underlined text in Blazor SfPdfViewer](../images/blazor-pdfviewer-underline-text.png) -In pan mode, entering underline mode switches the viewer to text select mode to enable text selection for underlining. +When entering underline mode while in Pan mode, the viewer switches to Text Select mode to enable text selection for underlining. ```cshtml @@ -129,7 +129,7 @@ Using the context menu. ![Strikethrough text in Blazor SfPdfViewer](../images/blazor-pdfviewer-strike-through-text.png) -In pan mode, entering strikethrough mode switches the viewer to text select mode to enable text selection for striking through. +When entering strikethrough mode while in Pan mode, the viewer switches to Text Select mode to enable text selection for striking through. ```cshtml @@ -174,7 +174,7 @@ Using the context menu. ![Squiggly annotation in Blazor SfPdfViewer](../images/blazor-pdfviewer-squiggly-text.png) -In pan mode, entering squiggly mode switches the viewer to text select mode to enable text selection for applying the squiggly annotation. +When entering squiggly mode while in Pan mode, the viewer switches to Text Select mode to enable text selection for applying the squiggly annotation. ```cshtml @@ -287,9 +287,9 @@ Below is an example demonstrating how to add a text markup annotation to a PDF d public async void AddTextMarkupAnnotation(MouseEventArgs args) { PdfAnnotation annotation = new PdfAnnotation(); - // Set the Text markup annotation type like highlight, underline, strikethrough, Squiggly. + // Set the Text markup annotation type like highlight, underline, strikethrough, squiggly. annotation.Type = AnnotationType.Highlight; - // Set the PageNumber starts from 0. So, if set to 2 it represents the page 3. + // Page numbers start from 0. So, if set to 2 it represents page 3. annotation.PageNumber = 2; List bounds = new List(); Bound bound = new Bound(); diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/command-manager.md b/Document-Processing/PDF/PDF-Viewer/blazor/command-manager.md index c9b9114455..5eacf4fc76 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/command-manager.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/command-manager.md @@ -9,25 +9,27 @@ documentation: ug # Command Manager in Blazor SfPdfViewer Component -The PDF viewer provides support to map or bind command execution with a desired combination of key gestures. +The PDF Viewer supports mapping keyboard gestures to named commands so that pressing a defined key combination triggers a viewer action. -The [PdfViewerCommandManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerCommandManager.html) provides support to define custom commands. These custom commands are executed when the specified key gesture is recognized. +The [PdfViewerCommandManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerCommandManager.html) enables defining custom commands that execute when the specified key gesture is recognized. -## Command Execution -To execute custom commands, simply provide a list of keyboard shortcuts along with the corresponding actions. These actions will be triggered when the specified keyboard shortcuts are pressed. +## Command execution +Provide a list of keyboard shortcuts and corresponding action names; the viewer raises `CommandExecuted` when a registered shortcut is detected. -* [Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.KeyboardCommand.html): Defines the collection of custom keyboard shortcuts and the action names to execute in the PDF Viewer. +- [Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.KeyboardCommand.html): Defines the collection of custom keyboard shortcuts and their action names. +- [CommandExecuted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CommandExecutedEventArgs.html): Raised when a registered keyboard shortcut is detected; handle this event to perform the action. -* [CommandExecuted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CommandExecutedEventArgs.html): Raised when a registered keyboard shortcut is detected; handle this event to perform the action. - -## How to create custom command: +## How to create a custom command Create custom keyboard commands by specifying an action name and the corresponding key gesture for the PDF Viewer. -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CommandExecutedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_CommandExecutedEventArgs_ActionName): Specifies the name of the action to execute when the keyboard shortcut is pressed (for example, FitToWidth, FitToPage). The action name must correspond to a recognized PDF Viewer action. +- [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CommandExecutedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_CommandExecutedEventArgs_ActionName): The name of the action to execute when the keyboard shortcut is pressed (for example, `FitToWidth`, `FitToPage`). The action name must match a recognized viewer action. + +- [Gesture](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.KeyGesture.html): The combination of [keys](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.KeyGesture.html#Syncfusion_Blazor_SfPdfViewer_KeyGesture_Key) and [modifiers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.KeyGesture.html#Syncfusion_Blazor_SfPdfViewer_KeyGesture_Modifiers) (Control, Shift, Alt, Meta). On macOS, Meta maps to the Command key. -* [Gesture](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.KeyGesture.html): Specifies the combination of [keys](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.KeyGesture.html#Syncfusion_Blazor_SfPdfViewer_KeyGesture_Key) and [modifiers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.KeyGesture.html#Syncfusion_Blazor_SfPdfViewer_KeyGesture_Modifiers), including Control, Shift, Alt or Meta key that are utilized within the PDF viewer. On macOS, Meta maps to the Command key. +### Usage +Register commands with `PdfViewerCommandManager` and handle `CommandExecuted` to invoke viewer methods (for example, `FitToWidthAsync` or `FitToPageAsync`). See the `CommandExecuted` API documentation for recognized action names and expected behavior. -The following example registers two custom keyboard commands (FitToWidth and FitToPage) and handles them in CommandExecuted. The example uses SfPdfViewer2; use the component that matches the project version. +The following example registers two custom keyboard commands (`FitToWidth` and `FitToPage`) and handles them in `CommandExecuted`. The example uses `SfPdfViewer2`; use the component that matches the project version. ```cshtml 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 c640a22822..4dc12ee31d 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/document-security-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/document-security-overview.md @@ -9,12 +9,12 @@ documentation: ug # Document security in Blazor SfPdfViewer -This article describes how the Blazor PDF Viewer (SfPdfViewer) handles secured PDF documents, including password-protected files and documents with permission restrictions. It also outlines expected behavior when opening these files and links to task-focused guides. +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. -The PDF specification supports two primary security configurations: +The PDF specification defines two common security configurations: -- [Password-protected](./document-security/password-protected) (password required to decrypt and open the file) -- [Permission-restricted](./document-security/permission) (owner password sets granular permissions such as printing, copying, editing, annotating, and form filling) +- [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: - 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. diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/events.md b/Document-Processing/PDF/PDF-Viewer/blazor/events.md index 0ab404e7e8..10398e9e2b 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/events.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/events.md @@ -27,45 +27,45 @@ The following events are available in the SfPdfViewer component. |[DocumentEdited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_DocumentEdited)|Triggers when the PDF document is edited in the SfPdfViewer.| |[DocumentLoaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_DocumentLoaded)|Triggers when a document is loaded into the PDF Viewer.| |[DocumentLoadFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_DocumentLoadFailed)|Triggers when loading a document into the PDF Viewer fails.| -|[DcoumentUnloaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_DocumentUnloaded)|Triggers when the document is closed.| +|[DocumentUnloaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_DocumentUnloaded)|Triggers when the document is closed.| |[DownloadEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_DownloadEnd)|Triggers when a download action is completed.| |[DownloadStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_DownloadStart)|Triggers when a download action starts.| |[ExportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExportFailed)|Triggers when exporting annotations fails in the SfPdfViewer.| |[ExportStarted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExportStarted)|Triggers when exporting annotations starts in the SfPdfViewer.| |[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)|Triggered 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)|Triggered 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)|Triggered 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)|Triggered 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)|Triggered when a form field is double-clicked.| -|[FormFieldFocusIn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldFocusIn)|Triggered when focus enters a form field.| -|[FormFieldFocusOut](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldFocusOut)|Triggered when focus leaves a form field.| -|[FormFieldMouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldMouseEnter)|Triggered 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)|Triggered when the mouse leaves a form field.| -|[FormFieldPropertyChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldPropertyChanged)|Triggered 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)|Triggered when a form field is resized.| -|[FormFieldSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldSelected)|Triggered when a form field is selected.| -|[FormFieldsExported](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsExported)|Triggered when form fields are successfully exported.| -|[FormFieldsExportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsExportFailed)|Triggered when form fields export operation fails.| -|[FormFieldsExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsExporting)|Triggered 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)|Triggered when form fields are successfully imported.| -|[FormFieldsImportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsImportFailed)|Triggered when form fields import operation fails.| -|[FormFieldsImporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsImporting)|Triggered 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)|Triggered 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.| +|[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.| |[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,8 +76,8 @@ 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 an event 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)|Triggered when form fields are validated.| +|[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.| ## Adding SfPdfViewer events to Blazor component diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faq.md b/Document-Processing/PDF/PDF-Viewer/blazor/faq.md index 9887911505..ad794b48f0 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faq.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faq.md @@ -7,9 +7,9 @@ control: SfPdfViewer documentation: ug --- -# Frequently Asked Questions Section in Blazor SfPdfViewer Component +# Frequently Asked Questions in Blazor SfPdfViewer Component -The frequently asked questions in Syncfusion Blazor PDF Viewer +Common questions and answers for using the Syncfusion Blazor SfPdfViewer component. * [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) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-change-the-highlighted-color-of-the-text.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-change-the-highlighted-color-of-the-text.md index 53c53099be..4b080c32f0 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-change-the-highlighted-color-of-the-text.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-change-the-highlighted-color-of-the-text.md @@ -9,9 +9,9 @@ documentation: ug # Change the highlight color of the text in Blazor SfPdfViewer Component -Use the `Color` property of the [PdfViewerHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerHighlightSettings.html) class to set the default highlight color for the Highlight text markup annotation. This setting applies only to Highlight annotations. Other text markup types (such as Underline or Strikethrough) have their own settings. +Use the `Color` property of [PdfViewerHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerHighlightSettings.html) to set the default highlight color for text markup highlights. This applies only to Highlight annotations; other text-markup types (such as Underline or Strikethrough) use their own settings. -The following code illustrates how to change the highlight color of the text. +The following example shows how to set the highlight color. ```cshtml @using Syncfusion.Blazor.Buttons diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-check-status-of-annotations-or-comments.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-check-status-of-annotations-or-comments.md index a7f109c11f..762ba0719e 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-check-status-of-annotations-or-comments.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-check-status-of-annotations-or-comments.md @@ -16,7 +16,7 @@ The following code example shows how to obtain the review status of each annotat ```cshtml @using Syncfusion.Blazor.SfPdfViewer @using Syncfusion.Blazor.Buttons -@inject IJSRuntime JsRuntime; +@inject IJSRuntime JsRuntime Review Status @code{ - public SfPdfViewer Viewer { get; set; } + public SfPdfViewer2 Viewer { get; set; } private string DocumentPath { get; set; } = "Data/PDF_Succinctly.pdf"; - //Prints the document's edited status in console window. + // Logs the document's edited status to the console (null-safe). public void OnClick(MouseEventArgs args) { Console.WriteLine(Viewer.IsDocumentEdited); diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-configure-content-security-policy.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-configure-content-security-policy.md index 3794b3df7a..d5bec77472 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-configure-content-security-policy.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-configure-content-security-policy.md @@ -11,7 +11,7 @@ documentation: ug Content Security Policy (CSP) is a browser security mechanism that mitigates attacks such as cross-site scripting (XSS) and data injection by restricting the allowed sources for loaded content. -When enforcing a strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), some features are blocked by default. To use the Blazor SfPdfViewer under strict CSP, include the following directives in the CSP meta tag. +When enforcing a strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), some browser features are blocked by default. To use the Blazor `SfPdfViewer` with a strict CSP, add the directives below to your CSP meta tag. * The SfPdfViewer renders calculated inline styles and Base64 font icons, which are blocked by strict CSP. Allow these by adding the [`style-src 'self' 'unsafe-inline' blob:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives. diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-coordinate-conversion-between-page-and-client-points.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-coordinate-conversion-between-page-and-client-points.md index fdc09b7a2a..80dc6f380d 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-coordinate-conversion-between-page-and-client-points.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-coordinate-conversion-between-page-and-client-points.md @@ -126,7 +126,7 @@ window.convertClientPointToPagePoint = function (clientPoint) {
-
+
ArrowSettings controls the default arrow head styles for annotations created using the toolbar or programmatically. Set LineHeadStartStyle and LineHeadEndStyle to LineHeadStyle.None to remove heads. Other common values include LineHeadStyle.Closed, LineHeadStyle.Round, LineHeadStyle.Square, LineHeadStyle.ClosedArrow, LineHeadStyle.Diamond and LineHeadStyle.Open. +N> ArrowSettings controls the default arrow head styles for annotations created using the toolbar or programmatically. Set `LineHeadStartStyle` and `LineHeadEndStyle` to `LineHeadStyle.None` to remove heads. Other common values include `LineHeadStyle.Closed`, `LineHeadStyle.Round`, `LineHeadStyle.Square`, `LineHeadStyle.ClosedArrow`, `LineHeadStyle.Diamond`, and `LineHeadStyle.Open`. [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Shapes/Remove%20arrow%20annotation%20heads). diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md index 6cb3bd4f9a..b5e594bd18 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md @@ -77,7 +77,7 @@ N> For emulator issues, see Troubleshooting Android Emulator: https://learn.micr ![Blazor SfPdfViewer rendering in the Android emulator](../getting-started/gettingstarted-images/emulator.png) ->[View sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/MAUI%20Blazor%20App/MauiBlazorAndroid). +N> [View sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/MAUI%20Blazor%20App/MauiBlazorAndroid). ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md index 22eea852d6..a375f54f70 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md @@ -17,7 +17,7 @@ The following code example demonstrates how to extract text from a PDF document ```cshtml @page "/" -@using Microsoft.Extensions.Caching.Memory +@using Microsoft.Extensions.Caching.Memory; @using Syncfusion.Blazor.Popups; @using Syncfusion.Blazor.Buttons; @using Syncfusion.Blazor.Navigations; diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-desired-pdf-for-initial-loading-in-hosted-sample.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-desired-pdf-for-initial-loading-in-hosted-sample.md index fdbfe00683..2b108bb216 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-desired-pdf-for-initial-loading-in-hosted-sample.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-desired-pdf-for-initial-loading-in-hosted-sample.md @@ -15,7 +15,7 @@ Load a specific PDF on initial display and change the document at runtime in the @inject HttpClient Http; @using Syncfusion.Blazor.Buttons; -@using Syncfusion.Blazor.SfPdfViewer +@using Syncfusion.Blazor.SfPdfViewer; Load Another Document diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-office-files.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-office-files.md index ab0cd41fd1..273c773c0a 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-office-files.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-office-files.md @@ -19,8 +19,8 @@ In the following example, a Word document is converted to a PDF and then loaded ```cshtml @page "/" -@using Syncfusion.Blazor.SfPdfViewer -@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.SfPdfViewer; +@using Syncfusion.Blazor.Buttons; @using Syncfusion.Pdf; @using Syncfusion.Pdf.Graphics; @using Syncfusion.Pdf.Interactive; @@ -32,7 +32,7 @@ In the following example, a Word document is converted to a PDF and then loaded @using Syncfusion.Presentation; @using Syncfusion.PresentationRenderer; @using Syncfusion.XlsIO; -@using Syncfusion.XlsIORenderer +@using Syncfusion.XlsIORenderer; @using Syncfusion.DocIORenderer; @using System.IO; diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-ej2-pdf-viewer-in-blazor.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-ej2-pdf-viewer-in-blazor.md index 2d7f6f9a67..3091e9078e 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-ej2-pdf-viewer-in-blazor.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-ej2-pdf-viewer-in-blazor.md @@ -13,7 +13,7 @@ The Syncfusion® Blazor SfPdfViewer component supports rendering the EJ2 Java The following steps show how to embed the JavaScript PDF Viewer in a Blazor component. ->Note: Ensure that the EJ2 PDF Viewer scripts and styles are referenced in the application, and that the serviceUrl points to a reachable EJ2 PDF Viewer web service endpoint. +N> Ensure that the EJ2 PDF Viewer scripts and styles are referenced in the application, and that the serviceUrl points to a reachable EJ2 PDF Viewer web service endpoint. **Step 1:** Add a JavaScript file to the application and reference it in the head element. diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-show-or-hide-sfpdfviewer-dynamically.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-show-or-hide-sfpdfviewer-dynamically.md index f8f8fa378d..8614e7425e 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-show-or-hide-sfpdfviewer-dynamically.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-show-or-hide-sfpdfviewer-dynamically.md @@ -13,7 +13,7 @@ The following example initializes the PDF Viewer hidden and toggles its visibili ```cshtml -@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Buttons; @using Syncfusion.Blazor.SfPdfViewer; @using System.Net; diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md index 3df735ab23..8674c8d791 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md @@ -9,15 +9,15 @@ documentation: ug # Programmatic Support for Form Designer in Blazor PDF Viewer -The Blazor SfPdfViewer component provides programmatic control over PDF form fields, enabling creation, update, and management entirely through code for automated and reliable form workflows. +The Blazor SfPdfViewer component provides programmatic APIs to create, update, and manage PDF form fields, enabling automated and reliable form workflows. -N> Programmatic operations do not require enabling the Form Designer UI. Ensure a document is loaded and an instance reference (for example, SfPdfViewer2 via @ref) is available before invoking API methods. +N> Programmatic operations do not require the Form Designer UI. Ensure a document is loaded and an instance reference (for example, `SfPdfViewer2` via `@ref`) is available before invoking API methods. ## Adding Form Fields Programmatically -The Blazor SfPdfViewer offers a way to add form fields programmatically using the [AddFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) method. This method accepts a list of [FormFieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html) objects, where each object represents a form field (for example, ButtonField, TextBoxField, PasswordField, CheckBoxField, RadioButtonField, DropDownField, ListBoxField, SignatureField) with specific properties and [Bound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.Bound.html) coordinates. +The [AddFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) API accepts a list of [FormFieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html) instances. Each instance defines a form field type (for example, `ButtonField`, `TextBoxField`, `PasswordField`, `CheckBoxField`, `RadioButtonField`, `DropDownField`, `ListBoxField`, `SignatureField`) and its [Bound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.Bound.html) coordinates. -The example below demonstrates how to add form fields in the SfPdfViewer2 component: +The example below demonstrates adding form fields to the SfPdfViewer2 component: ```cshtml @page "/" @@ -68,9 +68,7 @@ N> Form fields can also be added interactively using the Form Designer UI for an ## Form Field Settings -The Blazor SfPdfViewer provides [FormFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html) to configure form field appearance, including borders, background, text styles, and related properties. - -The example below demonstrates configuring [thickness](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_Thickness). Additional options include [background color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_BackgroundColor), [border color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_BorderColor), [text color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_Color), [font family](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_FontFamily), [font size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_FontSize), and [font style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_FontStyle). +The Blazor SfPdfViewer provides [FormFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html) to configure form field appearance, including border thickness, background color, text color, font family, and font size. The example below demonstrates adjusting [thickness](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_Thickness); additional appearance options are available. ```cshtml @page "/" @@ -168,10 +166,10 @@ The following image illustrates setting and clearing the form field mode in Blaz ## Update Form Fields -Form fields can be modified dynamically by retrieving them with [GetFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetFormFieldsAsync) and applying changes using [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormField_). Use null/empty checks and batch updates to efficiently apply multiple changes. +Form fields can be retrieved with [GetFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetFormFieldsAsync) and updated with [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormField_). Use null/empty checks and batch updates to apply multiple changes efficiently. ### Appearance Properties -Controls the visual aspects of form fields, including [background color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_BackgroundColor), [border color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_BorderColor), [text color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Color), [thickness](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Thickness), [maxLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html#Syncfusion_Blazor_SfPdfViewer_TextBoxField_MaxLength), [visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Visibility), [font size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_FontSize), [font family](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_FontFamily), [font style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_FontStyle), and [text alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_TextAlignment). These properties customize the visual presentation of fields. +Appearance properties control the visual aspects of form fields, including [background color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_BackgroundColor), [border color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_BorderColor), [text color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Color), [thickness](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Thickness), [maxLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html#Syncfusion_Blazor_SfPdfViewer_TextBoxField_MaxLength), [visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Visibility), [font size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_FontSize), [font family](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_FontFamily), [font style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_FontStyle), and [text alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_TextAlignment). These properties allow precise control over field presentation. ```cshtml @page "/" @@ -216,7 +214,7 @@ The following image illustrates updating the appearance of a button form field i [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/UpdateApperanceProperties.razor). ### Identification & Metadata Properties -Use [name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListItem.html#Syncfusion_Blazor_SfPdfViewer_ListItem_Name) (identifier) and [value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListItem.html#Syncfusion_Blazor_SfPdfViewer_ListItem_Value) (display/value data) on dropdown [ListItem] entries to define item metadata. These properties help organize options and manage related form fields effectively. +Use [name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListItem.html#Syncfusion_Blazor_SfPdfViewer_ListItem_Name) (identifier) and [value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListItem.html#Syncfusion_Blazor_SfPdfViewer_ListItem_Value) (display/value data) on dropdown [ListItem] entries to define item metadata. These values improve option organization and facilitate management of related form fields. ```cshtml @page "/" @@ -258,7 +256,7 @@ The following image illustrates updating the metadata of a dropdown field in Bla ### Grouping and Synchronizing Form Fields Properties -When multiple fields share the same name, changes apply to all linked fields. Updates to [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html#Syncfusion_Blazor_SfPdfViewer_TextBoxField_Value), [Required](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_IsRequired), [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_IsReadOnly), [Multiline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html#Syncfusion_Blazor_SfPdfViewer_TextBoxField_IsMultiline), and [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_TooltipText) reflect instantly. This ensures consistency across the document. +When multiple fields share the same name, updates apply to all linked fields. Changes to [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html#Syncfusion_Blazor_SfPdfViewer_TextBoxField_Value), [Required](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_IsRequired), [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_IsReadOnly), [Multiline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html#Syncfusion_Blazor_SfPdfViewer_TextBoxField_IsMultiline), and [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_TooltipText) propagate instantly, ensuring document-wide consistency. ```cshtml @page "/" @@ -294,7 +292,7 @@ N> Users can also update form fields through the UI in SfPdfViewer for an intuit ## Delete Form Fields -The [DeleteFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteFormFieldsAsync_System_Boolean_) method enables the removal of form fields from the document, allowing users to manage and modify form structures efficiently. +The [DeleteFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteFormFieldsAsync_System_Boolean_) method removes form fields from the document, enabling efficient management of form structures. ### Delete All Form Fields Removes all form fields from the document using [DeleteFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteFormFieldsAsync_System_Boolean_) , clearing all interactive elements at once. @@ -404,7 +402,7 @@ N> Users can also delete form fields through the UI in SfPdfViewer for an intuit ## Select Form Field -Form fields can be programmatically selected using the [SelectFormFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SelectFormFieldAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_) method. Selection is supported either by unique ID or by passing the form field object reference. +Form fields can be selected programmatically using [SelectFormFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SelectFormFieldAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_). Selection supports either the field's unique ID or its object reference. ### Select Form Field by ID diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/custom-font.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/custom-font.md index f57b7d4b57..191fd39846 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/custom-font.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/custom-font.md @@ -9,11 +9,11 @@ documentation: ug # Custom Font Support for Form Fields -The Blazor SfPdfViewer supports loading, editing, and saving custom fonts in form fields such as text boxes, list boxes, and drop-downs by using the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and [FontFamilies](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FontFamilies) properties. +The Blazor SfPdfViewer supports loading, using, and saving custom fonts for form fields (TextBox, ListBox, DropDown) via the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and `FontFamilies` properties. ## Integrating Custom Font Collections into Form Fields in SfPdfViewer -To ensure proper rendering and saving of form fields that use custom fonts, especially when the fonts are not installed on the system, set the FallbackFontCollection property. Additionally, load custom fonts (TTF files) and expose them in the Font Family drop-down of the property dialog by using the FontFamilies property (string array). These fonts can then be used seamlessly in form fields for loading, editing, and saving. +To ensure correct rendering and saving of form fields that use custom fonts (especially when fonts are not installed on the host system), set the `FallbackFontCollection` property and load the TTF files the application can access. Add those font family names to the `FontFamilies` (string[]) property so the fonts appear in the Font Family dropdown in the property dialog. Ensure TTF files are available at the configured path (for example, `wwwroot/Data`) and that font licenses permit distribution with the application. ```cshtml @page "/" @@ -44,15 +44,15 @@ To ensure proper rendering and saving of form fields that use custom fonts, espe [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Custom%20Font%20Support%20For%20FormFields). ->**Note:** If a form field (TextBox, ListBox, DropDown) using a custom font has text larger than the field’s bounds, the downloaded PDF may render incorrectly in browsers or third‑party viewers. It displays correctly in the Syncfusion SfPdfViewer. To avoid this, use a font size that fits within the field or enlarge the field before saving/downloading. +N> If a form field (TextBox, ListBox, DropDown) using a custom font contains text larger than the field’s bounds, the downloaded PDF may render differently in some browsers or third‑party viewers. The Syncfusion SfPdfViewer renders these fields correctly. To avoid rendering issues, use a font size that fits the field, enlarge the field prior to saving, or adjust layout before downloading. ## Custom Font Support for Signature Fields -The Blazor SfPdfViewer allows loading, editing, and saving custom fonts in signature fields by using the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and [SignatureFonts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerSignatureDialogSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerSignatureDialogSettings_SignatureFonts) properties. +The Blazor SfPdfViewer allows loading, editing, and saving custom fonts for signature fields by using the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and [SignatureFonts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerSignatureDialogSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerSignatureDialogSettings_SignatureFonts) properties. ### Integrating Custom Font Collections into Signature Fields in SfPdfViewer -To ensure proper rendering and saving of signatures that use custom fonts, especially when the fonts are not installed on the system, set the FallbackFontCollection property. Additionally, load custom fonts (TTF files), add them to the signature dialog by using the SignatureFonts property (string array), and use them seamlessly in signature fields for loading, editing, and saving. +To ensure correct rendering and saving of signatures that use custom fonts (especially when those fonts are not installed on the host system), set the `FallbackFontCollection` property and load the TTF files the application can access. Add the font family names to the `SignatureFonts` (string[]) property so they appear in the signature dialog. Verify that the font files are reachable at the configured path (for example, `wwwroot/Data`) and that licensing allows distribution. ```cshtml @page "/" @@ -68,7 +68,7 @@ To ensure proper rendering and saving of signatures that use custom fonts, espec private string DocumentPath { get; set; } = "wwwroot/Data/With_Four_Signature_Fields.pdf"; // Use the FontFamilies property to add custom font families to the Font Family dropdown in the annotation toolbar - public string[] signatureFonts = { "Allura", "Tangerine, "Sacramento", "Inspiration" }; + public string[] signatureFonts = { "Allura", "Tangerine", "Sacramento", "Inspiration" }; public void Created() { @@ -85,7 +85,7 @@ To ensure proper rendering and saving of signatures that use custom fonts, espec [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Custom%20Font%20Support%20For%20Signature%20Field). -When using Google Fonts or other externally hosted fonts with the PDF Viewer, load the fonts in the application to ensure consistent rendering. This is required because FreeText annotations render directly onto the canvas and need the fonts to be available in the hosting environment. +When using Google Fonts or other externally hosted fonts with the PDF Viewer, load the fonts in the application to ensure consistent rendering. This is required because FreeText annotations render directly onto the canvas and need the fonts available in the hosting environment. The following example illustrates how to load custom fonts in FreeText annotations using fonts from Google Fonts or other external sources. @@ -105,7 +105,7 @@ The following example illustrates how to load custom fonts in FreeText annotatio ``` ->**Note:** If external fonts are not loaded in the environment, importing and rendering FreeText annotations that reference those fonts may show minor differences. This typically occurs only with fonts referenced from web-based sources. +N> If external fonts are not loaded in the environment, importing and rendering FreeText annotations that reference those fonts may show minor differences. This typically occurs only with fonts referenced from web-based sources. [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/FreeText/Load%20Custom%20Font%20From%20External%20Links). diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md index 4c9be1b9f4..4e3e4e4d6d 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md @@ -8,10 +8,10 @@ documentation: ug --- # Form Designer events in Blazor PDF Viewer -The Blazor PDF Viewer includes Form Designer events to handle form field interactions. These events enable tracking and customizing behaviors such as adding, deleting, selecting, resizing, validating, importing, and exporting form fields. +The Blazor SfPdfViewer exposes Form Designer events for handling form field interactions. These events let applications track, validate, and customize behaviors such as adding, deleting, selecting, resizing, validating, importing, and exporting form fields. -## Event List -Below are the key events provided by the Form Designer to handle form field interactions in the PDF Viewer. +## Event list +The table below lists key Form Designer events available in the PDF Viewer and their purpose. | Event Name | Description | |---------------------------|-------------| diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-in-mobile-view.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-in-mobile-view.md index 433b08bcf3..c426ac6b1c 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-in-mobile-view.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-in-mobile-view.md @@ -9,85 +9,85 @@ documentation: ug # To open the form designer toolbar -This topic explains how to design and manage PDF form fields in mobile view using the Blazor SfPdfViewer. +This topic explains how to design and manage PDF form fields in mobile view using the Blazor `SfPdfViewer`. -Prerequisites: -- Form designer must be enabled for the viewer instance. +**Prerequisites** +- Form Designer must be enabled for the viewer instance. - Use a supported mobile browser. -To open the form designer toolbar, tap the **Form Designer** option in the primary toolbar on mobile. The form designer toolbar opens at the bottom of the viewer. +To open the form designer toolbar, tap the **Form Designer** option in the primary toolbar. The form designer toolbar opens at the bottom of the viewer. ![Mobile form designer toolbar displayed at bottom in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-toolbar.png) -## To add text box +## Add a text box -Tap the **Text Box** icon in the toolbar, then tap anywhere in the viewer to place the text box form field. +Tap the **Text Box** icon in the toolbar, then tap anywhere in the viewer to place a text box form field. ![Tap Text Box icon in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-textbox.png) ![Text box added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-textbox-added.png) -## To add password box +## Add a password box -Tap the **Password Box** icon in the toolbar, then tap anywhere in the viewer to place the password box. +Tap the **Password Box** icon in the toolbar, then tap anywhere in the viewer to place a password box. ![Password box added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-password.png) -## To add check box +## Add a check box -Tap the **Check Box** icon in the toolbar, then tap anywhere in the viewer to place the check box. +Tap the **Check Box** icon in the toolbar, then tap anywhere in the viewer to place a check box. ![Check box added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-checkBox.png) -## To add radio button +## Add a radio button -Tap the **Radio Button** icon in the toolbar, then tap anywhere in the viewer to place the radio button. +Tap the **Radio Button** icon in the toolbar, then tap anywhere in the viewer to place a radio button. ![Radio button added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-radio.png) -## To add list box +## Add a list box -Tap the **List Box** icon in the toolbar, then tap anywhere in the viewer to place the list box. +Tap the **List Box** icon in the toolbar, then tap anywhere in the viewer to place a list box. ![List box added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-listbox.png) -## To add dropdown field +## Add a dropdown field -Tap the **Dropdown** icon in the toolbar, then tap anywhere in the viewer to place the dropdown field. +Tap the **Dropdown** icon in the toolbar, then tap anywhere in the viewer to place a dropdown field. ![Dropdown field added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-dropdown-listbox.png) -## To add signature field +## Add a signature field -Tap the **Signature Field** icon in the toolbar, then tap anywhere in the viewer to place the signature field. +Tap the **Signature Field** icon in the toolbar, then tap anywhere in the viewer to place a signature field. ![Signature field added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-signature.png) -## To add button +## Add a button -Tap the **Button** icon in the toolbar, then tap anywhere in the viewer to place the button. +Tap the **Button** icon in the toolbar, then tap anywhere in the viewer to place a button. ![Button added in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-button.png) -## Modify Form Field Properties +## Modify form field properties -Form field properties can be configured as needed. To edit a field on mobile, select the form field while the form designer toolbar is open to display the properties dialog, then adjust the required options: +Configure form field properties as required. To edit a field on mobile, select the field while the form designer toolbar is open to display the properties dialog, then update the needed options: - **Name**: Unique identifier for the form field. -- **Tooltip value**: Text shown as a tooltip for the field. +- **Tooltip**: Text displayed as a tooltip for the field. - **Value**: Default value assigned during design. -- **Form field visibility**: Display behavior — Visible, Visible but doesn’t print, Hidden, or Hidden but printable. +- **Visibility**: Display behavior — Visible, Visible but does not print, Hidden, or Hidden but printable. - **Read-only**: Prevents users from editing the field. -- **Required**: Marks the field as mandatory for input. -- **Appearance**: Visual settings such as background color, border color and style, and font family and size. +- **Required**: Marks the field as mandatory. +- **Appearance**: Visual settings such as background color, border color and style, font family, and font size. -Tap Save to apply the changes to the selected form field. On mobile, drag the field or its resize handles to reposition or resize; minimum field sizes may apply, and snapping occurs within page bounds where supported. +Tap Save to apply changes to the selected form field. On mobile, drag the field or its resize handles to reposition or resize; minimum field sizes may apply, and snapping occurs within page bounds where supported. ![Modify form field properties in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-properties.png) -## Delete Form Field +## Delete a form field -To delete a form field, select the field to remove. The Delete icon appears in the form designer toolbar; tap it to remove the field from the PDF. Alternatively, press the Delete key after selecting the form field. +To delete a form field, select it. The Delete icon appears in the form designer toolbar; tap it to remove the field from the PDF. Alternatively, press the Delete key after selecting the form field. ![Delete selected form field in Blazor SfPdfViewer](../form-designer/form-designer-images/form-designer-delete.png) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/overview.md index 2fb4c55b4a..9c8a3dd47a 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/overview.md @@ -9,54 +9,54 @@ documentation: ug # Overview of the Form Designer in Blazor SfPdfViewer Component -The Form Designer in [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) enables creating, editing, and managing interactive form fields. It supports dynamic availability in the UI, so the designer can be shown or hidden while updating related toolbar elements. Form fields such as [Textbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html), [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PasswordField.html), [Radio Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.RadioButtonField.html), [Check Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CheckBoxField.html), [Dropdown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.DropDownField.html), [List Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListBoxField.html), [Signature Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureField.html), and [Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ButtonField.html) can be added with custom names, grouping, and consistent data across pages. +The Form Designer in `SfPdfViewer` enables creation, editing, and management of interactive form fields. The designer can be shown or hidden dynamically and updates related toolbar elements. Supported form fields include [TextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html), [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PasswordField.html), [Radio Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.RadioButtonField.html), [Check Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CheckBoxField.html), [DropDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.DropDownField.html), [List Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListBoxField.html), [Signature Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureField.html), and [Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ButtonField.html). These fields support custom names, grouping, and consistent data across document pages. ![Form Designer Feature](form-designer-images/Form_Designer_Feature.gif) -Fields retain their properties when downloaded or reloaded, even in large documents. Essential operations like cut, copy, paste, zoom, and resize work smoothly while preserving data integrity. Additional features include read-only and required field modes, validation, extensive customization, undo/redo functionality, and form submission controls. +Fields retain their properties and data when a document is downloaded or reloaded, including large documents. Core editing operations such as cut, copy, paste, zoom, and resize preserve field state. Additional capabilities include read-only and required field modes, validation, appearance customization, undo/redo, and form submission controls. -## Supported Form Fields +## Supported form fields -SfPdfViewer supports a range of interactive form fields for structured and dynamic data collection: +`SfPdfViewer` supports the following interactive form fields used for structured data collection: -1. [Textbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html) -2. [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PasswordField.html) +1. [TextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html) +2. [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PasswordField.html) 3. [Check Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CheckBoxField.html) 4. [Radio Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.RadioButtonField.html) 5. [List Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListBoxField.html) -6. [Dropdown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.DropDownField.html) +6. [DropDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.DropDownField.html) 7. [Signature Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureField.html) 8. [Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ButtonField.html) -These fields ensure seamless interaction, customization, and data consistency, enabling the creation of well-structured and user-friendly PDF forms. +These fields support customization and consistent data across documents, enabling well-structured, user-friendly PDF forms. -## Form Field Management +## Form field management -The [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) enables efficient form field management by supporting opening, saving, and printing PDFs while maintaining field integrity. +The `SfPdfViewer` supports opening, saving, and printing PDFs while preserving form field data and properties. -### Open the PDF Documents with Interactive Form Fields +### Open PDF documents with interactive form fields -The [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) component loads PDFs with interactive form fields while preserving properties and data. This enables modifications, validation, and data retention, even in large documents. A saved PDF with form fields can be opened using the Open icon in the toolbar. See the image below. +`SfPdfViewer` preserves interactive form fields and their properties when loading a PDF. This enables in-viewer modifications, validation, and data retention even in large documents. Use the Open icon in the toolbar to load a saved PDF containing form fields. ![Open PDF document with existing form fields](form-designer-images/Open_PDF_Document_With_Exsiting_Form_Fileds.png) -Also, see [Open PDF files in SfPdfViewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/opening-pdf-file) for more details. +See [Open PDF files in SfPdfViewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/opening-pdf-file) for additional details. -### Saving Form Fields +### Saving form fields -The [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) saves form fields within the PDF without modifying the original file. Selecting the Download icon preserves all field data and properties for future use. See the image below. +`SfPdfViewer` preserves form fields and their properties when exporting or downloading a document. Use the Download icon to save a PDF that retains field data and appearance for future use. ![Download PDF document with form fields](form-designer-images/Download_PDF_Document_With_Form_Fileds.png) -Also, see [Saving PDF file in Blazor SfPdfViewer component](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/saving-pdf-file) for more details. +See [Saving PDF file in Blazor SfPdfViewer component](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/saving-pdf-file) for more details. -### Printing Form Fields +### Printing form fields -In [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html), form fields can have different visibility modes that control their appearance in the viewer and printed documents. +`SfPdfViewer` supports multiple visibility modes to control whether form fields appear in the viewer and in printed output. To control the [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Visibility) of form fields in print mode, the [VisibilityMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html) enum provides the following options: -#### Available Visibility Modes +#### Available visibility modes | **Mode** | **Behavior** | |--------------------------|-------------| @@ -65,9 +65,9 @@ To control the [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla | [VisibleNotPrintable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html#Syncfusion_Blazor_SfPdfViewer_VisibilityMode_VisibleNotPrintable) | Visible in viewer but excluded from printing. | | [HiddenPrintable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html#Syncfusion_Blazor_SfPdfViewer_VisibilityMode_HiddenPrintable) | Hidden in viewer but appears in print. | -N> The [**Visible**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html#Syncfusion_Blazor_SfPdfViewer_VisibilityMode_Visible) mode is the **default** mode for form fields in [**SfPdfViewer**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html). +N> The [**Visible**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html#Syncfusion_Blazor_SfPdfViewer_VisibilityMode_Visible) mode is the **default** for form fields in `SfPdfViewer`. -This flexibility ensures precise control over which form fields are displayed or printed as needed. +This flexibility enables precise control over which form fields are visible in the viewer and in print output. The following code snippet shows how to add a form field that is visible in the viewer but excluded from printing in the SfPdfViewer component. @@ -111,19 +111,17 @@ The following image shows the print preview. [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/Visibility.razor). -### Enable or Disable Form Designer Module in SfPdfViewer +### Enable or disable Form Designer -The Form Designer module in [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) allows users to add and modify form fields within a PDF document. +The Form Designer module allows users to add and modify form fields inside a PDF document. -To show the Form Designer icon on the toolbar in [SfPdfViewer2](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html), set the [EnableFormDesigner](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableFormDesigner) property to `true`. No manual module injection is required in SfPdfViewer2. +To show the Form Designer icon on the toolbar in `SfPdfViewer2`, set the [EnableFormDesigner](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableFormDesigner) property to `true`. No manual module injection is required for `SfPdfViewer2`. -If set to `false`, the PDF Viewer remains in Form Filling mode only, and the Form Designer feature is disabled. +If `EnableFormDesigner` is `false`, the viewer operates in form-filling mode only and the Form Designer UI is not available. -N> By default, [EnableFormDesigner](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableFormDesigner) is `true`. +N> By default, `EnableFormDesigner` is `true`. -#### Example code for Injecting Form Designer Module - -The following code snippet shows enabling the Form Designer toolbar in SfPdfViewer. +#### Example: enable the Form Designer toolbar ```cshtml @using Syncfusion.Blazor.SfPdfViewer; @@ -139,15 +137,15 @@ The following code snippet shows enabling the Form Designer toolbar in SfPdfView [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/EnableFormDesigner.razor). -### Enable or Disable Designer Mode in Form Designer +### Enable or disable Designer Mode -The Designer Mode in [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) allows users to interact with form field design elements. +Designer Mode allows direct interaction with form field design elements. -When Designer Mode is enabled, users can edit, move, and manipulate form fields within the PDF Viewer. If disabled, form fields remain static and can only be filled. +When Designer Mode is enabled, users can edit, move, and manipulate form fields. When disabled, fields remain editable only for form filling. -N> By default, [IsDesignerMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsDesignerMode) is set to `false`, meaning form fields can be filled but not modified. +N> By default, [IsDesignerMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsDesignerMode) is `false` (fields can be filled but not modified). -The following example demonstrates how to Enable Designer Mode using SfButton components. +The following example demonstrates how to enable Designer Mode using `SfPdfViewer2`. ```cshtml @using Syncfusion.Blazor.SfPdfViewer; @@ -165,23 +163,21 @@ The following example demonstrates how to Enable Designer Mode using SfButton co [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/InteractionMode.razor). -## Export and Import Form Fields Data - -The [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) control supports exporting and importing form field data in multiple formats. +## Export and import form field data -This functionality allows saving, transferring, or restoring form field values efficiently using the following supported formats: +The `SfPdfViewer` control supports exporting and importing form field data in multiple formats. This enables saving, transferring, or restoring form field values using the following formats: 1. XML -2. FDF -3. XFDF +2. FDF +3. XFDF 4. JSON 5. Object-based -The [ExportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ExportFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldDataFormat_) and [ImportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ImportFormFieldsAsync_System_IO_Stream_Syncfusion_Blazor_SfPdfViewer_FormFieldDataFormat_) methods allow you to export the form field data as a stream, which can later be used to import the saved data into another PDF document. +The [ExportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ExportFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldDataFormat_) and [ImportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ImportFormFieldsAsync_System_IO_Stream_Syncfusion_Blazor_SfPdfViewer_FormFieldDataFormat_) methods export or import form field data as a stream, which can be applied to another PDF document. ### Types of Form Fields Export and Import -#### Export and Import as XML +#### Export and import as XML Exports form field data in XML format and allows importing the same data back into a PDF document. @@ -242,7 +238,7 @@ The following code shows how to export the form fields as an XML data stream and [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/XMLFormat.razor). -#### Export and Import as FDF +#### Export and import as FDF Exports form field data in Forms Data Format (FDF) and allows importing the same data back into a PDF document. @@ -300,7 +296,7 @@ The following code demonstrates exporting form fields as FDF to a stream and imp [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/FDFFormat.razor). -#### Export and Import as XFDF +#### Export and import as XFDF Similar to FDF, but in XML-based format, XFDF ensures structured data handling for form fields. @@ -357,7 +353,7 @@ The following code shows how to export the form fields as an XFDF data stream an [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/XFDFFormat.razor). -#### Export and Import as JSON +#### Export and import as JSON Exports form field data in JSON format, which can be easily read and imported back into the PDF Viewer. @@ -415,7 +411,7 @@ The following code demonstrates exporting form fields as JSON to a stream and im [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/JSONFormat.razor). -#### Export and Import as an Object +#### Export and import as an object The Form fields can be exported and imported as an object, which is useful for in-memory processing and quick data manipulation. diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/ui-interactions.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/ui-interactions.md index f1932a8505..51b2e19b14 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/ui-interactions.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/ui-interactions.md @@ -9,17 +9,17 @@ documentation: ug # Form Designer UI Interactions in Blazor PDF Viewer -The Form Designer in the Blazor PDF Viewer enables adding, editing, and manipulating form fields directly within a PDF document. It provides an intuitive interface to design interactive forms efficiently. +The Form Designer in `SfPdfViewer` enables adding, editing, and manipulating form fields directly within a PDF document. It provides an intuitive interface for designing interactive forms efficiently. ## Form Field Interactions ### Adding Form Fields -Click the **Edit Form Fields** icon on the toolbar, choose the required form field, and place it on the PDF document. +Click the **Edit Form Fields** icon in the toolbar, select the desired field type, and place it on the PDF document. ![Add form fields using the Form Designer in SfPdfViewer](form-designer-images/add-formfields-formdesigner-sfpdfviewer.gif) -N> Form fields can also be added programmatically in SfPdfViewer for advanced scenarios. +N> Form fields can also be added programmatically in `SfPdfViewer` for advanced scenarios. [See Add form fields programmatically](./create-programmatically). ### Dragging Form Fields @@ -40,7 +40,7 @@ Edit form fields using the Form Field Properties panel. Open the panel by select The Form Field Properties panel consists of three tabs that provide customization options. Available options may vary by field type. -N> Edit form fields can also be performed programmatically in SfPdfViewer for precise customization. +N> Editing form fields can also be performed programmatically in `SfPdfViewer` for precise customization. [See Edit form fields programmatically](./create-programmatically). #### General Tab @@ -88,7 +88,7 @@ Remove form fields by selecting the desired field and clicking the Delete icon i ![Delete a form field through the UI](form-designer-images/delete-formfields-formdesigner-sfpdfviewer.png) -N> Form fields can also be deleted programmatically in SfPdfViewer. +N> Form fields can also be deleted programmatically in `SfPdfViewer`. [See Delete form fields programmatically](./create-programmatically). ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-filling.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-filling.md index e91770bd4f..6498a132a0 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/form-filling.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-filling.md @@ -9,7 +9,7 @@ documentation: ug # Form filling in Blazor SfPdfViewer Component -The SfPdfViewer component displays existing form fields in a PDF document and enables filling and downloading filled data. +The SfPdfViewer component displays existing form fields in a PDF document and enables filling and downloading filled form data. The form fields displayed in the SfPdfViewer are: @@ -25,7 +25,7 @@ The form fields displayed in the SfPdfViewer are: ## Disabling form fields -The SfPdfViewer control provides an option to disable interaction with form fields. Use the following configuration to disable form fields in the viewer. +The SfPdfViewer component provides an option to disable interaction with form fields. Use the following configuration to disable form fields in the viewer. ```cshtml @@ -58,22 +58,22 @@ Add a handwritten signature to a Signature field by following these steps: ![Displaying signature in Blazor SfPdfViewer](images/blazor-pdfviewer-signature.png) -## Delete the signature inside the signature field +## Delete a signature from the signature field -Delete a signature placed in a signature field by using the Delete option in the annotation toolbar. +Remove a signature placed in a signature field using the Delete option in the annotation toolbar. ![Deleting signature in Blazor SfPdfViewer](images/blazor-pdfviewer-delete-signature.png) ## Export and import form fields -The SfPdfViewer control supports exporting and importing form field data in the following formats using the [ImportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ImportFormFieldsAsync_System_Collections_Generic_Dictionary_System_String_System_String__) and [ExportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ExportFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldDataFormat_) methods: +The SfPdfViewer component supports exporting and importing form field data in the following formats using the [ImportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ImportFormFieldsAsync_System_Collections_Generic_Dictionary_System_String_System_String__) and [ExportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ExportFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldDataFormat_) methods: * XML * FDF * XFDF * JSON -N> Form field data is exported as a stream, and that stream can be imported back into the current PDF document. +Note: Form field data is exported as a stream, and that stream can be imported back into the current PDF document. ### Export and import as XML @@ -155,7 +155,7 @@ The following example exports the form fields as an FDF data stream and imports ``` -### Export and import as XFDF +### Export and import as XFDF The following example exports the form fields as an XFDF data stream and imports that data from the stream into the current PDF document via button clicks. @@ -236,7 +236,7 @@ The following example exports the form fields as a JSON data stream and imports ``` -### Export form fields as Json file +### Export form fields as JSON file ```cshtml diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md index 254f9bbfea..25c867827e 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md @@ -9,7 +9,7 @@ documentation: ug # View PDF files using the PDF Viewer in a Blazor .NET MAUI app -This article describes how to add the Syncfusion® Blazor PDF Viewer component to a Blazor .NET MAUI app and deploy it on Windows. +This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor .NET MAUI app and deploy it on Windows. ## Prerequisites @@ -17,18 +17,18 @@ To use the .NET MAUI project templates, install the Mobile development with .NET ## Create a new Blazor .NET MAUI app in Visual Studio -Create a new Blazor .NET MAUI app and name it **PDFViewerGettingStarted**. +Create a new Blazor .NET MAUI app named **PDFViewerGettingStarted**. -N> The PDF Viewer component is supported on .NET 8.0 and later. +N> The PDF Viewer supports .NET 8.0 and later. -## Install PDF Viewer NuGet packages in the Blazor .NET MAUI app +## Install PDF Viewer NuGet packages -Add the following NuGet packages to the Blazor .NET MAUI app. +Install the following NuGet packages in the Blazor .NET MAUI app. -* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) +* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) -## Register Syncfusion® Blazor Service +## Register Syncfusion Blazor service * In the **~/_Imports.razor** file, add the following namespaces: @@ -41,7 +41,7 @@ Add the following NuGet packages to the Blazor .NET MAUI app. {% endhighlight %} {% endtabs %} -* Register the Syncfusion® Blazor Service in the **~/MauiProgram.cs** file. +* Register Syncfusion Blazor service in the **~/MauiProgram.cs** file. {% tabs %} {% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="3 20 28" %} @@ -81,9 +81,9 @@ public static class MauiProgram {% endhighlight %} {% endtabs %} -## Adding stylesheet and script +## Add stylesheet and script -Add the following stylesheet and script to the head section of the **~/wwwroot/index.html** file. +Add the following stylesheet and script to the head and body sections of **~/wwwroot/index.html**. {% tabs %} {% highlight html hl_lines="3 7" %} @@ -102,7 +102,7 @@ Add the following stylesheet and script to the head section of the **~/wwwroot/i ## Add the PDF Viewer component -Add the Syncfusion® PDF Viewer (Next-Gen) component in the **~/Pages/Index.razor** file. +Add the Syncfusion® PDF Viewer (Next-Gen) component to **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -123,11 +123,11 @@ Add the Syncfusion® PDF Viewer (Next-Gen) c {% endhighlight %} {% endtabs %} -N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF document. Users can use the Open option in the toolbar to browse and open a PDF as needed. +N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a document. Use the Open toolbar option to browse and open a PDF. ## Run on Windows -Run the sample on a Windows machine to execute the Blazor .NET MAUI app. +Run the app on Windows. ![Running the app on a Windows machine](gettingstarted-images/Windows-machine.png) @@ -137,7 +137,7 @@ After the application launches, the PDF Viewer renders the specified PDF documen ## Run on Android -To run the PDF Viewer in a Blazor .NET MAUI Android application using the Android emulator, follow these steps: +To run the PDF Viewer on Android using the Android emulator, follow these steps: ![Android emulator configuration for .NET MAUI](gettingstarted-images/android-maui.png) @@ -147,7 +147,7 @@ N> If any errors occur while using the Android Emulator, see [Troubleshooting An ![Blazor SfPdfViewer running in the Android emulator](gettingstarted-images/android-emulator.png) ->[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20.NET%20MAUI/MauiBlazorWindow). +N> [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20.NET%20MAUI/MauiBlazorWindow). ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md index 0cef072bc7..f69c7991f7 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md @@ -9,7 +9,7 @@ documentation: ug # View PDF files using the PDF Viewer in a Blazor Web App -This article describes how to add the Syncfusion® Blazor PDF Viewer component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. +This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. {% tabcontents %} @@ -28,11 +28,11 @@ You can create a Blazor Web App using Visual Studio 2022 via [Microsoft Template Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating a Blazor Web App. -## Install Blazor PDF Viewer NuGet package in Blazor Web App +## Install Blazor PDF Viewer NuGet packages -To add **Blazor PDF Viewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install +To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install: -* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) +* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) If using the WebAssembly or Auto interactive render mode, install the NuGet packages in the client project to add the component to the Web App. @@ -104,7 +104,7 @@ N> Syncfusion® uses [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/ {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Register Syncfusion Blazor service | Interactive Render Mode | Description | | -- | -- | @@ -122,7 +122,7 @@ N> Syncfusion® uses [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/ {% endhighlight %} {% endtabs %} -* Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +* Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. If the interactive render mode is set to WebAssembly or Auto, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App. @@ -239,9 +239,9 @@ app.MapRazorComponents() N> [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../faqs/how-to-processing-large-files-without-increasing-maximum-message-size) -## Adding stylesheet and script +## Add stylesheet and script -Add the following stylesheet and script to the head section of the **~/Components/App.razor** file. +Add the following stylesheet and script to the head section of **~/Components/App.razor**. {% tabs %} {% highlight html hl_lines="3 7" %} @@ -258,9 +258,9 @@ Add the following stylesheet and script to the head section of the **~/Component {% endhighlight %} {% endtabs %} -## Adding Blazor PDF Viewer Component +## Add Blazor PDF Viewer component -Add the Syncfusion® PDF Viewer (Next-Gen) component in the **~Pages/.razor** file. If the interactivity location is set to Per page/component, define a render mode at the top of the **~Pages/.razor** component as follows: +Add the Syncfusion® PDF Viewer (Next-Gen) component in the **~/Pages/*.razor** file. If interactivity location is Per page/component, define a render mode at the top of the page as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -283,7 +283,7 @@ N> If the interactivity location is set to Global and the render mode is set to N> If the interactivity location is set to Global, a render mode does not need to be specified per page. The interactivity mode applies to the entire app.
Enable interactivity only via client-side rendering (CSR) by using the WebAssembly or Auto option -Add the Syncfusion® PDF Viewer component in the **~/Pages/Index.razor** file. +Add the Syncfusion® PDF Viewer component in **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -297,11 +297,11 @@ Add the Syncfusion® PDF Viewer component in {% endhighlight %} {% endtabs %} -N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF document. Users can use the **Open** option in the toolbar to browse and open a PDF as needed. +N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF. Use the **Open** toolbar option to browse and open a PDF. -## Run the application +## Run the app -Run the application to display the PDF file in the Syncfusion® Blazor PDF Viewer component in the browser. +Run the app to display the PDF in the Syncfusion® Blazor PDF Viewer in the browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Web App SfPdfViewer rendering in browser](gettingstarted-images/blazor-pdfviewer.png)" %} diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md index 89cac168b3..df4fd3c74a 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md @@ -9,7 +9,7 @@ documentation: ug # View PDF files using the PDF Viewer in a Blazor WebAssembly (WASM) app -This article describes how to add the Syncfusion® Blazor PDF Viewer component to a Blazor WebAssembly (WASM) app using Visual Studio or Visual Studio Code. A fully functional example project is available in the [GitHub repository](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20WebAssembly). +This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor WebAssembly (WASM) app using Visual Studio or Visual Studio Code. A fully functional example project is available in the [GitHub repository](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20WebAssembly). {% tabcontents %} @@ -19,21 +19,21 @@ This article describes how to add the Syncfusion® Blazor PDF Viewer componen * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* To use the PDF Viewer component in a Blazor WebAssembly application with SkiaSharp, ensure the required .NET workloads are installed by running the following commands: +* To use the PDF Viewer with SkiaSharp in a Blazor WebAssembly app, ensure the required .NET workloads are installed by running: * dotnet workload install wasm-tools - * dotnet workload install wasm-tools-net8 + * dotnet workload install wasm-tools-net8 (For .NET 8.0) or dotnet workload install wasm-tools-net9 (For .NET 9.0) or dotnet workload install wasm-tools-net10 (For .NET 10.0) ## Create a new Blazor App in Visual Studio You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -N> The PDF Viewer component is supported on .NET 8.0 and later. +N> The PDF Viewer supports .NET 8.0 and later. -## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet packages in the app +## Install NuGet packages -To add the Blazor PDF Viewer component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install +To add the Blazor PDF Viewer, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install: -* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) +* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) * [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor) @@ -47,9 +47,9 @@ N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this vers * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* To use the PDF Viewer component in a Blazor WebAssembly application with SkiaSharp, make sure to have the required .NET workloads installed by executing the following commands in the command prompt. +* To use the PDF Viewer with SkiaSharp in a Blazor WebAssembly app, ensure the required .NET workloads are installed by running: * dotnet workload install wasm-tools - * dotnet workload install wasm-tools-net8 + * dotnet workload install wasm-tools-net8 (For .NET 8.0) or dotnet workload install wasm-tools-net9 (For .NET 9.0) or dotnet workload install wasm-tools-net10 (For .NET 10.0) ## Create a new Blazor App in Visual Studio Code @@ -68,13 +68,13 @@ cd BlazorApp {% endtabs %} -N> The PDF Viewer component is supported on .NET 8.0 and later. +N> The PDF Viewer supports .NET 8.0 and later. ## Install Syncfusion® Blazor NuGet packages in the app * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following commands to install the [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer), [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor) NuGet packages and ensure all dependencies are installed. +* Run the following commands to install the required NuGet packages and their dependencies. {% tabs %} @@ -110,7 +110,7 @@ N> Syncfusion® Blazor components are available on [nuget.org](https://www.nu {% endhighlight %} {% endtabs %} -* Register the Syncfusion® Blazor Service in the **~/Program.cs** file. +* Register the Syncfusion® Blazor service in the **~/Program.cs** file. {% tabs %} {% highlight C# tabtitle=".NET 6 & .NET 7 (~/Program.cs)" hl_lines="3 9 13" %} @@ -133,9 +133,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Adding stylesheet and script +## Add stylesheet and script -Add the following stylesheet and script to the head section of the **wwwroot/index.html** file. +Add the following stylesheet and script to the head section of **wwwroot/index.html**. {% tabs %} {% highlight html hl_lines="3 7" %} @@ -152,9 +152,9 @@ Add the following stylesheet and script to the head section of the **wwwroot/ind {% endhighlight %} {% endtabs %} -## Adding Blazor PDF Viewer Component +## Add Blazor PDF Viewer component -Add the Syncfusion® PDF Viewer (Next-Gen) component in the **~/Pages/Index.razor** file. +Add the Syncfusion® PDF Viewer (Next-Gen) component to **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -169,11 +169,11 @@ Add the Syncfusion® PDF Viewer (Next-Gen) c {% endhighlight %} {% endtabs %} -N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF document. Users can use the **Open** option in the toolbar to browse and open a PDF as needed. +N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF. Use the **Open** toolbar option to browse and open a PDF. -## Run the application +## Run the app -Run the application to display the PDF file in the Syncfusion® Blazor PDF Viewer component in the browser. +Run the app to display the PDF in the Syncfusion® Blazor PDF Viewer in the browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor WebAssembly SfPdfViewer rendering in browser](gettingstarted-images/blazor-pdfviewer.png)" %} diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md index a2d79446b9..494f7e9f51 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md @@ -9,7 +9,7 @@ documentation: ug # View PDF files using the PDF Viewer in a WinForms Blazor Hybrid App -This article explains how to add the Syncfusion® Blazor PDF Viewer component to a WinForms Blazor Hybrid App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop application (WinForms) that hosts Blazor UI inside a BlazorWebView control. +This article shows how to add the Syncfusion® Blazor PDF Viewer to a WinForms Blazor Hybrid app using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop (WinForms) application that hosts Blazor UI inside a BlazorWebView control. {% tabcontents %} @@ -21,17 +21,17 @@ This article explains how to add the Syncfusion® Blazor PDF Viewer component ## Create a new WinForms app in Visual Studio -Create a WinForms application using Visual Studio 2022 with the WinForms project template. The app will later host Blazor components via BlazorWebView. For reference, see [Microsoft Blazor tooling](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a WinForms app using Visual Studio 2022 with the WinForms project template. The app hosts Blazor components via BlazorWebView. For reference, see [Microsoft Blazor tooling](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Install Blazor PDF Viewer NuGet package in WinForms App +## Install Blazor PDF Viewer NuGet packages -To add **Blazor PDF Viewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install +To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install: -* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) +* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) * [Microsoft.AspNetCore.Components.WebView.WindowsForms](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebView.WindowsForms) -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` updated to version `8.0.16`. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` is updated to version `8.0.16`. ![WinForms Blazor App SfPdfViewer NuGet package reference](../images/winforms-sfpdfviewer-package.png) @@ -45,7 +45,7 @@ N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms ## Create a new WinForms app in Visual Studio Code -Create a WinForms desktop project (not a WinForms Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WinForms project will host Blazor UI through BlazorWebView. For guidance, see [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a WinForms desktop project (not a WinForms Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WinForms project hosts Blazor UI through BlazorWebView. For guidance, see [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). {% tabs %} {% highlight c# tabtitle="WinForms Blazor HybridApp" %} @@ -77,15 +77,15 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the list of available packages and component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for package details. -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` updated to version `8.0.16`. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` is updated to version `8.0.16`. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor service +## Register Syncfusion Blazor service The WinForms project must target Windows and enable WinForms. A typical project file looks like the following. @@ -114,9 +114,9 @@ Create a **Component** folder, add an **_Imports.razor** file in it, and include ## Create wwwroot folder and index.html file -* Create a new folder named wwwroot in the WinForms project root. +* Create a new folder named `wwwroot` in the WinForms project root. -* Inside wwwroot, create an index.html host page for the Blazor UI. This host page is required by BlazorWebView to initialize the Blazor runtime and load static assets (themes and scripts). A basic index.html might look like the following: +* Inside `wwwroot`, create an `index.html` host page for the Blazor UI. This host page initializes the Blazor runtime and loads static assets (themes and scripts). A basic `index.html` might look like the following: {% tabs %} {% highlight html tabtitle="index.html" hl_lines="8 13" %} @@ -142,7 +142,7 @@ Create a **Component** folder, add an **_Imports.razor** file in it, and include N> Ensure that the PDF Viewer static assets (themes and scripts) are loaded properly. -Register Syncfusion Blazor services and BlazorWebView in **~/Form1.cs** so that the WinForms window can host Blazor components. +Register Syncfusion Blazor services and BlazorWebView in **~/Form1.cs** so the WinForms window can host Blazor components. {% tabs %} {% highlight c# tabtitle="Form1.cs (WinForms host)" hl_lines="2 3 4 5 9 10 11 12 13 14 15 16 17 18 19 21" %} @@ -175,7 +175,7 @@ using WinFormsBlazorHybridApp.Components; ## Adding Blazor PDF Viewer component -Create a Razor component (for example, PDFViewer.razor) in the project and add the Syncfusion® PDF Viewer component to it within the **Component** folder +Create a Razor component (for example, PDFViewer.razor) in the project and add the Syncfusion® PDF Viewer component to it within the **Component** folder. {% tabs %} {% highlight razor %} @@ -192,13 +192,13 @@ Create a Razor component (for example, PDFViewer.razor) in the project and add t N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a document. Users can use the **Open** toolbar option to browse and open a PDF. -## Run the application +## Run the app -Run the WinForms application. The Syncfusion® Blazor PDF Viewer renders inside the WinForms window. +Run the WinForms app. The Syncfusion® Blazor PDF Viewer renders inside the WinForms window. ![WinForms Blazor HybridApp SfPdfViewer rendering in browser](../images/blazor-hybrid-winforms-sfpdfviewer.png) ->[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20WinForms). +N> [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20WinForms). ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md index f1bbf29609..863c9fca34 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md @@ -9,7 +9,7 @@ documentation: ug # View PDF files using the PDF Viewer in a WPF Blazor Hybrid App -This article explains how to add the Syncfusion® Blazor PDF Viewer component to a WPF Blazor Hybrid App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop application (WPF) that hosts Blazor UI inside a BlazorWebView control. +This article shows how to add the Syncfusion® Blazor PDF Viewer to a WPF Blazor Hybrid app using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop (WPF) application that hosts Blazor UI inside a BlazorWebView control. {% tabcontents %} @@ -21,17 +21,18 @@ This article explains how to add the Syncfusion® Blazor PDF Viewer component ## Create a new WPF app in Visual Studio -Create a WPF application using Visual Studio 2022 with the WPF project template. The app will later host Blazor components via BlazorWebView. For reference, see [Microsoft Blazor tooling](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a WPF app using Visual Studio 2022 with the WPF project template. The app hosts Blazor components via BlazorWebView. For reference, see [Microsoft Blazor tooling](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Install Blazor PDF Viewer NuGet package in WPF App -To add **Blazor PDF Viewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install +## Install Blazor PDF Viewer NuGet packages -* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) +To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install: + +* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) * [Microsoft.AspNetCore.Components.WebView.Wpf](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebView.Wpf) -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.Wpf` updated to version `8.0.16`. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.Wpf` is updated to version `8.0.16`. ![WPF Blazor App SfPdfViewer NuGet package reference](../images/wpf-sfpdfviewer-package.png) @@ -45,7 +46,7 @@ N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.Wpf` updated ## Create a new WPF app in Visual Studio Code -Create a WPF desktop project (not a WPF Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WPF project will host Blazor UI through BlazorWebView. For guidance, see [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a WPF desktop project (not a WPF Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WPF project hosts Blazor UI through BlazorWebView. For guidance, see [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). {% tabs %} {% highlight c# tabtitle="WPF Blazor HybridApp" %} @@ -61,7 +62,7 @@ Install the required NuGet packages in the WPF project that will host the Blazor * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the current directory contains the WPF project `.csproj` file. -* Run the following commands to install [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer), [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and [Microsoft.AspNetCore.Components.WebView.Wpf](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebView.Wpf). This adds the PDF Viewer, theme, and the BlazorWebView host control. +* Run the following commands to install the required packages. This adds the PDF Viewer, theme, and the BlazorWebView host control. {% tabs %} @@ -76,15 +77,15 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the list of available packages and component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for package details. -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.Wpf` updated to version `8.0.16`. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.Wpf` is updated to version `8.0.16`. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor service +## Register Syncfusion Blazor service The WPF project must target Windows and enable WPF. A typical project file looks like the following. @@ -134,9 +135,9 @@ using Syncfusion.Blazor; ## Create wwwroot folder and index.html file -* Create a new folder named wwwroot in the WPF project root. +* Create a new folder named `wwwroot` in the WPF project root. -* Inside wwwroot, create an index.html host page for the Blazor UI. This host page is required by BlazorWebView to initialize the Blazor runtime and load static assets (themes and scripts). A basic index.html might look like the following: +* Inside `wwwroot`, create an `index.html` host page for the Blazor UI. This host page initializes the Blazor runtime and loads static assets (themes and scripts). A basic `index.html` might look like the following: {% tabs %} @@ -165,7 +166,7 @@ N> Ensure that the PDF Viewer static assets (themes and scripts) are loaded prop ## Adding Blazor PDF Viewer component -Create a Razor component (for example, Main.razor) in the project and add the Syncfusion® PDF Viewer component to it. +Create a Razor component (for example, Main.razor) in the project and add the Syncfusion® PDF Viewer component to it. {% tabs %} {% highlight razor %} @@ -209,13 +210,13 @@ N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor {% endhighlight %} {% endtabs %} -## Run the application +## Run the app -Run the WPF application. The Syncfusion® Blazor PDF Viewer renders inside the WPF window. +Run the WPF app. The Syncfusion® Blazor PDF Viewer renders inside the WPF window. ![WPF Blazor HybridApp SfPdfViewer rendering in browser](../images/blazor-hybrid-wpf-sfpdfviewer.png) ->[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20WPF). +N> [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20WPF). ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md b/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md index 40df107a84..1c86b9eaf2 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md @@ -14,15 +14,15 @@ documentation: ug The [Blazor SfPdfViewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) component can be localized to display culture-specific text. Refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) guide for steps to add culture resource files, register localization services, and set the current culture. N> -* Provide localized string resources for the viewer’s UI texts (such as toolbar tooltips, dialog messages). -* Ensure the app culture (CurrentCulture and CurrentUICulture) is set before the component renders for correct resource lookup. -* Localization applies to the viewer UI; it does not translate the PDF document content. +* Provide localized string resources for the viewer’s UI text (for example, toolbar tooltips and dialog messages). +* 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 -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. +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. -By setting EnableRtl to `true`, the control will adjust its layout and appearance to align text, icons, and other elements from right to left, providing an optimized user experience for RTL language users. +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. ```cshtml 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 10439651e5..65606b7b28 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md @@ -15,12 +15,12 @@ The SfPdfViewer component supports adding handwritten signatures to PDF document Add a handwritten signature using the annotation toolbar. -* Click the **Edit Annotation** in the SfPdfViewer toolbar to open the annotation toolbar. -* Select the **HandWritten Signature** tool to open the signature panel. +* Click the **Edit Annotation** button in the SfPdfViewer toolbar to open the annotation toolbar. +* Select the **Handwritten Signature** tool to open the signature panel. ![Handwritten signature option in Blazor SfPdfViewer](images/blazor-pdfviewer-handwritten-sign.png) -* Draw the signature in the signature panel using a mouse, or touch. +* Draw the signature in the signature panel using a mouse or touch input. ![Signature panel displayed in Blazor SfPdfViewer](images/blazor-pdfviewer-sign-panel.png) @@ -32,7 +32,7 @@ The added signature becomes part of the PDF annotations and is preserved when sa ## Editing the properties of handwritten signature -The stroke color, thickness, and opacity of a handwritten signature can be adjusted using the annotation toolbar’s edit stroke color tool, edit thickness tool, and edit opacity tools. Select the signature on the page to enable these property editors for that item. After placement, the signature can also be moved, resized, or removed like other annotations. +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. ![Editing handwritten signature properties in Blazor SfPdfViewer](images/blazor-pdfviewer-signature-properties.png) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md b/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md index 2e7ce6e421..6f3eadd012 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md @@ -9,7 +9,7 @@ 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 document 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: @@ -20,7 +20,7 @@ The built-in toolbar of SfPdfViewer contains the following two interaction optio In this mode, users can select and copy text from the PDF document loaded in SfPdfViewer. This is useful for extracting and sharing textual content. -N> In Selection mode, page panning by touch/drag is disabled. Scrolling is still available through the mouse wheel scrollbars, or keyboard shortcuts. +N> In Selection mode, page panning by touch/drag is disabled. Users can still scroll using the mouse wheel, scrollbars, or keyboard shortcuts. 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. @@ -41,7 +41,7 @@ You can enable or disable text selection by setting the [EnableTextSelection](ht ## Panning mode -In this mode, users can pan and scroll pages in the loaded PDF document in the SfPdfViewer, but the text selection cannot be performed. +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. @@ -59,11 +59,11 @@ The interaction mode of the SfPdfViewer component can be modified using the [Int } ``` -## Disable interaction with Annotations +## Disable 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. -The following code illustrates how to disable the annotation interaction. +The following code illustrates how to lock annotation interactions. ```cshtml diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark.md index 4c8932cf0d..587f9100cb 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark.md @@ -9,13 +9,13 @@ documentation: ug # Bookmark navigation in SfPdfViewer -Use the bookmark panel to jump directly to labeled destinations in a PDF. +Use the bookmark panel to jump to labeled destinations in the PDF. -Bookmarks defined in the PDF document are automatically loaded and listed in the bookmark panel. Selecting a bookmark navigates to its target. Nested bookmarks are supported; if the document has no bookmarks, the panel appears empty. +Bookmarks embedded in the PDF are loaded automatically and listed in the bookmark panel. Selecting a bookmark navigates to its target. Nested bookmarks are supported. If a document has no bookmarks, the panel appears empty. ![Bookmark panel in Blazor PDF Viewer showing document bookmarks](../../blazor-classic/images/blazor-pdfviewer-bookmark-navigation.png) -Enable or disable the bookmark panel by setting the [EnableBookmarkPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableBookmarkPanel) property. This property only controls the panel’s visibility; bookmarks are read from the PDF. +Show or hide the bookmark panel by setting the [EnableBookmarkPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableBookmarkPanel) property. This property controls only the panel’s visibility; bookmarks are read from the PDF itself. ```cshtml @@ -29,6 +29,6 @@ Enable or disable the bookmark panel by setting the [EnableBookmarkPanel](https: ``` -## See Also +## See also * [Page thumbnail navigation in Blazor SfPdfViewer](./page-thumbnail) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink.md index 9c66e67e47..b377dc01ba 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink.md @@ -9,15 +9,15 @@ documentation: ug # Hyperlink navigation in SfPdfViewer -Use hyperlinks in a PDF to navigate either to external URLs or to destinations within the same document. Hyperlinks are detected from the PDF content and work by default. +Use hyperlinks in a PDF to navigate to external URLs or to destinations within the same document. Hyperlinks are extracted from the PDF and enabled by default. -- External links (HTTP/HTTPS, etc.) open in the browser according to browser security and settings (for example, a new tab or window). +- External links (HTTP/HTTPS, etc.) open in the browser according to browser settings (for example, in a new tab or window). - In-document links navigate directly to the referenced page or location in the viewer. -If a document does not contain hyperlinks, no link-specific highlighting appears. +If a document contains no hyperlinks, the viewer shows no link highlighting. ![Hyperlink navigation in Blazor PDF Viewer](../../blazor-classic/images/blazor-pdfviewer-hyperlink-navigation.png) -## See Also +## See also * [Table of content navigation in Blazor SfPdfViewer](./table-of-content) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-panel.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-panel.md index 792e5780b5..ec8c2563a6 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-panel.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-panel.md @@ -9,12 +9,11 @@ documentation: ug # Modern navigation panel in SfPdfViewer -The modern navigation panel consolidates thumbnails, bookmarks, comments, and custom panels in a single, flexible side panel for a streamlined navigation experience. +The modern navigation panel consolidates thumbnails, bookmarks, comments, and custom panels into a single flexible side panel for streamlined navigation. -Enable the modern navigation panel using the [EnableNavigationPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigationPanel) property. Visibility can be toggled from the UI or programmatically. - -The following example enables the modern navigation panel: +Enable the modern navigation panel by setting the [EnableNavigationPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigationPanel) property. You can toggle its visibility from the UI or programmatically. +Example — enable the modern navigation panel: ```cshtml @using Syncfusion.Blazor.SfPdfViewer; @@ -41,7 +40,7 @@ The modern navigation panel contains the following built-in items: Use the [BuiltInItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_NavigationToolbarSettings_BuiltInItems) property, which accepts a list of [NavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarItem.html) enums. The viewer renders the navigation icons in the exact sequence provided. -The following example displays Thumbnails first, followed by Bookmarks and the Comment panel. +Example — display Thumbnails first, followed by Bookmarks and the Comment panel. ```cshtml @@ -72,8 +71,7 @@ The following example displays Thumbnails first, followed by Bookmarks and the C Open or close a navigation panel programmatically by calling the [ToggleItemByIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ToggleItemByIndex_System_Int32_) method. Indices are zero-based and apply to the combined sequence of built-in and custom items. -The following example toggles the visibility of the second item in the navigation panel (index 1). - +Example — toggle the navigation panel item at index 1: ```cshtml @using Syncfusion.Blazor.SfPdfViewer; @@ -101,7 +99,7 @@ The following example toggles the visibility of the second item in the navigatio ### Add custom items to the navigation panel -You can add custom items to the SfPdfViewer navigation toolbar. Create a list of [CustomNavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CustomNavigationToolbarItem.html) objects and assign it to the [CustomItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_NavigationToolbarSettings_CustomItems) property. +You can add custom items to the SfPdfViewer navigation toolbar by creating a list of [CustomNavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CustomNavigationToolbarItem.html) objects and assigning it to the [CustomItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_NavigationToolbarSettings_CustomItems) property. Each CustomNavigationToolbarItem object includes: - Index: Position of the item in the toolbar. @@ -116,7 +114,7 @@ Each CustomNavigationToolbarItem object includes: Define a custom UI for a navigation panel by assigning a RenderFragment to the `Template` property of a [CustomNavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CustomNavigationToolbarItem.html). -The following example adds a default toolbar with a custom item containing a small, interactive panel with a customized UI. +Example — add a default toolbar with a custom item that contains a small interactive panel and customized UI: ```cshtml @@ -214,15 +212,15 @@ The following example adds a default toolbar with a custom item containing a sma ![Custom template in the modern navigation panel](../../blazor-classic/images/custom_navigation_panel_template.png) -### Demand rendering for the navigation panel +### Rendering strategies for the navigation panel -SfPdfViewer supports different loading strategies for navigation panel content to optimize performance. The available options are: +SfPdfViewer supports different loading strategies for navigation panel content to optimize performance: -* **Dynamic** : The content for a panel is only loaded into the DOM when that panel is selected. When you switch to a different panel, the previous content is removed and replaced. -* **Init** : The content for all navigation panels is rendered during the initial load and is always present in the DOM. -* **Demand** : The content for a panel is loaded into the DOM the first time it is selected. The content is then kept in the DOM, even if you navigate to other panels. +* **Dynamic**: Content for a panel is loaded into the DOM only when that panel is selected. Switching panels replaces the previous content. +* **Init**: Content for all navigation panels is rendered during the initial load and remains in the DOM. +* **Demand**: Content for a panel is loaded into the DOM the first time it is selected and then retained. -The following example sets the loading strategy to Demand. +Example — set the loading strategy to `Demand`: ```cshtml @@ -240,10 +238,10 @@ The following example sets the loading strategy to Demand. ### Modern navigation panel in mobile view -On mobile devices, the navigation toolbar collapses into a toggle menu to save space. Any custom items appear at the beginning of this menu. +On mobile devices the navigation toolbar collapses into a toggle menu to save space. Custom items appear at the beginning of this menu. ![Modern navigation panel in mobile view](../../blazor-classic/images/navigation_panel_mobile.png) -## See Also +## See also * [Page navigation in Blazor SfPdfViewer](./pages) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail.md index b568c8d8ec..c345db1f34 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail.md @@ -9,11 +9,11 @@ documentation: ug # Page thumbnail navigation in SfPdfViewer -Use the thumbnail panel to preview pages and navigate quickly through a PDF. Each thumbnail represents a page; selecting one navigates to that page in the viewer. +Use the thumbnail panel to preview pages and quickly navigate a PDF. Each thumbnail represents a page — select one to jump to that page in the viewer. ![Thumbnail panel in Blazor PDF Viewer showing page previews](../../blazor-classic/images/blazor-pdfviewer-page-thumbnail-navigation.png) -Enable or disable the thumbnail panel by setting the [EnableThumbnailPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableThumbnailPanel) property. This property enables the feature; visibility at load time is controlled separately. +Show or hide the thumbnail panel by setting the [EnableThumbnailPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableThumbnailPanel) property. This property enables the feature; initial visibility at load time is controlled separately. ```cshtml @@ -29,9 +29,9 @@ Enable or disable the thumbnail panel by setting the [EnableThumbnailPanel](http ## Open thumbnail panel programmatically -To show the thumbnail panel when the document loads, set the [IsThumbnailPanelOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsThumbnailPanelOpen) property to true. This controls initial visibility and works when the thumbnail feature is enabled. +To show the thumbnail panel when the document loads, set the [IsThumbnailPanelOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsThumbnailPanelOpen) property to `true`. This controls initial visibility and requires the thumbnail feature to be enabled. -The following example opens the thumbnail panel at initial render. +Example — open the thumbnail panel at initial render: ```cshtml @@ -56,6 +56,6 @@ The following example opens the thumbnail panel at initial render. [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Thumbnail/Show%20thumbnail%20panel). -## See Also +## See also * [Hyperlink navigation in Blazor SfPdfViewer](./hyperlink) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/pages.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/pages.md index bc8206d0b3..fab64f7e7f 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/pages.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/pages.md @@ -9,19 +9,19 @@ documentation: ug # Page navigation in SfPdfViewer -Move between pages using the built-in toolbar or programmatic APIs. +Navigate pages using the toolbar or programmatic APIs. -The built-in toolbar of SfPdfViewer contains the following page navigation tools: +SfPdfViewer's toolbar includes these page navigation tools: -* **First page**: Navigates to the first page in the document. -* **Previous page**: Scrolls backward one page at a time. -* **Next page**: Scrolls forward one page at a time. -* **Last page**: Navigates to the last page in the document. -* **Go to page**: Jumps to a specified page number. +* **First page**: Navigate to the first page. +* **Previous page**: Scroll backward one page. +* **Next page**: Scroll forward one page. +* **Last page**: Navigate to the last page. +* **Go to page**: Jump to a specified page number. ![Page navigation tools in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-page-navigation.png) -The navigation tools appear in the primary toolbar. Enable or disable these buttons by setting the [EnableNavigation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigation) property. This setting affects only the toolbar buttons; programmatic navigation APIs remain available regardless of this value. +These toolbar buttons are controlled by the [EnableNavigation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigation) property. Programmatic navigation APIs remain available regardless. ```cshtml @@ -38,9 +38,9 @@ The navigation tools appear in the primary toolbar. Enable or disable these butt ``` -Page navigation can also be performed programmatically. The following example shows how to navigate between pages using APIs. +Navigate pages programmatically using the APIs shown in the example below. -N> GoToPageAsync expects a 1-based page number. +N> `GoToPageAsync` expects a 1‑based page number. ```cshtml @@ -108,7 +108,7 @@ N> GoToPageAsync expects a 1-based page number. ``` -## See Also +## See also * [Magnification in Blazor SfPdfViewer](../magnification) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content.md index 9d8db68aa6..232211f9e9 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content.md @@ -9,12 +9,11 @@ documentation: ug # Table of contents navigation in SfPdfViewer -Use the table of contents (TOC) to jump to sections within a PDF. Each TOC entry maps to a location in the document; selecting one navigates to that destination. +Use the table of contents (TOC) to jump to sections within a PDF. Each entry maps to a location in the document; selecting one navigates to that destination. ![Table of contents navigation in Blazor PDF Viewer](../../blazor-classic/images/blazor-pdfviewer-title-of-content.png) -Enable or disable both hyperlink and TOC navigation by setting the [EnableHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableHyperlink) property. TOC entries are parsed from the PDF; if the document has no TOC, no entries appear. - +Enable or disable hyperlink and TOC navigation by setting the [EnableHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableHyperlink) property. TOC entries are parsed from the PDF; if the document has no TOC, no entries appear. ```cshtml @using Syncfusion.Blazor.SfPdfViewer @@ -27,7 +26,7 @@ Enable or disable both hyperlink and TOC navigation by setting the [EnableHyperl ``` -Control where external hyperlinks open by using the [HyperlinkOpenState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_HyperlinkOpenState) property (for example, a new tab). In-document TOC links always navigate within the viewer. +Control where external hyperlinks open using the [HyperlinkOpenState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_HyperlinkOpenState) property (for example, a new tab). In-document TOC links always navigate within the viewer. ```cshtml @@ -44,6 +43,6 @@ Control where external hyperlinks open by using the [HyperlinkOpenState](https:/ ``` -## See Also +## See also * [Modern navigation panel in Blazor SfPdfViewer](./modern-panel) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/migration.md b/Document-Processing/PDF/PDF-Viewer/blazor/migration.md index 4a230aab86..4474633f38 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/migration.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/migration.md @@ -11,18 +11,18 @@ documentation: ug ## Why PDF Viewer (Classic) to PDF Viewer control -Migrating to the PDF Viewer control delivers better performance and a simplified deployment model. Scrolling, page navigation, and printing are optimized for a smoother user experience. The newer viewer also removes the WebAssembly server service dependency required by the classic control, reducing app complexity and maintenance. +Migrating to SfPdfViewer delivers better performance and a simplified deployment model. Scrolling, page navigation, and printing are optimized for a smoother user experience. SfPdfViewer also removes the WebAssembly server service dependency required by the classic viewer, reducing app complexity and maintenance. * **Enhanced performance**: Experience faster scrolling, more responsive page navigation, and improved printing throughput for large documents. * **No server service dependency**: -The newer viewer does not require a separate ServiceUrl or server-side WebAssembly service; client-side rendering is handled by the component. +SfPdfViewer does not require a separate `ServiceUrl` or server-side WebAssembly service; client-side rendering is handled by the component. * **Unified package across platforms**: A single package supports Windows, macOS, and Linux, making installation consistent across environments. -### Nuget Package +### NuGet package To initialize the PDF Viewer component, add the following package references to the project **.csproj** file. @@ -71,7 +71,7 @@ To initialize the PDF Viewer component, add the following package references to To use the PDF Viewer component, add the corresponding script reference in the app host page (**Host.cshtml** or **Layout.cshtml**) based on the framework version. -N> The same script file is used for both `Server application` and `Web assembly application` for the PDF Viewer component. +N> The same script file is used for both `Server application` and `WebAssembly application` for the PDF Viewer component. @@ -159,7 +159,7 @@ builder.Services.AddSyncfusionBlazor(); ### Index.razor -To render the PDF Viewer component, add the following code in the **Index.razor** file. In the newer viewer, a ServiceUrl is not required; specify only the DocumentPath and layout attributes. +To render the PDF Viewer component, add the following code in the **Index.razor** file. In the newer viewer, the `ServiceUrl` is not required; specify only the `DocumentPath` and layout attributes.
@@ -225,7 +225,7 @@ For WebAssembly applications, include the following properties in the project ** N> For WebAssembly applications, install the [SkiaSharp.NativeAssets.WebAssembly](https://www.nuget.org/packages/SkiaSharp.NativeAssets.WebAssembly) NuGet package. -N> When hosting in certain environments (for example, Azure App Service), use [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor) instead of [SkiaSharp.NativeAssets.WebAssembly](https://www.nuget.org/packages/SkiaSharp.NativeAssets.WebAssembly). Align native asset versions in the project file with the installed package version. +N> When hosting in certain environments (for example, Azure App Service), consider using [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor) instead of [SkiaSharp.NativeAssets.WebAssembly](https://www.nuget.org/packages/SkiaSharp.NativeAssets.WebAssembly). Align native asset versions in the project file with the installed package version. ## See also 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 12dc952f46..3bd3d2e1d1 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 @@ -7,19 +7,19 @@ control: SfPdfViewer documentation: ug --- -# Open PDF file from AWS S3 in SfPdfViewer +# Open PDF from AWS S3 in SfPdfViewer -To load a PDF file from AWS S3 in the SfPdfViewer component, follow the steps below. +This article shows how to load a PDF stored in AWS S3 into the Syncfusion Blazor `SfPdfViewer` component. -**Step 1:** Create AWS S3 account +## Step 1 — Create an S3 bucket and grant read access 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. -**Step 2:** Create a simple SfPdfViewer sample in Blazor +## Step 2 — Create a simple SfPdfViewer sample 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. -**Step 3:** Include the following namespaces in the **Index.razor** file. +## Step 3 — Add required namespaces 1. Import the required namespaces at the top of the file: @@ -30,7 +30,9 @@ Follow the steps in the Blazor Server [getting started](https://help.syncfusion. @using Syncfusion.Blazor.SfPdfViewer; ``` -**Step 4:** Add the following code example to the Index.razor file. +## Step 4 — Example: load a PDF from S3 and set DocumentPath + +The example below retrieves the PDF from S3, converts it to a base64 data URL, and assigns it to `DocumentPath`. ```csharp @@ -70,15 +72,15 @@ Follow the steps in the Blazor Server [getting started](https://help.syncfusion. } ``` -Replace the fileName value with the actual S3 object key for the PDF to load. Pass the document name to the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property of the SfPdfViewer component. +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`. 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 in the application to use the previous code example. +N> The `AWSSDK.S3` NuGet package must be installed to use the AWS SDK in this example. [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 that the RegionEndpoint in the code matches the region of the target S3 bucket to avoid authorization or not-found errors. +N> Ensure `RegionEndpoint` matches the S3 bucket region to avoid authorization or not-found errors. ## See also 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 ab6c56263c..1686b74368 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 @@ -7,30 +7,32 @@ control: SfPdfViewer documentation: ug --- -# Open PDF file from Azure Blob Storage in Blazor SfPdfViewer +# Open PDF from Azure Blob Storage in SfPdfViewer -To load a PDF file from Azure Blob Storage in the SfPdfViewer component, follow the steps below. +This article shows how to load a PDF stored in Azure Blob Storage into the Syncfusion Blazor `SfPdfViewer` component. -**Step 1:** Create the Azure Blob Storage account +## 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). -**Step 2:** Create a simple SfPdfViewer sample in Blazor +## 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. -**Step 3:** Include the following namespaces in the **Index.razor** file. +## Step 3 — Add required namespaces 1. Add the required namespaces at the top of Index.razor: ```csharp -@using System.IO; -@using Azure.Storage.Blobs; -@using Azure.Storage.Blobs.Specialized; -@using Syncfusion.Blazor.SfPdfViewer; +@using System.IO +@using Azure.Storage.Blobs +@using Azure.Storage.Blobs.Specialized +@using Syncfusion.Blazor.SfPdfViewer ``` -**Step 4:** Add the below code example to load a PDF from `Azure blob storage` container. +## Step 4 — Example: 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`. ```csharp @@ -66,7 +68,7 @@ N> Replace the placeholder values as follows: • **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 in the application to compile the preceding code. The example converts the blob to a Base64 data URL and assigns it to the `DocumentPath` property. +N> Ensure the `Azure.Storage.Blobs` NuGet package is installed. Prefer server-side retrieval or managed identities to avoid exposing secrets. [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). 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 933b9d4f97..2b68705072 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 @@ -7,7 +7,7 @@ control: SfPdfViewer documentation: ug --- -# Open PDF file from Box cloud file storage in Blazor SfPdfViewer +# 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. @@ -36,7 +36,9 @@ Import the required namespaces at the top of your `Index.razor` file: @using Syncfusion.Blazor.SfPdfViewer; ``` -### Step 2: Add Code to Load a PDF from Box Storage +## Step 4 — Example: download a file and load 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`. ```csharp 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 b51480b46e..489879fc79 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 @@ -7,19 +7,19 @@ control: SfPdfViewer documentation: ug --- -# Open PDF file from Google Cloud Storage in Blazor SfPdfViewer +# Open PDF from Google Cloud Storage in SfPdfViewer -To load a PDF file from Google Cloud Storage in a SfPdfViewer, follow the steps below. +This article shows how to load a PDF stored in Google Cloud Storage into the Syncfusion Blazor `SfPdfViewer` component. -**Step 1:** Create a service account. +## 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).. -**Step 2:** Create a simple SfPdfViewer sample in Blazor. +## 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. This provides the required project setup and a working viewer instance. -**Step 3:** Include the following namespaces in the Index.razor file. +## Step 3 — Add required namespaces 1. Import the required namespaces at the top of the file: @@ -29,7 +29,9 @@ Follow the [getting started](https://help.syncfusion.com/document-processing/pdf @using Syncfusion.Blazor.SfPdfViewer; ``` -**Step 4:** Add the following code example. +## Step 4 — Example: download an object and load into the viewer + +The example below loads a PDF object from a GCS bucket into memory, converts it to a Base64 data URI, and assigns it to `DocumentPath`. ```csharp 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 3b212841a6..d42b88e1d9 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 @@ -7,19 +7,19 @@ control: SfPdfViewer documentation: ug --- -# Open PDF file from Google Drive in Blazor SfPdfViewer +# Open PDF from Google Drive in SfPdfViewer -To load a PDF file from Google Drive in the Blazor SfPdfViewer, follow the steps below. +This article shows how to load a PDF stored in Google Drive into the Syncfusion Blazor `SfPdfViewer` component. -**Step 1** Set up Google Drive API +## Step 1 — Enable the Google Drive API Create a project in Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For detailed guidance, see the [Google Drive documentation](https://developers.google.com/drive/api/guides/enable-sdk). -**Step 2:** Create a simple SfPdfViewer sample in Blazor +## 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. -**Step 3:** Include the following namespaces in the **Index.razor** file. +## Step 3 — Add required namespaces 1. Import the required namespaces at the top of the file: @@ -32,7 +32,9 @@ Follow the [getting started](https://help.syncfusion.com/document-processing/pdf @using Syncfusion.Blazor.SfPdfViewer; ``` -**Step 4:** Add the below code example to load a PDF from `Google drive` file. +## 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`. ```csharp @page "/" @@ -67,10 +69,10 @@ Follow the [getting started](https://help.syncfusion.com/document-processing/pdf } var service = new DriveService(new BaseClientService.Initializer() - { - HttpClientInitializer = credential, - ApplicationName = ApplicationName, - }); + { + HttpClientInitializer = credential, + ApplicationName = ApplicationName, + }); var listRequest = service.Files.List(); listRequest.Q = $"mimeType='application/pdf' and '{FolderId}' in parents and trashed=false"; 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 81943306d9..18cc1b955c 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/opening-pdf-file.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/opening-pdf-file.md @@ -7,9 +7,9 @@ control: SfPdfViewer documentation: ug --- -# Open PDF files in SfPdfViewer for Blazor from various storage location +# Open PDF files in SfPdfViewer for Blazor from various storage locations -This article explains how to open and display PDF files in the SfPdfViewer component from multiple sources, including URL, cloud storage, database, local file system, Base64 string, and stream. The DocumentPath parameter accepts either a direct URL to the PDF file or a data URL that contains Base64-encoded PDF content. +This article explains how to open and display PDF files in the SfPdfViewer component from multiple sources, including URL, cloud storage, database, local file system, Base64 string, and stream. The `DocumentPath` parameter accepts either a direct URL to the PDF file or a data URL that contains Base64-encoded PDF content. ## Opening a PDF from remote URL @@ -30,9 +30,9 @@ If a PDF file is hosted on the web, it can be opened in the viewer by providing ``` -## Opening a PDF from Cloud +## Opening a PDF from cloud storage -Open PDF files stored in cloud storage by converting the file to a Base64 string and assigning it to DocumentPath. +Open PDF files stored in cloud storage by converting the file to a Base64 string and assigning it to `DocumentPath`. The following code example shows how to open and load a PDF file stored in Azure Blob Storage. 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 26ca31634a..a88dcc6dc8 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/events.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/events.md @@ -7,27 +7,23 @@ control: SfPdfViewer documentation: ug --- -# Organize Pages Events in Blazor PDF Viewer +# Organize pages events -The PDF Viewer provides events to track and respond to actions within the page organizer, allowing for the customization of page manipulation features. +Use the page organizer events to react to rotations, rearranges, inserts, deletes, and other page-manipulation actions performed in the page organizer. -|Name|Description| +| Name | Description | |---|---| -|PageOrganizerSaveRequested|Triggers when a save action is performed in the page organizer.| -|PageOrganizerZoomChanged|Triggers when the zoom level of the page organizer is changed.| -|PageOrganizerVisibilityChanged|Triggers when the page organizer dialog visibility is changed.| +| PageOrganizerSaveRequested | Triggers when the page organizer requests a save of the modified document. | +| PageOrganizerZoomChanged | Triggers when the page organizer zoom level changes. | +| PageOrganizerVisibilityChanged | Triggers when the page organizer dialog visibility changes. | -## PageOrganizerSaveRequested Event +## PageOrganizerSaveRequested -The `PageOrganizerSaveRequested` event is triggered when a save action is performed in the page organizer. +Raised when the user saves changes from the page organizer (for example, after clicking the **Save as** button). The event args include: -- Occurs when the **Save as** button in the page organizer toolbar is clicked after modifying the document structure. - -The event arguments provide the necessary information about the save event: - -- `FileName`: The name of the currently loaded PDF document. -- `DownloadDocument`: A base64 string of the modified PDF document data. -- `Cancel`: A boolean that, when set to `true`, prevents the default save action from proceeding. +- `FileName`: the current PDF file name. +- `DownloadDocument`: a base64 string containing the modified PDF bytes. +- `Cancel`: set to `true` to prevent the built-in save behavior. {% tabs %} {% highlight razor %} @@ -40,24 +36,23 @@ The event arguments provide the necessary information about the save event: @code { - private void SavePages(PageOrganizerSaveEventArgs args) { - Console.WriteLine("Saved File Name : " + args.FileName.ToString()); + private void SavePages(PageOrganizerSaveEventArgs args) + { + Console.WriteLine($"Saved File Name: {args.FileName}"); } } {% endhighlight %} {% endtabs %} -## PageOrganizerZoomChanged Event - -The `PageOrganizerZoomChanged` event is triggered when the zoom level of the page organizer is changed. +## PageOrganizerZoomChanged -- This event is fired when the user interacts with the zoom slider in the page organizer. The `ShowImageZoomingSlider` property in `PageOrganizerSettings` must be set to `true` for the slider to be visible. +Raised when the zoom slider in the page organizer changes value. Enable the slider by setting `PageOrganizerSettings.ShowImageZoomingSlider` to `true`. -Event arguments: +Event args: -- `PreviousZoom`: The previous zoom value. -- `CurrentZoom`: The current zoom value. +- `PreviousZoom`: previous zoom value. +- `CurrentZoom`: current zoom value. {% tabs %} {% highlight razor %} @@ -70,17 +65,18 @@ Event arguments: @code { - private void ZoomChange(PageOrganizerZoomChangedEventArgs args) { - Console.WriteLine("Current Zoom : " + args.CurrentZoom); + private void ZoomChange(PageOrganizerZoomChangedEventArgs args) + { + Console.WriteLine($"Current Zoom: {args.CurrentZoom}"); } } {% endhighlight %} {% endtabs %} -## PageOrganizerVisibilityChanged Event +## PageOrganizerVisibilityChanged -The `PageOrganizerVisibilityChanged` event is triggered when the page organizer dialog visibility is changed. +Raised when the page organizer dialog is opened or closed. {% tabs %} {% highlight razor %} @@ -92,8 +88,9 @@ The `PageOrganizerVisibilityChanged` event is triggered when the page organizer @code { - private void VisibleChanged(bool isVisible) { - Console.WriteLine("Organize Dialog Visibility : " + isVisible.ToString()); + private void VisibleChanged(bool isVisible) + { + Console.WriteLine($"Organize dialog visibility: {isVisible}"); } } @@ -104,6 +101,6 @@ The `PageOrganizerVisibilityChanged` event is triggered when the page organizer ## See also -- Overall Viewer events: [Event](../events) +- Overall viewer events: [Event](../events) - Annotation events: [Annotation events](../annotation/events) - Form designer events: [Form field events](../form-designer/events) 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 17d7b5fa32..133c2f8a9b 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,34 +8,33 @@ 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 offers a mobile-responsive layout for the `Organize Pages` feature, ensuring a seamless experience on smaller devices. When viewed on a mobile device, the toolbar and navigation elements adapt to the screen size, providing easy access to all page management tools. +![Organize pages mobile view](./images/organize-mobile-view.png) -![Organize Mobile View](./images/organize-mobile-view.png) +## Mobile toolbar -## Mobile-Friendly 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. -In the mobile view, the `Organize Pages` toolbar is displayed at the bottom of the screen for easy one-handed access. The toolbar includes the same set of tools as the desktop version, such as insert, delete, and rotate, but with a mobile-optimized layout. +## Context menu -## Context Menu for Page Operations +Tap-and-hold a page thumbnail to open the context menu. Available actions include: -To perform actions on a page thumbnail, tap and hold on the thumbnail to open a context menu. This menu contains all the available page operations: +* **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. +* **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. +* **Save updates** — apply changes and use **Save** or **Save as** to download the modified PDF. -* **Rotate Clockwise**: Rotate the selected page 90 degrees clockwise. -* **Rotate Counter-Clockwise**: Rotate the selected page 90 degrees counter-clockwise. -* **Rearrange pages**: Drag and drop pages to update the reading order. -* **Insert Page**: Insert a new page. -* **Duplicate Page**: Duplicate the selected page. -* **Delete Page**: Remove the selected page. -* **Select All**: Select all pages in the document. -* **Import a PDF document**: Merge the current document with pages from another PDF file. -* **Extract Pages**: Extract the current document pages as a PDF file. -* **Save updates**: Review changes in real time and use **Save** or **Save As** to download the revised document. +![Organize mobile options](./images/organize-mobile-options.png) -![Alt text](./images/organize-mobile-options.png) +## Rearranging pages -## Rearranging Pages on Mobile +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. -To rearrange pages, tap and hold a page thumbnail to select it, then drag it to the desired position. A blue line will indicate the drop location. - -By providing a mobile-friendly interface, the PDF Viewer ensures that users can efficiently manage their PDF documents from any device, anywhere. +The mobile UI ensures users can manage document pages efficiently from any device. 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 17e88351ae..3a15973322 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/overview.md @@ -7,110 +7,75 @@ control: SfPdfViewer documentation: ug --- -# Organize Pages in Blazor PDF Viewer component +# Organize pages in SfPdfViewer -The PDF Viewer allows you to manage your PDF documents efficiently by organizing pages seamlessly. Whether you need to add new pages, remove unnecessary ones, rotate pages, move pages within the document, and duplicate pages, the PDF Viewer facilitates these tasks effortlessly. +The Organize Pages feature in `SfPdfViewer` helps you manage PDF pages quickly — add, remove, rotate, reorder, duplicate, import, extract, and save changes with a few clicks. ## Getting started -To access the organize pages feature, simply open the PDF document in the PDF Viewer and navigate to the left vertical toolbar. Look for the `Organize Pages` option to begin utilizing these capabilities. +Open a PDF in the viewer and choose **Organize Pages** from the left toolbar to open the organizer dialog. -![Alt text](./images/organize-pages.png) +![Organize pages](./images/organize-pages.png) -The page organization support enables you to perform various actions such as rotating, rearranging, inserting, duplicating, and deleting pages within a PDF document using organize pages dialog. +## Common actions -### Rotating PDF pages +### Rotate pages -You can adjust the orientation of PDF pages to ensure proper alignment. The rotate icon offers the following options: +- **Rotate clockwise** — rotate selected pages 90° clockwise. -* `Rotate clockwise`: Rotate the selected pages 90 degrees clockwise. +![Rotate right](./images/organize-rotate-right.png) -![Organzie Rotate Clockwise](./images/organize-rotate-right.png) +- **Rotate counter-clockwise** — rotate selected pages 90° counter-clockwise. -* `Rotate counter-clockwise`: Rotate the selected pages 90 degrees counter-clockwise. +![Rotate left](./images/organize-rotate-left.png) -![Organzie Rotate Counter Clockwise](./images/organize-rotate-left.png) +### Rearrange pages -### Rearranging PDF pages +Drag and drop thumbnails to change page order. -You can easily change the sequence of pages within your document using the drag and drop method: +![Drag and drop](./images/Drag_and_Drop.gif) -* `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order. +### Insert, duplicate, delete -![Drag and Drop Organize](./images/Drag_and_Drop.gif) +- **Insert page** — add a blank page to the left or right of the selection. -### Inserting new pages +![Insert left](./images/organize-insert-left.png) -Effortlessly add new pages to your document with the following options: +- **Duplicate page** — create a copy placed to the right of the original. -* `Insert blank page left`: Insert a blank page to the left of the selected page using the respective icon. +![Insert right](./images/organize-insert-right.png) -![Organzie Insert Left](./images/organize-insert-left.png) +- **Delete page** — remove selected pages. -* `Insert blank page right`: Insert a blank page to the right of the selected page using the corresponding icon. +![Select and delete](./images/organize-select-delete.png) -![Organzie Insert Right](./images/organize-insert-right.png) +### Import and extract -### Deleting PDF pages +- **Import PDF** — insert pages from another PDF; imported pages are merged when you save. -Removing unwanted pages from your document is straight forward: +![Import pages](./images/Import_Pages.gif) -* `Select pages to delete`: Click on the page thumbnails you wish to remove. You can select multiple pages at once. -* `Delete selected pages`: Use the delete option in the organize pages pane to remove the selected pages from the document. +- **Extract pages** — export selected pages as a separate PDF. -![Organzie Select and Delete](./images/organize-select-delete.png) +![Extract pages](./images/Extract_Pages.gif) -### Duplicating PDF pages +### Select all and thumbnail zoom -Duplicate the pages within your PDF document effortlessly: +- **Select all** — select every page for bulk actions. -* `Select pages to Duplicate`: Click on the page thumbnails you wish to duplicate. Use the duplicate option to create duplicates. When a page is copied, the duplicate is automatically added to the right of the selected page. Multiple copies can be made using the toolbar action. +![Select all thumbnails](./images/organize-select-all.png) -![Organzie Copy Pages](./images/organize-copy-page.png) +- **Thumbnail zoom** — adjust thumbnail size with the zoom slider for better visibility or overview. -### Importing a PDF Document +![Thumbnail zoom panel](./images/organize-zoom-panel.png) -Seamlessly import a PDF document into your existing document: +## Real-time edits and saving -* `Import PDF document`: Click the **Import Document** button to import a PDF. If a page is selected, the imported document’s thumbnail will be inserted to the right of the selected page. If multiple or no pages are selected, the thumbnail will be added as the first page. When **Save** or **Save As** is clicked, the imported PDF will be merged with the current document. You can insert a blank page to the left or right of the imported thumbnail, delete it, or drag and drop it to reposition as needed. +Changes in the organizer are reflected in the viewer immediately. Use **Save** to overwrite the document or **Save As** to download a modified copy. -![Alt text](./images/Import_Pages.gif) +## Supported APIs -### Extract Document Pages - -* `Extract Document Pages`: Click the **Extract Document** button to extract a PDF pages. If a pages are selected, the selected pages are extracted as a separate document. - -![Alt text](./images/Extract_Pages.gif) - -### Selecting all pages - -Make comprehensive adjustments by selecting all pages simultaneously. This facilitates efficient editing and formatting across the entire document. - -![Organzie Select Pages](./images/organize-select-all.png) - -### Zooming Page Thumbnails - -Adjust the size of page thumbnails within the organizer panel for better visibility and precision when editing. The zoom functionality allows you to: - -* Increase or decrease the size of page thumbnails using the zoom slider -* See more details on pages when zoomed in -* View more pages simultaneously when zoomed out - -This feature is especially useful when working with documents containing complex layouts or small details that need careful examination during organization. - -![Organzie Zoom Panel](./images/organize-zoom-panel.png) - -### Real-time updates - -Witness instant changes in page organization reflected within the PDF Viewer. Simply click the **Save** button to preserve your modifications. - -### SaveAs functionality - -Safeguard your edits by utilizing the **Save As** feature. This enables you to download the modified version of the PDF document for future reference, ensuring that your changes are securely stored. - -## API's supported - -**EnablePageOrganizer:** This API enables or disables the page organizer feature in the PDF Viewer. By default, it is set to `true`, indicating that the page organizer is enabled. +- `EnablePageOrganizer` (bool) — enable or disable the organizer. Default: `true`. {% tabs %} {% highlight razor %} @@ -124,7 +89,7 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d {% endhighlight %} {% endtabs %} -**PageOrganizerVisibility:** This API determines whether the page organizer dialog will be displayed automatically when a document is loaded into the PDF Viewer. By default, it is set to `false`, meaning the dialog is not displayed initially. +- `PageOrganizerVisibility` (bool) — show the organizer dialog on load. Default: `false`. {% tabs %} {% highlight razor %} @@ -135,25 +100,23 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d Width="100%" PageOrganizerVisibility="true"> -{% endhighlight %} -{% endtabs %} +{% tabs %} +{% highlight razor %} -**PageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, duplicating, importing and rearranging pages, as well as configuring thumbnail zoom settings. By default, all these actions are enabled and standard zoom settings are applied. - -* **CanDelete** : It allow users to enable or disable the delete pages from the document. By default it set as `true`. -* **CanInsert** : It allow users to enable or disable the insert new pages from the document. By default it set as `true`. -* **CanRotate** : It allow users to enable or disable the rotate pages from the document. By default it set as `true`. -* **CanDuplicate** : It allow users to enable or disable the duplicate pages from the document. By default it set as `true`. -* **CanRearrange** : It allow users to enable or disable the order of pages from the document. By default it set as `true`. -* **CanExtractPages** : It allow users to enable or disable extract pages into a separate document. By default it set as `true`. -* **ShowImageZoomingSlider** : It allow users to enable or disable the zoom slider for images. By default it set as `true`. -* **ImageZoom** : It represents the current zoom value of the images in the page organizer view. By default it set as `1`. -* **ImageZoomMin** : It represent minimum value for the image zooming slider in the page organizer view. By default it set as `1` and acceptable values: `1` to `4`. -* **ImageZoomMin** : It represent maximum value for the image zooming slider in the page organizer view. By default it set as `5` and acceptable values: `2` to `5`. -* **FooterButtons** : It specifies which buttons are visible in the Page Organizer dialog footer. - * `None` - Hide both Save and Save As buttons. - * `Save` - Show only the "Save" button. - * `Save As` - Show only the "SaveAs" button. +- `PageOrganizerSettings` — controls available actions and thumbnail zoom settings. Common properties: + +* `CanDelete` — allow delete. Default: `true`. +* `CanInsert` — allow insert. Default: `true`. +* `CanRotate` — allow rotate. Default: `true`. +* `CanDuplicate` — allow duplicate. Default: `true`. +* `CanRearrange` — allow rearrange. Default: `true`. +* `CanExtractPages` — allow extract. Default: `true`. +* `CanImport` — allow import. Default: `true`. +* `ShowImageZoomingSlider` — show thumbnail zoom slider. Default: `true`. +* `ImageZoom` — current thumbnail zoom. Default: `1`. +* `ImageZoomMin` — minimum zoom (1). +* `ImageZoomMax` — maximum zoom (5). +* `FooterButtons` — which footer buttons to show: `None`, `Save`, `SaveAs`, or combinations. {% tabs %} {% highlight razor %} @@ -168,13 +131,11 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d ## Keyboard shortcuts -The following keyboard shortcuts are available at the organize pages dialog. - -* **Ctrl+Z** : Undo the last action performed. -* **Ctrl+Y** : Redo the action that was undone. +- **Ctrl+Z** — undo. +- **Ctrl+Y** — redo. -#### Conclusion +## Conclusion -With the Organize Pages feature in the PDF Viewer, managing your PDF documents has never been easier. Whether you are adding new content, adjusting page orientation, moving the pages, duplicating the pages, or removing unnecessary pages, this feature provides the tools you need to streamline your document management workflow. Explore these capabilities today and take control of your PDF documents with ease! +Organize Pages provides a compact, efficient interface to manage document pages in `SfPdfViewer`. Use the available settings and APIs to tailor the organizer to your application's needs. [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Page%20Organizer) 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 54cc0836f8..07124e2281 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 @@ -7,11 +7,11 @@ control: SfPdfViewer documentation: ug --- -# Programmatic Support for Organize Pages in Blazor PDF Viewer control +# Programmatic support for Organize Pages -The PDF Viewer provides comprehensive programmatic support for organizing pages, allowing you to integrate and manage PDF functionalities directly within your application. This section details the available APIs to enable, control, and interact with the page organization features. +The PDF Viewer exposes APIs to programmatically rotate, move, insert, delete, duplicate, export, and import pages. The examples below show common calls; each operation updates the client-side view and is persisted when you save the document. -## Rotate Pages +## Rotate pages This method allows programmatic rotation of individual or multiple pages within the PDF document. The rotation is applied to the client-side representation and will be persisted upon saving the document. Provide the indexes of the page to rotate and rotation direction. @@ -37,10 +37,9 @@ This method allows programmatic rotation of individual or multiple pages within {% endhighlight %} {% endtabs %} -`RotationDirection` represent the rotation direction of the page. It has two types +`RotationDirection` values: `RotationDirection.Clockwise` and `RotationDirection.CounterClockwise`. -- `RotationDirection.Clockwise` - It rotates the page in the clock wise direction. -- `RotationDirection.CounterClockwise` - It rotates the page in the anti clock wise direction. +### Rotate to a specific angle ### Rotate Pages with angle @@ -68,14 +67,9 @@ This method allows programmatic rotation of individual or multiple pages within {% endhighlight %} {% endtabs %} -`PageRotation` represent the rotation angle of the page. It has four types +`PageRotation` options: `RotateAngle0`, `RotateAngle90`, `RotateAngle180`, `RotateAngle270`. -- `PageRotation.RotateAngle0` - It rotates the page in the 0 degree direction. -- `PageRotation.RotateAngle90` - It rotates the page in the 90 degree direction. -- `PageRotation.RotateAngle180` - It rotates the page in the 180 degree direction. -- `PageRotation.RotateAngle270` - It rotates the page in the 270 degree direction. - -## Move Pages +## Move pages This method allows asynchronously arranges the specified pages at the given target position. It rearrange the pages in the document based in the targeted index. Provide the indexes of the page to move and targeted index to move. @@ -101,7 +95,7 @@ This method allows asynchronously arranges the specified pages at the given targ {% endhighlight %} {% endtabs %} -## Insert Pages +## Insert blank pages This method allows asynchronously inserts one or more blank pages at the specified index. It insert the blank pages in the document based in the targeted index. Provide the indexes to add blank pages and count of the pages need to be added. @@ -127,7 +121,7 @@ This method allows asynchronously inserts one or more blank pages at the specifi {% endhighlight %} {% endtabs %} -## Delete Pages +## Delete pages This method allows asynchronously deletes the pages at the specified indices from the document. It delete the pages in the document based in the targeted index. Provide the indexes to delete pages of the document. @@ -153,7 +147,7 @@ This method allows asynchronously deletes the pages at the specified indices fro {% endhighlight %} {% endtabs %} -## Duplicate Pages +## Duplicate pages This method allows asynchronously duplicates the pages at the specified indices from the document. It duplicates the pages in the document based in the targeted index. Provide the indexes to duplicates pages of the document. @@ -179,7 +173,7 @@ This method allows asynchronously duplicates the pages at the specified indices {% endhighlight %} {% endtabs %} -## Export Pages +## Export pages This method allows extracts the specified pages and downloads them as a separate PDF document. It extract the pages in the document based in the targeted index. Provide the indexes to extract pages of the document. @@ -205,7 +199,7 @@ This method allows extracts the specified pages and downloads them as a separate {% endhighlight %} {% endtabs %} -### Export Pages as Stream +### Export pages as stream This method allows extracts the specified pages and returns the extracted PDF as a stream. It extract the pages in the document as index based in the targeted index. Provide the indexes to extract pages of the document as stream. @@ -232,7 +226,7 @@ This method allows extracts the specified pages and returns the extracted PDF as {% endhighlight %} {% endtabs %} -## Import Pages +## Import pages This method allows inserts pages from another PDF document at the specified index. It insert the pages of the another document based in the targeted index. Provide the indexes to import pages of the another document, byte array of the imported document and password. @@ -259,7 +253,7 @@ This method allows inserts pages from another PDF document at the specified inde {% endhighlight %} {% endtabs %} -### Import Pages as Stream +### Import pages as stream This method allows inserts pages from another PDF document as stream at the specified index. It insert the pages of the another document as stream based in the targeted index. Provide the indexes to import pages of the another document, stream of the imported document and password. 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 11946b9fcf..b434db0390 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/toolbar.md @@ -7,11 +7,11 @@ control: SfPdfViewer documentation: ug --- -# Organize Page Toolbar Customization in Blazor PDF Viewer control +# Organize page toolbar -The PDF Viewer allows you to customize the toolbar for the organize pages feature, enabling you to show or hide specific tools based on your application's requirements. The `PageOrganizerSettings` API provides properties to control the visibility of each tool in the organize pages dialog. +Customize which tools appear in the Organize Pages toolbar using `PageOrganizerSettings`. Toggle features to match your application's needs. -## Show or hide the insert option +## Hide insert The `CanInsert` property controls the visibility of the insert tool. When set to `false`, the insert tool will be hidden from the toolbar. @@ -28,9 +28,9 @@ The `CanInsert` property controls the visibility of the insert tool. When set to {% endhighlight %} {% endtabs %} -![Insert Disable](./images/organize-insert-disable.png) +![Insert disabled](./images/organize-insert-disable.png) -## Show or hide the delete option +## Hide delete The `CanDelete` property controls the visibility of the delete tool. When set to `false`, the delete tool will be hidden. @@ -47,9 +47,9 @@ The `CanDelete` property controls the visibility of the delete tool. When set to {% endhighlight %} {% endtabs %} -![Delete Disable](./images/organize-delete-disable.png) +![Delete disabled](./images/organize-delete-disable.png) -## Show or hide the rotate option +## Hide rotate The `CanRotate` property controls the visibility of the rotate tool. When set to `false`, the rotate tool will be hidden. @@ -66,9 +66,9 @@ The `CanRotate` property controls the visibility of the rotate tool. When set to {% endhighlight %} {% endtabs %} -![Rotate Disable](./images/organize-rotate-disable.png) +![Rotate disabled](./images/organize-rotate-disable.png) -## Show or hide the duplicate option +## Hide duplicate The `CanDuplicate` property controls the visibility of the copy tool. When set to `false`, the copy tool will be hidden. @@ -85,9 +85,9 @@ The `CanDuplicate` property controls the visibility of the copy tool. When set t {% endhighlight %} {% endtabs %} -![Duplicate Disable](./images/organize-copy-disable.png) +![Duplicate disabled](./images/organize-copy-disable.png) -## Show or hide the import option +## Hide import The `CanImport` property controls the visibility of the import tool. When set to `false`, the import tool will be hidden. @@ -104,9 +104,9 @@ The `CanImport` property controls the visibility of the import tool. When set to {% endhighlight %} {% endtabs %} -![Import Disable](./images/organize-import-disable.png) +![Import disabled](./images/organize-import-disable.png) -## Show or hide the extract option +## Hide extract The `CanExtractPages` property controls the visibility of the extract tool. When set to `false`, the extract tool will be hidden. @@ -123,9 +123,9 @@ The `CanExtractPages` property controls the visibility of the extract tool. When {% endhighlight %} {% endtabs %} -![Extract Disable](./images/organize-extract-disable.png) +![Extract disabled](./images/organize-extract-disable.png) -## Show or hide the rearrange option +## Disable rearrange The `CanRearrange` property controls the ability to rearrange pages. When set to `false`, pages cannot be rearranged. diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/ui-interactions.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/ui-interactions.md index 13eb3de073..f2c31c8979 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/ui-interactions.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/ui-interactions.md @@ -7,99 +7,82 @@ control: SfPdfViewer documentation: ug --- -# UI Interactions for Organizing Pages in Blazor PDF Viewer +# UI interactions for Organize Pages -The PDF Viewer provides an intuitive user interface for managing and organizing pages within a PDF document. This section covers the various UI interactions available in the `Organize Pages` dialog. +The Organize Pages dialog provides simple, touch-friendly controls to manage page thumbnails and perform common page operations. -## Rotating PDF pages +## Rotate pages You can adjust the orientation of pages to ensure proper alignment. The rotate icon in the Organize Pages dialog provides the following options: -* **Rotate clockwise**: Rotate the selected pages 90 degrees clockwise. +- **Rotate clockwise** — rotate selected pages 90° clockwise. -![Rotating Clockwise](./images/organize-ui-rotate-right.png) +![Rotate clockwise](./images/organize-ui-rotate-right.png) -* **Rotate counter-clockwise**: Rotate the selected pages 90 degrees counter-clockwise. +- **Rotate counter-clockwise** — rotate selected pages 90° counter-clockwise. -![Rotating Counter Clockwise](./images/organize-ui-rotate-left.png) +![Rotate counter-clockwise](./images/organize-ui-rotate-left.png) -## Rearranging PDF pages +## Rearrange pages -Easily change the sequence of pages using the drag-and-drop method: +Drag and drop thumbnails to change page order. -* **Drag and drop**: Click and drag a page thumbnail to the desired position within the document, then release it to reorder the pages. +![Rearrange pages](./images/Drag_and_Drop.gif) -![Rearranging](./images/Drag_and_Drop.gif) +## Insert pages -## Inserting new pages +- **Insert blank page left** — insert a blank page to the left of the selected page. +- **Insert blank page right** — insert a blank page to the right of the selected page. -Effortlessly add blank pages to your document with the following options: +![Insert pages](./images/Insert_Pages.gif) -* **Insert blank page left**: Insert a blank page to the left of the selected page. -* **Insert blank page right**: Insert a blank page to the right of the selected page. +## Delete pages -![Rearranging](./images/Insert_Pages.gif) +1. Select thumbnails to remove (multi-select supported). +2. Use the Delete action in the organizer to remove the selected pages. -## Deleting PDF pages +![Delete pages](./images/organize-ui-delete.png) -Remove unwanted pages from your document with these steps: +## Duplicate pages -1. **Select pages to delete**: Click on the thumbnails of the pages you wish to remove. You can select multiple pages at once. -2. **Delete selected pages**: Use the delete option in the Organize Pages pane to remove the selected pages from the document. +- Select thumbnails to duplicate. +- Use the Duplicate action to add copies (copies appear to the right of the originals). -![Delete](./images/organize-ui-delete.png) +![Duplicate pages](./images/Duplicate_Pages.gif) -## Duplicating PDF pages +## Import pages -Duplicate pages within your PDF document effortlessly: +- **Import PDF** — select a PDF to insert pages into the current document. If a page is selected the imported pages are added to its right; otherwise they are added at the start. Imported pages are merged with the document when you save. -* **Select pages to duplicate**: Click on the page thumbnails you wish to duplicate. -* **Duplicate selected pages**: Use the duplicate option to create duplicates. The copied pages will be added to the right of the selected pages. +![Import pages](./images/organize-ui-extract-page.png) -![Duplicating](./images/Duplicate_Pages.gif) +## Extract pages -## Importing a PDF document +- **Extract Document** — export selected pages as a separate PDF file. -Seamlessly import another PDF document into your current document: +![Extract pages](./images/organize-ui-import-page.png) -* **Import PDF document**: Click the **Import Document** button to select and import a PDF. The imported document will be inserted as a thumbnail. If a page is selected, the thumbnail will be added to its right. If no pages are selected, it will be added as the first page. The imported PDF will be merged with the current document upon saving. +## Select all -![Importing](./images/organize-ui-extract-page.png) +- **Select all** — select every page for bulk operations such as rotate, delete, or duplicate. -### Extract Document Pages +![Select all](./images/organize-ui-select.png) -* `Extract Document Pages`: Click the **Extract Document** button to extract a PDF pages. If a pages are selected, the selected pages are extracted as a separate document. +## Thumbnail zoom -![Alt text](./images/organize-ui-import-page.png) +- Use the zoom slider to increase or decrease thumbnail size. +- Zoom in to inspect page details or zoom out to view more pages. -## Selecting all pages - -Select all pages simultaneously to perform bulk operations, such as rotating or deleting all pages at once. - -![Selecting](./images/organize-ui-select.png) - -## Zooming page thumbnails - -Adjust the size of page thumbnails for better visibility and precision: - -* Use the zoom slider to increase or decrease the thumbnail size. -* Zoom in to see more detail on each page. -* Zoom out to view more pages at once. - -![Zooming](./images/organize-zoom-panel.png) +![Thumbnail zoom](./images/organize-zoom-panel.png) ## Real-time updates and saving -All changes are reflected instantly in the Organize Pages dialog. Click the **Save** button to apply the modifications to the document. Use the **Save As** feature to download a new version of the PDF with your changes. +Changes in the organizer are reflected instantly in the viewer. Click **Save** to persist changes or **Save As** to download a modified copy. ## Keyboard shortcuts -The following keyboard shortcuts are available in the Organize Pages dialog: - -* **Ctrl+Z**: Undo the last action. - -![Keyboard](./images/organize-ui-undo.png) - -* **Ctrl+Y**: Redo the last undone action. +- **Ctrl+Z** — undo. +- **Ctrl+Y** — redo. -![Keyboard](./images/organize-ui-redo.png) +![Undo](./images/organize-ui-undo.png) +![Redo](./images/organize-ui-redo.png) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pdf.md index b653d789f5..28698a0fa8 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pdf.md @@ -9,9 +9,9 @@ documentation: ug # Organize pages in Blazor PDF Viewer -The Blazor PDF Viewer component provides an Organize Pages panel that helps you prepare documents before sharing them. Use it to tidy scanned files, move pages into the right order, and duplicate important content without leaving the viewer. +The SfPdfViewer component provides an Organize Pages panel that helps prepare documents before sharing. Use it to tidy scanned files, move pages into the correct order, and duplicate content without leaving the viewer. -To open the Organize Pages panel, load a document, ensure that the Organize Pages toolbar item is enabled, and choose **Organize Pages** from the left vertical toolbar. The document must allow page-level edits; otherwise, the toolbar item is hidden. +To open the Organize Pages panel, load a document, ensure that the Organize Pages toolbar item is enabled, and choose **Organize Pages** from the left vertical toolbar. The document must allow page-level edits for the toolbar item to be available. The Organize Pages panel supports the following actions: @@ -21,11 +21,11 @@ The Organize Pages panel supports the following actions: * **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. -* **Extract Pages**: Extract the current document pages as a PDF file. +* **Extract pages**: Extract pages from the current document as a separate 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. -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. +After completing the changes, select **Save** to overwrite the current document or **Save As** to download a new copy that retains the updated page order. For a full guide to Organize Pages in Blazor, see the feature landing page: [Organize pages in Blazor PDF Viewer](./organize-pages/overview). diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/overview.md index d0304a5666..39af4bbe00 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/overview.md @@ -9,25 +9,25 @@ documentation: ug # Overview of Blazor PDF Viewer Component -The Blazor SfPdfViewer component enables viewing, editing, printing, and downloading PDF files in Blazor applications without a web service dependency. It is optimized for speed and responsiveness and provides a feature set comparable to the classic Blazor PDF Viewer. The component is straightforward to integrate into both Blazor Server and Blazor WebAssembly (WASM) applications. +The Blazor `SfPdfViewer` component enables viewing, annotating, printing, and downloading PDF files in Blazor applications without requiring a separate server-side PDF service. It provides fast, responsive rendering and is straightforward to integrate into both Blazor Server and Blazor WebAssembly (WASM) applications. -The SfPdfViewer component provides the same key capabilities as the [Blazor PDF Viewer component](../blazor-classic/overview), with additional advantages described below. +`SfPdfViewer` delivers the core capabilities of the [Blazor PDF Viewer component](../blazor-classic/overview) while adding client-side rendering, reduced server round-trips, and a unified cross-platform package. Key advantages are summarized below. ## Performance Improvements -Rendering, scrolling, zooming, panning, and printing have been optimized for faster, smoother interaction. +Rendering, scrolling, zooming, panning, and printing have been optimized for faster, smoother interaction and reduced latency. ## Elimination of Service Dependency -The classic PDF Viewer required a separate [service URL](./getting-started/web-assembly-application) to load documents. In the [Blazor SfPdfViewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-assembly-application), documents can be loaded directly without a service URL, enabling offline scenarios and reducing network overhead. Server-side hosting remains supported when needed. +The classic PDF Viewer required a separate [service URL](./getting-started/web-assembly-application) to load documents. `SfPdfViewer` can load documents directly in the browser (see the [Blazor WebAssembly](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-assembly-application)), enabling offline scenarios and reducing network overhead. Server-side hosting remains supported when required. ## Common Package -Previously, separate NuGet packages were required for each operating system: [Windows](https://www.nuget.org/packages/Syncfusion.Blazor.PdfViewerServer.Windows), [Linux](https://www.nuget.org/packages/Syncfusion.Blazor.PdfViewerServer.Linux), and [OSX](https://www.nuget.org/packages/Syncfusion.Blazor.PdfViewerServer.OSX). The [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) package now provides a single, cross-platform package for all environments. +Previously, separate NuGet packages were required for each operating system: [Windows](https://www.nuget.org/packages/Syncfusion.Blazor.PdfViewerServer.Windows), [Linux](https://www.nuget.org/packages/Syncfusion.Blazor.PdfViewerServer.Linux), and [OSX](https://www.nuget.org/packages/Syncfusion.Blazor.PdfViewerServer.OSX). The `Syncfusion.Blazor.SfPdfViewer` package now provides a single, cross-platform distribution for all supported environments. ## Reduced Server Calls -In the classic viewer, many C# service calls were required to retrieve information such as page text, hyperlinks, and page images. The SfPdfViewer moves these operations to the client side, decreasing round trips and improving responsiveness. +In the classic viewer, many C# service calls were required to retrieve page text, hyperlinks, and page images. `SfPdfViewer` performs these operations client-side where possible, decreasing round trips and improving responsiveness. ## Some of the key features are listed below @@ -49,14 +49,14 @@ In the classic viewer, many C# service calls were required to retrieve informati * [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) for all annotation types + * [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) ### Supported Features: Desktop vs Mobile -The table below lists supported and unsupported features on desktop and mobile devices. +The following table summarizes feature support on desktop and mobile devices. | Feature | Desktop | Mobile devices | |--|--|--| @@ -78,10 +78,12 @@ The table below lists supported and unsupported features on desktop and mobile d | Add annotation through touch | Yes | No | | Import/export annotation | Yes | Yes | | Form fields rendering | Yes | Yes | +| Form Designer | Yes | Yes | +| Modern Navigation Panel | Yes | Yes | +| Organize Pages | Yes | Yes | N> Enable desktop mode on mobile devices using the [EnableDesktopMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableDesktopMode) property to display the toolbar as on desktop. -N> Syncfusion® provides the SfPdfViewer component for both Blazor Server and Blazor WebAssembly applications. -
For both Blazor WebAssembly and Blazor Server applications, use the [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PdfViewer.SfPdfViewer.html) component from the Syncfusion.Blazor.SfPdfViewer NuGet package. This component does not require server-side processing through a web service to render PDF files
For Windows, Linux, and macOS, use the [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) NuGet package. +N> The `SfPdfViewer` component is available for both Blazor Server and Blazor WebAssembly applications. Use the `SfPdfViewer` component from the `Syncfusion.Blazor.SfPdfViewer` NuGet package; server-side processing through a web service is not required to render PDF files in client scenarios. For platform-specific server packages, see the NuGet listings for Windows, Linux, and macOS. -N> Refer to the [Blazor SfPdfViewer feature tour](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) for an overview of its capabilities. Explore the [Blazor SfPdfViewer demo](https://document.syncfusion.com/demos/pdf-viewer/blazor-server/pdf-viewer/default-functionalities?theme=fluent) to see the core features in action. \ 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 and the [Blazor SfPdfViewer demo](https://document.syncfusion.com/demos/pdf-viewer/blazor-server/pdf-viewer/default-functionalities?theme=fluent) 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 51c5a6b908..2506758b6e 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/print.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/print.md @@ -9,7 +9,7 @@ documentation: ug # Print in Blazor SfPdfViewer Component -The SfPdfViewer 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 `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`. ```cshtml @@ -94,7 +94,7 @@ The SfPdfViewer supports printing the loaded PDF by default. Enable or disable t ## 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 the scale factor set as 1.0 (prints at the on-screen scale). Valid range from 0.5 to 5.0. Higher values can improve output clarity for documents with smaller page dimensions and may increase print processing time. +[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. ```cshtml @@ -118,20 +118,20 @@ The following events are available for print in the SfPdfViewer component. |Name|Description| |---|---| |PrintStart|Triggers when a print action starts.| -|PrintEnd|Triggers when a print action is completed.| +|PrintEnd|Triggers when a print action completes.| ### PrintStart Event -The [PrintStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_PrintStart) event triggers when the print action is started. +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 +#### Event arguments -See [PrintStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintStartEventArgs.html) for details such as Filename, Cancel option. +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, the print operation is canceled and the print dialog will not open. -- By default, Cancel is false. Set it to true to prevent printing. +- 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`. -The following example illustrates how to handle the PrintStart event. +The following example illustrates how to handle the `PrintStart` event. ```cshtml @@ -151,13 +151,13 @@ 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 an annotation is added to a page in the PDF document. +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 +#### Event arguments -See [PrintEndEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PrintEndEventArgs.html) for details such as Filename. +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. +The following example illustrates how to handle the `PrintEnd` event. ```cshtml 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 4dd87255f2..4244a27a0e 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/redaction/mobile-view.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/redaction/mobile-view.md @@ -7,17 +7,17 @@ control: SfPdfViewer documentation: ug --- -# Redaction in Mobile View in Blazor SfPdfViewer Component +# Redaction in mobile view -The **Redaction Tool** enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the SfPdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices. +Redaction mode in mobile view provides a touch-optimized toolbar and tools to mark, review, and apply redactions on the go. -![Redaction in Mobile View](./redaction-annotations-images/redaction-mobile-view.png) +![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. -## Adding Redaction in Mobile View +## Enable redaction in mobile view -To enable redaction functionality in your Blazor application, configure the PDF Viewer with the following setup, +Configure the viewer toolbar to include redaction tools for both desktop and mobile. Example: ```cshtml @page "/" @@ -73,60 +73,25 @@ To enable redaction functionality in your Blazor application, configure the PDF } ``` -## Understanding Mobile Redaction Toolbar Tools +## Toolbar tools overview -When you enter redaction mode in mobile view, a specialized redaction toolbar appears with multiple tools optimized for touch interaction. Each tool serves a specific purpose in the redaction workflow. +### Redaction annotation -### Redaction Annotation Tool +Draw rectangular overlays to mark selective content for redaction. Overlays are editable until applied. -The **Redaction Annotation** tool is the primary redaction feature that allows you to draw redaction rectangles on specific content: +![Redaction annotation tool](./redaction-annotations-images/redaction-annotation-annot.png) -**Function**: Creates visual redaction annotations that mark content for permanent removal -**Usage**: -Touch and drag to draw rectangular redaction overlays on any content area. +### Page redaction -**Process**: -- Selected content appears with a customizable overlay (default black) -- Annotations remain editable until explicitly applied -- Can be repositioned or deleted before final application +Redact whole pages or page ranges using patterns (odd/even/ranges/current page). -![Redaction Annotation Tool](./redaction-annotations-images/redaction-annotation-annot.png) +![Page redaction tool](./redaction-annotations-images/page-redaction-annot.png) -### Page Redaction Tool +### Redaction properties -The **Page Redaction** tool enables batch redaction of entire pages based on specific patterns. +Customize overlay color, outline, overlay text, font, alignment, and size before applying redactions. -![Page Redaction Tool](./redaction-annotations-images/page-redaction-annot.png) - -**Function**: Redacts complete pages or page ranges with a single action -**Options Available**: -- **Odd Pages**: Redacts only odd-numbered pages (1, 3, 5, etc.) -- **Even Pages**: Redacts only even-numbered pages (2, 4, 6, etc.) -- **Specific Page**: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7) -- **Current Page**: Redacts only the currently displayed page - -**Usage**: -Select desired pattern → Review affected pages in the viewer → Confirm redaction scope - -![Page Redaction Tool Dialog](./redaction-annotations-images/page-redaction-dialog-annot.png) - -### Redaction Properties Tool - -The **Redaction Properties** tool allows customization of redaction appearance before application. - -![Redaction Properties Mobile View](./redaction-annotations-images/redaction-properties-annot.png) - -**Function**: Customize the visual appearance of redaction overlays and text replacement -**Customizable Properties**: -- **Fill Color**: Change the redaction overlay color (default: black) -- **Outline Color**: Set outline color for redaction boxes (optional) -- **Overlay Text**: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL") -- **Text Color**: Change overlay text color for better visibility -- **Text Font**: Select font family for overlay text -- **Text Alignment**: Position overlay text within redaction boxes -- **Text Size**: Adjust overlay text size relative to redaction area - -![Redaction Properties Dialog Mobile View](./redaction-annotations-images/redaction-properties-dialog-annot.png) +![Redaction properties](./redaction-annotations-images/redaction-properties-annot.png) ## Enabling Redaction Mode in Mobile View @@ -161,7 +126,7 @@ The **Redaction Properties** tool allows customization of redaction appearance b 3. **Preview**: See changes applied to existing annotations 4. **Apply**: Use customized appearance for final redaction -## Applying Redactions in Mobile View +## Apply redactions N> Applying redactions is permanent. After applying, the underlying content and text are removed from the document and cannot be recovered. @@ -195,11 +160,11 @@ To remove existing redaction annotations before they are applied: ![Delete Redaction Annotation](./redaction-annotations-images/delete-redaction-annotation-annot.png) -N> Once redactions have been applied to the document, they become part of the PDF content and cannot be removed or modified. +N> After redactions are applied they become part of the PDF content and cannot be removed. [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar) -## See Also +## See also * [Mobile Toolbar](../toolbar-customization/mobile-toolbar) * [Annotation in Mobile View](../annotation/annotations-in-mobile-view) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/redaction/overview.md index aeb1ca23bd..37a73af5f9 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/redaction/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/redaction/overview.md @@ -9,66 +9,58 @@ documentation: ug # Redaction annotations in Blazor SfPdfViewer Component -Redaction annotations conceal sensitive content in a PDF. The Syncfusion Blazor PDF Viewer (SfPdfViewer) supports both interactive and programmatic redaction with customizable appearance and a one-click final apply action. - -Check the following video to learn how to work with Redaction annotations in Blazor PDF Viewer. +Check 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 the Blazor app and ensure the redaction feature is available in the used version. Redaction permanently removes content when applied. +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. ![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) -## Add a Redaction annotation to the PDF document - -The redaction feature hides sensitive information by adding redaction annotations to pages. Annotations can be added from the toolbar or programmatically. +## Add a redaction annotation -Click the Redaction tool on the toolbar and draw over the content to redact. After marking, optionally show overlay text (for example, "Confidential") and customize appearance, including fill color, border color, and opacity. +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. ![Drawing a redaction region over page content](redaction-annotations-images/adding-redaction-annotation.png) -## Delete Redaction Annotations +## Delete redaction annotations -Redaction annotations can be removed through the UI or programmatically. +Remove redaction annotations through the UI or the API: * Click the Delete button on the toolbar, or * Press the **Delete** key after selecting the annotation. ![Toolbar showing the Delete command for redaction](redaction-annotations-images/redaction-delete-icon.png) -## Add Page Redaction in Blazor SfPdfViewer Component +## Page redaction -The Blazor PDF Viewer supports redacting entire pages that contain sensitive or confidential information. Use the built-in UI dialog (to choose specific pages, ranges, or all pages) or perform page redaction programmatically. +Redact entire pages or page ranges using the built-in page-redaction dialog, or perform page redaction programmatically. ![Toolbar showing the Redact Page option](redaction-annotations-images/redact-page-icon.png) -## Apply Redaction to the Document in Blazor SfPdfViewer Component +## Apply redaction to the document -The Blazor PDF Viewer can permanently apply redaction annotations to the document, removing the marked content. This action is irreversible. Apply redaction using the toolbar button or programmatically. +Applying redactions permanently removes the marked content from the PDF. Use the toolbar button or API to apply redactions. -The Apply Redaction button on the toolbar applies all redaction annotations in the document. - -* The button is disabled when no redaction annotations exist. -* The button automatically enables when at least one redaction annotation is present. +* 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 redaction to confirm the irreversible operation. +A confirmation dialog appears before applying redactions to confirm this irreversible operation. ![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 for Redaction Annotations - -Redaction annotations support comments through the built-in comment panel. Use comments to add notes, track reviews, or record the reason for redaction. +## Comment panel support -Comments are available through the UI and API. For details, see the Comments documentation. +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. For details, see the [Comments documentation](../annotation/comments). -## Export and Import Support for the Redaction Annotations +## Export and import support -The viewer supports exporting and importing redaction annotations to save and reload them for future use. Annotations can be exchanged in JSON format for persistence and sharing. +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). 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 71a3b07c31..f009f07f02 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/redaction/ui-interactions.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/redaction/ui-interactions.md @@ -11,11 +11,11 @@ documentation: ug ## Add redaction annotations from the toolbar -Use the redaction tool on the toolbar to draw over content that should be redacted. After marking, an annotation can display overlay text (for example, “Confidential”) and can be styled using fill color and other properties. +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. ![Drawing a redaction annotation on the page](redaction-annotations-images/adding-redaction-annotation.png) -#### Redaction annotations are interactive +### Interactive redaction annotations * **Movable**: Reposition an annotation within the same page. @@ -25,23 +25,23 @@ Use the redaction tool on the toolbar to draw over content that should be redact ![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 the [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). ## 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 annotations using the property panel +### Using the property panel -When a redaction annotation is selected, update properties such as overlay text, font, and fill color using the property panel. Changes are applied immediately in the viewer. +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. -The property panel can be accessed in multiple ways: +Access the panel by: -* By clicking the **redaction panel** icon available on the redaction toolbar. +* Clicking the **redaction panel** icon on the redaction toolbar. ![Redaction Property Panel Icon](redaction-annotations-images/redaction-property-panel-icon.png) -* Through the **context menu** by right-clicking (or long-pressing on mobile) the redaction annotation and selecting the Properties option. +* Using the **context menu** (right-click or long-press on mobile) and choosing Properties. ![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) @@ -49,42 +49,39 @@ The property panel can be accessed in multiple ways: Delete redaction annotations using any of the following: -* **Right-click and select Delete** from the context menu. +* Right-click and select Delete from the context menu. ![Context menu showing Delete for a redaction](redaction-annotations-images/redaction-delete-context-menu.png) -* **Click the Delete button** on the toolbar. +* Click the Delete button on the toolbar. ![Toolbar delete icon for redaction](redaction-annotations-images/redaction-delete-icon.png) -* **Press the Delete key** after selecting the annotation. +* Press the Delete key after selecting the annotation. ## Redact pages using the UI -Users can redact entire pages using the Redact Pages option from the redaction toolbar. Upon clicking the redact pages icon, a Mark Page Range popup appears with the following options: +Use the Redact Pages option on the redaction toolbar to mark whole pages. 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). -* **Specific Pages** – Allows the user to manually enter a list of specific page numbers to redact (e.g., 1, 3–5, 7). - -After selecting the desired range, selecting Save applies redaction marks to the selected pages. +After choosing a range, select Save to apply redaction marks to the selected pages. ![Page Redaction Panel](redaction-annotations-images/page-redaction-panel.png) ## Apply redaction from the toolbar -The redact button in the toolbar allows users to permanently apply all redaction annotations present in the document. +The redact button applies all redaction annotations in the document. -* The redact button is disabled when no redaction annotations exist in the document. -* The button automatically enables when redaction annotations are present. +* The button is disabled when no redaction annotations exist. +* It enables automatically when redaction annotations are present. ![Redact Button Icon](redaction-annotations-images/redact-button-icon.png) -A confirmation dialog appears before applying redaction to confirm that the process is permanent and irreversible. +A confirmation dialog appears before applying redactions to confirm the operation is permanent and irreversible. ![Apply Redaction Dialog](redaction-annotations-images/apply-redaction-dialog.png) 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 d80eddf779..8dde01fed7 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 @@ -7,7 +7,7 @@ control: SfPdfViewer documentation: ug --- -# Save PDF file to AWS S3 in Blazor SfPdfViewer +# Save PDF to AWS S3 in Blazor SfPdfViewer To save a PDF file to AWS S3, you can follow the steps below @@ -28,7 +28,7 @@ Start by following the steps provided in this [link](https://help.syncfusion.com @using Amazon.S3; @using Amazon.S3.Model; @using Syncfusion.Blazor.SfPdfViewer; -@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Buttons; ``` 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 bffa50e5da..49582dde70 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 @@ -7,9 +7,9 @@ control: SfPdfViewer documentation: ug --- -# Save PDF file to Azure Blob Storage in Blazor SfPdfViewer +# Save PDF to Azure Blob Storage in Blazor SfPdfViewer -To save a PDF file to Azure Blob Storage, follow the steps below. +Follow these steps to save a PDF from the SfPdfViewer to Azure Blob Storage. **Step 1:** Create the Azure Blob Storage account 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 3ae16a501d..24c219e08d 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 @@ -7,9 +7,9 @@ control: SfPdfViewer documentation: ug --- -# Save PDF file to Box cloud file storage in Blazor SfPdfViewer +# Save PDF to Box cloud storage in Blazor SfPdfViewer -To save a PDF file to Box cloud file storage, follow the steps below. +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 @@ -29,7 +29,7 @@ Create a basic Blazor Web App Server application that hosts the SfPdfViewer comp @using Box.V2.Config; @using Box.V2.Models; @using Syncfusion.Blazor.SfPdfViewer; -@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Buttons; ``` **Step 4:** Add the following code example to save a PDF to `Box cloud storage` 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 f56783e2ed..754a7eb117 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 @@ -7,9 +7,9 @@ control: SfPdfViewer documentation: ug --- -# Save PDF file to Google Cloud Storage in Blazor SfPdfViewer +# Save PDF to Google Cloud Storage in Blazor SfPdfViewer -To save a PDF file to Google Cloud Storage from the SfPdfViewer, follow the steps below. +Follow these steps to save a PDF from the SfPdfViewer to Google Cloud Storage (GCS). **Step 1** Create a service account @@ -27,7 +27,7 @@ Start by following the steps in this guide to create a [basic SfPdfViewer](https @using Google.Cloud.Storage.V1; @using Google.Apis.Auth.OAuth2; @using Syncfusion.Blazor.SfPdfViewer; -@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Buttons; ``` **Step 4:** Add the below code example to the Index.razor file to upload the currently loaded document to GCS. 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 99327b25d4..9065af0805 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 @@ -19,9 +19,9 @@ Create a project in Google Cloud Console and enable the Google Drive API. Obtain 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:** 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 Google.Apis.Drive.v3; @@ -30,7 +30,7 @@ Follow the [Getting Started](https://help.syncfusion.com/document-processing/pdf @using Google.Apis.Util.Store; @using System.Threading.Tasks; @using Syncfusion.Blazor.SfPdfViewer; -@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Buttons; ``` **Step 4:** Add the following example to save the downloaded PDF file to `Google Drive`. 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 217b6135b7..518f88d53a 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/saving-pdf-file.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/saving-pdf-file.md @@ -9,11 +9,11 @@ documentation: ug # Saving PDF file in Blazor SfPdfViewer Component -After editing a PDF with annotations and form fields, the updated document can be saved to a server, a database, or downloaded to the local file system. The examples below illustrate common approaches. +After editing a PDF with annotations or form fields, the updated document can be saved to a server, persisted to a database, or downloaded to the local file system. Examples below illustrate common approaches and recommended practices. ## 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 consider using 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 and use framework services (for example, `IWebHostEnvironment`) to resolve application paths. ```cshtml @using Syncfusion.Blazor.SfPdfViewer @@ -45,11 +45,11 @@ Use this approach to persist the modified PDF to a server-side folder. Ensure th } ``` -N> For production scenarios, prefer using using statements for stream disposal, handle I/O exceptions, and validate input. Avoid writing to wwwroot at runtime unless the behavior is intentional. +N> For production scenarios, prefer `using` statements for stream disposal, handle I/O exceptions, and validate input. Avoid writing files to `wwwroot` at runtime unless the behavior is intentional and secure. ## Save PDF file to Database -Use this method to update the PDF content stored in a relational database. This is useful when documents are managed centrally and retrieved by name or identifier. +Use this method to update PDF content stored in a relational database when documents are managed centrally and retrieved by name or identifier. ```cshtml @using Syncfusion.Blazor.SfPdfViewer @@ -89,11 +89,11 @@ Use this method to update the PDF content stored in a relational database. This } ``` -N> Use parameterized queries for all user or variable input to prevent SQL injection. Wrap database operations with error handling and transactions as appropriate for your data layer. +N> Use parameterized queries for all user or variable input to prevent SQL injection. Wrap database operations with error handling, transactions, and appropriate connection disposal patterns. ## 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) API. ```cshtml @@ -110,7 +110,7 @@ The SfPdfViewer includes a built-in toolbar button to download the loaded or mod ![Blazor SfPdfViewer with Download Option](../blazor-classic/images/blazor-pdfviewer-download-option.png) -Programmatic download can also be triggered from application UI, such as a button click. +Programmatic download can also be triggered from application UI, for example by calling `DownloadAsync()` from a button click handler. ```cshtml @@ -134,7 +134,7 @@ Programmatic download can also be triggered from application UI, such as a butto ``` -### Download Filename +### Download filename 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. @@ -165,7 +165,7 @@ The following example shows how to specify a custom file name. ### Download PDF file as a copy -Use the built-in toolbar option or 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 the updated PDF as a copy to the local file system. ```cshtml @using Syncfusion.Blazor.Buttons diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/text-search.md b/Document-Processing/PDF/PDF-Viewer/blazor/text-search.md index 2ad4153f97..b32acfe332 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/text-search.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/text-search.md @@ -27,7 +27,7 @@ Enable or disable the text search UI using the [EnableTextSearch](https://help.s ``` -Text search can also be performed programmatically using the following APIs: [SearchTextAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SearchTextAsync_System_String_System_Boolean_), [SearchNextAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SearchNextAsync), [SearchPreviousAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SearchPreviousAsync), and [CancelTextSearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_CancelTextSearchAsync). +Text search can also be performed programmatically using the following APIs: [SearchTextAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SearchTextAsync_System_String_System_Boolean_), [SearchNextAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SearchNextAsync), [SearchPreviousAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SearchPreviousAsync), and [CancelTextSearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_CancelTextSearchAsync). These APIs enable programmatic control of search initiation, navigation, and cancellation. ```cshtml @@ -83,7 +83,7 @@ Text search can also be performed programmatically using the following APIs: [Se ## 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 current and other occurrences; adjust these to align with application theme requirements. +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. ```cshtml @@ -101,25 +101,25 @@ Use the [PdfViewerTextSearchColorSettings](https://help.syncfusion.com/cr/blazor ![Blazor SfPdfViewer text search highlight color customization](./images/blazor-pdfviewer-text-search-settings.png) -## Text Search Events +## Text search events -The following events are available for text search in the SfPdfViewer component. +The following events are available for text search in the `SfPdfViewer` component. |Name|Description| |---|---| -|OnTextSearchStart|Triggers when a text search starts.| -|OnTextSearchComplete|Triggers when a text search is completed.| -|OnTextSearchHighlight|Triggers when searched text is highlighted.| +|OnTextSearchStart|Triggers when a text search begins.| +|OnTextSearchComplete|Triggers when a text search completes.| +|OnTextSearchHighlight|Triggers when search results are highlighted.| -### OnTextSearchStart Event +### OnTextSearchStart event -The [OnTextSearchStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchStart) event triggers when the text search is started. +The [OnTextSearchStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchStart) event triggers when a text search begins. -#### Event Arguments +#### Event arguments -See [TextSearchStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSearchStartEventArgs.html) for details such as matchcase, search text. +See [TextSearchStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSearchStartEventArgs.html) for details such as `SearchText` and `MatchCase`. -The following example illustrates how to handle the TextSearchStart event. +The following example illustrates how to handle the `OnTextSearchStart` event. ```cshtml @@ -137,15 +137,15 @@ The following example illustrates how to handle the TextSearchStart event. ``` -### OnTextSearchComplete Event +### OnTextSearchComplete event -The [OnTextSearchComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchComplete) event triggers when the text search is completed. +The [OnTextSearchComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchComplete) event triggers when a text search completes. -#### Event Arguments +#### Event arguments -[TextSearchCompleteEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSearchCompleteEventArgs.html) triggers when the text search is completed. +See [TextSearchCompleteEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSearchCompleteEventArgs.html) for details such as total match counts and summary information. -The following example illustrates how to handle the TextSearchComplete event. +The following example illustrates how to handle the `OnTextSearchComplete` event. ```cshtml @@ -163,15 +163,15 @@ The following example illustrates how to handle the TextSearchComplete event. ``` -### OnTextSearchHighlight Event +### OnTextSearchHighlight event -The [OnTextSearchHighlight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchHighlight) event triggers when the text search text is highlighted. +The [OnTextSearchHighlight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnTextSearchHighlight) event triggers when search results are highlighted on the page. -#### Event Arguments +#### Event arguments -[TextSearchHighlightEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSearchHighlightEventArgs.html) for details such as bounds, pagenumber of the highlighted text. +See [TextSearchHighlightEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextSearchHighlightEventArgs.html) for details such as highlight bounds and `PageNumber`. -The following example illustrates how to handle the TextSearchHighlight event. +The following example illustrates how to handle the `OnTextSearchHighlight` event. ```cshtml diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization-overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization-overview.md index 22b0ecb13b..5a20bb9a7c 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization-overview.md @@ -9,9 +9,9 @@ documentation: ug # Toolbar in Blazor SfPdfViewer Component -The SfPdfViewer includes a built-in, responsive toolbar that surfaces common PDF actions and provides entry points to feature-specific toolbars. It adapts across desktop, tablet, and mobile, and can be customized to show or hide items, reorder commands, add custom items, and handle toolbar events. +The `SfPdfViewer` provides a built-in, responsive toolbar that surfaces common PDF actions and exposes feature-specific toolbars. The toolbar adapts to desktop, tablet, and mobile layouts and supports customization to show or hide items, reorder commands, add custom items, and handle toolbar events. -There are four toolbars in the SfPdfViewer: +There are four toolbar groups in `SfPdfViewer`: * Primary toolbar * Annotation toolbar * Form designer toolbar @@ -19,11 +19,11 @@ There are four toolbars in the SfPdfViewer: ## Primary Toolbar in Blazor SfPdfViewer Component -The SfPdfViewer includes a built-in, responsive primary toolbar that provides quick access to common viewer actions and feature-specific toolbars. It adapts to the available width for desktop, tablet, and mobile layouts. +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 includes the following options: +Primary toolbar options include: -* Open PDF file +* Open file * Page navigation * Magnification * Pan tool @@ -42,29 +42,33 @@ The primary toolbar includes the following options: ![Blazor PDF Viewer primary toolbar with customized items](../blazor-classic/images/blazor-pdfviewer-custom-toolbar.png) -* [Get more info about primary toolbar customization](./toolbar-customization/primary-toolbar) +See [Primary toolbar customization](./toolbar-customization/primary-toolbar) for configuration options and examples. ## Annotation toolbar in Blazor SfPdfViewer Component -The Annotation toolbar appears below the primary toolbar when annotation features are enabled. It provides tools to create and edit annotations. +The annotation toolbar appears below the primary toolbar when annotation features are enabled. It provides tools to create and edit annotations. + +Annotation toolbar options include: * Text markup: Highlight, Underline, Strikethrough, Squiggly * Shapes: Line, Arrow, Rectangle, Circle, Polygon * Measurement: Distance, Perimeter, Area, Radius, Volume * Freehand: Ink, Signature * Text: Free text -* Stamp: Predefined and custom stamps +* Stamp: Built-in and custom stamps * Properties: Color, opacity, thickness, font * Edit helpers: Comments panel, Delete * Close ![Blazor PDF Viewer annotation toolbar](./images/blazor-annotation-toolbar.png) -* [Get more info about annotation toolbar customization](./toolbar-customization/annotation-toolbar) +See [Annotation toolbar customization](./toolbar-customization/annotation-toolbar) for configuration and examples. ## Form Designer toolbar in Blazor SfPdfViewer Component -Use the Form Designer toolbar to add and configure interactive form fields in the PDF. It appears below the primary toolbar when form designer is enabled. +The form designer toolbar appears when form designer mode is enabled and provides tools to add and configure interactive form fields. + +Form designer toolbar options include: * Field types: Button, Text box, Password, Checkbox, Radio button, Drop-down, List box, Signature, Initial * Edit helpers: Delete @@ -72,11 +76,13 @@ Use the Form Designer toolbar to add and configure interactive form fields in th ![Blazor PDF Viewer form designer toolbar](./images/blazor-form-deigner-toolbar.png) -* [Get more info about form designer toolbar customization](./toolbar-customization/form-designer-toolbar) +See [Form designer toolbar customization](./toolbar-customization/form-designer-toolbar) for configuration details. ## Redaction toolbar in Blazor SfPdfViewer Component -The Redaction toolbar provides tools to mark and permanently remove sensitive content from the document. It appears below the primary toolbar when redaction is enabled. +The redaction toolbar provides tools to mark and permanently remove sensitive content. It appears below the primary toolbar when redaction is enabled. + +Redaction toolbar options include: * Redaction marks: Mark for redaction, Redact page * Apply redactions: Permanently remove marked content @@ -86,7 +92,7 @@ The Redaction toolbar provides tools to mark and permanently remove sensitive co ![Blazor PDF Viewer redaction toolbar](./images/blazor-redaction-toolbar.png) -* [Get more info about redaction toolbar customization](./toolbar-customization/redaction-toolbar) +See [Redaction toolbar customization](./toolbar-customization/redaction-toolbar) for configuration and examples. ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/annotation-toolbar.md index 94554e3e31..01db85cbc0 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/annotation-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/annotation-toolbar.md @@ -9,15 +9,13 @@ documentation: ug # Annotation toolbar customization -The annotation toolbar can be customized by showing or hiding default items and by controlling the order in which the items appear. +Customize which tools appear in the annotation toolbar, control their order, and toggle toolbar visibility programmatically. ## Show or hide the annotation toolbar -Show or hide the annotation toolbar programmatically during initialization or at runtime. +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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ShowAnnotationToolbar_System_Boolean_) method. -Use the [EnableAnnotationToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableAnnotationToolbar) property or the [ShowAnnotationToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ShowAnnotationToolbar_System_Boolean_) method to toggle visibility. - -The following code snippet explains how to show or hide the annotation toolbar using the ShowAnnotationToolbar method. +Example: show the annotation toolbar when a document loads. ```cshtml @@ -46,15 +44,13 @@ The following code snippet explains how to show or hide the annotation toolbar u ``` [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Annotation%20Toolbar/Show%20or%20hide%20on%20loading). -## How to customize the annotation toolbar - -Choose which tools appear and control their order in the annotation toolbar. +## Customize annotation toolbar items -Use [PdfViewerToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html) with the [AnnotationToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_AnnotationToolbarItems) property to choose which tools are displayed in the annotation toolbar. The property accepts a list of [AnnotationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationToolbarItem.html) values. Only the items included in this list are shown; any item not listed is hidden. The rendered order follows the sequence of items in the list. +Use [PdfViewerToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html) to specify which annotation tools are shown and their order. The property accepts a list of [AnnotationToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_AnnotationToolbarItems) values; only listed items are rendered, and the displayed order follows the list sequence. -The annotation toolbar is presented when entering annotation mode in SfPdfViewer2 and adapts responsively based on the available width. Include the Close tool to allow users to exit the annotation toolbar when needed. +Include the Close tool so users can exit the annotation toolbar when needed. The annotation toolbar appears when entering annotation mode in `SfPdfViewer2` and adapts responsively to available width. -The following example demonstrates how to customize the annotation toolbar by specifying a selected set of tools using `AnnotationToolbarItem`. +Example: configure a custom set of annotation tools. ```cshtml @@ -98,6 +94,7 @@ Refer to the image below for the mobile view (responsive layout adapts to width) [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/CustomAnnotationToolbar.razor) N> 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> This change reduces clutter and shows options only when they’re relevant to the selected annotation. ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/form-designer-toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/form-designer-toolbar.md index f0606cb6ae..637a0e4c1b 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/form-designer-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/form-designer-toolbar.md @@ -9,15 +9,13 @@ documentation: ug # Form designer toolbar customization -The form designer toolbar can be customized by showing or hiding default items and by controlling the order in which the items appear. +Customize which tools appear in the form designer toolbar, control their order, and toggle visibility programmatically. ## Show or hide the form designer toolbar -Show or hide the form designer toolbar programmatically. +Toggle the form designer toolbar using the [EnableFormDesigner](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableFormDesigner) property. -Use the [EnableFormDesigner](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableFormDesigner) property to toggle visibility. - -The following code snippet explains how to show or hide the toolbar using the EnableFormDesigner property. +Example: disable the form designer toolbar. ```cshtml @@ -28,13 +26,11 @@ The following code snippet explains how to show or hide the toolbar using the En ``` -## How to customize the form designer toolbar - -Choose which tools appear and control their order in the form designer toolbar. +## Customize form designer toolbar items -The [PdfViewerToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html) component in [SfPdfViewer2](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) customizes which form design tools are available. The [FormDesignerToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_FormDesignerToolbarItems) property accepts a list of [FormDesignerToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormDesignerToolbarItem.html) values. The items you include are both displayed and rendered in the order listed; any items you omit are hidden. This provides a streamlined, user-friendly form design experience across devices. +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 [FormDesignerToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_FormDesignerToolbarItems) values; only listed items are rendered, and the displayed order follows the list sequence. -The following example demonstrates how to customize the form designer toolbar by configuring specific tools using `FormDesignerToolbarItem`. +Example: configure a custom set of form designer tools. ```cshtml diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/mobile-toolbar.md index 1229b044f0..1f7f8af742 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/mobile-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/mobile-toolbar.md @@ -26,11 +26,10 @@ The primary toolbar includes the following options: Reorder the [MobileToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_MobileToolbarItems) list to control the display order. The toolbar renders items in the order they appear in the collection. -Use the following code snippet to add the redaction toolbar to the PDF Viewer. +Example: add the redaction toolbar to the viewer. ```cshtml - -@page "/"; +@page "/" diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/primary-toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/primary-toolbar.md index 69d81f141a..f0c174f0c0 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/primary-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/primary-toolbar.md @@ -392,7 +392,7 @@ Customize the appearance of toolbar icons for custom toolbar items. The followin } .e-icons.e-save::before { - content: '\e7a8' + content: '\e7a8'; } From 555b1915af84fc26ee44e25bd1ffac90d97dd19c Mon Sep 17 00:00:00 2001 From: Tamilselvan Durairaj Date: Thu, 12 Feb 2026 11:12:57 +0530 Subject: [PATCH 2/5] 1009185: Resolved the CI failures --- .../blazor/faqs/how-to-deploy-maui-using-android-emulator.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md index b5e594bd18..706fdd5c69 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md @@ -77,7 +77,7 @@ N> For emulator issues, see Troubleshooting Android Emulator: https://learn.micr ![Blazor SfPdfViewer rendering in the Android emulator](../getting-started/gettingstarted-images/emulator.png) -N> [View sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/MAUI%20Blazor%20App/MauiBlazorAndroid). +N> [View sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20.NET%20MAUI/MauiBlazorAndroid). ## See also From 64cb49a457f5cd8ab21cc3ff33d5109df812213a Mon Sep 17 00:00:00 2001 From: Tamilselvan Durairaj Date: Thu, 12 Feb 2026 15:17:34 +0530 Subject: [PATCH 3/5] 1009185: Addressed the review changes --- .../PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md index 0d22f9b88c..dbb2079daf 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md @@ -51,7 +51,7 @@ When entering stamp mode while in Pan mode, the viewer switches to Text Select m * In the file explorer dialog, choose an image to add as a stamp on the PDF page. ->**Note:** Only JPEG (JPG/JPEG) image formats are supported for custom stamp annotations. +N> Only JPEG (JPG/JPEG) image formats are supported for custom stamp annotations. ## Setting default properties during control initialization @@ -243,7 +243,7 @@ This code adds a stamp annotation to the first page of the PDF document. Note th [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Programmatic%20Support/Stamp/Add). ->**Note:** To add a custom stamp annotation programmatically, set the annotation type to [Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationType.html#Syncfusion_Blazor_SfPdfViewer_AnnotationType_Image) and provide the custom image data using the [CustomStampSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfAnnotation.html#Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_CustomStampSource) API. Then call [AddAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) to add the annotation. +N> To add a custom stamp annotation programmatically, set the annotation type to [Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationType.html#Syncfusion_Blazor_SfPdfViewer_AnnotationType_Image) and provide the custom image data using the [CustomStampSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfAnnotation.html#Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_CustomStampSource) API. Then call [AddAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) to add the annotation. ## Edit stamp annotation programmatically From 4ac2f1fb8a85eff2f635386b75a77f22994cf57c Mon Sep 17 00:00:00 2001 From: Tamilselvan Durairaj Date: Thu, 12 Feb 2026 15:19:14 +0530 Subject: [PATCH 4/5] 1009185: Addressed the reviewed changes --- .../PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md index dbb2079daf..2486b7133d 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md @@ -308,10 +308,4 @@ The PDF Viewer supports smooth rotation for Custom stamps and customized templat ## See also -* [How to delete the annotation programmatically](./text-markup-annotation#delete-annotation-programmatically) - -**Best practices** - -- Prefer JPEG images under a reasonable size to minimize load times for custom stamps. -- When adding stamps programmatically, validate image data and use streams to reduce memory usage for large images. -- Provide clear stamp names and use sufficient contrast for accessibility when stamping documents. \ No newline at end of file +* [How to delete the annotation programmatically](./text-markup-annotation#delete-annotation-programmatically) \ No newline at end of file From d8ffd1c438981611d38cb44962b06466a26e64d0 Mon Sep 17 00:00:00 2001 From: Tamilselvan Durairaj Date: Thu, 12 Feb 2026 15:20:41 +0530 Subject: [PATCH 5/5] 1009185: Removed the unwanted changes --- .../PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md index 2486b7133d..df7e2357ab 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md @@ -18,12 +18,6 @@ The SfPdfViewer component provides options to add, edit, delete, and rotate the ![Stamp annotations displayed in the Blazor SfPdfViewer](../images/blazor-pdfviewer-stamp-annotation.png) -## Prerequisites - -- Install and reference the `Syncfusion.Blazor.SfPdfViewer` package. -- Register the PDF Viewer services and include the viewer's scripts and styles in your app. -- Ensure images used for custom stamps are accessible to the hosting environment. - ## Adding stamp annotations to the PDF document Stamp annotations can be added using the annotation toolbar.