diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Localization/default-language.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Localization/default-language.md index 6f687afb3..a20b27f87 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Localization/default-language.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Localization/default-language.md @@ -8,12 +8,14 @@ documentation: ug domainurl: ##DomainURL## --- -# Localization support in JavaScript PDF Viewer +# Localization in the JavaScript PDF Viewer -The PDF Viewer fully supports localization, allowing all UI text, tooltips, and messages to be replaced with culture-specific strings so the interface matches users’ language and regional settings. +The PDF Viewer supports localization of UI text, tooltips, and messages using culture-specific string collections so the interface matches users' language and regional settings. ![Default Locale](../../javascript-es6/images/locale-us.gif) +N> Change the viewer locale by setting the `locale` property in the viewer options during initialization or by assigning `pdfviewer.locale` before rendering. + ## Default language (en-US) By default, the PDF Viewer uses the en-US culture and requires no additional configuration. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Localization/new-language.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Localization/new-language.md index 88ec41fb1..4ad83d8dc 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Localization/new-language.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Localization/new-language.md @@ -8,15 +8,15 @@ documentation: ug domainurl: ##DomainURL## --- -# Set a new language (localization) in JavaScript +# Set a new language in the JavaScript PDF Viewer -You can localize the PDF Viewer UI by: -- Registering localized strings for each culture using `L10n.load` at the application level -- Setting the `locale` property of the `PdfViewer` instance to the desired culture +Localize the PDF Viewer UI by: +- Registering culture-specific strings with `L10n.load` at the application level +- Setting the `locale` property on the `PdfViewer` instance to the desired culture ![German Locale](../../javascript-es6/images/locale-de.gif) -## Example Code-snippet to change language using Locale +## Example: change language using `locale` and `L10n.load` {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -308,7 +308,7 @@ ej.pdfviewer.PdfViewer.Inject( {% endhighlight %} {% endtabs %} -N> You can find a comprehensive list of localization files/strings here: [GitHub Locale](https://github.com/syncfusion/ej2-locale). Provide only the keys you want to override, missing keys fall back to defaults. +N> A comprehensive list of localization files and default strings is available on GitHub: [GitHub Locale](https://github.com/syncfusion/ej2-locale). Provide only the keys that require overrides; missing keys fall back to the default `en-US` values. ## See Also diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Localization/rtl-language-support.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Localization/rtl-language-support.md index c71526109..8173a703b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Localization/rtl-language-support.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Localization/rtl-language-support.md @@ -8,20 +8,19 @@ documentation: ug domainurl: ##DomainURL## --- -# RTL Language Support in JavaScript PDF Viewer -RTL support in JavaScript PDF Viewer: +# RTL language support in JavaScript PDF Viewer -- PDF Viewer component supports right-to-left layouts. -- For RTL languages (Arabic, Hebrew, Persian), enable the [`enableRtl`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enablertl) property. -- Load culture-specific strings globally using `L10n.load`. -- Set the PdfViewer [`locale`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#locale) property to the target culture. +Use RTL support to render the viewer interface for right-to-left languages. +- Enable `enableRtl` to apply right-to-left layout. +- Load culture-specific strings globally with `L10n.load`. +- Set the `locale` property on the `PdfViewer` instance to the target culture. ![Arabic Localization](../../javascript-es6/images/locale-ar.gif) -## Example Code-snippet to Enable RTL with Arabic Localization +## Example: enable RTL and provide Arabic localization -Use the below code-snippet to enable RTL for RTL Languages(Arabic, Hebrew, Persian) +Use the example below to enable RTL for languages such as Arabic, Hebrew, and Persian. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -306,7 +305,8 @@ ej.pdfviewer.PdfViewer.Inject( {% endhighlight %} {% endtabs %} -N> You can find a comprehensive list of localization files/strings here: [GitHub Locale](https://github.com/syncfusion/ej2-locale). Provide only the keys you want to override, missing keys fall back to defaults. + +N> A comprehensive list of localization files and default strings is available on GitHub: [GitHub Locale](https://github.com/syncfusion/ej2-locale). Provide only keys that require overrides; missing keys fall back to the default `en-US` values. [View Sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/mobile-view.md index b0ca355da..3feae31c4 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/mobile-view.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/mobile-view.md @@ -9,11 +9,11 @@ documentation: ug # Redaction in Mobile View in JavaScript (ES5) PdfViewer Component -The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the JavaScript (ES5) PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices. +The Redaction Tool enables permanent marking and removal of sensitive content from PDF documents in mobile view using the JavaScript (ES5) PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices. ![Redaction in Mobile View](./redaction-annotations-images/redaction-mobile-view.png) -N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens. +N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. The mobile layout activates automatically on small screens. ## Adding Redaction in Mobile View @@ -52,11 +52,10 @@ When you enter redaction mode in mobile view, a specialized redaction toolbar ap ### Redaction Annotation Tool -The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content: +The Redaction Annotation tool is the primary redaction feature that allows you to drawing redaction rectangles on specific content: Function: Creates visual redaction annotations that mark content for permanent removal -Usage: -Touch and drag to draw rectangular redaction overlays on any content area. +Usage: Touch and drag to draw rectangular redaction overlays on any content area. Process: - Selected content appears with a customizable overlay (default black) @@ -72,7 +71,7 @@ The Page Redaction tool enables batch redaction of entire pages based on specifi ![Page Redaction Tool](./redaction-annotations-images/page-redaction-annot.png) Function: Redacts complete pages or page ranges with a single action -Options Available: +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) @@ -90,7 +89,7 @@ The Redaction Properties tool allows customization of redaction appearance befor ![Redaction Properties Mobile View](./redaction-annotations-images/redaction-properties-annot.png) Function: Customize the visual appearance of redaction overlays and text replacement -Customizable Properties: +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") diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/overview.md index 251095a98..0764c9bb1 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/overview.md @@ -1,7 +1,7 @@ --- layout: post title: Redaction annotation in Javascript PDF Viewer | Syncfusion -description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion JavaScript PDF Viewer. +description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion JavaScript(ES5) PDF Viewer. platform: document-processing control: PDF Viewer documentation: ug @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Redaction in JavaScript (ES5) PdfViewer -Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion JavaScript PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. +Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion JavaScript PDF Viewer (EJ2) enables marking regions or entire pages for redaction, customizing appearance, and permanently applying redaction them with a single action. ## Enable the redaction toolbar @@ -45,49 +45,47 @@ ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearc pdfviewer.appendTo('#PdfViewer'); ``` -N> Prerequisites: Add the PdfViewer control to your JavaScript application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. +N> Add the PdfViewer control to the JavaScript application and ensure the redaction feature is included in the installed package version. Once applied, redaction permanently removes the selected content. ![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) ## Add Redaction Annotations -You can mark specific content for redaction using the toolbar or through code. +Mark specific content for redaction using the toolbar or programmatically. -Select the **Redaction tool** and draw over the text or graphics you want to hide. You can also add overlay text (such as “Confidential”) and adjust the style — fill color, border color, and opacity. +Select the **Redaction tool** and draw over text or graphics to hide. Optionally add overlay text (for example, “Confidential”) and adjust style properties: fill color, border color, and opacity. ![Drawing a redaction region over page content](redaction-annotations-images/adding-redaction-annotation.png) ## Delete Redaction Annotations -Redaction annotations can be removed easily: +Remove redaction annotations using the toolbar or keyboard shortcuts: -- Click the **Delete** button on the toolbar, or +- Click the **Delete** button on the toolbar, or - Select the annotation and press the **Delete** key. ![Toolbar showing the Delete command for redaction](redaction-annotations-images/redaction-delete-icon.png) ## Redact Entire Pages -The viewer allows you to redact whole pages that contain sensitive information. You can choose specific pages, page ranges, or redact all pages using the built‑in dialog, or perform the same action programmatically. +The viewer supports redacting entire pages that contain sensitive information. Use the built-in dialog to select specific pages, page ranges, or all pages, or invoke the same behavior programmatically. ![Toolbar showing the Redact Page option](redaction-annotations-images/redact-page-icon.png) ## Apply Redaction -Once annotations are added, you can permanently apply them to the document. This action cannot be undone. +After adding redaction annotations, permanently apply them to the document using the **Apply Redaction** toolbar button or the corresponding API method. -Use the **Apply Redaction** button on the toolbar or call the API method: - -- The button is disabled until at least one redaction annotation exists. -- It becomes active when redaction annotations are present. +- The **Apply Redaction** button remains disabled until at least one redaction annotation exists. +- The button becomes enabled when redaction annotations are present. ![Toolbar showing the Apply Redaction button](redaction-annotations-images/redact-button-icon.png) -A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. +A confirmation dialog appears before applying redaction to ensure acknowledgment of the irreversible action. ![Confirmation dialog for applying redaction](redaction-annotations-images/apply-redaction-dialog.png) -N> After redaction is applied, the original content cannot be recovered. +N> Applying redaction is irreversible. Once applied, the original content cannot be recovered. ## Comment Support diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/programmatic-support.md index 88b5c9196..e67255cd6 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/programmatic-support.md @@ -9,7 +9,7 @@ documentation: ug # Programmatic support for redaction in JavaScript (ES5) PdfViewer -The Syncfusion JavaScript PDF Viewer (EJ2) provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. +The Syncfusion JavaScript `PdfViewer` control provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. ## Enable the redaction toolbar @@ -78,7 +78,7 @@ viewer.annotationAdd = (args) => { ## Delete redaction annotations programmatically -Redaction annotations can be removed using the `deleteAnnotationById` event or by selecting and deleting them through code. +Redaction annotations can be removed using the `deleteAnnotationById` method or by selecting and deleting them through code. ```html @@ -152,7 +152,7 @@ document.getElementById('redact').addEventListener('click', () => { }); ``` -N> Applying redaction is irreversible. Once applied, the original content cannot be recovered. +N> Applying redaction is irreversible. Before calling `redact()`, save or export a backup copy of the document; the original content cannot be recovered. ## Configure default redaction annotation properties @@ -178,7 +178,7 @@ viewer.redactionSettings= { The redaction property panel allows users to update annotation properties through the UI. Programmatically, you can invoke the property panel by selecting an annotation and calling the relevant APIs. Properties such as overlay text, font style, and fill color can be updated directly in the panel. -![Redaction Property Panel](../redaction/redaction-annotations-images/redaction-property-panel-icon.png) +![Redaction property panel showing overlay text and color options](../redaction/redaction-annotations-images/redaction-property-panel-icon.png) ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/search-redact.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/search-redact.md index 3e5e867c3..3c30ff05b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/search-redact.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/search-redact.md @@ -8,19 +8,17 @@ documentation: ug domainurl: ##DomainURL## --- -# Search text and redact in JavaScript (ES5) PdfViewer +# Search text and redact in JavaScript (ES5) PDF Viewer -You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the extractTextCompleted event, triggers text extraction, performs a search, and places redaction annotations for every result. +You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the `extractTextCompleted` event, triggers text extraction, performs a search, and places redaction annotations for every result. -N> Prerequisites: Add the PdfViewer control to your JavaScript application and ensure a document is loaded. Make sure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. +N> Prerequisites: Add the PDF Viewer control to your JavaScript application and ensure a document is loaded. Confirm the redaction feature is available in the viewer version in use and that text extraction is enabled (`isExtractText: true`). Redaction is permanent once applied. -## Steps to add Redaction annotations on search Text Bounds +## Steps to add redaction annotations on search text bounds -**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-ES5/getting-started) to create a simple PDF Viewer sample. - - -**Step 2:** Use the following code-snippets to Add Redaction annotation on Search Text Bounds. +**Step 1:** Follow the steps in [PDF Viewer - Getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-ES5/getting-started) to create a simple PDF Viewer sample. +**Step 2:** Use the following code-snippets to add Redaction annotation on search text bounds. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/toolbar.md index 3fc4887cb..8cd5f5a08 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/toolbar.md @@ -9,11 +9,11 @@ documentation: ug # Redaction toolbar customization in JavaScript -The redaction toolbar in the Syncfusion JavaScript (ES5/JavaScript) PDF Viewer can be customized by rearranging existing items, hiding default items, or adding new ones. You can also place custom items at specific index positions among the existing toolbar items. +The redaction toolbar in the Syncfusion JavaScript PDF Viewer can be customized by rearranging items, hiding default items, or adding custom items. Custom items can be inserted at specific index positions within the existing toolbar. ## Enable the redaction toolbar -To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the `RedactionEditTool`. The following example shows how to enable the redaction toolbar: @@ -50,17 +50,17 @@ Refer to the following image for the toolbar view: ## Show or hide the redaction toolbar -You can toggle the redaction toolbar either using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method. +The redaction toolbar can be toggled using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method. ### Display the redaction toolbar using the toolbar icon -When **RedactionEditTool** is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar. +When `RedactionEditTool` is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar. ![Show redaction toolbar from the primary toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) ### Display the redaction toolbar programmatically -You can also control visibility through code by calling `viewer.toolbar.showRedactionToolbar(true/false)`. +Programmatic control is available via the viewer instance. For example, call `this.pdfViewer.toolbar.showRedactionToolbar(true)` to display the redaction toolbar, or `this.pdfViewer.toolbar.showRedactionToolbar(false)` to hide it. The following example demonstrates toggling the redaction toolbar programmatically: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/ui-interaction.md index d4ca4bf74..0d250a624 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/ui-interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/ui-interaction.md @@ -7,7 +7,7 @@ control: PDF Viewer documentation: ug --- -# Redaction UI interactions in JavaScript (ES5) PdfViewer +# Redaction UI interactions in JavaScript (ES5) PDF Viewer ## Add redaction annotations from the toolbar @@ -27,21 +27,21 @@ N> The redaction tool is hidden by default. Customize the toolbar to include it. ## Add redaction annotations using the context menu -In addition to the toolbar, you can add redaction annotations directly from the context menu. Select the text or region, right‑click (or long‑press on mobile), and choose the **Redact Annotation** option. This creates a redaction mark over the selected content. +In addition to the toolbar, redaction annotations can be added directly from the context menu. To add from the context menu, select the text or region, right‑click (or long‑press on mobile), and choose the **Redact Annotation** option. This creates a redaction mark over the selected content. ![Context menu showing Redact Annotation option](redaction-annotations-images/redact-text-context-menu.png) ## Update redaction properties -After adding a redaction annotation, you can update its properties through the property panel or programmatically. +After adding a redaction annotation, properties can be updated through the property panel or programmatically. ### Update using the property panel -When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) allows customization of text and styling. Changes are reflected instantly on the redaction mark. The property panel can be opened in two ways: -* By clicking the **redaction property panel** icon in the toolbar. +* By clicking the **Redaction property panel** icon in the toolbar. ![Redaction Property Panel Icon](redaction-annotations-images/redaction-property-panel-icon.png) * By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. @@ -62,7 +62,7 @@ Use the General tab to define how the content will look after redaction. These s ![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) -Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. +N> Hovering over a redaction annotation shows a preview of the final look. After Apply Redaction is selected, these settings are flattened into the page and cannot be edited. Tip: Select Save in the dialog to persist changes. #### Appearance tab @@ -78,12 +78,12 @@ Note: The Appearance tab affects only the temporary annotation. The final look a ### What changes after applying redaction? -When you click Apply Redaction: +When Apply Redaction is selected: * The selected content is permanently removed from the page. * The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. * If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. -* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. +* All properties become read‑only. Overlay text, fill color, outline, and opacity cannot be edited after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before applying. ## Delete redaction annotations @@ -108,7 +108,7 @@ Entire pages can be marked for redaction using the **Redact Pages** option in th * **Even Pages Only** – Redacts all even‑numbered pages. * **Specific Pages** – Enter page numbers or ranges (e.g., 1, 3–5, 7) to redact. -After choosing the range, click **Save** to apply redaction marks to the selected pages. +After choosing the range, select **Save** to apply redaction marks to the selected pages. ![Page Redaction Panel](redaction-annotations-images/page-redaction-panel.png) @@ -121,7 +121,7 @@ The **Apply Redaction** button permanently removes all marked content from the d ![Redact Button Icon](redaction-annotations-images/redact-button-icon.png) -A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. +A confirmation dialog appears before applying redaction to ensure acknowledgment of the irreversible nature of the process. ![Apply Redaction Dialog](redaction-annotations-images/apply-redaction-dialog.png) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/accessibility.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/accessibility.md index acec186ae..890ad57d5 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/accessibility.md @@ -10,9 +10,7 @@ domainurl: ##DomainURL## # Accessibility in Syncfusion JavaScript ES5 PDF Viewer components -The PDF Viewer component follows established accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. - -The accessibility compliance for the PDF Viewer component is summarized below. +The PDF Viewer complies with widely adopted accessibility standards and guidance, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and WAI-ARIA roles. The following table summarizes the component's accessibility coverage. | Accessibility Criteria | Compatibility | | -- | -- | @@ -42,7 +40,7 @@ Note: Mobile device support is marked as partial due to platform-level constrain ## WAI-ARIA attributes -[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase 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 PDF Viewer component: +[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessible Rich Internet Applications) provides semantics that improve the accessibility of dynamic web content. The following ARIA attributes are used by the PDF Viewer to expose roles, states, and relationships to assistive technologies: | Attributes | Purpose | | --- | --- | @@ -62,7 +60,7 @@ Note: Mobile device support is marked as partial due to platform-level constrain ## Keyboard interaction -The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the PDF Viewer component. +The PDF Viewer follows WAI-ARIA [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) recommendations to support users who rely on keyboard navigation and assistive technologies. The following keyboard shortcuts are supported. | **Press (Windows)** |**Press (Macintosh)** | **To do this** | | --- | --- | --- | diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-event.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-event.md index 0a732025b..fc1f3ff1b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-event.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-event.md @@ -7,9 +7,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Annotations Events in JavaScript Pdf viewer control +# Annotation events in JavaScript PDF Viewer -The PDF Viewer component triggers various events based on user interactions and changes in the component's state. These events can be used to perform actions when a specific event occurs. This section describes the events available in the PDF Viewer component. +This page documents annotation-related events for the JavaScript PDF Viewer and when to use them. The PDF Viewer triggers events for user interactions and component state changes; use these events to run handlers that respond to specific occurrences. The sections below list each event, the associated event-args type, and an example handler. | Event | Description | | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------- | diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-permission.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-permission.md index 86e3b1cc9..cfec1cb86 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-permission.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-permission.md @@ -10,13 +10,15 @@ domainurl: ##DomainURL## # Annotation permissions in JavaScript PDF Viewer -Use [annotationSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#annotationsettings) to control creation-time permissions and behavior of annotations in the PDF Viewer. +Use [annotationSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#annotationsettings) to control creation-time permissions and default behavior for annotations in the PDF Viewer. These settings establish defaults for annotations created through the UI and programmatic flows. ## Common permissions -- isLock: Locks the annotation so it cannot be moved, resized, edited, or deleted. -- skipPrint: Excludes annotations from the print output when the document is printed from the viewer. -- skipDownload: Excludes annotations from the exported/downloaded document. +- `isLock`: Lock an annotation so it cannot be moved, resized, edited, or deleted. +- `skipPrint`: Exclude annotations from the print output when printing from the viewer. +- `skipDownload`: Exclude annotations from the exported/downloaded PDF. + +Example: inject modules and create a viewer instance with default `annotationSettings`. ```js // Ensure you have included the required EJ2 PDF Viewer scripts and styles via CDN before this script @@ -61,8 +63,10 @@ viewer.appendTo('#pdfViewer'); ## Individual permissions -- isPrint: Controls whether a specific annotation participates in printing. Set to false to prevent just that annotation from printing. -- isLock: You can also lock/unlock a specific annotation instance programmatically. +- `isPrint`: Controls whether a specific annotation participates in printing. Set to `false` to exclude only that annotation from print output. +- `isLock`: Lock or unlock a specific annotation instance programmatically. + +Example: create a viewer instance with per-annotation defaults for text markup, shapes, and measurements. ```js // Ensure you have included the required EJ2 PDF Viewer scripts and styles via CDN before this script diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/Squiggly-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/Squiggly-annotation.md index 43ba1a4f5..25b6ced6f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/Squiggly-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/Squiggly-annotation.md @@ -27,18 +27,18 @@ You can add squiggly annotations in two ways: ![Squiggly context](../../../javascript-es6/annotations/annotation-images/squiggle-context.gif) 2. Using the annotation toolbar -* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. -* Select **Squiggly** to enable squiggly mode. -* Select text to add the squiggly annotation. -* Alternatively, select text first and then click **Squiggly**. +- Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. +- Select **Squiggly** to enable squiggly mode. +- Select text to add a squiggly annotation. +- Alternatively, select text first and then click **Squiggly**. ![Squiggly toolbar](../../../javascript-es6/annotations/annotation-images/squiggle-tool.gif) N> When in pan mode, selecting a text markup annotation switches the PDF Viewer to text select mode. -### Enable Squiggly Mode +### Enable squiggly mode -Enable/exit squiggly mode using the following code: +Enable or exit squiggly mode using the following code: ```html @@ -107,7 +107,7 @@ document.getElementById('setNone').addEventListener('click', function () { {% endhighlight %} {% endtabs %} -### Add squiggly annotation programmatically +### Add squiggly annotations programmatically Add squiggly annotations programmatically using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. @@ -175,11 +175,11 @@ document.getElementById('addSquiggly').addEventListener('click', function () { {% endhighlight %} {% endtabs %} -## Edit Squiggly Annotation +## Edit Squiggly Annotations -### Edit squiggly annotation in UI +### Edit squiggly annotations in UI -You can select and delete squiggly annotations directly in the viewer. Use the context menu or toolbar options as needed. +Use the viewer to select and delete squiggly annotations. Use the context menu or toolbar options as needed. Delete the selected annotation in the following ways: @@ -195,7 +195,7 @@ Delete the selected annotation in the following ways: #### Edit squiggly annotation properties in UI -The color and opacity of the squiggly annotation can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar. +The color and opacity of squiggly annotations can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar. - Edit color: Use the color palette in the Edit Color tool to change the annotation color. @@ -286,7 +286,7 @@ document.getElementById('editSquiggly').addEventListener('click', function () { Set default properties before creating the control using `squigglySettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -332,11 +332,11 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `SquigglySettings`. +Set properties for individual annotations before creating the control using `SquigglySettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. -Refer to the following code snippet to set the default highlight settings. +Refer to the following code snippet to set the default squiggly settings. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/area-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/area-annotation.md index 92424415c..36b76702f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/area-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/area-annotation.md @@ -18,7 +18,7 @@ Area is a measurement annotation used to measure the surface of a closed region ### Add area annotation via UI -Use the annotation toolbar: +- Use the annotation toolbar to: - Click the **Edit Annotation** button in the PDF Viewer toolbar. - Click the **Measurement Annotation** dropdown. - Choose **Area**, then draw the region on the page. @@ -348,9 +348,9 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `AreaSettings`. +Set properties for individual annotations before creating the control using `AreaSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default Area settings. @@ -434,7 +434,7 @@ The scale ratio and unit of measurement can be modified using the scale ratio op ![CalibrateScaleRatio](../../images/calibrate_scaleratio.png) -The Units of measurements support for the measurement annotations in the PDF Viewer are +Supported units for measurement annotations are * Inch * Millimeter diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/arrow-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/arrow-annotation.md index c8016a52a..a030fc3f8 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/arrow-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/arrow-annotation.md @@ -18,9 +18,9 @@ Arrow is a shape annotation used to point, direct attention, or indicate flow. C ### Add arrow annotation via UI -Use the annotation toolbar: +Use the annotation toolbar to: - Click the **Edit Annotation** button in the PDF Viewer toolbar. -- Open the **Shape Annotation**** dropdown. +- Open the **Shape Annotation** dropdown. - Choose **Arrow**, then draw on the page. N> When in pan mode, selecting a shape annotation switches the viewer to text select mode. @@ -335,9 +335,9 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `ArrowSettings`. +Set properties for individual annotations before creating the control using `ArrowSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default arrow settings. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/circle-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/circle-annotation.md index 4e1a6d8aa..e6a32dccc 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/circle-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/circle-annotation.md @@ -18,7 +18,7 @@ Circle is a shape annotation used to highlight circular regions or draw emphasis ### Add circle annotation via UI -Use the annotation toolbar: +Use the annotation toolbar to: - Click the **Edit Annotation** button in the PDF Viewer toolbar. - Open the **Shape Annotation** dropdown. - Choose **Circle**, then draw on the page. @@ -29,7 +29,7 @@ N> When in pan mode, selecting a shape annotation switches the viewer to text se ### Enable circle mode -The PDF Viewer library allows drawing Circle annotations programmatically after enabling Circle mode in button clicks. +The PDF Viewer library allows drawing circle annotations programmatically after enabling circle mode via button clicks. ```html @@ -350,9 +350,9 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `CircleSettings`. +Set properties for individual annotations before creating the control using `CircleSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default Circle settings. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/distance-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/distance-annotation.md index c123d3b8e..91ce8d7d2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/distance-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/distance-annotation.md @@ -18,7 +18,7 @@ Distance is a measurement annotation used to measure the length between two poin ### Add distance annotation via UI -Use the annotation toolbar: +Use the annotation toolbar to: - Click the **Edit Annotation** button in the PDF Viewer toolbar. - Open the **Measurement Annotation** dropdown. - Choose **Distance**, then draw on the page. @@ -29,7 +29,7 @@ N> When in pan mode, selecting a measurement annotation switches the viewer to t ### Enable distance mode -The PDF Viewer component allows drawing Distance annotations programmatically after enabling Distance mode in button clicks. +The PDF Viewer component allows drawing distance annotations programmatically after enabling distance mode via button clicks. ```html @@ -181,7 +181,7 @@ You can select, move, and resize Distance annotations directly in the viewer: - Resize: drag the end handles to adjust its length. - Delete or access more options from the context menu. -#### Edit the properties of area annotations +#### Edit the properties of distance annotations The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. @@ -337,9 +337,9 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `DistanceSettings`. +Set properties for individual annotations before creating the control using `DistanceSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default Distance settings. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/free-text-annotation.md index e5bc79d25..53aad96fd 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/free-text-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/free-text-annotation.md @@ -18,18 +18,18 @@ Free Text is a text box annotation used to place formatted text anywhere on the ### Add Free Text annotation via UI -Use the annotation toolbar: +Use the annotation toolbar to: - Click the **Edit Annotation** button in the PDF Viewer toolbar. - Click the **Free Text Annotation** button to enable Free Text mode. - Click on the page to add text. -When in pan mode, selecting Free Text switches the viewer to text select mode. +N> When in pan mode, selecting Free Text switches the viewer to text select mode. ![Free text tool in the annotation toolbar](../annotation-images/free-text-annot.png) ### Switch to Free Text mode -The PDF Viewer component allows drawing Distance annotations programmatically after enabling Distance mode in button clicks. +The PDF Viewer component allows drawing free text annotations programmatically after enabling Free Text mode via button clicks. ```html @@ -374,9 +374,9 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `FreeTextSettings`. +Set properties for individual annotations before creating the control using `FreeTextSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default FreeText settings. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/highlight-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/highlight-annotation.md index 4c6b044e6..a16dda9b5 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/highlight-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/highlight-annotation.md @@ -18,7 +18,7 @@ The PDF Viewer provides options to add, edit, and delete Highlight annotations o ### Add highlight annotation via UI -You can add highlights in two ways: +Add highlights in two ways: 1. Using the context menu - Select text in the PDF document and right-click it. @@ -27,9 +27,10 @@ You can add highlights in two ways: ![Alt text](../../../javascript-es6/annotations/annotation-images/highlight-context.gif) 2. Using the annotation toolbar +Use the annotation toolbar to: - Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. - Select **Highlight** to enable highlight mode. -- Select text to add the highlight annotation. Alternatively, select text first and then click **Highlight**. +- Select text to add the highlight annotation, or select text first and then click **Highlight**. ![Alt text](../../../javascript-es6/annotations/annotation-images/highlight-tool.gif) @@ -37,7 +38,7 @@ N> When pan mode is active and a text markup mode is entered, the PDF Viewer swi ### Switch to Highlight Mode -The PDF Viewer component allows add highlight annotations programmatically after enabling Highlight mode in button clicks. +The PDF Viewer component allows adding highlight annotations programmatically after enabling Highlight mode via button clicks. ```html @@ -187,7 +188,7 @@ document.getElementById('highlight').addEventListener('click', function () { ### Edit highlight annotation in UI -You can select a highlight to change its appearance or remove it: +Select a highlight to change its appearance or remove it: - Change appearance using the annotation toolbar: Edit Color and Edit Opacity. - Delete using Delete/Backspace keys or the Delete Annotation button in the annotation toolbar. @@ -288,7 +289,7 @@ document.getElementById('editHighlight').addEventListener('click', function () { Set default properties before creating the control using `highlightSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default highlight settings. @@ -335,9 +336,9 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `highlightSettings`. +Set properties for individual annotations before creating the control using `highlightSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default highlight settings. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/ink-annotation.md index 1629a8758..93c8926fe 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/ink-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/ink-annotation.md @@ -18,16 +18,16 @@ Ink is a freehand drawing annotation used to sketch, sign, or mark up content. ### Add ink annotation via UI -Use the annotation toolbar: -- Click the Edit Annotation button in the PDF Viewer toolbar. -- Click the Draw Ink button to enable ink mode. +Use the annotation toolbar to: +- Click the **Edit Annotation** button in the PDF Viewer toolbar. +- Click the **Draw Ink** button to enable ink mode. - Draw on any page of the PDF document. ![Ink tool in the annotation toolbar](../../images/ink_tool.png) ### Enable ink mode -The PDF Viewer component allows add ink annotations programmatically after enabling ink mode in button clicks. +The PDF Viewer component allows adding ink annotations programmatically after enabling ink mode via button clicks. ```html @@ -157,7 +157,7 @@ document.getElementById('addInkAnnotationProgram').addEventListener('click', fun ### Edit ink annotation in UI -You can select, move, and resize Ink annotations directly in the viewer: +Select, move, and resize ink annotations directly in the viewer: - Select an Ink annotation to show its handles. - Move: drag inside the stroke to reposition it on the page. - Resize: drag the selector handles to adjust its bounds. @@ -323,9 +323,9 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `InkSettings`. +Set properties for individual annotations before creating the control using `InkSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default Ink settings. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/line-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/line-annotation.md index e28beb5ff..636bfa3f2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/line-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/line-annotation.md @@ -18,7 +18,7 @@ Line is a shape annotation used to mark straight connections or callouts. Common ### Add line annotation via UI -Use the annotation toolbar: +Use the annotation toolbar to: - Click the **Edit Annotation** button in the PDF Viewer toolbar. - Open the **Shape Annotation** dropdown. - Choose **Line**, then draw on the page. @@ -29,7 +29,7 @@ N> When in pan mode, selecting a shape annotation switches the viewer to text se ### Enable line mode -The PDF Viewer component allows to add line annotations programmatically after enabling line mode in button clicks. +The PDF Viewer component allows adding line annotations programmatically after enabling line mode via button clicks. ```html @@ -175,8 +175,8 @@ document.getElementById('addLineAnnotation').addEventListener('click', function( ### Edit Line Annotation in UI -You can select, move, and resize Line annotations directly in the viewer: -- Select a Line to show its end-point handles. +Select, move, and resize line annotations directly in the viewer: +- Select a line to show its end-point handles. - Move: drag the line to reposition it on the page. - Resize/reshape: drag either end-point to adjust the line. - Delete or access more options from the context menu. @@ -348,13 +348,13 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -N> In both [Arrow](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#arrowsettings) and [Line](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#linesettings) annotations Settings, the Fill Color option is available only when an arrowhead style is applied at the Start or End. If both Start and End arrowhead styles are set to None, lines do not support fill rendering and the Fill Color option remains disabled. +N> In both [Arrow](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#arrowsettings) and [Line](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#linesettings) annotation settings, the Fill Color option is available only when an arrowhead style is applied at the Start or End. If both Start and End arrowhead styles are set to None, lines do not support fill rendering and the Fill Color option remains disabled. ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `lineSettings`. +Set properties for individual annotations before creating the control using `lineSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default line settings. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/perimeter-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/perimeter-annotation.md index 15afc5e1e..f3f0297d0 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/perimeter-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/perimeter-annotation.md @@ -18,18 +18,18 @@ Perimeter is a measurement annotation used to measure the length around a closed ### Add perimeter annotation via UI -Use the annotation toolbar: -- Click the Edit Annotation button in the PDF Viewer toolbar. -- Click the Measurement Annotation dropdown. -- Choose Perimeter, then draw the polyline on the page. +Use the annotation toolbar to: +- Click the **Edit Annotation** button in the PDF Viewer toolbar. +- Open the **Measurement Annotation** dropdown. +- Choose **Perimeter**, then draw the polyline on the page. -N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode. +N> When in pan mode, selecting measurement annotations switches the viewer to text select mode. ![Measurement toolbar](../../images/calibrate_tool.png) ### Enable perimeter mode -The PDF Viewer library allows drawing measurement annotations programmatically after enabling perimeter mode in button clicks. +The PDF Viewer library allows drawing perimeter annotations programmatically after enabling perimeter mode via button clicks. ```html @@ -95,7 +95,7 @@ if (perimeterBtn) { ### Add a perimeter annotation programmatically -The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method. +The PDF Viewer library allows adding perimeter annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method. ```html @@ -181,7 +181,7 @@ if (addBtn) { ### Edit perimeter annotation in UI -You can select, move, and resize Perimeter annotations directly in the viewer: +Use the viewer to select, move, and resize Perimeter annotations: - Select a Perimeter to show its vertex handles. - Move: drag inside the shape to reposition it on the page. - Resize/reshape: drag any vertex handle to adjust the polyline points and size. @@ -363,9 +363,9 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `PerimeterSettings`. +Set properties for individual annotations before creating the control using `PerimeterSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default Perimeter settings. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/polygon-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/polygon-annotation.md index bdedea053..469178bb3 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/polygon-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/polygon-annotation.md @@ -18,18 +18,18 @@ Polygon is a shape annotation used to outline irregular regions, highlight areas ### Add polygon annotation via UI -Use the annotation toolbar: -- Click the Edit Annotation button in the PDF Viewer toolbar. -- Open the Shape Annotation dropdown. -- Choose Polygon, then draw on the page. +Use the annotation toolbar to: +- Click the **Edit Annotation** button in the PDF Viewer toolbar. +- Open the **Shape Annotation** dropdown. +- Choose **Polygon**, then draw on the page. -N> When in pan mode, selecting a shape annotation switches the viewer to text select mode. +N> When in pan mode, selecting shape annotations switches the viewer to text select mode. ![Shape toolbar](../../images/shape_toolbar.png) ### Enable polygon mode -The PDF Viewer library allows drawing shape annotations programmatically after enabling polygon mode in button clicks. +The PDF Viewer library allows drawing polygon annotations programmatically after enabling polygon mode via button clicks. ```html @@ -179,18 +179,18 @@ document.getElementById('addPolygonAnnotation') && document.getElementById('addP ### Edit Polygon Annotation in UI -You can select, move, and resize Polygon annotations directly in the viewer: +Use the viewer to select, move, and resize Polygon annotations: - Select a Polygon to show its vertex handles. - Move: drag inside the shape to reposition it on the page. - Resize/reshape: drag any vertex handle to adjust the polygon points and size. - Delete or access more options from the context menu. Use the toolbar to change appearance: -- Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools. +- Use the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools. See the sections below for details. -#### Edit the properties of area annotations +#### Edit the properties of polygon annotations The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. @@ -348,9 +348,9 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `PolygonSettings`. +Set properties for individual annotations before creating the control using `PolygonSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default Polygon settings. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/radius-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/radius-annotation.md index a821ed0eb..9322791d7 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/radius-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/radius-annotation.md @@ -18,18 +18,18 @@ Radius is a measurement annotation used to measure the radius of a circle in the ### Add radius annotation via UI -Use the annotation toolbar: -- Click the Edit Annotation button in the PDF Viewer toolbar. -- Open the Measurement Annotation dropdown. -- Choose Radius, then draw on the page. +Use the annotation toolbar to: +- Click the **Edit Annotation** button in the PDF Viewer toolbar. +- Open the **Measurement Annotation** dropdown. +- Choose **Radius**, then draw on the page. -N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode. +N> When in pan mode, selecting measurement annotations switches the viewer to text select mode. ![Measurement toolbar](../../images/calibrate_tool.png) ### Enable radius mode -The PDF Viewer component allows drawing Radius annotations programmatically after enabling Radius mode in button clicks. +The PDF Viewer component allows drawing radius annotations programmatically after enabling radius mode via button clicks. ```html @@ -104,7 +104,7 @@ document.getElementById('setNone').addEventListener('click', function() { ### Add a radius annotation programmatically -Add measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method. +Add radius annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method. ```html @@ -177,7 +177,7 @@ document.getElementById('addRadiusAnnotation').addEventListener('click', functio ### Edit radius annotation in UI -You can select, move, and resize Radius annotations directly in the viewer: +Use the viewer to select, move, and resize Radius annotations: - Select a Radius measurement to show its handles. - Move: drag the shape to reposition it on the page. - Resize: drag the handles to adjust its size. @@ -339,9 +339,9 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `RadiusSettings`. +Set properties for individual annotations before creating the control using `RadiusSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default Radius settings. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/rectangle-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/rectangle-annotation.md index 5e278c37f..cde1e1489 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/rectangle-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/rectangle-annotation.md @@ -18,10 +18,10 @@ Rectangle is a shape annotation used to highlight regions, group content, or dra ### Add rectangle annotation via UI -Use the annotation toolbar: -- Click the Edit Annotation button in the PDF Viewer toolbar. -- Open the Shape Annotation dropdown. -- Choose Rectangle, then draw on the page. +Use the annotation toolbar to: +- Click the **Edit Annotation** button in the PDF Viewer toolbar. +- Open the **Shape Annotation** dropdown. +- Choose **Rectangle**, then draw on the page. N> When pan mode is active and a shape tool is selected, the viewer switches to text select mode automatically. @@ -29,7 +29,7 @@ N> When pan mode is active and a shape tool is selected, the viewer switches to ### Enable rectangle mode -The PDF Viewer library allows drawing shape annotations programmatically after enabling rectangle mode in button clicks. +The PDF Viewer library allows drawing rectangle annotations programmatically after enabling rectangle mode via button clicks. ```html @@ -104,7 +104,7 @@ document.getElementById('setNone') && document.getElementById('setNone').addEven ### Add a rectangle annotation programmatically -Use the addAnnotation method with Rectangle settings to add a rectangle annotation programmatically. +Use the `addAnnotation` method to add rectangle annotations programmatically. ```html @@ -177,16 +177,16 @@ document.getElementById('addRectangleAnnotation') && document.getElementById('ad ### Edit Rectangle Annotation in UI -You can select, move, and resize Rectangle annotations directly in the viewer: +Use the viewer to select, move, and resize Rectangle annotations: - Select a Rectangle to show its resize handles. - Move: drag inside the shape to reposition it on the page. - Resize: drag any corner or side handle to adjust size. - Delete or access more options from the context menu. Use the toolbar to change appearance: -- Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools. +- Use the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools. -#### Edit the properties of area annotations +#### Edit the properties of rectangle annotations The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. @@ -344,9 +344,9 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `RectangleSettings`. +Set properties for individual annotations before creating the control using `RectangleSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default rectangle settings. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/redaction-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/redaction-annotation.md index 8007801ea..c755640a2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/redaction-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/redaction-annotation.md @@ -16,9 +16,9 @@ Redaction annotations permanently remove sensitive content from a PDF. You can d ## Add Redaction Annotation -### Add redaction annotation in UI +### Add redaction annotations in UI -- Use the Redaction tool from the toolbar to draw over content to hide. +- Use the Redaction tool from the toolbar to draw over content to hide it. - Redaction marks can show overlay text (for example, "Confidential") and can be styled. ![Drawing a redaction annotation on the page](../../Redaction/redaction-annotations-images/adding-redaction-annotation.png) @@ -29,15 +29,15 @@ Redaction annotations are interactive: - Resizable ![Resizing a redaction annotation](../../Redaction/redaction-annotations-images/resizing-redaction-annotation.png) -You can also add redaction from the context menu by selecting content and choosing Redact Annotation. +You can also add redaction annotations from the context menu by selecting content and choosing Redact Annotation. ![Context menu showing Redact Annotation option](../../Redaction/redaction-annotations-images/redact-text-context-menu.png) -N> Ensure the Redaction tool is included in the toolbar. See [RedactionToolbar](../../Redaction/toolbar.md)for configuration. +N> Ensure the Redaction tool is included in the toolbar. See [RedactionToolbar](../../Redaction/toolbar.md) for configuration. -### Add a redaction annotation programmatically +### Add redaction annotations programmatically -Use the addAnnotation method with the Redaction type. +Use the `addAnnotation` method with the Redaction type to add redaction annotations programmatically. ```html @@ -67,11 +67,11 @@ viewer.annotationAdd = (args) => { }; ``` -## Edit Redaction Annotation +## Edit Redaction Annotations -### Edit redaction annotation in UI +### Edit redaction annotations in UI -You can select, move, and resize Redaction annotations directly in the viewer. Use the context menu for additional actions. +Use the viewer to select, move, and resize Redaction annotations. Use the context menu for additional actions. #### Edit the properties of redaction annotations in UI @@ -80,7 +80,7 @@ Use the property panel or context menu Properties to change overlay text, font, ![Redaction Property Panel Icon](../../Redaction/redaction-annotations-images/redaction-property-panel-icon.png) ![Redaction Property Panel via Context Menu](../../Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png) -### Edit a redaction annotation programmatically +### Edit redaction annotations programmatically Use editAnnotation to modify overlay text, colors, fonts, etc. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/stamp-annotation.md index 24062226a..a978f3034 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/stamp-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/stamp-annotation.md @@ -21,11 +21,11 @@ The PDF Viewer control provides options to add, edit, delete, and rotate the fol ## Add Stamp Annotation -### Add Stamp Annotation in UI +### Add Stamp annotations in UI -Use the annotation toolbar: -- Click the Edit Annotation button. -- Open the Stamp Annotation dropdown. +Use the annotation toolbar to: +- Click the **Edit Annotation** button. +- Open the **Stamp Annotation** dropdown. ![Stamp tool](../../images/stamp_tool.png) - Choose a stamp type and place it on the page. ![Select stamp type](../../images/selectstamp_annot.png) @@ -99,9 +99,9 @@ document.getElementById('standardBusinessStamp') && document.getElementById('sta {% endhighlight %} {% endtabs %} -### Add Stamp Annotation programmatically +### Add Stamp annotations programmatically -Create stamps via addAnnotation. +Create stamps programmatically using the `addAnnotation` method. ```html @@ -183,9 +183,9 @@ document.getElementById('addCustom') && document.getElementById('addCustom').add ## Edit Stamp Annotation -### Edit Stamp Annotation in UI +### Edit Stamp annotations in UI -You can select, move, resize, rotate, and delete Stamp annotations directly in the viewer: +Use the viewer to select, move, resize, rotate, and delete Stamp annotations: - Select a Stamp to show its resize and rotation handles. - Move: drag inside the stamp to reposition it on the page. - Resize: drag any corner or side handle to adjust the size. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/sticky-notes-annotation.md index f35f0ff36..d2a64aa1b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/sticky-notes-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/sticky-notes-annotation.md @@ -14,26 +14,26 @@ Sticky Notes are comment annotations used to leave notes, replies, and review st ![Sticky notes overview](../../images/stickynotes_annotation.png) -## Add Annotation +## Add annotations -### Add Annotation in UI +### Add annotations in UI -Use the Comments tool: +Use the Comments tool to: - Click the Comments button in the PDF Viewer toolbar. - Click on the page where the sticky note should be added. - The sticky note icon is placed at the clicked position. ![Sticky notes tool](../../images/stickynotes_tool.png) -Add and manage comments using the comment panel: +Use the comment panel to add and manage comments: - Select a sticky note, right‑click, and choose Comment. - Add comments, replies, and statuses in the panel. ![Sticky notes comment panel](../../images/stickynotes_comment.png) -### Add Annotation programmatically +### Add annotations programmatically -Use addAnnotation to programmatically create a sticky note. +Use the `addAnnotation` method to programmatically create sticky note annotations. ```html @@ -102,11 +102,11 @@ document.getElementById('stickyNote').addEventListener('click', function () { {% endhighlight %} {% endtabs %} -## Edit Annotation +## Edit annotations -### Edit Annotation in UI +### Edit annotations in UI -You can select and manage sticky notes directly in the viewer: +Use the viewer to select and manage sticky notes: - Select: click the sticky note icon to focus it and show context actions. - Move: drag the icon to reposition on the page. - Delete or more options: use the context menu on the selected note. @@ -132,9 +132,9 @@ Modify or delete comments or replies, and change status using the menu options i ![StickyNotesEdit](../../images/sticky_editbtn.png) -### Edit Annotation programmatically +### Edit annotations programmatically -Use editAnnotation to update an existing note's bounds. +Use `editAnnotation` to update an existing note's bounds. ```html @@ -264,9 +264,9 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `StickyNotesSettings`. +Set properties for individual annotations before creating the control using `StickyNotesSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default StickyNotes settings. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/strikethrough-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/strikethrough-annotation.md index b9925d52c..d346dadd9 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/strikethrough-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/strikethrough-annotation.md @@ -14,9 +14,9 @@ The PDF Viewer provides options to add, edit, and delete Strikethrough annotatio ![Strikethrough overview](../../images/strikethrough_button.png) -## Add strikethrough annotation +## Add strikethrough annotations -### Add strikethrough annotation via UI +### Add strikethrough annotations via UI You can add strikethrough in two ways: @@ -28,10 +28,10 @@ You can add strikethrough in two ways: 2. Using the annotation toolbar -* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. -* Select **Strikethrough** to enable strikethrough mode. -* Select text to add the strikethrough annotation. -* Alternatively, select text first and then click **Strikethrough**. +- Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. +- Select **Strikethrough** to enable strikethrough mode. +- Select text to add a strikethrough annotation. +- Alternatively, select text first and then click **Strikethrough**. ![Strikethrough toolbar](../../../javascript-es6/annotations/annotation-images/strikethrough-tool.gif) @@ -169,9 +169,9 @@ Add the below `serviceUrl` in the `index.js` file {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/text-markup-annotation/strikethrough-normal-mode-cs1" %} -### Add strikethrough annotation programmatically +### Add strikethrough annotations programmatically -Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. +Programmatically add strikethrough annotations using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. Example: @@ -246,11 +246,11 @@ if (strikethrough) { {% endhighlight %} {% endtabs %} -## Edit strikethrough annotation +## Edit strikethrough annotations -### Edit strikethrough annotation in UI +### Edit strikethrough annotations in UI -The color and opacity of the strikethrough annotation can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar. +The color and opacity of strikethrough annotations can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar. #### Edit color Use the color palette in the Edit Color tool to change the annotation color. @@ -262,7 +262,7 @@ Use the range slider in the Edit Opacity tool to change annotation opacity. ![Edit opacity](../../../javascript-es6/images/edit_opacity.png) -#### Delete strikethrough annotation +#### Delete strikethrough annotations - Select the annotation and press Delete, or - Click **Delete Annotation** in the annotation toolbar. @@ -271,11 +271,11 @@ Use the range slider in the Edit Opacity tool to change annotation opacity. #### Edit strikethrough annotation properties -The color and opacity of the strikethrough annotation can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar. +The color and opacity of strikethrough annotations can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar. -### Edit an existing strikethrough annotation programmatically +### Edit existing strikethrough annotations programmatically -To modify an existing strikethrough annotation programmatically, use the editAnnotation() method. Example: +To modify existing strikethrough annotations programmatically, use the `editAnnotation()` method. Example: ```html @@ -361,7 +361,7 @@ if (editStrikethroughAnnotation) { Set default properties before creating the control using `strikethroughSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default strikethrough settings. @@ -408,9 +408,9 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `StrikethroughSettings`. +Set properties for individual annotations before creating the control using `StrikethroughSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default highlight settings. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/underline-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/underline-annotation.md index fee995225..23bdecfd7 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/underline-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/underline-annotation.md @@ -14,9 +14,9 @@ The PDF Viewer provides options to add, edit, and delete Underline annotations o ![Underline overview](../../images/underline_button.png) -## Add underline annotation +## Add underline annotations -### Add underline annotation via UI +### Add underline annotations via UI You can add underlines in two ways: @@ -28,10 +28,10 @@ You can add underlines in two ways: 2. Using the annotation toolbar -* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. -* Select **Underline** to enable underline mode. -* Select text to add the underline annotation. -* Alternatively, select text first and then click **Underline**. +- Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. +- Select **Underline** to enable underline mode. +- Select text to add an underline annotation. +- Alternatively, select text first and then click **Underline**. ![Underline toolbar](../../../javascript-es6/annotations/annotation-images/underline-tool.gif) @@ -169,9 +169,9 @@ Add the below `serviceUrl` in the `index.js` file {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/text-markup-annotation/underline-normal-mode-cs1" %} -### Add underline annotation programmatically +### Add underline annotations programmatically -Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. +Programmatically add underline annotations using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. Example: @@ -248,9 +248,11 @@ if (underline) { ## Edit underline annotation -### Edit underline annotation in UI +## Edit underline annotations -The color and opacity of the underline annotation can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar. +### Edit underline annotations in UI + +The color and opacity of underline annotations can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar. #### Edit color Use the color palette in the Edit Color tool to change the annotation color. @@ -269,7 +271,9 @@ Use the range slider in the Edit Opacity tool to change annotation opacity. ![Delete button](../../images/delete_button.png) -### Edit an existing underline annotation programmatically +### Edit existing underline annotations programmatically + +To modify existing underline annotations programmatically, use the `editAnnotation()` method. Example: To modify an existing underline annotation programmatically, use the editAnnotation() method. Example: @@ -357,7 +361,7 @@ if (editUnderlineAnnotation) { Set default properties before creating the control using `underlineSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default underline settings. @@ -404,9 +408,9 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `underlineSettings`. +Set properties for individual annotations before creating the control using `underlineSettings`. -> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. +N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default highlight settings. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/volume-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/volume-annotation.md index 7ad2863a1..1ffe89fd8 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/volume-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/volume-annotation.md @@ -18,18 +18,18 @@ Volume is a measurement annotation used to calculate the volume of a rectangular ### Add volume annotation via UI -Use the annotation toolbar: -- Click the Edit Annotation button in the PDF Viewer toolbar. -- Open the Measurement Annotation dropdown. -- Choose Volume, then draw on the page. +Use the annotation toolbar to: +- Click the **Edit Annotation** button in the PDF Viewer toolbar. +- Open the **Measurement Annotation** dropdown. +- Choose **Volume**, then draw on the page. -N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode. +N> When in pan mode, selecting measurement annotations switches the viewer to text select mode. ![Measurement toolbar](../../images/calibrate_tool.png) ### Enable volume mode -The PDF Viewer component allows drawing Volume annotations programmatically after enabling Volume mode in button clicks. +The PDF Viewer component allows drawing volume annotations programmatically after enabling volume mode via button clicks. ```html @@ -113,9 +113,9 @@ if (setNoneBtn) { {% endhighlight %} {% endtabs %} -### Add a volume annotation programmatically +### Add volume annotations programmatically -Add measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method. +Add volume annotations programmatically using the `addAnnotation` method. ```html @@ -198,7 +198,7 @@ if (addVolBtn) { ### Edit volume annotation in UI -You can select, move, and resize Volume annotations directly in the viewer: +Use the viewer to select, move, and resize Volume annotations: - Select a Volume measurement to show its handles. - Move: drag the shape to reposition it on the page. - Resize: drag the handles to adjust its size. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-in-mobile-view.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-in-mobile-view.md index f2690c2db..eb1fe5bc1 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-in-mobile-view.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-in-mobile-view.md @@ -9,115 +9,117 @@ domainurl: ##DomainURL## --- # Annotations in mobile view in JavaScript PDF Viewer control +This article describes how to use annotation tools in the Syncfusion JavaScript (Essential JS 2) PDF Viewer on touch-enabled devices. It covers enabling the annotation toolbar; adding sticky notes, text markups, shapes, measurements, stamps, signatures, and ink; adjusting annotation properties before and after placement; using comments; and removing annotations. + ## Open the annotation toolbar -**Step 1:** Click Edit Annotation on the toolbar to enable the annotation toolbar. +**Step 1:** Select the Edit Annotation icon on the main toolbar to enable the annotation toolbar. ![Enable the annotation toolbar](../images/edit-annotation.png) -**Step 2:** The annotation toolbar appears below the main toolbar. +**Step 2:** The annotation toolbar appears below the main toolbar and displays tools optimized for touch interaction. ![Annotation toolbar displayed](../images/after-enabling-annotation-toolbar.png) ## Add sticky note annotations -**Step 1:** Click the Sticky Notes icon, then tap the page where the note should be placed. +**Step 1:** Select the Sticky Notes icon to activate the sticky note tool, then tap the desired location on the page to place a note. ![Open sticky note tool](../images/add-sticky-notes.png) -**Step 2:** Tap the page to add the sticky note annotation. +**Step 2:** A sticky note annotation is added at the selected location; opening the note allows viewing or editing its content. ![Sticky note annotation added on the page](../images/sticky-notes-in-page.png) ## Add text markup annotations -**Step 1:** Tap a text markup icon, select the text to mark, then tap the selection to apply the markup. +**Step 1:** Select a text markup icon, highlight the desired text, then confirm the selection to apply the markup. ![Select text for markup](../images/select-text.png) -**Step 2:** The text markup annotation is applied to the selected text. +**Step 2:** The text markup annotation is applied to the highlighted text. ![Text markup applied on the page](../images/add-text-markup.png) ## Add shape and measurement annotations -**Step 1:** Tap the Shape or Measure icon to open the corresponding toolbar. +**Step 1:** Select the Shape or Measure icon to open the corresponding toolbar. ![Open shape and measurement tools](../images/add-shapes.png) -**Step 2:** Choose a shape or measurement type, then draw it on the page. +**Step 2:** Choose a shape or measurement type and draw it on the page. ![Select measurement type](../images/open-radius.png) -**Step 3:** The annotation appears on the PDF page. +**Step 3:** The annotation is rendered on the PDF page. ![Measurement annotation placed on the page](../images/radius-annotation.png) ## Add stamp annotations -**Step 1:** Tap the Stamp icon and select a stamp type from the menu. +**Step 1:** Select the Stamp icon and choose a stamp type from the menu. ![Open stamp tool](../images/open-stamp.png) -**Step 2:** Tap the page to place the stamp annotation. +**Step 2:** Tap the page to place the chosen stamp annotation. ![Stamp annotation added on the page](../images/add-revised.png) ## Add signature annotations -**Step 1:** Tap the Signature icon to open the canvas. Draw the signature, tap Create, then tap the viewer to place it. +**Step 1:** Select the Signature icon to open the signature canvas. Draw the signature, choose Create, then tap the viewer to place it. ![Open signature canvas](../images/add-signature.png) -**Step 2:** The signature is added to the page. +**Step 2:** The signature annotation is added to the page. ![Signature placed on the page](../images/adding-signature.png) ## Add ink annotations -**Step 1:** Tap the Ink tool and draw on the page. +**Step 1:** Select the Ink tool and draw directly on the page. ![Open ink tool](../images/open-ink.png) -**Step 2:** The ink annotation appears on the page. +**Step 2:** The ink annotation is rendered on the page. ![Ink annotation drawn on the page](../how-to/images/ink-annotation.png) ## Change annotation properties (before adding) -**Step 1:** Change properties before placing the annotation. +**Step 1:** Adjust annotation properties before placement as required. -**Step 2:** Tap the annotation icon to open the property toolbar, adjust properties, then place the annotation on the page. +**Step 2:** Open the property toolbar for the annotation icon, set the desired properties, and then place the annotation on the page. ![Adjust fill color before adding](../images/open-fillcolor.png) ## Change annotation properties (after adding) -**Step 1:** Change annotation properties after adding the annotation. +**Step 1:** Modify annotation properties after placement when necessary. -**Step 2:** Select the annotation to show the property toolbar, then adjust the properties. +**Step 2:** Select the annotation to display the property toolbar, then update the properties as needed. ![Edit annotation properties after adding](../images/change-property.png) ## Delete annotations -**Step 1:** Select the annotation to show the property toolbar, then tap the Delete icon to remove it. +**Step 1:** Select the annotation to display the property toolbar, then choose the Delete icon to remove the annotation. ![Delete icon in the property toolbar](../images/delete-icon.png) ## Open the comment panel -**Step 1:** Open the comment panel using the icon in the property toolbar or the annotation toolbar. +**Step 1:** Open the comment panel from the property toolbar or the annotation toolbar. ![Open the comment panel](../images/open-comment.png) -**Step 2:** The comment panel appears. +**Step 2:** The comment panel is displayed. ![Comment panel displayed](../images/comment-panel.png) ## Close the comment panel -**Step 1:** Tap the Close button to close the comment panel. +**Step 1:** Use the Close button to dismiss the comment panel. ![Close the comment panel](../images/close-comment-panel.png) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-undo-redo.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-undo-redo.md index 1cb8f5ae8..cc697a094 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-undo-redo.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-undo-redo.md @@ -8,16 +8,16 @@ documentation: ug domainurl: ##DomainURL## --- -# Perform undo and redo in JavaScript +# Undo and redo annotations in JavaScript PDF Viewer -The PDF Viewer supports undo and redo for Annotations. +The PDF Viewer supports undo and redo for annotations. ![Undo-redo](../../javascript-es6/annotations/annotation-images/annotation-undo-redo.png) -Undo and redo actions can be performed in the following ways: +Undo and redo actions can be performed by using either of the following methods: -1. Using keyboard shortcuts: - After performing a highlight annotation action, press Ctrl+Z to undo and Ctrl+Y to redo. +1. Using keyboard shortcuts (desktop): + After performing an annotation action, press `Ctrl+Z` to undo and `Ctrl+Y` to redo on Windows and Linux. On macOS, use `Command+Z` to undo and `Command+Shift+Z` to redo. 2. Using the toolbar: Use the **Undo** and **Redo** tools in the toolbar. @@ -59,8 +59,7 @@ document.getElementById('redo').addEventListener('click', function () { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below `serviceUrl` in the `index.js` file +N> To set up the **server-backed PDF Viewer**, add the following `serviceUrl` in the `index.js` file: `pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/text-markup-annotation/undo-redo-cs1" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md index 7c8a99b42..fa7c18b37 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md @@ -8,9 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Comments in JavaScript PDF Viewer control +# Comments in JavaScript PDF Viewer -The PDF Viewer control provides options to add, edit, and delete comments for the following annotations in PDF documents: +The PDF Viewer provides options to add, edit, and delete comments for the following annotation types in PDF documents: * Shape annotation * Stamp annotation @@ -32,90 +32,90 @@ Annotation comments can be added to the PDF using the comment panel. The comment 1. Using the annotation menu - * Click the Edit Annotation button in the PDF Viewer toolbar. A toolbar appears below it. - * Click the Comment Panel button. The comment panel opens. + * Select the Edit Annotation button in the PDF Viewer toolbar. A toolbar appears below it. + * Select the Comment Panel button to open the comment panel. -2. Using Context menu +2. Using the context menu * Select the annotation in the PDF document and right-click it. - * Select Comment from the context menu. + * Choose Comment from the context menu. -3. Using the Mouse click +3. Using a mouse click - * Select the annotation in the PDF document and double-click it. The comment panel opens. + * Select the annotation in the PDF document and double-click it to open the comment panel. If the comment panel is already open, select the annotation and add comments using the panel. ### Adding comments -* Select the annotation in the PDF document. -* The corresponding comment thread is highlighted in the comment panel. -* Add comments and replies using the comment panel. +- Select an annotation in the PDF document. +- The corresponding comment thread is highlighted in the comment panel. +- Add comments and replies using the comment panel. ![Adding comments to a sticky note annotation](../images/stickycomment.png) -### Adding Comment Replies +### Adding comment replies -* Multiple replies can be added to a comment. -* After adding a comment, add replies as needed. +- Multiple replies can be added to a comment. +- After adding a comment, add replies as needed. -### Adding Comment or Reply Status +### Adding comment or reply status -* Select the annotation comment in the comment panel. -* Click More options in the comment or reply container. -* Select Set Status from the context menu. -* Choose a status for the comment. +- Select the annotation comment in the comment panel. +- Click More options in the comment or reply container. +- Select Set Status from the context menu. +- Choose a status for the comment. ![Set status for a comment](../images/commentstatus.png) -### Editing the comments and comments replies of the annotations +### Editing comments and comment replies for annotations Comments, replies, and status can be edited using the comment panel. -### Editing the Comment or Comment Replies +### Editing a comment or comment reply Edit comments and replies in the following ways: -1. Using the Context menu +1. Using the context menu * Select the annotation comment in the comment panel. * Click More options in the comment or reply container. * Select Edit from the context menu. - * An editable text box appears. Change the content of the comment or reply. + * An editable text box appears; update the content of the comment or reply. -2. Using the Mouse Click +2. Using a mouse click * Select the annotation comment in the comment panel. * Double-click the comment or reply content. - * An editable text box appears. Change the content of the comment or reply. + * An editable text box appears; update 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 More options in the comment or reply container. -* Select Set Status from the context menu. -* Choose a status for the comment. -* None is the default state. Selecting None clears the status indicator; the comment or reply remains visible. +- Select the annotation comment in the comment panel. +- Click More options in the comment or reply container. +- Select Set Status from the context menu. +- Choose a status for the comment. +- None is the default state; selecting None clears the status indicator while the comment or reply remains visible. ![Edit comments and replies](../images/commentsedit.png) -### Delete Comment or Comment Replies +### Delete comment or comment replies -* Select the annotation comment in the comment panel. -* Click More options in the comment or reply container. -* Select Delete from the context menu. +- Select the annotation comment in the comment panel. +- Click More options in the comment or reply container. +- Select Delete from the context menu. ![Delete comments or replies](../images/commentsdelete.png) ->Deleting the root comment from the comment panel also deletes the associated annotation. +> Deleting the root comment from the comment panel also deletes the associated annotation. -## Add Comments to the annotation Programmatically +## Add comments to an annotation programmatically -### How to Add Commnets and Replies programmatically +### How to add comments and replies programmatically Comments can be added to the PDF document programmatically using the `editAnnotation` property. -The following example Shows how to add comments and reply in response to a button click. +The following example shows how to add comments and a reply in response to a button click. ```html @@ -182,11 +182,11 @@ document.getElementById("addReply")?.addEventListener("click", function() { {% endhighlight %} {% endtabs %} -### How to Edit Comments programmatically +### How to edit comments programmatically Comments can be edited in the PDF document programmatically using the `editAnnotation` property. -The following example Shows how to edit comments and reply in response to a button click. +The following example shows how to edit comments and a reply in response to a button click. ```html @@ -256,7 +256,7 @@ document.getElementById("editReply")?.addEventListener("click", function() { {% endhighlight %} {% endtabs %} -### How to check the comments added by the user +### How to check comments added by users Comments added to the PDF document can be read using the annotation's `comments` property. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/create-modify-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/create-modify-annotation.md index feeee94b8..39eb8f069 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/create-modify-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/create-modify-annotation.md @@ -10,28 +10,28 @@ domainurl: ##DomainURL## # Create and modify annotations -Use the PDF Viewer annotation tools to add, edit, and manage markups across your documents. This page provides a quick overview with convenient navigation to each annotation type and common ways to create and modify annotations. +The PDF Viewer annotation tools add, edit, and manage markups across documents. This page provides an overview with quick navigation to each annotation type and common creation and modification workflows. ## Quick navigation to annotation types Jump directly to a specific annotation type for detailed usage and examples: -TextMarkup Annotations: +Text markup annotations: -- Highlight : [Highlight annotation](./annotation-types/highlight-annotation) +- Highlight: [Highlight annotation](./annotation-types/highlight-annotation) - Strikethrough: [Strikethrough annotation](./annotation-types/strikethrough-annotation) - Underline: [Underline annotation](./annotation-types/underline-annotation) - Squiggly: [Squiggly annotation](./annotation-types/Squiggly-annotation) -Shape Annotations: +Shape annotations: - Line: [Line annotation](./annotation-types/line-annotation) - Arrow: [Arrow annotation](./annotation-types/arrow-annotation) - Rectangle: [Rectangle annotation](./annotation-types/rectangle-annotation) -- Circle : [Circle annotation](./annotation-types/circle-annotation) +- Circle: [Circle annotation](./annotation-types/circle-annotation) - Polygon: [Polygon annotation](./annotation-types/polygon-annotation) -Measurement Annotations: +Measurement annotations: - Distance: [Distance annotation](./annotation-types/distance-annotation) - Perimeter: [Perimeter annotation](./annotation-types/perimeter-annotation) @@ -39,13 +39,13 @@ Measurement Annotations: - Radius: [Radius annotation](./annotation-types/ra) - Volume: [Volume annotation](./annotation-types/vo) -Other Annotations: +Other annotations: - Redaction: [Redaction annotation](./annotation-types/redaction-annotation) -- Free Text: [Free text annotation](./annotation-types/free-text-annotation) -- Ink (Freehand): [Ink annotation](./annotation-types/ink-annotation) +- Free text: [Free text annotation](./annotation-types/free-text-annotation) +- Ink (freehand): [Ink annotation](./annotation-types/ink-annotation) - Stamp: [Stamp annotation](./annotation-types/stamp-annotation) -- Sticky Notes: [Sticky notes annotation](./annotation-types/sticky-notes-annotation) +- Sticky notes: [Sticky notes annotation](./annotation-types/sticky-notes-annotation) N> Each annotation type page includes both UI steps and programmatic examples specific to that type. @@ -54,18 +54,16 @@ N> Each annotation type page includes both UI steps and programmatic examples sp ### Create via UI - Open the annotation toolbar in the PDF Viewer. -- Choose the required tool (for example, Shape, Free Text, Ink, Stamp, Redaction). +- Choose the required tool (for example, Shape, Free text, Ink, Stamp, Redaction). - Click or drag on the page to place the annotation. ![Annotation toolbar](../images/shape_toolbar.png) -Notes: -- When pan mode is active and you select a shape or stamp tool, the viewer switches to text select mode automatically. -- Property pickers in the annotation toolbar let you choose color, stroke color, thickness, and opacity while drawing. +N> When pan mode is active and a shape or stamp tool is selected, the viewer switches to text select mode automatically. Property pickers in the annotation toolbar let users choose color, stroke color, thickness, and opacity while drawing. ### Create programmatically -Creation patterns vary slightly by type. Refer to the type pages above for tailored code. Example: creating a Redaction annotation using addAnnotation. +Creation patterns vary by type. Refer to the individual annotation pages for tailored code. Example: creating a Redaction annotation using `addAnnotation`. ```html @@ -88,20 +86,20 @@ document.getElementById('addRedactAnnot')?.addEventListener('click', () => { }); ``` -See the individual annotation pages (links above) for enabling draw modes from UI buttons and other type-specific creation samples. +Refer to the individual annotation pages for enabling draw modes from UI buttons and other type-specific creation samples. ## Modify annotations ### Modify via UI Use the annotation toolbar after selecting an annotation: -- Edit Color: change the fill or text color (when applicable) +- Edit color: change the fill or text color (when applicable) ![Edit color](../images/edit_color.png) -- Edit Stroke Color: change the border/line color (shape and line types) +- Edit stroke color: change the border or line color (shape and line types) ![Edit stroke color](../images/shape_strokecolor.png) -- Edit Thickness: adjust the border/line thickness +- Edit thickness: adjust the border or line thickness ![Edit thickness](../images/shape_thickness.png) -- Edit Opacity: change transparency +- Edit opacity: change transparency ![Edit opacity](../images/shape_opacity.png) @@ -109,10 +107,10 @@ Additional options such as Line Properties (for line/arrow) are available from t ### Modify programmatically -Use editAnnotation to apply changes to an existing annotation. Common flow: -- Locate the target annotation from annotationCollection -- Update the desired properties -- Call editAnnotation with the modified object +Use `editAnnotation` to apply changes to an existing annotation. Common flow: +- Locate the target annotation from `annotationCollection`. +- Update the desired properties. +- Call `editAnnotation` with the modified object. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-data.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-data.md index 2de082c1e..5d89c11fa 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-data.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-data.md @@ -10,11 +10,12 @@ domainurl: ##DomainURL## # Custom data in annotations -You can attach any custom key–value data to annotations using the customData property. This works at two levels: -- Default level with annotationSettings: Applies to all annotations created via the UI. -- Per-annotation-type level: Supply customData in each annotation type settings (highlightSettings, rectangleSettings, etc.). +Annotations can include custom key–value data via the `customData` property. This is supported at two levels: -The customData value can be any serializable object. It is preserved when exporting or importing annotations and is available at runtime on the annotation object. +- Default level via `annotationSettings`: applies to all annotations created through the UI. +- Per-annotation-type level: provide `customData` inside specific annotation-type settings (for example, `highlightSettings`, `rectangleSettings`). + +The `customData` value can be any JSON-serializable object. It is preserved during annotation export/import and is available at runtime on the annotation object. ## Default custom data (annotationSettings) @@ -134,9 +135,9 @@ if (btn) { } ``` -### Notes -- customData can be any JSON-serializable object and is stored with the annotation. -- Use default annotationSettings.customData for global defaults and override with per-tool settings as needed. +### Note +- `customData` can be any JSON-serializable object and is stored with the annotation. +- Use `annotationSettings.customData` for global defaults and override with per-tool settings as needed. [View Sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-tools.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-tools.md index f96959c61..e1f9f77c0 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-tools.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/custom-tools.md @@ -10,17 +10,17 @@ domainurl: ##DomainURL## # Custom annotation tools in JavaScript PDF Viewer -PDF viewer allows to add your own toolbar and toggle PDF annotation tools programmatically using the setAnnotationMode method. You can enable tools such as Highlight, Underline, Rectangle, Circle, Arrow, Free Text, Ink, and Measurement annotations (Distance, Perimeter, Area, Radius). +The PDF Viewer supports adding a custom toolbar and toggling annotation tools programmatically using the `setAnnotationMode` method. The viewer can enable tools such as Highlight, Underline, Rectangle, Circle, Arrow, Free Text, Ink, and measurement annotations (Distance, Perimeter, Area, Radius). Follow these steps to build a minimal custom annotation toolbar. Step 1: Start from a basic PDF Viewer sample -See the [Getting started guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) to create a basic sample. +Refer to the [Getting started guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) to create a basic sample. Step 2: Add HTML for a lightweight custom toolbar -Add buttons for the tools you want to expose. You can use plain buttons or Syncfusion Toolbar. Below is a plain-HTML variant that keeps things simple. +Add buttons for the tools to expose. The sample below uses plain HTML buttons for simplicity; replace with a Syncfusion Toolbar for a richer UI if desired. ```html
@@ -46,7 +46,7 @@ Add buttons for the tools you want to expose. You can use plain buttons or Syncf Step 3: Import and inject modules -Make sure the Annotation module is injected. If you also want text selection/search, include those as needed. +Ensure the `Annotation` module is injected. Include text selection and search modules if those capabilities are required. ```js var PdfViewer = ej.pdfviewer.PdfViewer; @@ -96,9 +96,9 @@ function bindAnnoTools() { bindAnnoTools(); ``` -## Custom Tools Using Syncfusion Toolbar for a richer UI +## Custom tools using Syncfusion Toolbar for a richer UI -You can replace the plain buttons with Syncfusion EJ2 Toolbar items and icons similar to the custom toolbar sample. Here is a compact example showing a few common tools. Add the Toolbar package (@syncfusion/ej2-navigations) and wire each item’s click to setAnnotationMode. +Replace the plain buttons with Syncfusion EJ2 Toolbar items and icons for a richer UI. The compact example below shows common tools. Add the Toolbar package `@syncfusion/ej2-navigations` and wire each item’s click handler to `setAnnotationMode`. ```js // Add built-in icon classes via EJ2 CSS (match your version), for example: @@ -156,10 +156,10 @@ var annoToolbar = new Tool({ annoToolbar.appendTo('#annotationToolbar'); ``` -Notes +Note -- setAnnotationMode accepts the annotation type name. Common values include: Highlight, Underline, Strikethrough, StickyNotes, FreeText, Ink, Rectangle, Circle, Line, Arrow, Polygon, Polyline, Distance, Perimeter, Area, Radius, and None to exit. -- You can predefine default annotation styles using the corresponding settings properties (for example, areaSettings as shown in the Area annotation topic). +- `setAnnotationMode` accepts the annotation type name. Common values include: `Highlight`, `Underline`, `Strikethrough`, `StickyNotes`, `FreeText`, `Ink`, `Rectangle`, `Circle`, `Line`, `Arrow`, `Polygon`, `Polyline`, `Distance`, `Perimeter`, `Area`, `Radius`, and `None` to exit. +- Default annotation styles can be predefined using the corresponding settings properties (for example, `areaSettings`). - To combine with a fully custom viewer toolbar, see Custom Toolbar in JavaScript PDF Viewer. [View Sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/customize-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/customize-annotation.md index 39388b8d9..45b81cad2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/customize-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/customize-annotation.md @@ -10,42 +10,43 @@ domainurl: ##DomainURL## # Customize annotations -You can customize annotation color, stroke color, thickness, opacity, and other properties using the built‑in UI or via code. This page summarizes common customization patterns and shows how to set defaults per annotation type. +Annotation appearance and behavior (for example color, stroke color, thickness, and opacity) can be customized using the built‑in UI or programmatically. This page summarizes common customization patterns and shows how to set defaults per annotation type. ## Customize via UI Use the annotation toolbar after selecting an annotation: -- Edit Color: changes the annotation fill/text color + +- Edit color: change the annotation fill or text color. ![Edit color](../images/edit_color.png) -- Edit Stroke Color: changes border/line color (shapes and lines) +- Edit stroke color: change the border or line color for shapes and line types. ![Edit stroke color](../images/shape_strokecolor.png) -- Edit Thickness: adjusts border/line thickness +- Edit thickness: adjust the border or line thickness. ![Edit thickness](../images/shape_thickness.png) -- Edit Opacity: adjusts transparency +- Edit opacity: change annotation transparency. ![Edit opacity](../images/shape_opacity.png) -Type‑specific options (for example, Line Properties) are available from the context menu (right‑click > Properties) where supported. +Type‑specific options (for example, Line properties) are available from the context menu (right‑click > Properties) where supported. ## Set default properties during initialization -You can set defaults for specific annotation types when creating the PdfViewer instance. You can set author, subject, color, opacity using Annotation Settings. Below are examples using settings already used in the annotation type pages. +Set defaults for specific annotation types when creating the `PdfViewer` instance. Configure properties such as author, subject, color, and opacity using annotation settings. The examples below reference settings used on the annotation type pages. -TextMarkup Annotations: +Text markup annotations: -- Highlight : Set default properties before creating the control using [`highlightSettings`](./annotation-types/highlight-annotation/#set-default-properties-during-control-initialization) +- Highlight: Set default properties before creating the control using [`highlightSettings`](./annotation-types/highlight-annotation/#set-default-properties-during-control-initialization) - Strikethrough: Use [`strikethroughSettings`](./annotation-types/strikethrough-annotation/#default-strikethrough-settings-during-initialization) - Underline: Use [`underlineSettings`](./annotation-types/underline-annotation/#default-underline-settings-during-initialization) - Squiggly: Use [`squigglySettings`](./annotation-types/Squiggly-annotation/#set-default-properties-during-control-initialization) -Shape Annotations: +Shape annotations: - Line: Use [`lineSettings`](./annotation-types/line-annotation/#default-line-settings-during-initialization) - Arrow: Use [`arrowSettings`](./annotation-types/arrow-annotation/#default-arrow-settings-during-initialization) - Rectangle: Use [`rectangleSettings`](./annotation-types/rectangle-annotation/#default-rectangle-settings-during-initialization) -- Circle : Use [`circleSettings`](./annotation-types/circle-annotation/#default-circle-settings-during-initialization) +- Circle: Use [`circleSettings`](./annotation-types/circle-annotation/#default-circle-settings-during-initialization) - Polygon: Use [`polygonSettings`](./annotation-types/polygon-annotation/#default-polygon-settings-during-initialization) -Measurement Annotations: +Measurement annotations: - Distance: Use [`distanceSettings`](./annotation-types/distance-annotation/#default-distance-settings-during-initialization) - Perimeter: Use [`perimeterSettings`](./annotation-types/perimeter-annotation/#default-perimeter-settings-during-initialization) @@ -53,13 +54,13 @@ Measurement Annotations: - Radius: Use [`radiusSettings`](./annotation-types/radius-annotation/#default-radius-settings-during-initialization) - Volume: Use [`volumeSettings`](./annotation-types/volume-annotation/#default-volume-settings-during-initialization) -Other Annotations: +Other annotations: - Redaction: Use [`redactionSettings`](./annotation-types/redaction-annotation/#default-redaction-settings-during-initialization) -- Free Text: Use [`freeTextSettings`](./annotation-types/free-text-annotation/#default-free-text-settings-during-initialization) -- Ink (Freehand): Use [`inkAnnotationSettings`](./annotation-types/ink-annotation/#default-ink-settings-during-initialization) +- Free text: Use [`freeTextSettings`](./annotation-types/free-text-annotation/#default-free-text-settings-during-initialization) +- Ink (freehand): Use [`inkAnnotationSettings`](./annotation-types/ink-annotation/#default-ink-settings-during-initialization) - Stamp: Use [`stampSettings`](./annotation-types/stamp-annotation/#default-stamp-settings-during-initialization) -- Sticky Notes: Use [`stickyNotesSettings`](./annotation-types/sticky-notes-annotation/#default-sticky-notes-settings-during-initialization) +- Sticky notes: Use [`stickyNotesSettings`](./annotation-types/sticky-notes-annotation/#default-sticky-notes-settings-during-initialization) Set defaults for specific annotation types when creating the PdfViewer instance. Below are examples using settings already used in the annotation type pages. @@ -153,7 +154,7 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -N> After changing defaults using UI tools (Edit Color, Edit Opacity, etc.), the values will reflect the latest selection for subsequent annotations in the same session. +N> After changing defaults using UI tools (for example, Edit color or Edit opacity), the updated values apply to subsequent annotations within the same session. ## Customize programmatically at runtime diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/delete-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/delete-annotation.md index e5bbf5922..0c8b0b608 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/delete-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/delete-annotation.md @@ -10,20 +10,21 @@ domainurl: ##DomainURL## # Remove annotations -You can remove annotations using the built-in UI or programmatically. This page shows the common ways to delete annotations in the viewer. +Annotations can be removed using the built-in UI or programmatically. This page shows common methods to delete annotations in the viewer. ## Delete via UI -You can delete a selected annotation in three ways: -- Context menu: Right-click the annotation and choose Delete. +A selected annotation can be deleted in three ways: + +- Context menu: right-click the annotation and choose Delete. ![Delete via context menu](../annotations/annotation-images/delete-annot-context-menu.png) -- Secondary toolbar: Select the annotation and click the Delete button on the annotation toolbar. +- Annotation toolbar: select the annotation and click the Delete button on the annotation toolbar. ![Delete via annotation toolbar](../annotations/annotation-images/delete-annot.png) -- Keyboard: Select the annotation and press the `Delete` key. +- Keyboard: select the annotation and press the `Delete` key. ## Delete programmatically -You can delete the currently selected annotation, or delete a specific annotation by its id. +Annotations can be deleted programmatically either by removing the currently selected annotation or by specifying an annotation id. ```html
@@ -76,7 +77,7 @@ if (delByIdBtn) { } ``` -N> Deleting via API requires the annotation to exist in the current document. Ensure an annotation is selected when using deleteAnnotation(), or pass a valid id to deleteAnnotationById(). +N> Deleting via the API requires the annotation to exist in the current document. Ensure an annotation is selected when using `deleteAnnotation()`, or pass a valid id to `deleteAnnotationById()`. [View Sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/export-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/export-annotation.md index 797aa68a1..2e8a6b904 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/export-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/export-annotation.md @@ -34,9 +34,9 @@ This generates and downloads the selected format containing all annotations in t ## Export programmatically -You can export annotations from code using [exportAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportannotation) ,[exportAnnotationsAsObject](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportannotationsasobject) and [exportAnnotationsAsBase64String](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportannotationsasbase64string) APIs. +You can export annotations from code using [exportAnnotation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportannotation) ,[exportAnnotationsAsObject](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportannotationsasobject) and [exportAnnotationsAsBase64String](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportannotationsasbase64string) APIs. -Use the following end-to-end example to initialize the viewer and export annotations as JSON, XFDF, or as an object. +Use the following example to initialize the viewer and export annotations as JSON, XFDF, or as an object. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/export-import-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/export-import-events.md index 15a21ae1c..b2de34354 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/export-import-events.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/export-import-events.md @@ -9,16 +9,24 @@ documentation: ug # Import/Export events for annotations -Import/Export events let you track and customize the full lifecycle of annotation data flowing into and out of the PDF Viewer. +Import/export events let developers monitor and control annotation data as it flows into and out of the PDF Viewer. These events enable validation, progress reporting, audit logging, and conditional blocking of import/export operations. -Use them to validate inputs, show progress UI, log audit trails, or block operations based on your business rules. Each event exposes typed event-args (ImportStartEventArgs, ImportSuccessEventArgs, ImportFailureEventArgs, ExportStartEventArgs, ExportSuccessEventArgs, ExportFailureEventArgs) describing the operation context. +Common use cases: +- Progress UI and user feedback +- Validation and sanitization of imported annotation data +- Audit logging and telemetry +- Blocking or altering operations based on business rules + +Each event exposes typed event-args: `ImportStartEventArgs`, `ImportSuccessEventArgs`, `ImportFailureEventArgs`, `ExportStartEventArgs`, `ExportSuccessEventArgs`, and `ExportFailureEventArgs` that describe the operation context. ## Import events -- [importStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importstart): Triggers when an import operation starts. -- [importSuccess](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importsuccess): Triggers when annotations are successfully imported. -- [importFailed](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importfailed): Triggers when importing annotations fails. +- [`importStart`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importstart): Triggers when an import operation starts. +- [`importSuccess`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importsuccess): Triggers when annotations are successfully imported. +- [`importFailed`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importfailed): Triggers when importing annotations fails. ## Handle import events +Example: handle import events by assigning callback handlers. + ```js viewer.importStart = function(args) { console.log('Import started', args); @@ -32,11 +40,13 @@ viewer.importFailed = function(args) { ``` ## Export events -- [exportStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportstart): Triggers when an export operation starts. -- [exportSuccess](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportsuccess): Triggers when annotations are successfully exported. -- [exportFailed](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportfailed): Triggers when exporting annotations fails. +- [`exportStart`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportstart): Triggers when an export operation starts. +- [`exportSuccess`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportsuccess): Triggers when annotations are successfully exported. +- [`exportFailed`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportfailed): Triggers when exporting annotations fails. ## Handle export events +Example: handle export events by assigning callback handlers. + ```js viewer.exportStart = function(args) { console.log('Export started', args); @@ -49,9 +59,7 @@ viewer.exportFailed = function(args) { }; ``` -Notes: -- importStart/importSuccess/importFailed cover the lifecycle of annotation imports. -- exportStart/exportSuccess/exportFailed cover the lifecycle of annotation exports. +N> `importStart`, `importSuccess`, and `importFailed` cover the lifecycle of annotation imports; `exportStart`, `exportSuccess`, and `exportFailed` cover the lifecycle of annotation exports. ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/import-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/import-annotation.md index c302ffdc7..a020f3769 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/import-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/export-import/import-annotation.md @@ -9,10 +9,7 @@ documentation: ug # Import annotations in JavaScript PDF Viewer -You can import annotations into the PDF Viewer in two ways: - -- Using the built-in UI in the Comments panel (import JSON or XFDF files) -- Programmatically by passing an annotation object exported from the viewer +Annotations can be imported into the PDF Viewer using the built-in UI or programmatically. The UI accepts JSON and XFDF files from the Comments panel; programmatic import accepts an annotation object previously exported by the viewer. ## Import using the UI (Comments panel) @@ -24,17 +21,17 @@ The Comments panel provides import options in its overflow menu: Steps: 1. Open the Comments panel in the PDF Viewer. 2. Click the overflow menu (three dots) at the top of the panel. -3. Choose Import annotations from JSON file or Import annotations from XFDF file and pick the file. +3. Choose the appropriate import option and select the file. -All annotations in the selected file will be applied to the current document. +All annotations in the selected file are applied to the current document. -![Export Annotation](../annotation-images/import-annot.png) +![Import annotations](../annotation-images/import-annot.png) ## Import programmatically (from object) -Import annotations from an object previously exported using exportAnnotationsAsObject(). Only objects returned by the viewer can be re-imported using [importAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importannotation) method. +Import annotations from an object previously exported using `exportAnnotationsAsObject()`. Only objects produced by the viewer can be re-imported with the `importAnnotation` method (`importAnnotation` documentation: https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importannotation). -The following end-to-end example initializes the viewer and wires a button to import annotations from a pasted/exported object. +Example: HTML markup for export/import buttons and the viewer container. ```html @@ -42,6 +39,8 @@ The following end-to-end example initializes the viewer and wires a button to im
``` +Example: initialize the viewer and wire export/import handlers. + ```js // Inject required modules (ES5/vanilla JS using global ej namespace) ej.pdfviewer.PdfViewer.Inject( @@ -89,14 +88,16 @@ if (btnImport) { } ``` +N> Only objects produced by the viewer (for example, by `exportAnnotationsAsObject()`) are compatible with `importAnnotation`. Persist exported objects in a safe storage location (database or API) and validate them before import. + ## Common use cases -- Restore annotations saved earlier (e.g., from a database or API) +- Restore annotations saved earlier (for example, from a database or API) - Apply reviewer annotations shared as JSON/XFDF files via the Comments panel - Migrate or merge annotations between documents or sessions - Support collaborative workflows by reloading team annotations -[View Sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master) +[View sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master) ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/line-angle-constraints.md index 9ae90377b..4d6c9ac90 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/line-angle-constraints.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/line-angle-constraints.md @@ -10,15 +10,15 @@ domainurl: ##DomainURL## # Line angle constraints in JavaScript PDF Viewer -The PDF Viewer control provides robust **line angle constraints** functionality. This allows users to draw line type annotations with controlled angle snapping, improving accuracy and consistency across technical drawings and measurements across your PDF documents. +The PDF Viewer provides line angle constraints functionality that allows drawing line-type annotations with controlled angle snapping. This improves precision for technical drawings and measurements in PDF documents. -![Line Angle Constraint](../annotations/annotation-images/line-angle-constraint.gif) +![Line angle constraint](../annotations/annotation-images/line-angle-constraint.gif) ## Enable line angle constraints -Configure the `enableLineAngleConstraints` property within `annotationDrawingOptions`. When enabled, supported line-type annotations snap to fixed angles. +Set the `enableLineAngleConstraints` property within `annotationDrawingOptions` to enable angle snapping for supported line-type annotations. -The following code demonstrates how to enable line angle constraints: +The following code demonstrates enabling line angle constraints: ```js @@ -35,7 +35,7 @@ ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearc ## Work with constrained annotations -### Drawing Behavior +### Drawing behavior When line angle constraints are enabled: @@ -44,12 +44,13 @@ When line angle constraints are enabled: - A visual indicator reflects snapping in real time. - Release to complete the annotation. -### Keyboard Shortcuts +### Keyboard shortcuts Desktop platforms: -- Shift + drag: toggles snapping. If constraints are disabled, Shift temporarily enables them; if enabled, Shift enforces snapping. -### Selector-Based Modifications +- `Shift` + drag: toggles snapping. If constraints are disabled, `Shift` temporarily enables them; if enabled, `Shift` enforces snapping. + +### Selector-based modifications When modifying existing line annotations using selectors: @@ -58,7 +59,7 @@ When modifying existing line annotations using selectors: - Constraint snapping during modification is supported for Line and Arrow. - Adjustments snap to the configured angle increment. -## Configuration Properties +## Configuration properties ### enableLineAngleConstraints @@ -72,11 +73,11 @@ The `enableLineAngleConstraints` property activates angle snapping for line-base - Area measurements - Volume measurements -**Key Benefits:** +Key benefits: -- Automatic angle snapping during the drawing +- Automatic angle snapping during drawing - Enhanced precision for technical drawings and measurements -- Desktop behavior: hold Shift while drawing to toggle constraints (when disabled, Shift temporarily enables; when enabled, Shift enforces snapping) +- Desktop behavior: hold `Shift` while drawing to toggle constraints (when disabled, `Shift` temporarily enables; when enabled, `Shift` enforces snapping) - Real-time visual feedback showing angle snapping behavior ### restrictLineAngleTo @@ -85,19 +86,18 @@ Defines the angle increment (in degrees) used to constrain supported annotations Angle snapping rules: -- The initial drawing direction is treated as the 0° reference point -- Snapped angles are calculated based on the increment -- If the increment doesn’t divide 360 evenly, angles reset after 360° +- The initial drawing direction is treated as the 0° reference point. +- Snapped angles are calculated based on the increment. +- If the increment does not divide 360 evenly, angles reset after 360°. Examples: -- restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360° -- restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360° - +- `restrictLineAngleTo: 45` → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360° +- `restrictLineAngleTo: 100` → Snapped angles: 0°, 100°, 200°, 300°, 360° -[View a sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to) +[View a sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to) -N> Refer to the JavaScript PDF Viewer [feature tour](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer) for feature highlights. Explore the [JavaScript PDF Viewer examples](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples) to learn how to render and configure the PDF Viewer. +N> Refer to the JavaScript PDF Viewer [feature tour](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer) for feature highlights, and to the [JavaScript PDF Viewer examples](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples) for rendering and configuration examples. ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/overview.md index faff72e9c..74db22078 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/overview.md @@ -10,14 +10,14 @@ domainurl: ##DomainURL## # Annotations overview in JavaScript -Annotations in PDFViewer are interactive elements that allow users to add notes, highlights, or text boxes directly to a PDF document. These annotations can be used to add context or feedback directly to PDF files, simplifying collaboration during document reviews. +Annotations in the PDF Viewer are interactive elements that allow users to add notes, highlights, or text boxes directly to a PDF document. These annotations add context and feedback to PDF files, simplifying collaboration during document reviews. -The PDF Viewer component provides a complete set of annotation tools for reviewing, measuring, and marking up PDFs in JavaScript (ES5). +The PDF Viewer provides a complete set of annotation tools for reviewing, measuring, and marking up PDFs in JavaScript (ES5). ## Supported annotations - Text markup: [Highlight](../annotations/annotation-types/highlight-annotation), [Underline](../annotations/annotation-types/underline-annotation), [Squiggly](../annotations/annotation-types/Squiggly-annotation), [Strikethrough](../annotations/annotation-types/strikethrough-annotation) -- Shapes: [Line](../annotations/annotation-types/line-annotation), p[Arrow](../annotations/annotation-types/arrow-annotation), [Rectangle](../annotations/annotation-types/rectangle-annotation), [Circle](../annotations/annotation-types/circle-annotation), [Polygon](../annotations/annotation-types/polygon-annotation) +- Shapes: [Line](../annotations/annotation-types/line-annotation), [Arrow](../annotations/annotation-types/arrow-annotation), [Rectangle](../annotations/annotation-types/rectangle-annotation), [Circle](../annotations/annotation-types/circle-annotation), [Polygon](../annotations/annotation-types/polygon-annotation) - Text boxes: [Free Text](../annotations/annotation-types/free-text-annotation) - Drawing: [Ink](../annotations/annotation-types/ink-annotation) (freehand) - Stamps: [Standard and custom stamps](../annotations/annotation-types/stamp-annotation) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/signature-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/signature-annotation.md index df9e71704..d6754bfe0 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/signature-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/signature-annotation.md @@ -12,27 +12,26 @@ domainurl: ##DomainURL## The PDF Viewer control supports adding handwritten signatures to a PDF document. Handwritten signatures reduce paperwork and enable digital verification. -## Add Signature Annotation +## Add signature annotation ### Adding a handwritten signature in UI The handwritten signature can be added to the PDF document using the annotation toolbar. -* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Select the **HandWritten Signature** button in the annotation toolbar. The signature panel appears. +- Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. +- Select the **Handwritten signature** button in the annotation toolbar. The signature panel appears. ![Open the handwritten signature panel](../images/select_sign.png) -* Draw the signature in the panel. +- Draw the signature in the panel. ![Draw the handwritten signature](../images/add_sign.png) -* Click **Create**, move the signature, and place it at the desired location. +- Click **Create**, move the signature, and place it at the desired location. ![Place the handwritten signature on the page](../images/create_sign.png) Refer to the following code sample to switch to the handwritten signature mode programmatically. - ```html ``` @@ -80,8 +79,7 @@ if (handWrittenSignature) { With the PDF Viewer library, you can programmatically add a handwritten signature to the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. -Here is an example of adding a handwritten signature programmatically using addAnnotation(): - +Here is an example of adding a handwritten signature programmatically using the `addAnnotation()` method: ```html ``` @@ -203,9 +201,9 @@ if(addHandwrittenSignature){ [View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Add%20Handwritten%20Signature%20Programmatically) -## Edit Signature Annotation +## Edit signature annotation -### Edit Signature Annotation in UI +### Edit signature annotation in UI Stroke color, border thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. @@ -227,12 +225,11 @@ Edit opacity using the range slider in the Edit Opacity tool. ![Change signature opacity](../images/change_opacity.png) -### Edit Signature Annotation Programmatically - -With the PDF Viewer library, you can programmatically edit a handwritten signature to the PDF Viewer control using the **editSignature()** method. +### Edit signature annotation programmatically -Here is an example of adding a handwritten signature programmatically using editSiganture(): +With the PDF Viewer library, you can programmatically edit a handwritten signature in the PDF Viewer control using the `editSignature()` method. +Here is an example of editing a handwritten signature programmatically using the `editSignature()` method: ```html @@ -316,10 +313,9 @@ document.getElementById('editSignatureAnnotation')?.addEventListener('click', () {% endhighlight %} {% endtabs %} -## Enable/Disable handwritten signature +## Enable or disable handwritten signature The following example enables or disables the handwritten signature in the PDF Viewer. Setting the value to `false` disables the feature. - {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -345,6 +341,8 @@ pdfviewer.enableHandwrittenSignature = false; {% endhighlight %} {% endtabs %} +N> When `enableHandwrittenSignature` is set to `false`, the handwritten signature toolbar and related UI are disabled; existing handwritten signature annotations remain in the document unless removed. The `canSave` option in annotation examples controls whether a signature can be saved for reuse; when `canSave` is `false`, signatures are not persisted in the signature collection for later reuse. + ## See also - [Annotation Overview](../overview) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/download.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/download.md index 4817bb014..e97427d77 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/download.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/download.md @@ -9,7 +9,7 @@ domainurl: ##DomainURL## --- # Download in JavaScript PDF Viewer control -The PDF Viewer supports downloading the loaded PDF file. You can enable/disable the download using the following code snippet. +The PDF Viewer supports downloading the currently loaded PDF document. Use the `enableDownload` option to enable or disable download functionality. The examples below demonstrate standalone and server-backed configurations. ```html {% raw %} @@ -61,7 +61,7 @@ pdfviewer.appendTo('#PdfViewer'); ![Alt text](./images/download.png) -You can invoke download action using following code snippet., +Invoke the download action programmatically with a simple button example: ``` @@ -101,7 +101,7 @@ document.getElementById('download').addEventListener('click', function () { ## How to get the base64 string while downloading the PDF document -The [downloadEnd](https://ej2.syncfusion.com/documentation/api/pdfviewer/#downloadend) event of the PDF viewer allows you to get the downloaded document as a base64 string. +The [downloadEnd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#downloadend) event fires after a download completes and exposes the downloaded document as a base64 string. The following code illustrates how to get the downloaded document as a base64 string. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/event.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/event.md index 873f0ab95..5b1547e81 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/event.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/event.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Events in JavaScript PDF Viewer -The PDF Viewer component triggers events for creation, page navigation, document life cycle, context menu interactions, comments, bookmarks, download and export, hyperlinks, annotation import/export, custom keyboard commands, printing, signatures, text search, and text selection. Use these events to integrate custom logic into application workflows. +The PDF Viewer component triggers events for creation, page navigation, document lifecycle, context menu interactions, comments, bookmarks, download and export, hyperlinks, annotation import/export, custom keyboard commands, printing, signatures, text search, and text selection. Use these events to integrate custom logic into application workflows. The following table lists commonly used events supported by the PDF Viewer component: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/feature-module.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/feature-module.md index 90a10b272..4dc687f4f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/feature-module.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/feature-module.md @@ -10,9 +10,7 @@ domainurl: ##DomainURL## # Feature module in JavaScript PDF Viewer Control -The PDF Viewer features are segregated into individual feature-wise modules to enable selectively referencing in the application. The required modules should be injected to extend its functionality. The following are the selective modules of PDF Viewer that can be included as required: - -The available PDF Viewer modules are: +The PDF Viewer features are organized into discrete modules so applications can include only the functionality they require. Inject the necessary modules to extend the viewer's behavior and reduce bundle size. The modules listed below are available for selective inclusion: * [**Toolbar**](./toolbar-customization/primary-toolbar):- Built-in toolbar for better user interaction. * [**Magnification**](./magnification):- Perform zooming operation for better viewing experience. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/custom-data.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/custom-data.md index 366f25ef7..13216d15c 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/custom-data.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/custom-data.md @@ -7,11 +7,11 @@ control: PDF Viewer documentation: ug --- -# Add Custom Data to PDF Form Fields in JavaScript PDF Viewer +# Add custom data to PDF form fields in JavaScript PDF Viewer -The **Syncfusion JavaScript PDF Viewer** allows you to attach **custom application-specific data** to form fields by using the customData property. This enables you to associate business identifiers, tags, validation hints, or workflow metadata with form fields. +The Syncfusion JavaScript PDF Viewer allows attaching application-specific data to form fields using the `customData` property. This enables associating business identifiers, tags, validation hints, or workflow metadata with form fields. -The custom data remains linked to the form field throughout the viewer session and can be accessed or updated whenever the field is queried or modified. +Custom data remains linked to the form field throughout the viewer session and can be accessed or updated whenever the field is queried or modified. This page explains how to: - [Add custom data when creating form fields](#add-custom-data-while-creating-pdf-form-fields) @@ -27,7 +27,7 @@ This page explains how to: ## Add Custom Data While Creating PDF Form Fields -You can attach custom data at the time of field creation by passing a **customData** object in the settings parameter of **addFormField()**. +You can attach custom data at the time of field creation by passing a `customData` object in the settings parameter of `addFormField()`. ```js viewer.documentLoad = function () { @@ -42,20 +42,20 @@ viewer.documentLoad = function () { ## Set Default Custom Data for PDF Form Fields Added Using UI -When users add form fields using the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar), you can define default customData so that newly created fields automatically inherit it. Default custom data can be configured using per-field settings objects such as: +When users add form fields using the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar), define default `customData` so newly created fields automatically inherit it. Default custom data can be configured using per-field settings objects such as: -- [textFieldSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#textfieldsettings) -- [passwordFieldSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#passwordfieldsettings) -- [checkBoxFieldSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#checkboxfieldsettings) -- [radioButtonFieldSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#radiobuttonfieldsettings) -- [listBoxFieldSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#listboxfieldsettings) -- [dropDownFieldSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#dropdownfieldsettings) -- [signatureFieldSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#signaturefieldsettings) -- [initialFieldSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#initialfieldsettings) +- [`textFieldSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#textfieldsettings) +- [`passwordFieldSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#passwordfieldsettings) +- [`checkBoxFieldSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#checkboxfieldsettings) +- [`radioButtonFieldSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#radiobuttonfieldsettings) +- [`listBoxFieldSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#listboxfieldsettings) +- [`dropDownFieldSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#dropdownfieldsettings) +- [`signatureFieldSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#signaturefieldsettings) +- [`initialFieldSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#initialfieldsettings) ```js // ...viewer initialization as above... -// Example for texbox defaults +// Example for textbox defaults viewer.textFieldSettings = { name: 'Textbox', customData: { group: 'contact', createdBy: 'designer', requiredRole: 'user' } @@ -70,7 +70,7 @@ viewer.checkBoxFieldSettings = { ## Update or Replace PDF Form Field Custom Data -You can modify the customData of an existing form field by using the [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) method. The field can be identified using either its object reference or field ID. +Modify the `customData` of an existing form field using [`updateFormField()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields). The field can be identified using its object reference or field ID. ```js // Retrieve existing fields @@ -85,7 +85,7 @@ if (target) { ``` **Tip:** -Merge new values with the existing customData object before calling [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to avoid overwriting previously stored data. +Merge new values with the existing `customData` object before calling [`updateFormField()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to avoid overwriting previously stored data. ## Read Custom Data from PDF Form Fields @@ -116,7 +116,7 @@ viewer.documentLoad = function () { [View Sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples) -## See Also +## See also - [Form Designer overview](./overview) - [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-constrain.md index 1eee2e3b9..00a6aa2b4 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-constrain.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-constrain.md @@ -31,10 +31,10 @@ The following flags are supported in the PDF Viewer: - [isPrint](#control-print-behavior) Controls whether the form field appears when the document is printed. -## Key Actions +## Key actions -### Make Fields Read Only -Use the **isReadOnly** property to prevent users from modifying a form field through the UI. This is useful for displaying pre filled or calculated values that should not be changed by the user. +### Make fields read only +Use the `isReadOnly` property to prevent users from modifying a form field through the UI. This is useful for displaying pre-filled or calculated values that should not be changed by the user. ```js // Use this setting to make Read-only as Default for new Textbox fields @@ -59,8 +59,8 @@ pdfviewer.documentLoad = function () { }; ``` -### Mark Fields as Required -Use the **isRequired** property to mark form fields as mandatory. To enforce this constraint, enable form field validation and validate fields before allowing actions such as printing or downloading. +### Mark fields as required +Use the `isRequired` property to mark form fields as mandatory. To enforce this constraint, enable form field validation and validate fields before allowing actions such as printing or downloading. - Enable validation using [enableFormFieldsValidation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) - [Validate fields](./form-validation) using [validateFormFields()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#validateformfields) @@ -94,8 +94,8 @@ pdfviewer.documentLoad = function () { pdfviewer.appendTo('#pdfViewer'); // Ensure an element with id="pdfViewer" exists in your HTML ``` -### Control Print Behavior -Use the **isPrint** property to control whether a form field appears in the printed output of the PDF document. +### Control print behavior +Use the `isPrint` property to control whether a form field appears in the printed output of the PDF document. ```js // 1) Default for new signature fields @@ -119,22 +119,22 @@ pdfviewer.documentLoad = function () { pdfviewer.appendTo('#pdfViewer'); // Ensure
exists ``` -N> Printing can be triggered programmatically using **pdfviewer.print()**. Form fields with **isPrint: false** are excluded from the printed output. +N> Printing can be triggered programmatically using `pdfviewer.print()`. Form fields with `isPrint: false` are excluded from the printed output. -## Apply PDF Form Field Flags Using the UI +## Apply PDF form field flags using the UI **Steps** 1. Enable **Form Designer** mode in the PDF Viewer. 2. Select an existing form field on the PDF page. -3. The **Right click To open context menu - > Properties** popover is displayed. +3. The right-click context menu → Properties popover is displayed. 4. Configure the required constraint options. -5. Click “Ok” and Close the properties popover to apply the changes. +5. Click OK to close the properties popover and apply the changes. Changes are reflected immediately in the viewer. -[Applying form field flags using the UI](../../javascript-es6/images/formfields-flag.gif) +[Applying form field flags using the UI](../../javascript-es6/images/formfields-flag.gif) -## Apply PDF Form Field Flags Programmatically +## Apply PDF form field flags programmatically You can apply or modify form field flags in the following ways. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-designer.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-designer.md index ac4e7277f..e9d62f88f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-designer.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-designer.md @@ -8,13 +8,13 @@ documentation: ug domainurl: ##DomainURL## --- -# Form Designer in JavaScript PDF Viewer +# Form designer in JavaScript PDF Viewer -When **Form Designer mode** is enabled in the Syncfusion [JavaScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) is displayed. This UI includes a built in toolbar for adding form fields such as text boxes, password fields, check boxes, radio buttons, drop down lists, list boxes, and signature and initial fields. +When **Form Designer mode** is enabled in the Syncfusion [JavaScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) is displayed. This UI includes a built-in toolbar for adding form fields such as text boxes, password fields, check boxes, radio buttons, drop-down lists, list boxes, and signature and initial fields. Using the Form Designer UI, users can place form fields on the PDF, move and resize them, configure field and widget properties, preview the designed form, and remove fields when required. The Form Designer toolbar can also be shown or hidden and customized to control the available tools based on application requirements, enabling flexible and interactive form design directly within the viewer. -## Key Features +## Key features **Add Form Fields** You can add the following form fields to the PDF: @@ -43,7 +43,7 @@ You can select, group or ungroup, reorder, and delete form fields as needed. **Save and Print Forms** Designed form fields can be saved into the PDF document and printed with their appearances. -## Enable Form Designer +## Enable form designer To enable form design features, inject the [FormDesigner](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formdesigner) module into the PDF Viewer. After injecting the module, use the [enableFormDesigner](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#enableformdesigner) API to show or hide the Form Designer option in the main toolbar. @@ -71,7 +71,7 @@ var pdfviewer = new ej.pdfviewer.PdfViewer({ pdfviewer.appendTo('#PdfViewer'); ``` -## Form Designer UI +## Form designer UI When [Form Designer mode](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formdesigner) is enabled in the Syncfusion [JavaScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) is displayed. This UI provides a built in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer. @@ -81,7 +81,7 @@ When [Form Designer mode](https://ej2.syncfusion.com/javascript/documentation/ap For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation](./manage-form-fields/create-form-fields) in JavaScript PDF Viewer documentation. -## Form Designer Toolbar +## Form designer toolbar The **Form Designer toolbar** appears at the top of the PDF Viewer and provides quick access to form field creation tools. It includes frequently used field types such as: @@ -175,35 +175,36 @@ pdfviewer.toolbarSettings = { }; ``` -## Move, Resize, and Edit Form Fields +## Move, resize, and edit form fields -You can move, resize, and edit an existing form field directly in the PDF Viewer using the Form Designer. +Move, resize, and edit an existing form field directly in the PDF Viewer using the Form Designer. - Move a field by selecting it and dragging it to the required position. - Resize a field using the handles displayed on the field boundary. -![Moveing and Resizing a form field](../../javascript-es6/images/move-resize-forms.gif) +![Moving and resizing a form field](../../javascript-es6/images/move-resize-forms.gif) -- Edit a field by selecting it to open the Form Field Properties popover. The popover allows you to modify the form field and widget annotation properties. Changes are reflected immediately in the viewer and are saved when the properties popover is closed. +- Edit a field by selecting it to open the Form Field Properties popover. The popover allows modification of form field and widget annotation properties. Changes are reflected immediately in the viewer and saved when the properties popover is closed. For more information, see Editing Form Fields -## Deleting Form Fields +## Deleting form fields -You can remove a form field from the PDF document by selecting the field and using one of the following methods: -- Click the `Delete option` in the Form Designer UI. -- Press the `Delete key` on the keyboard after selecting the form field. +Remove a form field from the PDF document by selecting the field and using one of the following methods: + +- Click the `Delete` option in the Form Designer UI. +- Press the `Delete` key on the keyboard after selecting the form field. The selected form field and its associated widget annotation are permanently removed from the page. -For more information, see [Deleting Form Fields](./manage-form-fields/remove-form-fields) +For more information, see [Deleting form fields](./manage-form-fields/remove-form-fields) -## See Also +## See also -- [Filling PDF Forms](./form-filling) +- [Filling PDF forms](./form-filling) - [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/style-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields - [Grouping form fields](./group-form-fields) -- [Form Constrains](./form-constrain) -- [Form Validation](./form-validation) -- [Custom Data](./custom-data) -- [Import](./import-export-form-fields/import-form-fields)/[Export Form Data](./import-export-form-fields/export-form-fields) +- [Form constrains](./form-constrain) +- [Form validation](./form-validation) +- [Custom data](./custom-data) +- [Import](./import-export-form-fields/import-form-fields)/[Export form data](./import-export-form-fields/export-form-fields) - [Form field events](./form-field-events) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-field-events.md index cea447dfe..223ab59cd 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-field-events.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-field-events.md @@ -8,17 +8,17 @@ documentation: ug domainurl: ##DomainURL## --- -# PDF Viewer Form Field Events in JavaScript +# Form field events in JavaScript PDF Viewer -The Syncfusion **JavaScript PDF Viewer** provides a comprehensive set of **form field events** that allow developers to track user interactions, respond to form changes, and implement custom business logic. These events can be used for scenarios such as [validation](./form-validation), **UI updates**, **logging**, and **workflow automation**. +The Syncfusion **JavaScript PDF Viewer** exposes form field events that let developers react to user interactions, respond to form changes, and implement custom business logic. Use these events for validation, UI updates, logging, and workflow automation. -Form field events are triggered during actions such as adding, selecting, modifying, moving, resizing, and removing form fields. +Form field events are triggered when a field is added, selected, modified, moved, resized, or removed. -## Supported PDF Form Field Events +## Supported PDF form field events -The following table lists all supported form field events and their descriptions: +The following table lists the supported form field events and their descriptions. -| Form Field events | Description | +| Form field events | Description | |---|---| | [formFieldAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldAddArgs) | Triggered when a new form field is added, either through the Form Designer UI or programmatically. | | [formFieldClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldClickArgs) | Fired when a form field is clicked in the viewer. | @@ -34,7 +34,7 @@ The following table lists all supported form field events and their descriptions | [formFieldUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldUnselectArgs) | Fired when a previously selected form field is unselected. | | [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs) | Fired when form field validation fails during print or download actions. | -**Common Use Cases** +**Common use cases** Form field events can be used to: - Validate form data before printing or downloading diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-fields-api.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-fields-api.md index ff1c567ca..7621eff18 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-fields-api.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-fields-api.md @@ -8,9 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Form Fields API in JavaScript PDF Viewer +# Form fields API in JavaScript PDF Viewer -The PDF Viewer provides comprehensive APIs to create, edit, validate, navigate, and manage form fields programmatically. The following APIs are available: +The PDF Viewer exposes APIs to create, edit, validate, navigate, export, and manage form fields programmatically. The following APIs are available: | API | Description | |---|---| @@ -148,6 +148,8 @@ if (btn) { {% endhighlight %} {% endtabs %} +N> Supported import/export formats include `FDF`, `XFDF`, and `JSON`. Ensure the format token passed to import/export APIs matches one of these values. + ## focusFormField Moves focus to a form field by name or ID. @@ -179,6 +181,7 @@ var btn = document.getElementById('exportFormFieldsAsObject'); if (btn) { var exportedData; btn.onclick = function () { + // This API returns a Promise that resolves with the exported data object pdfviewer.exportFormFieldsAsObject('Fdf').then(function (data) { exportedData = data; // Save or send to server console.log('Exported object:', exportedData); diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-filling.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-filling.md index 8065674d8..59b895ee2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-filling.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-filling.md @@ -8,21 +8,21 @@ documentation: ug domainurl: ##DomainURL## --- -# Filling PDF Forms in JavaScript PDF Viewer +# Filling PDF forms in JavaScript PDF Viewer -The Syncfusion PDF Viewer supports three types of form-filling: +The Syncfusion PDF Viewer supports filling form fields programmatically, via the user interface, or by importing form data from external sources. -1. [Filling Form Fields Programmatically](#fill-pdf-forms-programmatically) +1. [Filling form fields programmatically](#fill-pdf-forms-programmatically) - You can fill or update PDF form fields programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#updateformfieldsvalue) APIs. This approach is useful when form data needs to be set dynamically based on application logic. + Use the [updateFormFieldsValue](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#updateformfieldsvalue) API to set or update field values dynamically based on application logic. -2. [Form Filling Through User Interface](#fill-pdf-forms-through-the-user-interface) +2. [Form filling through the user interface](#fill-pdf-forms-through-the-user-interface) - Users can fill in PDF form fields directly through the PDF Viewer user interface by typing text, selecting options, or interacting with supported form elements. + Users can enter or select values directly in the PDF Viewer using supported form elements. -3. [Importing Form Field Data](#fill-pdf-forms-through-import-data) +3. [Importing form field data](#fill-pdf-forms-through-import-data) - The PDF Viewer allows you to import form field data into an existing PDF document. This enables pre filled forms using external data sources. + Import form data to prefill fields from a JSON/FDF/XFDF source so forms are ready for review or signing. ## Fill PDF forms programmatically @@ -52,13 +52,13 @@ document.getElementById('updateBtn').onclick = function () { }; ``` -## Fill PDF forms through the User Interface +## Fill PDF forms through the user interface -The Syncfusion PDF Viewer allows users to fill PDF form fields directly through the user interface without using code. Users can click on form fields and enter or select values based on the field type. +The Syncfusion PDF Viewer lets users fill form fields directly in the viewer. Clicking a field allows users to enter text, select options, or sign where supported. -![Form Filling](../../javascript-es6/images/FormFields.gif) +![Fill text and signature fields in PDF Viewer](../../javascript-es6/images/FormFields.gif) -The PDF Viewer supports common form fields such as text boxes, check boxes, radio buttons, drop-down lists, list boxes, and signature fields. Filled values can be edited at any time, and the entered data is retained during the viewing session. +The PDF Viewer supports text boxes, check boxes, radio buttons, drop-down lists, list boxes, and signature fields. Filled values remain editable during the viewing session. {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-validation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-validation.md index 4787e0853..f85b4e680 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-validation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-validation.md @@ -7,20 +7,20 @@ control: PDF Viewer documentation: ug --- -# Validate PDF Form Fields in JavaScript PDF Viewer +# Validate PDF form fields in JavaScript PDF Viewer -The Syncfusion **JavaScript PDF Viewer** provides built in support for **validating form fields** before users perform actions such as **printing**, **downloading**, or **submitting** a PDF document. Validation ensures that all required form fields are filled before allowing these actions to complete. -This feature helps enforce data completeness and improves the reliability of collected form data. +The Syncfusion **JavaScript PDF Viewer** provides built-in support for **validating form fields** before users perform actions such as **printing**, **downloading**, or **submitting** a PDF document. Validation ensures that required form fields are completed before allowing these actions to proceed and improves the reliability of collected data. ## How PDF Form Validation Works Form field validation follows this flow: --- Enable validation using the [enableFormFieldsValidation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) property. --- Handle the [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#validateformfields) event to determine which required fields are not filled. -- When validation is enabled and a user attempts to print, download, or submit the document: - - The [validateFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#validateformfields) event is triggered. - - Unfilled required fields are listed in args.nonFillableFields. - - You can cancel the action, show an error message, or move focus to an invalid field. +- Enable validation using the [enableFormFieldsValidation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) property. +- Handle the [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#validateformfields) event to determine which required fields are not filled. + +When validation is enabled and a user attempts to print, download, or submit the document: +- The [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#validateformfields) event is triggered. +- Unfilled required fields are listed in `args.formField` (or `args.nonFillableFields` in some viewer versions). +- Cancel the action, show an error message, or move focus to an invalid field. ## Enable PDF Form Field Validation @@ -88,10 +88,10 @@ pdfviewer.validateFormFields = function (args) { ## Tips -- Use isRequired to clearly mark mandatory fields. +- Use `isRequired` to mark mandatory fields. - Validation is triggered only during [print](../print), [download](../download), or **submit** actions. - For custom validation logic (such as validating an email format): - -- Retrieve all form fields using [retrieveFormFields()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#retrieveformfields). + - Retrieve all form fields using [retrieveFormFields()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#retrieveformfields). - Apply custom checks before allowing the action to proceed. ## See Also diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/group-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/group-form-fields.md index baa4a54fa..974103c59 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/group-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/group-form-fields.md @@ -9,7 +9,7 @@ documentation: ug # Group form fields in JavaScript PDF Viewer -The Syncfusion **JavaScript PDF Viewer** allows you to **group multiple form fields into a single logical field** by assigning the **same Name** to them. Grouped form fields share their values and states automatically based on the field type. You can group form fields using the **Form Designer UI** or **programmatically using APIs**, making it easy to keep related fields synchronized across the PDF document. +The Syncfusion **JavaScript PDF Viewer** allows you to group multiple form fields into a single logical field by assigning the same `name` property to them. Grouped form fields share their values and states automatically based on the field type. Grouping is available in the Form Designer UI and programmatically via the form designer APIs, making it easy to keep related fields synchronized across the PDF document. This page covers: - [How form field grouping works](#how-grouping-works) @@ -21,30 +21,30 @@ This page covers: ## How grouping works -In a PDF form, multiple PDF Form Fields can represent the same logical form field. When PDF Form Fields share the same **Name**, they are treated as a group and stay synchronized. +In a PDF form, multiple PDF form fields can represent the same logical field. When PDF form fields share the same `name` property, they are treated as a group and stay synchronized. ## Field behavior by type -- **Textbox and Password** — Text entered in one widget appears in all widgets with the same Name. -- **CheckBox** — Checking one widget sets the checked state for all checkboxes with the same Name. -- **RadioButton** — Widgets with the same Name form a radio group; only one option can be selected. -- **ListBox and DropDown** — The selected value is shared across widgets with the same Name. -- **Signature and Initial fields** — Applied signature/initial is mirrored across grouped widgets. +- **Textbox and Password** — Text entered in one widget appears in all widgets with the same `name` property. +- **CheckBox** — Checking one widget sets the checked state for all checkboxes with the same `name` property. +- **RadioButton** — Widgets with the same `name` property form a radio group; only one option can be selected. +- **ListBox and DropDown** — The selected value is shared across widgets with the same `name` property. +- **Signature and Initial fields** — Applied signature or initial is mirrored across grouped widgets. -N>Form field grouping is controlled by the **Name** property. The position of each widget is determined only by its bounds; grouping is not affected by location. +N> Form field grouping is controlled by the `name` property. The position of each widget is determined by its bounds; grouping is not affected by location. ## Group using the Form Designer UI **Steps** 1. Enable the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar). 2. Add the form fields you want to group. -3. Select a form field, open **Properties**, and set the **Name** value. -4. Assign the same **Name** to all PDF Form Field that belong to the group. +3. Select a form field, open Properties, and set the `name` value. +4. Assign the same `name` value to all PDF form fields that belong to the group. 5. Apply the changes and verify that updates in one widget reflect in the others. -![Grouping textboxes with the same name](../../javascript-es6/images/groupTextFileds.png) +![Grouping textboxes using the same name property](../../javascript-es6/images/groupTextFileds.png) -![Grouping radio buttons with the same name](../../javascript-es6/images/groupRadiobutton.png) +![Grouping radio buttons using the same name property](../../javascript-es6/images/groupRadiobutton.png) ## Group PDF Form Fields Programmatically diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/export-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/export-form-fields.md index d282e37a8..f1237aa31 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/export-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/export-form-fields.md @@ -18,13 +18,13 @@ The PDF Viewer allows you to export form field data in multiple formats for easy ## Available methods -- [exportFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportformfields)(destination?, format) — Exports data to a file in the specified format. -- [exportFormFieldsAsObject](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportformfieldsasobject)(format) — Exports data as a JavaScript object for custom handling. -- [importFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format) — Import data back into the PDF. +- [`exportFormFields(destination?, format)`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportformfields) — Exports form field data to a file in the specified format; when `destination` is omitted the browser prompts for download. +- [`exportFormFieldsAsObject(format)`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportformfieldsasobject) — Returns a Promise that resolves to a JavaScript object containing the exported form data for custom handling. +- [`importFormFields(sourceOrObject, format)`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importformfields) — Imports form data back into the PDF Viewer. ## How to export -Use [exportFormFields()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportformfields) with an optional destination path and the format type. +Use [`exportFormFields()`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportformfields) with an optional `destination` path and the format type. If `destination` is omitted the browser prompts the user to download the exported file; when providing a server path, ensure the server is configured to accept and store uploaded files. ### Export as FDF The following example exports form field data as FDF. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-export-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-export-events.md index a5446b02c..0f8a8faee 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-export-events.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-export-events.md @@ -7,23 +7,23 @@ control: PDF Viewer documentation: ug --- -# PDF Form Import and Export Events in JavaScript +# PDF form import and export events in JavaScript -Import/Export events let you **track and customize the entire life cycle** of form data being imported into or exported from the PDF Viewer. +Import/export events let users track and customize the lifecycle of form data imported into or exported from the PDF Viewer. Use these events to: -- Validate inputs before processing. -- Show progress indicators. -- Log audit trails. -- Block operations based on business rules. +- validate inputs before processing +- show progress indicators +- log audit trails +- block operations based on business rules Each event provides detailed context through typed event arguments such as [ImportStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importstarteventargs), [ImportSuccessEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importsuccesseventargs), [ImportFailureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importfailureeventargs), [ExportStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportstarteventargs), [ExportSuccessEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportsuccesseventargs), and [ExportFailureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportfailureeventargs). -## Import Events -- [importStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importstart) — Fires when an import begins. -- [importSuccess](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importsuccess) — Fires when form fields are successfully imported. -- [importFailed](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importfailed) — Fires if the import fails. +## Import events +- [`importStart`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importstart) — Fires when an import begins. +- [`importSuccess`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importsuccess) — Fires when form fields are successfully imported. +- [`importFailed`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importfailed) — Fires if the import fails. -**Example: Handle Import Events** +**Example: Handle import events** ```js // ...viewer initialization... @@ -41,12 +41,12 @@ viewer.importFailed = function (args) { }; ``` -## Export Events -- [exportStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportstart) — Fires when an export begins. -- [exportSuccess](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportsuccess) — Fires when form fields are successfully exported. -- [exportFailed](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportfailed) — Fires if the export fails. +## Export events +- [`exportStart`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportstart) — Fires when an export begins. +- [`exportSuccess`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportsuccess) — Fires when form fields are successfully exported. +- [`exportFailed`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportfailed) — Fires if the export fails. -**Example: Handle Export Events** +**Example: Handle export events** ```js // ...viewer initialization... @@ -64,9 +64,9 @@ viewer.exportFailed = function (args) { }; ``` -## Key Notes -- importStart, importSuccess, importFailed cover the full import life cycle. -- exportStart, exportSuccess, exportFailed cover the full export life cycle. +## Key notes +- `importStart`, `importSuccess`, `importFailed` cover the full import lifecycle. +- `exportStart`, `exportSuccess`, `exportFailed` cover the full export lifecycle. ## See also @@ -79,5 +79,4 @@ viewer.exportFailed = function (args) { - [Import form fields](./import-form-fields) - [Export form fields](./export-form-fields) - [Form validation](../form-validation) -- [Form fields API](../form-fields-api) - [Form fields API](../form-fields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-form-fields.md index f7b889900..0849db4d9 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/import-export-form-fields/import-form-fields.md @@ -16,9 +16,9 @@ The **PDF Viewer** lets you import values into interactive form fields in the cu - [JSON](#import-json) ## API to use -- [importFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format) +- [`importFormFields(sourceOrObject, format)`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importformfields) — Imports form data into the currently loaded PDF. The `sourceOrObject` parameter accepts a file path or URL, a file stream, or a JavaScript object; the `format` parameter accepts `FDF`, `XFDF`, or `JSON`. -N>If you’re using a **server-backed viewer**, set serviceUrl before importing. +N> For server-backed viewers, set `serviceUrl` before importing. The method triggers import events (`importStart`, `importSuccess`, `importFailed`); see the import/export events page for recommended handling. ### Import FDF @@ -74,7 +74,7 @@ document.getElementById('importJson').addEventListener('click', function () { - [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) - [Export form fields](./export-form-fields) - [Import Export Events](./import-export-events) -- [Create Edit form fields](../overview-create-forms) +- [Create form fields](../overview-create-forms) - [Group form fields](../group-form-fields) - [Form validation](../form-validation) - [Add custom data to form fields](../custom-data) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/create-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/create-form-fields.md index 31e381a8f..7be1dcc36 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/create-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/create-form-fields.md @@ -7,12 +7,12 @@ control: PDF Viewer documentation: ug --- -# Create PDF Form Fields in JavaScript +# Create PDF form fields in JavaScript -You can create or add new form fields either visually using the [Form Designer UI](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) or dynamically using APIs. +Form fields can be created visually using the [Form Designer UI](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) or dynamically using APIs. -## Create Form Fields Using the Form Designer UI -Use this approach when you want to design forms manually without writing code. +## Create form fields using the Form Designer UI +Use this approach when designing forms manually without writing code. **Steps:** @@ -24,9 +24,9 @@ Use this approach when you want to design forms manually without writing code. ![Adding a form field using the Form Designer UI](../../../javascript-es6/images/FormDesigner.gif) -## Add Form Fields Programmatically (API) +## Add form fields programmatically (API) -Use this approach when you want to generate form fields dynamically based on data or application logic. +Use this approach to generate form fields dynamically based on data or application logic. ```js // Add Text Box using addFormField Method @@ -199,15 +199,15 @@ pdfviewer.formDesignerModule.addFormField('InitialField', { }); ``` -## Add Fields Dynamically with setFormFieldMode +## Add fields dynamically with setFormFieldMode -Use **setFormFieldMode()** to add fields on the fly based on user actions. +Use `setFormFieldMode()` to add fields on the fly based on user actions. -### Edit Form Fields in JavaScript PDF Viewer -You can edit form fields using the UI or API. +### Edit form fields in JavaScript PDF Viewer +Form fields can be edited using the UI or API. #### Edit Using the UI -- Right click a field → **Properties** to update settings. (Image here) +- Right-click a field → **Properties** to update settings. - Drag to move; use handles to resize. - Use the toolbar to toggle field mode or add new fields. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/customize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/customize-form-fields.md index f8a5e34f9..5a1236e92 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/customize-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/customize-form-fields.md @@ -7,19 +7,19 @@ control: PDF Viewer documentation: ug --- -# Customize the appearance of PDF Form Fields in JavaScript PDF Viewer +## Customize the appearance of PDF form fields in JavaScript -**Styling** customizes appearance only (font, color, alignment, border, background, indicator text). +Styling customizes appearance only (font, color, alignment, border, background, indicator text). -## Customize Appearance of Form Fields Using the UI +## Customize appearance of form fields using the UI Use the **Properties** panel to adjust: -- Font family/size, text color, alignment -- Border color/thickness -- Background color +- font family/size, text color, alignment +- border color/thickness +- background color ![Textbox style from UI](../../../javascript-es6/images/ui-textbox-style.png) -## Customize appearance Form Fields Programmatically -Use [updateFormField()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#updateformfields) to apply styles: +## Customize appearance of form fields programmatically +Use [`updateFormField()`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#updateformfields) to apply styles: ```html ``` @@ -47,7 +47,7 @@ document.getElementById('CustomizeTextboxStyle').addEventListener('click', funct }); ``` -## Set Default Styles for New Form Fields +## Set default styles for new form fields Define defaults so fields added from the toolbar inherit styles. ```js // Apply as defaults for Textbox added from toolbar diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/modify-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/modify-form-fields.md index fe5a7e6b2..5fc6fe53a 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/modify-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/modify-form-fields.md @@ -7,17 +7,17 @@ control: PDF Viewer documentation: ug --- -# Modify PDF Form Field Properties in JavaScript PDF Viewer -You can modify form fields using the **UI** or **API**. +# Modify PDF form field properties in JavaScript +Form fields can be modified using the UI or API. -## Modify PDF Form Field Properties using the UI -- Right click a field → **Properties** to update settings. +## Modify PDF form field properties using the UI +- Right-click a field → **Properties** to update settings. ![Textbox properties panel](../../../javascript-es6/images/ui-textbox-edit.png) - Drag to move; use handles to resize. - Use the toolbar to toggle field mode or add new fields. -## Modify PDF Form Field Properties programmatically -Use [updateFormField()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#updateformfields) to change behavior/data (including position and size): +## Modify PDF form field properties programmatically +Use [`updateFormField()`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#updateformfields) to change behavior or data (including position and size): ```html @@ -46,12 +46,12 @@ document.getElementById('modifyTextbox').addEventListener('click', function () { }); ``` -## Modify PDF Form Field Properties by Field type +## Modify PDF form field properties by field type ### Textbox - UI: Update value, font, size, colors, border thickness, alignment, max length, multiline. ![Textbox properties panel](../../../javascript-es6/images/ui-textbox-edit.png) -- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for value, typography, alignment, colors, borders. +- API: [`updateFormField()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for value, typography, alignment, colors, borders. ```html @@ -84,7 +84,7 @@ document.getElementById('modifyTextbox').addEventListener('click', function () { - UI: Tooltip, required, max length, font, appearance. ![Password edited from UI](../../../javascript-es6/images/ui-password-edit.png) -- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, validation flags, typography, colors, alignment, borders. +- API: [`updateFormField()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, validation flags, typography, colors, alignment, borders. ```html ``` @@ -117,7 +117,7 @@ document.getElementById('modifyPasswordBox').addEventListener('click', function ### CheckBox - UI: Toggle checked state. ![CheckBox edited from UI](../../../javascript-es6/images/ui-checkbox-edit.png) -- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for isChecked, tooltip, colors, borders. +- API: [`updateFormField()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for isChecked, tooltip, colors, borders. ```html ``` @@ -141,9 +141,9 @@ document.getElementById('modifyCheckbox').addEventListener('click', function () ``` ### RadioButton -• UI: Set selected item in a group (same Name). +- UI: Set selected item in a group (same Name). ![RadioButton edited from UI](../../../javascript-es6/images/ui-radiobutton-edit.png) -• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to set selected value and border appearance. +- API: [`updateFormField()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to set selected value and border appearance. ```html ``` @@ -162,9 +162,9 @@ document.getElementById('editRadio').addEventListener('click', function () { ``` ### ListBox -• UI: Add/remove items, set selection, adjust fonts/colors. +- UI: Add/remove items, set selection, adjust fonts/colors. ![ListBox edited from UI](../../../javascript-es6/images/ui-listbox-edit.png) -• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, selection, borders. +- API: [`updateFormField()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, selection, borders. ```html ``` @@ -195,9 +195,9 @@ document.getElementById('editListBox').addEventListener('click', function () { ``` ### DropDown -• UI: Add/remove items, default value, appearance. +- UI: Add/remove items, default value, appearance. ![DropDown edited from UI](../../../javascript-es6/images/ui-dropdown-edit.png) -• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, value, borders. +- API: [`updateFormField()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, value, borders. ```html ``` @@ -227,9 +227,9 @@ document.getElementById('editDropDown').addEventListener('click', function () { ``` ### Signature Field -• UI: Tooltip, thickness, indicator text, required/visibility. +- UI: Tooltip, thickness, indicator text, required/visibility. ![Signature field edited from UI](../../../javascript-es6/images/ui-signature-edit.png) -• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders. +- API: [`updateFormField()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders. ```html ``` @@ -254,9 +254,9 @@ document.getElementById('editSignature').addEventListener('click', function () { ``` ### Initial Field -• UI: Tooltip, indicator text, thickness, required/visibility. +- UI: Tooltip, indicator text, thickness, required/visibility. ![Initial field edited from UI](../../../javascript-es6/images/ui-initial-edit.png) -• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders. +- API: [`updateFormField()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders. ```html ``` @@ -287,7 +287,7 @@ document.getElementById('editInitial').addEventListener('click', function () { - [Form Designer overview](../overview) - [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) - [Create form fields](./create-form-fields) -- [Remove form Fields](./remove-form-fields) +- [Remove form fields](./remove-form-fields) - [Style form fields](./customize-form-fields) - [Group form fields](../group-form-fields) - [Form validation](../form-validation) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/move-resize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/move-resize-form-fields.md index 093fbd3cf..b58cf8146 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/move-resize-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/move-resize-form-fields.md @@ -7,18 +7,18 @@ control: PDF Viewer documentation: ug --- -# Move and Resize PDF Form Fields in JavaScript PDF Viewer +# Move and resize PDF form fields in JavaScript - **Move**: Drag the form field to reposition it. - **Resize**: Use the resize handles to change width and height. -![Moveing and Resizing a form field](../../../javascript-es6/images/move-resize-forms.gif) +![Moving and resizing a form field](../../../javascript-es6/images/move-resize-forms.gif) -## Move and Resize Fields Programmatically (API) +## Move and resize fields programmatically (API) You can set absolute bounds or move fields by a delta. **Set absolute bounds** ```html - + ``` ```js // Move & resize by setting absolute bounds @@ -28,7 +28,7 @@ document.getElementById('resizeMove').addEventListener('click', function () { // Find the textbox field by name (Here field name is First Name) var field = (fields || []).find(function (f) { return f && f.name === 'First Name'; }) || (fields || [])[0]; // Update Name accordingly if (field) { - // Update bounds to move or resize formfields + // Update bounds to move or resize form fields pdfviewer.formDesignerModule.updateFormField(field, { bounds: { X: 140, Y: 210, Width: 220, Height: 24 } // new absolute position & size }); @@ -41,7 +41,7 @@ document.getElementById('resizeMove').addEventListener('click', function () { - [Form Designer overview](../overview) - [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) - [Create form fields](./create-form-fields) -- [Remove form Fields](./remove-form-fields) +- [Remove form fields](./remove-form-fields) - [Customize form fields](./customize-form-fields) - [Group form fields](../group-form-fields) - [Form validation](../form-validation) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/remove-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/remove-form-fields.md index 610f2e1b8..a4a8df74f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/remove-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/manage-form-fields/remove-form-fields.md @@ -7,17 +7,17 @@ control: PDF Viewer documentation: ug --- -# Remove PDF Form Fields from a PDF in JavaScript +# Remove PDF form fields from a PDF in JavaScript -## Remove Form Fields Using the UI +## Remove form fields using the UI **Steps:** 1. Enable **Form Designer mode**. 2. Select the form field. 3. Click **Delete** in the toolbar or press the **Delete** key. ![Form Designer toolbar with Delete icon](../../../javascript-es6/images/ui-del-formfields.png) -## Remove Form Fields Programmatically -Use [deleteFormField()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formdesigner#deleteformfield) with a field reference or ID. +## Remove form fields programmatically +Use [`deleteFormField()`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formdesigner#deleteformfield) with a field reference or ID. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/overview-create-forms.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/overview-create-forms.md index 83abe6c20..fa01fdfab 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/overview-create-forms.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/overview-create-forms.md @@ -7,10 +7,9 @@ control: PDF Viewer documentation: ug --- -# Create, Edit, Style, and Remove Form Fields in JavaScript PDF Viewer +# Create and manage form fields in JavaScript PDF Viewer -The [JavaScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/overview) allows you to create interactive PDF form fields, update their behavior and appearance, and remove them when they are no longer needed. -All form field operations can be performed using either the [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) or [JavaScript APIs.](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/overview) +The [JavaScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/overview) allows you to create interactive PDF form fields, update their behavior and appearance, and remove them when they are no longer needed. All form field operations can be performed using either the [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) or [JavaScript APIs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/overview). This section explains how to: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/overview.md index 7ee1f5c4e..0c1fdc606 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/overview.md @@ -9,9 +9,9 @@ documentation: ug # Overview of Forms in JavaScript PDF Viewer -The Syncfusion PDF Viewer delivers a complete, easy-to-use PDF forms experience. You can read, fill, add, edit, and delete form fields directly within your PDF documents. These actions are supported through both the intuitive user interface and powerful programmatic APIs. +The Syncfusion PDF Viewer delivers a complete, easy-to-use PDF forms experience. Users can read, fill, add, edit, and delete form fields directly within PDF documents via the intuitive user interface or programmatic APIs. -The viewer also includes smooth import and export support for form data, making integration effortless. Developers benefit from extensive API control, while end users enjoy a clean and simple interface designed for a seamless and stress-free form-filling experience. +The viewer includes import and export support for form data, making integration straightforward. Developers benefit from extensive API control, while end users enjoy a simple interface for seamless form filling. ## Filling PDF Forms @@ -43,7 +43,7 @@ var pdfviewer = new ej.pdfviewer.PdfViewer({ pdfviewer.appendTo('#PdfViewer'); ``` -![FormFilling](../../javascript-es6/images/FormFields.gif) +![Fill text and signature fields in PDF Viewer](../../javascript-es6/images/FormFields.gif) 1. [Programmatically Form fill](./form-filling#fill-pdf-forms-programmatically) 2. [Form Fill Using UI](./form-filling#fill-pdf-forms-through-the-user-interface) @@ -51,7 +51,7 @@ pdfviewer.appendTo('#PdfViewer'); ## Form Designer -A built in Form Designer lets you quickly add, edit, move, and delete form fields in the PDF documents. This viewer allows you to design fillable PDF forms interactively either using the built-in form designer tools or building your own customized form designer tools. +A built-in Form Designer lets you quickly add, edit, move, and delete form fields in PDF documents. Use the built-in Form Designer tools or build custom form designer tools to design fillable PDF forms interactively. See the [Form Designer](./form-designer) page for full details. @@ -80,7 +80,7 @@ var pdfviewer = new ej.pdfviewer.PdfViewer({ pdfviewer.appendTo('#PdfViewer'); ``` -![FormDesigner](../../javascript-es6/images/FormDesigner.gif) +![Form Designer toolbar and field creation](../../javascript-es6/images/FormDesigner.gif) Create and customize interactive fields directly on the PDF page. - [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), or [remove](./manage-form-fields/remove-form-fields) forms diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started-with-server-backed.md index 44dd6f336..304874b9e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started-with-server-backed.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started-with-server-backed.md @@ -37,7 +37,7 @@ This guide explains how to create the PDF Viewer component and configure its fea {% endhighlight %} {% endtabs %} -N> We have provided the support to dynamically change the [serviceURL](https://ej2.syncfusion.com/documentation/api/pdfviewer#serviceurl). So, after changing the `serviceURL` dynamically, you need invoke the `pdfViewer.dataBind()` method to update the `serviceURL` quickly. This will effectively change the `serviceURL` dynamically. Ensure that this step is performed after version 23.1.36. +N> The PDF Viewer supports dynamically changing the [serviceURL](https://ej2.syncfusion.com/documentation/api/pdfviewer#serviceurl). After changing `serviceUrl` at runtime, call `pdfViewer.dataBind()` to apply the new value. This behavior applies to versions after 23.1.36. document.getElementById('load').addEventListener('click', function () { pdfViewer.serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"; pdfViewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; @@ -45,7 +45,7 @@ document.getElementById('load').addEventListener('click', function () { pdfViewer.load(pdfViewer.documentPath, null); }); -N> The Web API hosted link https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer utilized in the PDF viewer's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/pdfviewer-server) for hosting your own web service and use for the serviceUrl property. **We strongly recommend using the standalone mode.** +N> The demo Web API hosted at https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer is provided for evaluation only. For production, host a web service with appropriate server configuration. See the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/pdfviewer-server) for reference. Standalone mode is recommended for client-side rendering. {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/es5-getting-started-cs1" %} @@ -102,7 +102,7 @@ var pdfviewer = new ej.pdfviewer.PdfViewer({ }); ``` -N> When configuring the server-backed PDF viewer, it's essential to understand that there is no need to include the pdfium.js and pdfium.wasm files. Unlike the standalone PDF viewer, which relies on these files for local rendering, the server-backed PDF viewer fetches and renders PDFs directly from the server. Consequently, you can exclude the copy command for deployment process, as they are not required to load and display PDFs in this context. +N> The server-backed PDF Viewer does not require `pdfium.js` and `pdfium.wasm` files. Those files are used by the standalone viewer for client-side rendering; server-backed setups render PDFs on the server and therefore do not need to include them in deployment. > Refer to the [JavaScript PDF Viewer feature tour](https://www.syncfusion.com/pdf-viewer-sdk) for an overview of capabilities. Explore the [JavaScript PDF Viewer example](https://document.syncfusion.com/demos/pdf-viewer/javascript-es5/#/tailwind3/pdfviewer/default.html) to see core features in action. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started.md index 2641a4a43..5a8f37aa8 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started.md @@ -8,15 +8,15 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in JavaScript Standalone PDF Viewer control +# Getting started in JavaScript standalone PDF Viewer control -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +Essential JS 2 for JavaScript provides an ES5-compatible global script build that works in modern browsers without a build step. -## Component Initialization with CDN link for script and style reference +## Component initialization with CDN links for script and style reference **Step 1:** Create an app folder `my-app` for the Essential JS 2 JavaScript components. -**Step 2:** The Essential JS 2 component's global scripts and styles are already hosted in the below CDN link formats. +**Step 2:** The Essential JS 2 component's global scripts and styles are hosted at the following CDN link formats. **Syntax:** > Script: `https://cdn.syncfusion.com/ej2/{Version}/dist/{PACKAGE_NAME}.min.js` diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to-overview.md index 734e520dd..15fb54372 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to-overview.md @@ -8,9 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Frequently Asked Questions Section in JavaScript PDF Viewer control +## Frequently Asked Questions in JavaScript PDF Viewer -The frequently asked questions in Essential® PDF Viewer are listed below. +The frequently asked questions for the Essential® PDF Viewer are listed below. * [How to add annotation in text search in typescript?](./how-to/add-annotation-in-text-search-js) * [How to add custom header to the PDF Viewer ajax request?](./how-to/add-header-value) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-annotation-in-text-search-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-annotation-in-text-search-js.md index 608f0481f..a08a00c47 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-annotation-in-text-search-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-annotation-in-text-search-js.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Add rectangle annotations using text search bounds in JS PDF Viewer -A concise guide to adding rectangle annotations at highlighted text search results in the JavaScript PDF Viewer to visually emphasize matches and improve readability. +A concise guide that demonstrates how to add rectangle annotations at highlighted text search results in the JavaScript PDF Viewer. The guide explains where to wire the callback, required services, and quick troubleshooting steps. ## Steps to add rectangle annotations on search result highlight diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-header-value.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-header-value.md index 19f5ba372..46237f594 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-header-value.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-header-value.md @@ -9,9 +9,9 @@ documentation: ug # Add header values in the JavaScript PDF Viewer -Use the ajaxHeaders property in the PDF Viewer’s [ajaxRequestSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings) to include custom headers with each AJAX request. +Use the `ajaxHeaders` property inside the PDF Viewer’s [ajaxRequestSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#ajaxrequestsettings) to send custom HTTP headers with each request made by the viewer. -Example: Add a custom Authorization header using ajaxRequestSettings +Example: Add a custom Authorization header using `ajaxRequestSettings` in an JavaScript component ```ts diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-new-page-to-the-pdf-document.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-new-page-to-the-pdf-document.md index 8640a9db1..c9dcc6c1b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-new-page-to-the-pdf-document.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-new-page-to-the-pdf-document.md @@ -10,13 +10,13 @@ domainurl: ##DomainURL## # Add a new page to a PDF document in JavaScript PDF Viewer control -The JavaScript PDF Viewer library can append a blank page to any loaded PDF document through the accompanying PDF library service. +The JavaScript PDF Viewer can append a blank page to a loaded PDF document by using the accompanying PDF library service on the server. **Step 1:** Follow the guidance in the [Getting started with the JavaScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) article to configure a working sample. -**Step 2:** Complete the web service setup by using this [guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/how-to/create-pdfviewer-service). +**Step 2:** Complete the web service setup using this [guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/how-to/create-pdfviewer-service). -**Step 3:** Add the following controller action to insert a new page into the loaded PDF document before returning it to the viewer. +**Step 3:** Add the following controller action to insert a new page into the loaded PDF document before returning it to the viewer. The example below is a server-side controller action; validate inputs and add appropriate error handling for production use. ```javascript diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-save-button-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-save-button-js.md index 91bef26a1..167d26e7b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-save-button-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-save-button-js.md @@ -8,15 +8,15 @@ documentation: ug domainurl: ##DomainURL## --- -# Add Save button in Built-In Toolbar in JavaScript +# Add Save button in built-in toolbar in JavaScript PDF Viewer -PDF Viewer supports customizing toolbar items, including adding, showing, hiding, enabling, and disabling items. +The PDF Viewer supports customizing toolbar items, including adding, showing, hiding, enabling, and disabling items. - Save button: The Save button can be defined using [CustomToolbarItemModel](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/customToolbarItem/) and included alongside existing items via [ToolbarSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/). Handle the click action using [`toolbarclick`](https://ej2.syncfusion.com/javascript/documentation/api/toolbar/clickEventArgs/). - Show or hide: The Save button can be shown or hidden using [ToolbarSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/). Predefined items are listed under [`ToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarItem/). -- Enable or disable: The Save button can be enabled or disabled using [`enabletoolbaritem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar/#enabletoolbaritem). +- Enable or disable: The Save button can be enabled or disabled using `enableToolbarItem` (see the API reference linked for the toolbar). {% tabs %} {% highlight js tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/annotation-selector.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/annotation-selector.md index 3e90a4a44..ec4755d4c 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/annotation-selector.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/annotation-selector.md @@ -29,5 +29,8 @@ document.getElementById('annotationSelector').addEventListener('click', () => { ``` -Sample: [How to customize the annotation selector] -(https://stackblitz.com/edit/js-5p3ae6?file=index.js) \ No newline at end of file +The `resizerShape` property accepts values such as `Circle` or `Square` to change the appearance of the annotation resize handles. The example assumes at least one annotation exists; to avoid errors, verify `viewer.annotationCollection.length > 0` before calling `editAnnotation`. + +Sample: [How to customize the annotation selector](https://stackblitz.com/edit/js-5p3ae6?file=index.js) + +Accessibility: Use descriptive button labels and add an `aria-label` when a button uses an icon-only label. Ensure the toolbar or control used to trigger selector changes is reachable by keyboard navigation. \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/change-author-name-using-annotation-settings.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/change-author-name-using-annotation-settings.md index a5dbb0528..39ae82b07 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/change-author-name-using-annotation-settings.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/change-author-name-using-annotation-settings.md @@ -10,9 +10,9 @@ domainurl: ##DomainURL## # Change author name using annotation settings in JavaScript PDF Viewer -The PDF Viewer allows customizing individual annotation settings using the annotationSettings API, which exposes properties common to all annotations. +The PDF Viewer allows customizing individual annotation settings through the `annotationSettings` API, which exposes properties common to all annotations. See the annotationSettings API reference for full details. -API name: annotationSettings +API: `annotationSettings` (refer to the API reference) | Property Name | Data type & Default Value | Description | |---|---|---| @@ -27,7 +27,7 @@ API name: annotationSettings | Free Text Settings | | allowOnlyTextInput | Boolean (false) | Specifies text-only mode for free text annotations. If true, moving or resizing is disabled. | -Change the author name and other properties using the annotationSettings API as shown below. +Change the author name and other properties using the `annotationSettings` API as shown below. {% tabs %} {% highlight ts tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/clear-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/clear-annotation.md index 1b197a416..28574df2a 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/clear-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/clear-annotation.md @@ -10,9 +10,9 @@ domainurl: ##DomainURL## # Clear annotations in JavaScript PDF Viewer -Use the [deleteAnnotations](https://ej2.syncfusion.com/documentation/api/pdfviewer/#deleteannotations) method to clear all annotations in the currently loaded document. +Use the [deleteAnnotations](https://ej2.syncfusion.com/documentation/api/pdfviewer/#deleteannotations) method to remove all annotations from the currently loaded document. -Example: Clear all annotations in the loaded document +Example: clear all annotations in the loaded document ``` @@ -22,16 +22,16 @@ Example: Clear all annotations in the loaded document ```javascript -//clear Annotations. -document.getElementById('deleteAnnotations').addEventListener('click',()=> { +// Attach a click handler to clear annotations +document.getElementById('deleteAnnotations').addEventListener('click', () => { viewer.deleteAnnotations(); -}) +}); ``` -To remove a specific annotation, use the deleteAnnotationById method to target an annotation by its id. +To remove a specific annotation, use the `deleteAnnotationById` method and provide the target annotation's id. -Example: Delete a specific annotation by id +Example: delete a specific annotation by id ``` @@ -41,7 +41,7 @@ Example: Delete a specific annotation by id ```javascript -//Delete Annotation by ID. +// Delete a specific annotation by id document.getElementById('deleteAnnotationbyId').addEventListener('click', () => { viewer.annotationModule.deleteAnnotationById( viewer.annotationCollection[0].annotationId diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/configure-annotationselector-setting-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/configure-annotationselector-setting-js.md index e7622db1a..4dd97afa1 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/configure-annotationselector-setting-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/configure-annotationselector-setting-js.md @@ -41,14 +41,16 @@ Steps to configure annotation selector settings #### Key properties -- selectionBorderColor: Sets the color for the border around selected annotations. -- resizerBorderColor: Sets the color for the border of the resizer handles. -- resizerFillColor: Defines the fill color for the resizer handles. -- resizerSize: Determines the size of the resizer handles. -- selectionBorderThickness: Specifies the thickness of the selection border. -- resizerShape: Sets the shape of the resizer handles (for example, Circle or Square). -- selectorLineDashArray: Specifies the dash pattern for the selector line. -- resizerLocation: Determines where the resizers appear relative to the annotation (for example, Corners or Edges). -- resizerCursorType: Sets the cursor style when hovering over a resizer. +- `selectionBorderColor`: Sets the color for the border around selected annotations. Provide a color value (for example, `#4070FF`) to make the selection visible. +- `resizerBorderColor`: Sets the color for the border of the resizer handles. +- `resizerFillColor`: Defines the fill color for the resizer handles. +- `resizerSize`: Determines the size of the resizer handles. +- `selectionBorderThickness`: Specifies the thickness of the selection border. +- `resizerShape`: Sets the shape of the resizer handles (for example, `Circle` or `Square`). +- `selectorLineDashArray`: Specifies the dash pattern for the selector line. +- `resizerLocation`: Determines where the resizers appear relative to the annotation (for example, `Corners` or `Edges`). +- `resizerCursorType`: Sets the cursor style when hovering over a resizer. + +N> In the example code block `selectionBorderColor` is left empty for demonstration; supply a color string when configuring the viewer. Also ensure `resizerShape` and `resizerBorderColor` use the correct value types — `resizerShape` expects a shape name (for example, `Circle`) while `resizerBorderColor` expects a color value. [View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/control-annotation-visibility-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/control-annotation-visibility-js.md index 05eeb3013..ffa605c17 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/control-annotation-visibility-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/control-annotation-visibility-js.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## ### Overview -This guide explains how to control the visibility of PDF annotations in documents loaded and saved using the Syncfusion PDF Viewer in JavaScript, so annotations are visible only in the viewer when required. +This guide explains how to control the visibility of PDF annotations in documents loaded and saved using the Syncfusion PDF Viewer in JavaScript, so annotations remain visible in the viewer but can be hidden or omitted in saved/downloaded files. ### Steps to control annotation visibility diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/create-pdfviewer-service-core.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/create-pdfviewer-service-core.md index 7673c6cd5..f9e3f3227 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/create-pdfviewer-service-core.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/create-pdfviewer-service-core.md @@ -7,45 +7,47 @@ control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Create PDF Viewer service in JavaScript PDF Viewer +# Create a PDF Viewer service for the JavaScript PDF Viewer -The PDF Viewer depends on a server-side service to process PDF documents for rendering. This section explains how to create an ASP.NET Core Web API service for the PDF Viewer to perform server-side preprocessing and operations used by the client. +The JavaScript PDF Viewer requires a server-side service to process PDF documents for rendering. This document explains how to create an ASP.NET Core Web API service that performs server-side preprocessing and operations used by the client. + +This guide shows how to implement rendering, text extraction, thumbnail generation, annotation handling, and other server-side features required by the viewer. ## Prerequisites -To get started with an ASP.NET Core Web API service, refer to [System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetcore/documentation/system-requirements) +To get started with an ASP.NET Core Web API service, refer to [System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetcore/documentation/system-requirements). ## Set up an ASP.NET Core application with Web API for the PDF Viewer service Follow these steps to create the PDF Viewer service -**Step 1:** Select File > New > Project, in the Visual Studio menu bar. +**Step 1:** In Visual Studio, choose File > New > Project to create a new application. -![Alt text](./images/Start.png) +![Visual Studio: New Project menu](./images/Start.png) -**Step 2:** Select ASP.NET Core Web Application and then click **Next**. +**Step 2:** Select the ASP.NET Core Web Application template and click **Next**. -![Alt text](./images/Coreapp.png) +![Select ASP.NET Core Web Application template](./images/Coreapp.png) -**Step 3:** In the Configure your new project dialog, enter Project Name and select **Next**. +**Step 3:** In the Configure your new project dialog, enter a project name and click **Next**. -![Alt text](./images/Coreapp1.png) +![Configure project name dialog](./images/Coreapp1.png) -**Step 4:** In the Additional information dialog, select .NET 6.0 (Long-term Support) and then select **Create**. +**Step 4:** In the Additional information dialog, choose .NET 6.0 (Long-term Support) and click **Create**. -![Alt text](./images/CoreappCreate.png) +![Choose .NET 6.0 in Additional information dialog](./images/CoreappCreate.png) -**Step 5:** After creating the project, add the [Syncfusion.EJ2.PdfViewer.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.PdfViewer.AspNet.Core) dependency to your project by using 'NuGet Package Manager'. +**Step 5:** After creating the project, add the [Syncfusion.EJ2.PdfViewer.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.PdfViewer.AspNet.Core) dependency using the NuGet Package Manager. -Open the `NuGet` package manager. -![Alt text](./images/Nugetpackage.png) +Open the NuGet Package Manager and install the `Syncfusion.EJ2.PdfViewer.AspNet.Core` package. Install the **Syncfusion.EJ2.PdfViewer.AspNet.Core** package to the application. ![Alt text](./images/viewer-dependency.png) **Step 6:** Add an API controller to the project and name it `PdfViewerController`. -![Alt text](./images/apicontroller.png) + +![Add API Controller dialog](./images/apicontroller.png) **Step 7:** Add the following code to the `PdfViewerController.cs` controller. @@ -426,4 +428,6 @@ app.MapControllers(); app.Run(); ``` -View the sample in GitHub on [how to create PDF Viewer web service](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core/PdfViewerWebService_6.0) \ No newline at end of file +Replace the empty `licenseKey` value with a valid Syncfusion license key before deploying this service; obtain license information from the Syncfusion account portal. + +View the sample in GitHub: [PDF Viewer web service sample on GitHub](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core/PdfViewerWebService_6.0) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/create-pdfviewer-service.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/create-pdfviewer-service.md index 04bab6b43..4f4a53a19 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/create-pdfviewer-service.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/create-pdfviewer-service.md @@ -7,38 +7,40 @@ control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Create PDF Viewer service using ASP.NET MVC +# Create a PDF Viewer service using ASP.NET MVC -The PDF Viewer relies on a server-side service to process PDF documents for rendering. This section explains how to create an ASP.NET MVC Web API service to perform server-side preprocessing for the client. +The JavaScript PDF Viewer requires a server-side service to process PDF documents for rendering. This document explains how to create an ASP.NET MVC Web API service that performs server-side preprocessing and operations used by the client. + +This guide covers rendering, text extraction, thumbnail generation, annotation import/export, and other server-side capabilities required by the viewer. ## Prerequisites -To get started with an ASP.NET MVC Web API service, ensure the following software is installed: +To get started with an ASP.NET MVC Web API service, ensure the following software and tooling are available: -* .NET Framework 4.5 or later -* ASP.NET MVC 4 or ASP.NET MVC 5 -* Web API -* Visual Studio +- Visual Studio 2019 or later (recommended) +- .NET Framework 4.5 or later (use the version supported by the target project) +- ASP.NET MVC 4 or 5 and Web API 2 +- `Syncfusion.EJ2.PdfViewer.AspNet.MVC5` — use the latest stable release compatible with the target framework ## Set up an ASP.NET MVC application with Web API for the PDF Viewer service Follow these steps to create the PDF Viewer service -**Step 1:** Create an ASP.NET web application using the default template in Visual Studio 2017. +**Step 1:** Create a new ASP.NET web application using the default template in Visual Studio. -![Alt text](./images/default-template.png) +![Create new ASP.NET web application template](./images/default-template.png) -**Step 2:** After creating the project, add the `Syncfusion.EJ2.PdfViewer.AspNet.MVC5` dependency using NuGet Package Manager. +**Step 2:** After creating the project, add the `Syncfusion.EJ2.PdfViewer.AspNet.MVC5` dependency using the NuGet Package Manager. -Open the `NuGet` package manager. -![Alt text](./images/solution-explorer.png) +Open the NuGet Package Manager and install the `Syncfusion.EJ2.PdfViewer.AspNet.MVC5` package. -Install the **Syncfusion.EJ2.PdfViewer.AspNet.Mvc5** package for the application. +![NuGet Package Manager - Solution Explorer view](./images/solution-explorer.png) -![Alt text](./images/pdfviewer-dependency.png) +![Install Syncfusion.EJ2.PdfViewer.AspNet.MVC5 package](./images/pdfviewer-dependency.png) **Step 3:** Add a Web API 2 controller to the project and name it `PdfViewerController`. -![Alt text](./images/api-controller.png) + +![Add Web API controller dialog](./images/api-controller.png) **Step 4:** Add the following code to `PdfViewerController.cs`. @@ -251,7 +253,7 @@ namespace MvcWebService.webapi ``` -**Step 5:** Configure the CORS policy in the `web.config` file. +**Step 5:** Configure the CORS policy in `web.config` to allow cross-origin requests from the client application. Example custom headers are shown below; adjust origins and headers to follow security best practices for production. ```xml @@ -265,7 +267,7 @@ namespace MvcWebService.webapi ``` -**Step 6:** Set global configuration in `Global.asax`: +**Step 6:** Configure global Web API routing in `Global.asax`: ``` System.Web.Http.GlobalConfiguration.Configuration.Routes.MapHttpRoute( @@ -275,4 +277,4 @@ namespace MvcWebService.webapi AppDomain.CurrentDomain.SetData("SQLServerCompactEditionUnderWebHosting", true); ``` -Download the sample to [create a PDF Viewer web service](https://www.syncfusion.com/downloads/support/directtrac/general/ze/MvcWebService587924662.zip) \ No newline at end of file +Download the sample: [PDF Viewer web service sample (MVC)](https://www.syncfusion.com/downloads/support/directtrac/general/ze/MvcWebService587924662.zip) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/custom-context-menu-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/custom-context-menu-js.md index 84bd74098..2d9d41522 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/custom-context-menu-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/custom-context-menu-js.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Customize the context menu in JavaScript PDF Viewer -PDF Viewer supports adding custom options to the context menu using the [addCustomMenu()](https://ej2.syncfusion.com/documentation/api/pdfviewer#addcustommenu) method. Define actions for custom items with the [customContextMenuSelect()](https://ej2.syncfusion.com/documentation/api/pdfviewer#customcontextMenuselect) method. +The PDF Viewer supports adding custom options to the context menu using the [addCustomMenu()](https://ej2.syncfusion.com/documentation/api/pdfviewer#addcustommenu) method. Define actions for custom items with the [customContextMenuSelect()](https://ej2.syncfusion.com/documentation/api/pdfviewer#customcontextMenuselect) method. ### Add a custom option @@ -272,10 +272,10 @@ The following is the output of the custom context menu with customization. {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer#serviceurl) in the `index.ts` file +N> To set up the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file: + `pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';` {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/custom-context-menu" %} -[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Custom%20Context%20Menu) \ No newline at end of file +[Custom context menu sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Custom%20Context%20Menu) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/custom-font-signature-field-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/custom-font-signature-field-js.md index 9c4a3697a..3ea6a144a 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/custom-font-signature-field-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/custom-font-signature-field-js.md @@ -10,15 +10,15 @@ domainurl: ##DomainURL## # Change the font family for type signatures in JavaScript -Change the font family for Type Signature and Initial fields by adding a stylesheet to load fonts and assigning them via the PDF Viewer settings. Include Google Font links in the HTML head to use those fonts. +Change the font family for Type Signature and Initial fields by loading the desired fonts and assigning them in the PDF Viewer configuration. Include font stylesheet links (for example, Google Fonts) in the HTML head before initializing the viewer. ### Signature field property The PDF Viewer supports changing fonts for Signature and Initial fields using the `typeSignatureFonts` and `typeInitialFonts` properties. -**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) to create a simple PDF Viewer sample. +**Step 1:** Follow the getting-started guide for the JavaScript PDF Viewer to create a simple sample: [Getting started with JavaScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started). -**Step 2:** Use the following code to apply custom fonts to the Signature field. +**Step 2:** Use the following configuration to apply custom fonts to the Signature field. {% tabs %} {% highlight ts tabtitle="Standalone" %} @@ -46,7 +46,7 @@ pdfviewer.appendTo('#PdfViewer'); ### Initial field property -Use the following code to apply custom fonts to the Initial field. +Use the following configuration to apply custom fonts to the Initial field. {% tabs %} {% highlight ts tabtitle="Standalone" %} @@ -72,4 +72,4 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -By implementing this configuration, custom fonts can be used for both Signature and Initial form fields. +After implementing this configuration, the specified custom fonts are available for both Signature and Initial form fields. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/custom-fonts.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/custom-fonts.md index 47bd26b5a..9d74a4516 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/custom-fonts.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/custom-fonts.md @@ -10,8 +10,9 @@ domainurl: ##DomainURL## # Add Custom Fonts to PDF Forms in JavaScript PDF Viewer -The Syncfusion **JavaScript PDF Viewer** supports loading, editing, and saving **custom fonts** in form fields such as [TextBox](../forms/manage-form-fields/create-form-fields#textbox), [ListBox](../forms/manage-form-fields/create-form-fields#listbox), and [DropDown](../forms/manage-form-fields/create-form-fields#dropdown) fields using the customFonts property. This ensures consistent text rendering even when the required fonts are not installed on the user’s system. -Custom fonts are embedded and preserved when form fields are modified or saved, making the PDF display correctly across environments. +The Syncfusion **JavaScript PDF Viewer** supports loading, editing, and saving **custom fonts** in form fields such as [TextBox](../forms/manage-form-fields/create-form-fields#textbox), [ListBox](../forms/manage-form-fields/create-form-fields#listbox), and [DropDown](../forms/manage-form-fields/create-form-fields#dropdown) fields using the `customFonts` property. This ensures consistent text rendering when required fonts are not installed on the user’s system. + +Custom fonts are embedded and preserved when form fields are modified or saved, ensuring the PDF renders correctly across environments. ## When dynamic fonts are used Dynamic fonts are currently used in the following scenarios: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/customize-text-search-colors.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/customize-text-search-colors.md index 1d00d1609..df43d1952 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/customize-text-search-colors.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/customize-text-search-colors.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Customize text search color in PDF Viewer -Change the text search colors using the `textSearchColorSettings` properties. Set `searchColor` for matched text and `searchHighlightColor` for the active result. Both accept hexadecimal color values. +Change the text search and highlight colors using the `textSearchColorSettings` properties. Set `searchColor` for matched text and `searchHighlightColor` for the active result. Both properties accept hexadecimal color values. ```javascript @@ -31,7 +31,7 @@ The above sets the active result highlight to blue. - [searchColor](https://ej2.syncfusion.com/documentation/api/pdfviewer/textSearchColorSettings/#searchcolor) - [searchHighlightColor](https://ej2.syncfusion.com/documentation/api/pdfviewer/textSearchColorSettings/#searchhighlightcolor) -Example: Buttons to control search flow +Example: buttons to control search flow ``` diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/delete-annotations.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/delete-annotations.md index 840b0c443..3a04a0f39 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/delete-annotations.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/delete-annotations.md @@ -14,9 +14,9 @@ Use the `deleteAnnotationById()` method to remove a specific annotation from a P ### Steps to delete a specific annotation -**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/) to create a simple PDF Viewer sample. +**Step 1:** Follow the getting-started guide to create a simple PDF Viewer sample: [Getting started with JavaScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/). -**Step 2:** Use the following code to delete a specific annotation using `deleteAnnotationById()`. +**Step 2:** Add a control to trigger deletion and use the following example to call `deleteAnnotationById()`. ``` diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/disable-tile-renderings.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/disable-tile-renderings.md index 0d7bfcc88..9cc29f8b3 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/disable-tile-renderings.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/disable-tile-renderings.md @@ -10,21 +10,20 @@ domainurl: ##DomainURL## # Disable tile rendering in JavaScript PDF Viewer -Use the `enableTileRendering` property to enable or disable tile rendering, which affects performance based on document size. +Use the `enableTileRendering` property to enable or disable tile rendering. Tile rendering is enabled by default and typically improves performance for large documents. Set `enableTileRendering` to `false` to disable tile rendering when it is not required. -Set `enableTileRendering` to `false` to disable tile rendering. It is enabled by default and typically benefits large documents. +- Include the JavaScript PDF Viewer script and the `ThumbnailView`/`Navigation` modules if using related features. +- Initialize the viewer instance before changing tile rendering settings at runtime. -Example: Disable tile rendering +Example: disable tile rendering with a button ``` - - + ``` ```javascript - -// Disable tile rendering. +// Disable tile rendering at runtime document.getElementById('disable').addEventListener('click', () => { viewer.tileRenderingSettings.enableTileRendering = false; }); diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/display-custom-tool-tip-for-annotations.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/display-custom-tool-tip-for-annotations.md index c861ab844..ac9e09b1f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/display-custom-tool-tip-for-annotations.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/display-custom-tool-tip-for-annotations.md @@ -10,9 +10,13 @@ domainurl: ##DomainURL## # Display a custom tooltip for annotations in JavaScript PDF Viewer -Display custom tooltips for annotations by handling the [annotationMouseover](https://ej2.syncfusion.com/documentation/api/pdfviewer/#annotationmouseover) and annotationMouseLeave events. +Display custom tooltips for annotations by handling the [annotationMouseover](https://ej2.syncfusion.com/documentation/api/pdfviewer/#annotationmouseover) and `annotationMouseLeave` events. -Example: Show a tooltip on mouse over +- Include the JavaScript PDF Viewer script and the `Annotation` module on the page. +- Include the `ej.popups` module or equivalent tooltip library used in the example. +- Ensure the viewer instance is initialized before attaching the event handlers. + +Example: show a tooltip on mouse over ```javascript @@ -35,4 +39,4 @@ viewer.annotationMouseLeave = function(args) { ``` -Sample: [How to display a custom tooltip for annotations using mouseover](https://stackblitz.com/edit/ztmvjx-byzwvq?file=index.js) \ No newline at end of file +Sample: [Display a custom tooltip for annotations sample on GitHub/StackBlitz](https://stackblitz.com/edit/ztmvjx-byzwvq?file=index.js) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/download-document-on-window-closing.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/download-document-on-window-closing.md index 2176de2f1..c970999bc 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/download-document-on-window-closing.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/download-document-on-window-closing.md @@ -10,26 +10,31 @@ domainurl: ##DomainURL## # Download document on window closing in JavaScript PDF Viewer -The JavaScript PDF Viewer can automatically download the loaded PDF document when the browser window is refreshed or closed by handling the [onbeforeunload](https://ej2.syncfusion.com/documentation/api/pdfviewer/#unload) event. +The JavaScript PDF Viewer can automatically download the loaded PDF document when the browser window is refreshed or closed by handling the [onbeforeunload](https://developer.mozilla.org/en-US/docs/Web/API/Window/onbeforeunload) event. -**Step 1:** Configure a working sample by following the instructions in [Getting started with the JavaScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/). +## Prerequisites -**Step 2:** Add the following script to prompt the user when the window closes or refreshes and trigger the document download. +- Include the JavaScript PDF Viewer script and initialize the viewer instance on the page. +- Confirm the viewer has finished loading the document before attaching the `onbeforeunload` handler. -```ts +**Step 1:** Create a working sample by following the getting-started guide: [Getting started with JavaScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/). -//The event triggers while closing or refreshing the window. -window.onbeforeunload = function(e){ - var message = "Do you want to close the page?" - e = e || window.event; - //For IE and Firefox. - if (e) { +**Step 2:** Attach an `onbeforeunload` handler that prompts the user and calls `viewer.download()` to download the document. Note: browser behavior for `onbeforeunload` varies between browsers and some modern browsers restrict prompts; use this pattern judiciously. + +```js +// The event triggers when closing or refreshing the window. +window.onbeforeunload = function (e) { + var message = 'Do you want to close the page?'; + e = e || window.event; + // For IE and some older browsers + if (e) { e.returnValue = message; - //Method to download the document. + // Trigger the viewer download method viewer.download(); - } } - + // For modern browsers, returning a value is not always required + return message; +}; ``` -[View the sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/Download/Download%20the%20pdf%20document%20before%20closing%20window%20or%20refresh) \ No newline at end of file +View the sample on GitHub/StackBlitz: [Download PDF before closing or refreshing window sample](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/Download/Download%20the%20pdf%20document%20before%20closing%20window%20or%20refresh) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/download-start-event-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/download-start-event-js.md index 432e2d95a..9146138e1 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/download-start-event-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/download-start-event-js.md @@ -10,12 +10,15 @@ domainurl: ##DomainURL## # Control file downloads in PDF Viewer -Use the downloadStart event to intercept the start of a download and optionally cancel it. In the event handler, set `args.cancel = true` to prevent the download. +Use the `downloadStart` event to intercept the start of a viewer download and optionally cancel it. Set `args.cancel = true` in the event handler to prevent the download. + +- Include the JavaScript PDF Viewer script and the `Download`/`Toolbar` modules if the download feature is used. +- Ensure the viewer instance is initialized before assigning the `downloadStart` handler. ```js pdfviewer.downloadStart = args => { - // Your custom logic here - args.cancel = true; // Prevent download action + // Apply custom logic here + args.cancel = true; // Prevent the download action }; ``` @@ -23,4 +26,4 @@ By default, `args.cancel` is `false`, so the download proceeds unless explicitly ### Flexibility -Leverage the [downloadStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/#downloadstart) event to apply custom rules for allowing or preventing downloads based on application needs. \ No newline at end of file +Leverage the [downloadStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/#downloadstart) event to apply custom rules for allowing or preventing downloads based on application logic. \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/enable-local-storage-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/enable-local-storage-js.md index 59e398818..5f49e8313 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/enable-local-storage-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/enable-local-storage-js.md @@ -14,18 +14,28 @@ Use the `enableLocalStorage` property to control whether session-specific data i ### Use enableLocalStorage -Set `enableLocalStorage` to manage storage behavior. When `true`, data is kept in memory; otherwise, session storage is used. +Set `enableLocalStorage` to manage storage behavior. When `true`, session-specific data is kept in memory; when `false` (default), session storage is used. ```js var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); - //To enable Local Storage - pdfviewer.enableLocalStorage=true; - pdfviewer.appendTo('#PdfViewer'); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.Print, + ej.pdfviewer.Navigation, + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.FormFields, + ej.pdfviewer.PageOrganizer +); +// To enable in-memory session storage +pdfviewer.enableLocalStorage = true; +pdfviewer.appendTo('#PdfViewer'); ``` ### Considerations diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/enable-resize-text.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/enable-resize-text.md index 461660a24..649cb6a70 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/enable-resize-text.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/enable-resize-text.md @@ -10,7 +10,10 @@ domainurl: ##DomainURL## # Enable resize for text markup annotations -Enable the resizer for text markup annotations using [enableTextMarkupResizer](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enabletextmarkupresizer). The default value is `false`. +Enable the resizer for text markup annotations by setting the viewer's `enableTextMarkupResizer` property. This enables drag handles for text markup annotations (highlight, underline, and strikeout) so users can resize them after creation. The default value is `false`. + +- The PDF Viewer scripts and styles must be included and the viewer initialized. See the getting-started guide for setup details. +- Set this property on the viewer instance after it is created and before interacting with annotations. Example: Enable resizer @@ -22,3 +25,5 @@ viewer.enableTextMarkupResizer = true; ``` Sample: [Enable the resizer for text markup annotations](https://stackblitz.com/edit/qzf6bk-xsk9pf?devtoolsheight=33&file=index.js) + +N> Consider adding a screenshot or short GIF showing the resizer handle for visual clarity; include descriptive alt text for accessibility. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/enable-text-selection-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/enable-text-selection-js.md index ce13d533a..9f1ef4316 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/enable-text-selection-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/enable-text-selection-js.md @@ -14,7 +14,7 @@ Use the `enableTextSelection` property to control whether users can select text ## Configure on initialization -Set initial behavior when instantiating the PDF Viewer. +Set initial behavior when instantiating the PDF Viewer. Set this property on the viewer configuration before calling `appendTo` so the initial state is applied when the viewer is rendered. ```js var pdfviewer = new ej.pdfviewer.PdfViewer({ @@ -29,7 +29,7 @@ pdfviewer.appendTo('#PdfViewer'); ## Toggle dynamically -Change the behavior at runtime using buttons or other UI. +Change the behavior at runtime using buttons or other UI. Update the property on the viewer instance and the viewer will reflect the change without reinitialization. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/export-as-image-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/export-as-image-js.md index 98750f06e..e78e0fb2c 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/export-as-image-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/export-as-image-js.md @@ -10,14 +10,13 @@ domainurl: ##DomainURL## # Export pages as images in JavaScript PDF Viewer -Export a single page as a Base64-encoded image using `exportAsImage()` or export a range of pages using `exportAsImages()`. +Export pages as Base64-encoded images using `exportAsImage()` for a single page or `exportAsImages()` for a range. These APIs return Base64-encoded image strings suitable for further processing or download. ### Steps to export pages as images -**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/) to create a simple PDF Viewer sample. - -**Step 2:** Use the following code to export a specified page as a Base64-encoded image or a range of pages as Base64-encoded images. +**Step 1:** Create a simple PDF Viewer sample by following the getting-started guide: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/ +**Step 2:** Use the following code to export a specified page as a Base64-encoded image or a range of pages as Base64-encoded images. Place the button elements in the HTML and attach event handlers after the viewer is initialized. ``` diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/extract-text-completed-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/extract-text-completed-js.md index 5b84d6d53..6a8453ce4 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/extract-text-completed-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/extract-text-completed-js.md @@ -9,7 +9,7 @@ documentation: ug # Use extractTextCompleted to extract text in JavaScript PDF Viewer -Use the [isExtractText](https://ej2.syncfusion.com/documentation/api/pdfviewer/#isextracttext) property and the [extractTextCompleted](https://ej2.syncfusion.com/documentation/api/pdfviewer/#extracttextcompleted) event to extract page text along with bounds. +Use the [isExtractText](https://ej2.syncfusion.com/documentation/api/pdfviewer/#isextracttext) property together with the [extractTextCompleted](https://ej2.syncfusion.com/documentation/api/pdfviewer/#extracttextcompleted) event to extract page text and its positional bounds from a loaded PDF document. The following example shows how to enable text extraction and handle the completion event: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/extract-text-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/extract-text-js.md index 02588c922..d1ccb8ad5 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/extract-text-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/extract-text-js.md @@ -7,7 +7,7 @@ control: PDF Viewer documentation: ug --- -# Extract text using extractText in JavaScript PDF Viewer +# Extract text option in the JavaScript PDF Viewer The `extractText` method extracts text from one or more pages and can return plain text or text with bounds for each element. @@ -25,13 +25,10 @@ Retrieves text data from one page or a range of pages based on the specified opt #### Available Options -- **None:** No text information is extracted or returned. This is useful when you want to optimize memory usage and don't need any text data. - -- **TextOnly:** Extracts only the plain text from the document. This option excludes any layout or positional information. - -- **BoundsOnly:** Extracts layout information, such as bounds or coordinates, without including the plain text data. - -- **TextAndBounds:** Extracts both the plain text and the layout (bounds) information, which is the default behavior. +- **None** — Do not extract or return any text or layout data. Use this option to minimize memory usage when textual information is not required. +- **TextOnly** — Return plain text only; layout and bounds are omitted. Note: using `TextOnly` may disable some viewer text features such as synchronous `findText`; use `findTextAsync` when asynchronous search is required. +- **BoundsOnly** — Return layout and positional data (bounds) without the plain text content. +- **TextAndBounds** — Return both plain text and its positional information (bounds). This is the default and is useful when both content and layout are required. #### Returns Returns a Promise with: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/extract-text-option-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/extract-text-option-js.md index ac8de1885..0b970ed77 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/extract-text-option-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/extract-text-option-js.md @@ -7,21 +7,16 @@ control: PDF Viewer documentation: ug --- -# Configure extractTextOption in JavaScript PDF Viewer +# Extract text option in the JavaScript PDF Viewer -The `extractTextOption` property controls how text is extracted and optimizes memory usage. It also affects the data returned in the `extractTextCompleted` event. Choose one of the following options to determine the text and layout data to retrieve. +The `extractTextOption` property controls the amount of text and layout information returned by the viewer. Adjusting this value helps balance memory usage and the level of detail required for downstream processing. The viewer exposes four options: ### Available Options: -**None:** No text information is extracted or returned. This is useful when you want to optimize memory usage and don't need any text data. - -**TextOnly:** Extracts only the plain text from the document. This option excludes any layout or positional information. - -**BoundsOnly:** Extracts layout information, such as bounds or coordinates, without including the plain text data. - -**TextAndBounds:** Extracts both the plain text and the layout (bounds) information, which is the default behavior. - -The following example demonstrates how to configure the `extractTextOption` property to control the level of text extraction: +- **None** — Do not extract or return any text or layout data. Use this option to minimize memory usage when textual information is not required. +- **TextOnly** — Return plain text only; layout and bounds are omitted. Note: using `TextOnly` may disable some viewer text features such as synchronous `findText`; use `findTextAsync` when asynchronous search is required. +- **BoundsOnly** — Return layout and positional data (bounds) without the plain text content. +- **TextAndBounds** — Return both plain text and its positional information (bounds). This is the default and is useful when both content and layout are required. ```js diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/find-text-async-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/find-text-async-js.md index da5fc340a..eef95d0b3 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/find-text-async-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/find-text-async-js.md @@ -46,7 +46,7 @@ document.getElementById('findTexts').addEventListener('click', function () { ### Description -The `findTextAsync` method is designed for performing an asynchronous text search within a PDF document. You can use it to search for a single string or multiple strings, with the ability to control case sensitivity. By default, the search is applied to all pages of the document. However, you can adjust this behavior by specifying the page number (pageIndex), which allows you to search only a specific page if needed. +The `findTextAsync` method performs an asynchronous text search within a PDF document. It returns a Promise that resolves with an array of result objects describing each match. Each match object contains information such as the page index and the bounding rectangles for the matched text, which can be used to highlight or navigate to occurrences. By default, the search runs across all pages; supply the optional `pageIndex` parameter to limit the search to a specific page. ### Parameters diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/get-base64-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/get-base64-js.md index 284fbe3d9..779b9621a 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/get-base64-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/get-base64-js.md @@ -8,20 +8,22 @@ documentation: ug domainurl: ##DomainURL## --- -# Get Base64 value from a loaded PDF in JavaScript +# Retrieve Base64 from a PDF in JavaScript PDF Viewer ### Overview -This guide shows how to get the base64-encoded value of a PDF loaded in the Syncfusion PDF Viewer using JavaScript. This is useful for sending the PDF as a base64 string or processing it on the client. +This guide shows how to obtain the Base64-encoded value of a PDF document loaded in the Syncfusion® PDF Viewer using JavaScript. Producing a Base64 string is useful for sending the PDF to a server, embedding it in JSON payloads, or client-side processing. -### How to Retrieve Base64 Value +### How to retrieve the Base64 value -**Step 1:** Follow the steps in the [Get started with JavaScript ES5 PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) guide to create a sample. +**Step 1:** Create the PDF Viewer sample** +Follow the [Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) guide for the JavaScript PDF Viewer. -**Step 2:** Create a Button in Your HTML File -Add a button element in your HTML file that will trigger the conversion to a base64 string. +**Step 2:** Set up the JavaScript component** + +Create an JavaScript component and update the template to include a button that triggers conversion to a Base64 string. The samples below show both standalone and server-backed viewer configurations. ```html @@ -57,6 +59,6 @@ function base64ofloadedDocument() { ``` ### Conclusion -By following these steps, a loaded PDF can be converted to a Base64 string on button click for transfer or processing. +By implementing these steps in the JavaScript component, a PDF document loaded in the Syncfusion® PDF Viewer can be converted into a Base64-encoded data URL when a button is clicked. This facilitates the manipulation or transfer of PDF data as needed [View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/get-page-info-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/get-page-info-js.md index 008676e75..01acd8a06 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/get-page-info-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/get-page-info-js.md @@ -10,7 +10,8 @@ domainurl: ##DomainURL## # Get page info in JavaScript PDF Viewer -Use the **getPageInfo()** method to retrieve information for a specified page, including height, width, and rotation. + +Use the **getPageInfo()** method to retrieve metadata for a specified page, including height, width, and rotation. The method returns an object with numeric `height` and `width` values (in CSS pixels) and a `rotation` value (degrees). The following steps show how to use `getPageInfo`. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/load-document-after-resources-loaded.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/load-document-after-resources-loaded.md index 779890914..530b83e34 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/load-document-after-resources-loaded.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/load-document-after-resources-loaded.md @@ -10,15 +10,15 @@ domainurl: ##DomainURL## # Load a PDF only after PDFium resources are ready -In Standalone mode, the JavaScript (ES5) PDF Viewer downloads its PDFium runtime assets (scripts/wasm) from the location specified in resourceUrl. Attempting to load a document before those assets are available can cause errors. Use the resourcesLoaded event to defer document loading until all required assets are ready. +When using the Standalone PDF Viewer, the component downloads the PDFium runtime assets (scripts/wasm) from the path specified in `resourceUrl`. Attempting to load a document before those assets are available can cause errors. Use the `resourcesLoaded` event to defer document loading until all required assets are ready. ## When does resourcesLoaded trigger? The resourcesLoaded event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the load method to open a document (by URL or Base64). -## How to Load Document after resourcesLoaded +## How to load a document after resourcesLoaded -- Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path). +- Set the `resourceUrl` to a valid PDF Viewer assets path (CDN or a hosted path). - Listen to resourcesLoaded and call load inside the handler. ```js diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/load-documents.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/load-documents.md index ddee5ea59..c063d96b5 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/load-documents.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/load-documents.md @@ -10,14 +10,13 @@ domainurl: ##DomainURL## # Load documents dynamically in JavaScript PDF Viewer -Load or switch PDF documents dynamically after the initial load. Use the [load](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#load) method to load a PDF by Base64 string or file name. +The PDF Viewer supports loading or switching PDF documents at runtime after the initial viewer initialization. Use the [load](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#load) method to open a document from a URL or a Base64 string. -The following steps show how to load a PDF dynamically. +The following steps show common approaches for loading documents dynamically. -**Step 1:** Follow the steps in the [Get started with JavaScript ES5 PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/) guide to create a sample. - -**Step 2:** Use the following code to load a PDF using a Base64 string. +**Step 1:** Follow the getting started guide to create a basic JavaScript PDF Viewer sample: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript/getting-started +**Step 2:** Use the following code snippet to load the document from a Base64 string. ``` ``` @@ -30,7 +29,7 @@ document.getElementById('load1').addEventListener('click', () => { } ``` -**Step 3:** Use the following code to load a PDF by document name. +**Step 3:** Use the following code snippet to load a PDF document from a URL (document name) ``` diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/min-max-zoom-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/min-max-zoom-js.md index 8e6f5d4f0..77ec13f32 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/min-max-zoom-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/min-max-zoom-js.md @@ -14,11 +14,11 @@ Control zoom levels in the PDF Viewer using the [minZoom](https://ej2.syncfusion ### minZoom -Specifies the minimum zoom percentage allowed. Prevents zooming out beyond a set limit to maintain readability and performance. +Specifies the minimum zoom percentage allowed. Set this value to prevent zooming out beyond a threshold that could reduce readability or impact performance. ### maxZoom -Defines the maximum zoom percentage allowed. Prevents excessive zooming that could affect performance and usability. +Defines the maximum zoom percentage allowed. Set this value to prevent excessive zooming that could affect performance or usability. {% tabs %} {% highlight ts tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/open-bookmark-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/open-bookmark-js.md index 5b38e5e87..def84f34a 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/open-bookmark-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/open-bookmark-js.md @@ -10,13 +10,13 @@ domainurl: ##DomainURL## # Open or close the Bookmark pane programmatically -Open the Bookmark pane programmatically using the `openBookmarkPane()` method. +The PDF Viewer exposes APIs to open and close the bookmark pane programmatically. Use `openBookmarkPane()` and `closeBookmarkPane()` to control the bookmark pane from application code. -The following steps are used to open the Bookmark. +Follow these steps to call the bookmark APIs from the application. -**Step 1:** Follow the steps in the [Get started with JavaScript ES5 PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) guide to create a sample. +**Step 1:** Create a basic PDF Viewer sample using the [getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) guide. -**Step 2:** Insert the following code snippet to implement the functionality for opening the Bookmark pane: +**Step 2:** Insert the following code snippet to implement opening the bookmark pane: ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/open-thumbnail-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/open-thumbnail-js.md index 85b6350b9..ca3271535 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/open-thumbnail-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/open-thumbnail-js.md @@ -10,13 +10,13 @@ domainurl: ##DomainURL## # Open the thumbnail pane programmatically -Open the thumbnail pane programmatically using the [openThumbnailPane()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/thumbnailView/#openthumbnailpane) method. +The PDF Viewer exposes a `openThumbnailPane()` API to open the thumbnail pane from application code. Use this API when the UI needs to show the thumbnail pane in response to user actions or programmatic workflows. -The following steps are used to open the thumbnail. +Follow these steps to open the thumbnail pane from application code. -**Step 1:** Follow the steps in the [Get started with JavaScript ES5 PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/) guide to create a sample. +**Step 1:** Create a basic PDF Viewer sample using the [getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) guide. -**Step 2:** Use the following code snippet to open thumbnail. +**Step 2:** Use the code snippet below to open the thumbnail pane. ``` diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/pagerenderstarted-pagerendercompleted-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/pagerenderstarted-pagerendercompleted-js.md index 903d7c1ac..7d68168e0 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/pagerenderstarted-pagerendercompleted-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/pagerenderstarted-pagerendercompleted-js.md @@ -14,11 +14,11 @@ In the Syncfusion PDF Viewer, the [pageRenderInitiate](https://ej2.syncfusion.co **pageRenderInitiate** -Triggered when page rendering begins. Use this event to initialize or set up resources before rendering starts. +Triggered when page rendering begins. Use this event to initialize or set up resources before rendering starts, or to display a progress indicator. **pageRenderComplete** -Triggered when page rendering completes. Use this event to perform cleanup or finalize rendering-related tasks. +Triggered when page rendering completes. Use this event to perform cleanup, hide progress indicators, or finalize rendering-related tasks. ```js pdfviewer.pageRenderInitiate = args => { diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/resolve-unable-to-find-an-entry-point-error.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/resolve-unable-to-find-an-entry-point-error.md index d185e435d..cd4317a81 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/resolve-unable-to-find-an-entry-point-error.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/resolve-unable-to-find-an-entry-point-error.md @@ -12,9 +12,9 @@ domainurl: ##DomainURL## Starting with **21.1.0.35 (2023 Volume 1)**, the Pdfium package was upgraded to improve text search, selection, rendering, and performance. After upgrading, the PDF Viewer may display a **“Web-Service is not listening”** error. In most cases, the Network tab reveals that an outdated Pdfium assembly is referenced in the local web service project. Ensure the correct native assembly is deployed for the target OS: -- Windows: pdfium.dll -- Linux: libpdfium.so -- macOS: libpdfium.dylib +- Windows: `pdfium.dll` +- Linux: `libpdfium.so` +- macOS: `libpdfium.dylib` ![Error information in the Network tab](../how-to/images/ErrorinformationuintheNetworkTab.png) @@ -23,4 +23,4 @@ Starting with **21.1.0.35 (2023 Volume 1)**, the Pdfium package was upgraded to 1. Delete the bin and obj folders in the web service project. 2. Rebuild and republish the web service. -N> If hosting in Azure, AWS, or Linux environments, remove old published files on the server before republishing. \ No newline at end of file +N> When hosting in cloud environments (Azure, AWS, container platforms), always remove or overwrite older published files to avoid stale native binaries remaining on the host. \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/restricting-zoom-in-mobile-mode-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/restricting-zoom-in-mobile-mode-js.md index d3b4a2a36..19d25e832 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/restricting-zoom-in-mobile-mode-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/restricting-zoom-in-mobile-mode-js.md @@ -8,9 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Restrict zoom percentage on mobile devices +# Restrict zoom percentage on mobile devices in JavaScript -Restrict zoom on mobile devices using the `maxZoom` and `minZoom` properties. This improves scrolling performance and document loading on mobile. +Use `minZoom` and `maxZoom` to restrict zoom levels on mobile devices and improve scrolling performance and perceived load time. Restricting zoom prevents extreme zoom levels that can degrade rendering performance on constrained devices. {% tabs %} {% highlight js tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/show-custom-stamp-item-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/show-custom-stamp-item-js.md index 5ffb023fb..4b57be141 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/show-custom-stamp-item-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/show-custom-stamp-item-js.md @@ -8,19 +8,19 @@ documentation: ug domainurl: ##DomainURL## --- -# Show custom items in the Custom Stamp dropdown +# Show custom items in the custom stamp dropdown ### Overview Add and display custom items in the Custom Stamp dropdown using JavaScript. This enables users to quickly apply personalized stamps in the PDF Viewer. -### Steps to show custom items in the Custom Stamp dropdown +### Steps to show custom items in the custom stamp dropdown -**Step 1:** Follow the steps in the [Get started with JavaScript ES5 PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) guide to create a sample. +**Step 1:** Create a basic JavaScript PDF Viewer sample using the getting started guide: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started **Step 2:** Configure custom stamp settings -Use `customStampSettings` to specify the custom stamps that should appear in the dropdown menu. +Use `customStampSettings` to define stamps that appear in the dropdown. The `customStampImageSource` value accepts a Base64 data URI or an absolute URL pointing to an image. ```js diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/show-hide-annotation-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/show-hide-annotation-js.md index c024fecd7..aaa85ae39 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/show-hide-annotation-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/show-hide-annotation-js.md @@ -8,11 +8,11 @@ documentation: ug domainurl: ##DomainURL## --- -# Show or hide annotations in the PDF Viewer +# Show or hide annotations in PDF Viewer ### Overview -Toggle annotation visibility in the Syncfusion PDF Viewer using JavaScript. Hide annotations for a cleaner view and show them again as needed. +This guide shows how to temporarily hide annotations and restore them later in the JavaScript PDF Viewer. This is useful for presenting a clean view of the document while preserving annotation data for later use. ### How to Toggle Annotation Visibility diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/signatureselect-signatureunselect-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/signatureselect-signatureunselect-js.md index abd48e9a3..f0d12ec92 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/signatureselect-signatureunselect-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/signatureselect-signatureunselect-js.md @@ -10,17 +10,17 @@ domainurl: ##DomainURL## # Handle signatureSelect and signatureUnselect events -Use the [signatureSelect](https://ej2.syncfusion.com/documentation/api/pdfviewer/#signatureselect) and [signatureUnselect](https://ej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) events to manage the selection state of handwritten signatures in the PDF Viewer. +The Syncfusion® PDF Viewer exposes events for monitoring the selection state of handwritten signature annotations: [signatureSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureSelectEventArgs/) and [signatureUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureUnselectEventArgs/). These events enable applications to respond when a signature annotation is selected or cleared—for example, updating the UI, enabling contextual actions, or recording metadata. **signatureSelect** -Triggered when a handwritten signature annotation is selected. Use this event to capture selection and update the UI or store state. +The `signatureSelect` event fires when a handwritten signature annotation is selected. Event arguments include details about the selected annotation and its page. Use this event to perform actions such as showing a properties panel or enabling signature-specific controls. **signatureUnselect** -Triggered when a handwritten signature annotation is unselected. Use this event to handle cleanup or update application state. +The `signatureUnselect` event fires when a handwritten signature annotation is unselected. Handle this event to perform cleanup tasks, hide contextual UI, or update application state. -The following code demonstrates how to subscribe to these events: +The following snippet shows how to subscribe to `signatureSelect` and `signatureUnselect` events in the PDF Viewer component. ```js pdfviewer.signatureSelect = (args: any) => { diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/unload-documents.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/unload-documents.md index f3b2eed11..d6db7fc50 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/unload-documents.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/unload-documents.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Unload document in JavaScript PDF Viewer -The PDF Viewer library allows you to unload the PDF document being display in the PDF Viewer control programmatically using the [**unload()**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#unload) method. +The PDF Viewer provides the [unload()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#unload) method to remove the currently loaded PDF from the viewer instance. Use this API to free memory or reset the viewer when navigating between documents or closing the viewer. The following steps are used to unload the PDF document programmatically. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/interaction-mode.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/interaction-mode.md index 315d4253c..e630e8abf 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/interaction-mode.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/interaction-mode.md @@ -8,9 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Interaction mode in Javascript PDF Viewer control +# Interaction mode in JavaScript PDF Viewer control -The PDF Viewer provides interaction mode for easy interaction with the loaded PDF document. Selection mode and panning mode are the two interactions modes. +The PDF Viewer provides interaction modes to control how users interact with the loaded PDF document. Two primary interaction modes are available: selection mode and panning mode. ## Selection mode diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/bookmark.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/bookmark.md index 92f2af106..923e47086 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/bookmark.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/bookmark.md @@ -8,10 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Bookmark navigation in JavaScript PDF Viewer control +# Bookmark navigation in JavaScript PDF Viewer -The Bookmarks saved in PDF files are loaded and made ready for easy navigation. -You can enable/disable bookmark navigation by using the following code snippet., +Bookmarks embedded in PDF files are loaded and exposed for quick navigation. Use the following code snippet to enable or disable bookmark navigation. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -47,9 +46,11 @@ pdfviewer.appendTo('#PdfViewer'); ![Bookmarks panel](../images/bookmark.png) -To perform bookmark navigation, you can use the **goToBookmark** method. It's important to note that the **goToBookmark** method will throw an error if the specified bookmark does not exist in the PDF document. +![Bookmarks panel and navigation](../images/bookmark.png) -Here is an example of how to use the **goToBookmark** method: +To navigate to a bookmark programmatically, use the **goToBookmark** method. The method throws an error if the specified bookmark does not exist in the document. + +Example usage is shown below; ensure the viewer instance variable used in these snippets is the same across your integration (for example `pdfviewer`). ``` @@ -61,13 +62,13 @@ document.getElementById('gotobookmark').addEventListener('click', () => { }); ``` -x - Specifies the pageIndex for Navigate. -y - Specifies the Y coordinates value of the Page. +- `x` — The page index to navigate to (zero-based). +- `y` — The vertical coordinate (Y offset) on the page to position the viewport. -Also, you can use the **getBookmarks** method to retrieve a list of all the bookmarks in a PDF document. This method returns a List of Bookmark objects, which contain information about each bookmark. +Use the **getBookmarks** method to retrieve all bookmarks in a document. It returns a list of bookmark objects containing properties such as `title`, `pageIndex`, and `destination`. A typical integration maps the returned list into a clickable navigation menu that calls `goToBookmark` with the selected bookmark's `pageIndex` and `destination` values. -Here is an example of how to use the getBookmarks method: +Example usage is shown below. ``` diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/hyperlink.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/hyperlink.md index 9ba7c22a2..da25174e6 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/hyperlink.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/hyperlink.md @@ -10,29 +10,29 @@ domainurl: ##DomainURL## # Hyperlink navigation in JavaScript PDF Viewer -The PDF Viewer consolidates hyperlink-driven experiences, including inline links and table-of-contents (TOC) entries that target in-document destinations. These elements surface contextual entry points so users can jump directly to relevant sections without manual scrolling. +The PDF Viewer supports hyperlink navigation for inline links and table-of-contents (TOC) entries that target destinations inside a document. These elements let users jump directly to relevant sections. -> **Note:** The table of contents pane and hyperlink interactions rely on the same navigation infrastructure. When these capabilities are enabled, the PDF Viewer automatically surfaces TOC entries and clickable links defined in the PDF. +N> The table of contents pane and hyperlink interactions share the same navigation infrastructure. When enabled, the PDF Viewer surfaces TOC entries and clickable links defined in the PDF. ## Required modules -Inject the following modules to enable both navigation experiences: `Toolbar`, `Magnification`, `Navigation`, `LinkAnnotation`, `BookmarkView`, `TextSelection`, `ThumbnailView`, and optionally `Annotation`. +Inject the following modules to enable navigation: `Toolbar`, `Magnification`, `Navigation`, `LinkAnnotation`, `BookmarkView`, `TextSelection`, `ThumbnailView`, and optionally `Annotation`. ## Table of contents navigation -Use the table of contents to quickly navigate to headings and sections defined in the PDF. When the document contains a bookmarks/outline structure, the viewer exposes those entries in the table of contents (Bookmarks) pane. Selecting an entry navigates directly to the mapped destination. If the PDF does not include a table of contents, the pane will not list any entries. +Use the table of contents to navigate to headings and sections defined in the PDF. When a document includes a bookmarks/outline structure, the viewer exposes those entries in the table of contents (bookmarks) pane. Selecting an entry navigates directly to the mapped destination. If the PDF does not include a table of contents, the pane remains empty. ![Table of contents pane in PDF Viewer](../images/toc.png) -## Hyperlink Navigation +## Hyperlink navigation -The PDF Viewer provides robust support for hyperlink navigation within PDF documents. This allows users to interact with embedded links, which can point to external websites or other locations within the same document. This section covers how to configure hyperlink behavior, including enabling or disabling links, controlling how they open, and responding to hyperlink-related events. +The PDF Viewer supports embedded links that point to external websites or to destinations inside the same document. This section explains how to enable or disable links, control how they open, and handle hyperlink-related events. -![Hyperlink Navigation in PDF Viewer](../images/link.png) +![Hyperlink navigation in PDF Viewer](../images/link.png) ### Enabling and Disabling Hyperlinks -By default, the PDF Viewer automatically detects and enables all hyperlinks present in a loaded document. This behavior can be controlled using the `enableHyperlink` property. +By default, the PDF Viewer detects and enables hyperlinks present in a loaded document. Use the `enableHyperlink` property to control this behavior. - **Property**: `enableHyperlink` - **Type**: `boolean` @@ -75,16 +75,16 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -> Note: Disabling hyperlinks only affects the viewer's behavior and does not alter the original PDF document. +N> Disabling hyperlinks affects only the viewer's behavior and does not modify the original PDF document. ### Controlling Link Behavior -The `hyperlinkOpenState` property determines how external URLs are opened when a hyperlink is clicked. +The `hyperlinkOpenState` property determines how external URLs open when a hyperlink is clicked. - **Property**: `hyperlinkOpenState` - **Type**: `'CurrentTab' | 'NewTab'` - **Default**: `'CurrentTab'` -By default, links open in the same browser tab (`CurrentTab`). To open links in a new tab, set this property to `'NewTab'`. This is useful for preserving the user's current viewing session. +By default, links open in the same browser tab (`CurrentTab`). To open links in a new tab, set this property to `'NewTab'`. The following example configures hyperlinks to open in a new tab: @@ -126,17 +126,17 @@ The PDF Viewer exposes events that allow for monitoring and customizing hyperlin #### hyperlinkClick -The `hyperlinkClick` event is triggered when a user clicks a hyperlink. This event can be used to implement custom logic, such as validating a URL or preventing the default navigation behavior. +The `hyperlinkClick` event is triggered when a user clicks a hyperlink. Use this event to validate a URL or prevent default navigation. -The event arguments provide the following information: +Event arguments: - `hyperlink`: The URL of the clicked hyperlink. -- `cancel`: A boolean that, when set to `true`, prevents the default navigation action. +- `cancel`: Boolean; set to `true` to prevent the default navigation action. #### hyperlinkMouseOver -The `hyperlinkMouseOver` event is triggered when the mouse pointer hovers over a hyperlink. This can be used to display custom tooltips or other visual feedback. +The `hyperlinkMouseOver` event is triggered when the mouse pointer hovers over a hyperlink and can be used to display custom tooltips or other visual feedback. -The event arguments include: +Event arguments: - `hyperlinkElement`: The HTML anchor element (``) corresponding to the hyperlink. The following example demonstrates how to use these events: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/page-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/page-thumbnail.md index 4b0d1dda6..a594d9630 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/page-thumbnail.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/page-thumbnail.md @@ -8,10 +8,10 @@ documentation: ug domainurl: ##DomainURL## --- -# Page Thumbnail navigation in JavaScript PDF Viewer control +# Page thumbnail navigation in JavaScript PDF Viewer -Thumbnails is the miniature representation of actual pages in PDF files. This feature displays thumbnails of the pages and allows navigation. -You can enable/disable thumbnail navigation by using the following code snippet., +Thumbnails are miniature representations of pages in a PDF file. The viewer displays page thumbnails to provide quick visual navigation. +Use the following code snippet to enable or disable the thumbnail pane. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -45,7 +45,7 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -![Alt text](../images/thumbnail.png) +![Page thumbnails pane in PDF Viewer](../images/thumbnail.png) ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/page.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/page.md index 89a0bd4f2..b074e006e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/page.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/page.md @@ -4,23 +4,22 @@ title: Page Navigation in JavaScript PDF Viewer control | Syncfusion description: Explore how to navigate pages in the Syncfusion JavaScript PDF Viewer control using built-in options for seamless document viewing. platform: document-processing control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## +documentation: ##DomainURL## --- -# Navigation in JavaScript PDF Viewer control +# Page navigation in JavaScript PDF Viewer -The JavaScript PDF Viewer supports different internal and external navigations. +The JavaScript PDF Viewer supports internal and external navigation. -## Toolbar page navigation option +## Toolbar page navigation options -The default toolbar of PDF Viewer contains the following navigation options +The default PDF Viewer toolbar provides the following navigation options: -* [**Go to page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotopage):- Navigates to the specific page of a PDF document. -* [**Show next page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotonextpage):- Navigates to the next page of PDF a document. -* [**Show previous page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotopreviouspage):- Navigates to the previous page of a PDF document. -* [**Show first page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotofirstpage):- Navigates to the first page of a PDF document. -* [**Show last page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotolastpage):- Navigates to the last page of a PDF document. +- [**Go to page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotopage) — Navigate to a specific page. +- [**Show next page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotonextpage) — Navigate to the next page. +- [**Show previous page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotopreviouspage) — Navigate to the previous page. +- [**Show first page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotofirstpage) — Navigate to the first page. +- [**Show last page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotolastpage) — Navigate to the last page. ```html @@ -36,7 +35,7 @@ The default toolbar of PDF Viewer contains the following navigation options ``` -You can enable/disable page navigation option in PDF Viewer using the following code snippet., +Use the following code snippet to enable or disable page navigation. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -72,7 +71,7 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -![page navigation in toolbar](../images/navigation.png) +![Page navigation toolbar in PDF Viewer](../images/navigation.png) Also, you can programmatically perform page navigation options as follows. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-amazon-s3.md index 63c582691..b719de55d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-amazon-s3.md @@ -186,14 +186,21 @@ N> Replace the placeholders with your actual AWS credentials and bucket name: Ac Set the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) to your web service endpoint (replace the localhost URL with your server URL). Set documentPath to the PDF file name to load from AWS S3. Ensure the document name matches an object in your bucket. ```javascript - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner +); + +var viewer = new ej.pdfviewer.PdfViewer(); // Replace the "localhost:44396" with the actual URL of your server viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; viewer.appendTo('#pdfViewer'); diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-azure-active-directory.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-azure-active-directory.md index 8b8d91465..c6cfb7d5a 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-azure-active-directory.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-azure-active-directory.md @@ -30,13 +30,15 @@ The JavaScript PDF Viewer component supports loading and saving PDF files with A ![app-registration](../images/app-registration.png) 3. **Create a Client Secret**: - - In the registered application, go to **Certificates & secrets**. - - Click **New client secret**. - - Provide a description and set an expiration period. - - Click **Add**. - - Copy the client secret value immediately, as it will be hidden later. Store it securely. + - In the registered application, go to **Certificates & secrets**. + - Click **New client secret**. + - Provide a description and set an expiration period. + - Click **Add**. + - Copy the client secret value immediately, as it will be hidden later. Store it securely. - ![client-secret](../images/client-secret.png) + ![client-secret](../images/client-secret.png) + +N> Avoid embedding client secrets directly in source control or client-side code. For production deployments prefer managed identities or use `DefaultAzureCredential` on the server to obtain tokens securely. Rotate and protect secrets via a secure secrets store. --- @@ -79,12 +81,14 @@ The JavaScript PDF Viewer component supports loading and saving PDF files with A ### Step 5: Server-side configuration 1. **Configure Server-Side Code**: - - Open the server-side application (e.g., ASP.NET Core) and configure the following details in the `PdfViewerController` file: - - `tenantId` (your Azure AD tenant ID), - - `clientId` (your registered application client ID), - - `clientSecret` (your registered application client secret), - - `blobServiceEndpoint` (your storage account blob service URL), - - `containerName` (your container name in Azure Blob Storage). + - Open the server-side application (e.g., ASP.NET Core) and configure the following details in the `PdfViewerController` file: + - `tenantId` (your Azure AD tenant ID), + - `clientId` (your registered application client ID), + - `clientSecret` (your registered application client secret), + - `blobServiceEndpoint` (your storage account blob service URL), + - `containerName` (your container name in Azure Blob Storage). + +N> Prefer `DefaultAzureCredential` or a managed identity for server authentication instead of storing client secrets. Store any required secrets in a secure configuration store (Key Vault, environment variables) and avoid committing them to source control. 2. **Run the Web Service**: - After configuring the necessary details, run the web service to make it accessible. @@ -97,8 +101,10 @@ The JavaScript PDF Viewer component supports loading and saving PDF files with A - Start the JS sample that includes the Syncfusion PDF Viewer. 2. **Load PDF from AAD**: - - When the user clicks the **Load from AAD** button, the JS client will make an HTTP request to the server-side API to fetch the PDF from Azure Blob Storage. - - The server will retrieve the PDF from Azure, convert it to a base64 string, and return it to the client. + - When the user clicks the **Load from AAD** button, the JS client makes an HTTP request to the server-side API to fetch the PDF from Azure Blob Storage. + - The server retrieves the PDF from Azure, converts it to a Base64 string, and returns it to the client. + +N> For security, the client should not access Azure Blob Storage directly with application-level credentials. Use the server as a proxy or provide limited-time pre-signed URLs for direct client access. 3. **Display PDF in the PDF Viewer**: - Once the base64 string is received, the PDF Viewer will load the PDF using the `viewer.load()` method. @@ -167,93 +173,54 @@ public async Task SaveToAAD([FromBody] Dictionary ``` - - ### Client-side code +```html +
+ + +``` ```js -import { PdfViewer, Toolbar, TextSelection, TextSearch, Print, Navigation, Magnification, Annotation, FormDesigner, FormFields, CustomToolbarItemModel } from '@syncfusion/ej2-pdfviewer'; -import { ComboBox } from "@syncfusion/ej2-dropdowns"; - -// Inject required modules for PDF Viewer functionality -PdfViewer.Inject( - TextSelection, - TextSearch, - Print, - Navigation, - Toolbar, - Magnification, - Annotation, - FormDesigner, - FormFields +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.Print, + ej.pdfviewer.Navigation, + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.FormFields, + ej.pdfviewer.PageOrganizer ); -// Define custom toolbar items -let toolItem1: CustomToolbarItemModel = { - id: 'loadFromAAD', - text: 'Load From AAD', - tooltipText: 'Custom toolbar item', - align: 'left' -}; - -let toolItem2: CustomToolbarItemModel = { - id: 'saveToAAD', - text: 'Save To AAD', - tooltipText: 'Custom toolbar item', - align: 'left' -}; - -// Initialize the PDF Viewer with custom toolbar items -let pdfviewer: PdfViewer = new PdfViewer({ - serviceUrl: 'https://localhost:44308/pdfviewer', //provide the service url here - toolbarSettings: { - toolbarItems: [ - toolItem1, - toolItem2, - 'OpenOption', - 'PageNavigationTool', - 'MagnificationTool', - 'PanTool', - 'SelectionTool', - 'SearchOption', - 'PrintOption', - 'DownloadOption', - 'UndoRedoTool', - 'AnnotationEditTool', - 'FormDesignerEditTool', - 'CommentTool', - 'SubmitForm', - ] - } +var pdfviewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib' }); - -// Render the PDF Viewer in the DOM pdfviewer.appendTo('#PdfViewer'); -// Handle toolbar clicks -pdfviewer.toolbarClick = (args: { item?: { id: string } }) => { - if (args.item) { - if (args.item.id === 'loadFromAAD') { - // Handle 'Load From AAD' logic - const xhr = new XMLHttpRequest(); - //modify the url based on the file name - xhr.open('POST', `https://localhost:44308/pdfviewer/LoadFromAAD?fileName=pdf-succinctly.pdf`, true); - xhr.onreadystatechange = () => { - if (xhr.readyState === 4 && xhr.status === 200) { - const data = xhr.responseText; - console.log(data); // Handle the response - pdfviewer.load(data,''); // Load the document - } - }; - xhr.send(); - } else if (args.item.id === 'saveToAAD') { - // Handle 'Save To AAD' logic - pdfviewer.serverActionSettings.download = "SaveToAAD"; - pdfviewer.download(); // Trigger download +document.getElementById('btnLoad').onclick = function () { + var xhr = new XMLHttpRequest(); + xhr.open('POST', 'https://localhost:44308/pdfviewer/LoadFromAAD?fileName=pdf-succinctly.pdf', true); + xhr.onreadystatechange = function () { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + var data = xhr.responseText; + pdfviewer.load(data, ''); + } else { + console.error('LoadFromAAD failed', xhr.status, xhr.responseText); + } } - } + }; + xhr.send(); }; +document.getElementById('btnSave').onclick = function () { + pdfviewer.serverActionSettings.download = 'SaveToAAD'; + pdfviewer.download(); +}; ``` [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aad). \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-azure-blob-storage.md index 8ec3234e4..f38bd6677 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-azure-blob-storage.md @@ -26,64 +26,62 @@ Start by following the steps provided in this [link](https://help.syncfusion.com N> Replace **Your account name in Azure** with the actual account name for your Azure Blob Storage account and **Your container name in Azure** with the actual container name and **Your Blob name in Azure** with the actual container name. -```typescript -private accountName: string = "*Your account name in Azure*"; -private containerName: string = "*Your container name in Azure*"; -private blobName: string = "*Your Blob name in Azure*"; +```javascript +var accountName = "*Your account name in Azure*"; +var containerName = "*Your container name in Azure*"; +var blobName = "*Your Blob name in Azure*"; ``` 2. Construct the URL to the PDF in Azure Blob Storage. Call `fetchAndConvertToBase64` to fetch the PDF and convert it to a base64 string. Then load the base64 string into the PDF Viewer. -```typescript +```javascript pdfviewer.created = function () { - const url = 'https://'+accountName+'.blob.core.windows.net/'+containerName+'/'+blobName; - fetchAndConvertToBase64(url).then(base64String => { + var url = 'https://' + accountName + '.blob.core.windows.net/' + containerName + '/' + blobName; + fetchAndConvertToBase64(url).then(function (base64String) { if (base64String) { - setTimeout(() => { - pdfviewer.load("data:application/pdf;base64,"+base64String, ""); - }, 2000); + setTimeout(function () { + pdfviewer.load('data:application/pdf;base64,' + base64String, ''); + }, 2000); } else { - console.error('Failed to fetch and convert file to base64.'); + console.error('Failed to fetch and convert file to base64.'); } - }).catch(error => console.error('Error:', error)); -} + }).catch(function (error) { console.error('Error:', error); }); +}; ``` 3. Retrieve the PDF from the URL and convert the fetched Blob to a base64 string using blobToBase64. -```typescript -function fetchAndConvertToBase64(url : any) { - return new Promise(function(resolve, reject) { - fetch(url).then(function(response) { - if (!response.ok) { - throw new Error('HTTP error! Status: ' + response.status); - } - return response.blob(); - }).then(function(blob) { - blobToBase64(blob).then(function(base64String) { - resolve(base64String); - }); - }).catch(function(error) { - console.error('Error fetching file:', error); - reject(null); +```javascript +function fetchAndConvertToBase64(url) { + return new Promise(function (resolve, reject) { + fetch(url).then(function (response) { + if (!response.ok) { + throw new Error('HTTP error! Status: ' + response.status); + } + return response.blob(); + }).then(function (blob) { + blobToBase64(blob).then(function (base64String) { + resolve(base64String); }); + }).catch(function (error) { + console.error('Error fetching file:', error); + reject(null); + }); }); } ``` 4. Use FileReader to convert a Blob to a base64 string. Resolve the promise with the base64 string or reject it in case of an error. -```typescript -function blobToBase64(blob : any) { - return new Promise(function(resolve, reject) { +```javascript +function blobToBase64(blob) { + return new Promise(function (resolve, reject) { var reader = new FileReader(); - reader.onload = function() { + reader.onload = function () { var base64String = reader.result ? reader.result.toString().split(',')[1] : ''; resolve(base64String); }; - reader.onerror = function(error) { - reject(error); - }; + reader.onerror = function (error) { reject(error); }; reader.readAsDataURL(blob); }); } @@ -187,14 +185,21 @@ N> Replace the placeholders with your actual values: Azure storage connection st Set the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) to your web service endpoint (replace the localhost URL with your server URL). Set documentPath to the PDF file name to load from Azure Blob Storage. Ensure the document name exists in your Azure container. ```javascript - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner +); + +var viewer = new ej.pdfviewer.PdfViewer(); // Replace the "localhost:44396" with the actual URL of your server viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; viewer.appendTo('#pdfViewer'); diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-box-cloud-file-storage.md index 1cb6a51f4..6ef8f741f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-box-cloud-file-storage.md @@ -133,19 +133,25 @@ N> Replace the placeholders with your actual Box values: Access Token, Folder ID Set the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) to your web service endpoint (replace the localhost URL with your server URL). Set documentPath to the PDF file name to load from Box cloud storage. Ensure the document name exists in your Box folder. ```javascript - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner +); + +var viewer = new ej.pdfviewer.PdfViewer(); // Replace the "localhost:44396" with the actual URL of your server viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; viewer.appendTo('#pdfViewer'); viewer.load('PDF_Succinctly.pdf', null); - ``` N> The **Box.V2.Core** NuGet package must be installed in your application to use the previous code example. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-dropbox-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-dropbox-cloud-file-storage.md index 0607c3c51..c4dc9f40e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-dropbox-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-dropbox-cloud-file-storage.md @@ -16,13 +16,13 @@ The JavaScript PDF Viewer component supports loading PDF files from Dropbox usin To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below -**Step 1** Create a Dropbox API +**Step 1** Create a Dropbox API app -Follow the [Dropbox documentation](https://www.dropbox.com/developers/documentation/dotnet#tutorial) to create an API app. This enables programmatic access with secure credentials. +Follow the [Dropbox documentation](https://www.dropbox.com/developers/documentation/dotnet#tutorial) to create a Dropbox API app. This enables programmatic access with secure credentials and allows generation of access tokens or configuration of OAuth flows. -**Step 2:** Create a Simple PDF Viewer Sample in JavaScript +**Step 2:** Create a simple PDF Viewer sample in JavaScript -Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) to create a simple PDF viewer sample in JavaScript. This will give you a basic setup of the PDF viewer component. +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) to create a simple PDF Viewer sample in JavaScript. This provides a basic setup of the PDF Viewer component. **Step 3:** Modify the `src/app/app.ts` file in the JavaScript project @@ -32,9 +32,9 @@ Start by following the steps provided in this [link](https://help.syncfusion.com import { Dropbox } from 'dropbox'; ``` -2. Create an instance of the Dropbox class using an access token for authentication. Next, call the filesDownload method of this Dropbox instance to download the file located at /PDF_Succinctly.pdf. Upon successfully downloading the file, extract the file blob from the response. Convert this file blob to a Base64 string using the blobToBase64 method. Finally, load the Base64 string into a PDF viewer control. +2. Create an instance of the Dropbox class using an access token for authentication. Call the `filesDownload` method to download the file located at `/PDF_Succinctly.pdf`. After downloading, extract the file blob from the response, convert the blob to a Base64 string using `blobToBase64`, and load the Base64 string into the PDF Viewer control. -N> Replace the placeholder with your actual Dropbox access token. +N> Replace the placeholder with your actual Dropbox access token. For production scenarios, avoid embedding long-lived access tokens in client-side code; use an OAuth token flow or a server-side token exchange so credentials are not exposed in the browser. ```typescript pdfviewer.created = function () { @@ -59,7 +59,7 @@ function blobToBase64(blob: Blob): Promise { } ``` -N> The **npm install dropbox** package must be installed in your application to use the previous code example. +N> Install the Dropbox SDK for the client sample with `npm install dropbox`. Verify the SDK version compatibility with your project. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Standalone) @@ -69,7 +69,7 @@ To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can foll **Step 1:** Create a Dropbox API app -To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data. +Follow the official Dropbox documentation [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial) to create a Dropbox API app using the App Console. Configure redirect URIs and required scopes for file access, and select an OAuth flow appropriate for the application (server-side OAuth is recommended for production). **Step 2:** Create a PDF Viewer sample in JavaScript @@ -77,7 +77,7 @@ Start by following the steps provided in this [link](https://help.syncfusion.com **Step 3:** Modify the `PdfViewerController.cs` file in the web service project -1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project. +1. Create a web service project in .NET Core 3.0 or above (NET 6 LTS or later recommended). You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on creating a web service project. 2. Open the `PdfViewerController.cs` file in your web service project. @@ -166,7 +166,7 @@ public async Task Load([FromBody] Dictionary json } ``` -N> Replace the placeholders with your actual Dropbox values: Access Token and Folder Name. +N> Replace the placeholders with your actual Dropbox values: access token and folder name. Store server-side credentials securely (for example, using environment variables or a secrets store) and restrict token permissions to the minimum required scopes. **Step 4:** Configure the PDF Viewer component @@ -174,13 +174,21 @@ Set the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#ser ```javascript -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner +); + +var viewer = new ej.pdfviewer.PdfViewer(); // Replace the "localhost:44396" with the actual URL of your server viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; viewer.appendTo('#pdfViewer'); @@ -188,6 +196,6 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> The **Dropbox.Api** NuGet package must be installed in your application to use the previous code example. +N> Install the `Dropbox.Api` NuGet package in the server project to use the Dropbox client APIs shown above. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Server-Backed) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-google-cloud-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-google-cloud-storage.md index 84f17e991..1ee8ab173 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-google-cloud-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-google-cloud-storage.md @@ -18,7 +18,7 @@ Start by following the steps provided in this [link](https://help.syncfusion.com **Step 2:** Modify the `PdfViewerController.cs` file in the web service project -1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project. +1. Create a web service project in .NET Core 3.0 or above (NET 6 LTS or later recommended). You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project. 2. Open the `PdfViewerController.cs` file in your web service project. @@ -109,9 +109,9 @@ public IActionResult Load([FromBody] Dictionary jsonObject) } ``` -N> Replace the placeholder with the actual Google Cloud Storage bucket name. +N> Replace the placeholder with the actual Google Cloud Storage bucket name. Store any configuration values and credentials securely (for example, using environment variables or a secrets manager). -N> Replace path/to/service-account-key.json with the actual file path to your service account key JSON file. +N> Replace `path/to/service-account-key.json` with the actual file path to your service account key JSON file when testing locally. For production, prefer Application Default Credentials or secure key management rather than embedding file paths in source code. **Step 3:** Configure the PDF Viewer component @@ -119,13 +119,21 @@ Set the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#ser ```javascript -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner +); + +var viewer = new ej.pdfviewer.PdfViewer(); // Replace the "localhost:44396" with the actual URL of your server viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; viewer.appendTo('#pdfViewer'); @@ -133,6 +141,6 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> The **Google.Cloud.Storage.V1** NuGet package must be installed in your application to use the previous code example. +N> Install the `Google.Cloud.Storage.V1` NuGet package in the server project to use the Google Cloud Storage client APIs shown above. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-google-cloud-storage) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-google-drive.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-google-drive.md index 0ba340e6e..1bb723403 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-google-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-google-drive.md @@ -21,7 +21,7 @@ Start by following the steps provided in this [link](https://help.syncfusion.com **Step 3:** Modify the `PdfViewerController.cs` file in the web service project -1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project. +1. Create a web service project in .NET Core 3.0 or above (NET 6 LTS or later recommended). You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project. 2. Open the `PdfViewerController.cs` file in your web service project. @@ -141,9 +141,9 @@ public async Task Load([FromBody] Dictionary json } ``` -N> Replace the placeholders with your actual values: Google Drive Folder ID, Application name, and the path to the OAuth 2.0 client IDs JSON file. +N> Replace the placeholders with your actual values: Google Drive Folder ID, application name, and the path to the OAuth 2.0 client IDs JSON file. Store these values and any credentials securely (for example, using environment variables or a secrets manager). -N> The **FolderId** part is the unique identifier for the folder. For example, if your folder URL is: `https://drive.google.com/drive/folders/abc123xyz456`, then the folder ID is `abc123xyz456`. +N> The Folder ID is the unique identifier for the folder. For example, if your folder URL is `https://drive.google.com/drive/folders/abc123xyz456`, then the folder ID is `abc123xyz456`. **Step 4:** Configure the PDF Viewer component @@ -151,20 +151,28 @@ Set the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#ser ```javascript -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); -// Replace the "localhost:44309" with the actual URL of your server +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner +); + +var viewer = new ej.pdfviewer.PdfViewer(); +// Replace the "localhost:44396" with the actual URL of your server viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; viewer.appendTo('#pdfViewer'); viewer.load('PDF_Succinctly.pdf', null); ``` -N> The **Google.Apis.Drive.v3** NuGet package must be installed in your application to use the previous code example. +N> Install the `Google.Apis.Drive.v3` NuGet package in the server project to use the Google Drive client APIs shown above. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-google-drive) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-one-drive.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-one-drive.md index 76006c42c..aad3cfcda 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-one-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-file/from-one-drive.md @@ -21,7 +21,7 @@ Start by following the steps provided in this [link](https://help.syncfusion.com **Step 3:** Modify the `PdfViewerController.cs` file in the web service project -1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project. +1. Create a web service project in .NET Core 3.0 or above (NET 6 LTS or later recommended). You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project. 2. Open the `PdfViewerController.cs` file in your web service project. @@ -138,7 +138,7 @@ public async Task Load([FromBody] Dictionary json ``` -N> Replace the placeholders with your actual values: Tenant ID, Application ID, and OneDrive folder name. +N> Replace the placeholders with your actual values: Tenant ID, Application ID, and OneDrive folder name. Store these values and any credentials securely (for example, using environment variables or a secrets manager). **Step 4:** Configure the PDF Viewer component @@ -146,27 +146,35 @@ Set the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#ser ```javascript -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); -// Replace the "localhost:44309" with the actual URL of your server +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner +); + +var viewer = new ej.pdfviewer.PdfViewer(); +// Replace the "localhost:44396" with the actual URL of your server viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; viewer.appendTo('#pdfViewer'); viewer.load('PDF_Succinctly.pdf', null); ``` -N> The following NuGet packages are required to use the previous code example +N> Install the following NuGet packages in the server project to use the previous code example: * **Microsoft.Identity.Client** * **Microsoft.Graph** * **Microsoft.Extensions.Configuration** * **Microsoft.Extensions.Configuration.FileExtensions** * **Microsoft.Extensions.Configuration.Json** -You can install these packages using the NuGet Package Manager in Visual Studio or Visual Studio Code. +You can install these packages using the NuGet Package Manager in Visual Studio or via the `dotnet` CLI. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-one-drive) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-files.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-files.md index 5dcbf146c..ec6005d94 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-files.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/open-pdf-files.md @@ -219,8 +219,8 @@ public IActionResult Load([FromBody] Dictionary jsonData) } ``` -N> Replace **Your connection string for SQL server** with the actual connection string for your SQL Server database. +N> Replace **Your connection string for SQL server** with the actual connection string for the target SQL Server database. -N> Install the **System.Data.SqlClient** package and update the `connectionString` value to match your environment before running the sample. +N> Install the **System.Data.SqlClient** package and update the `connectionString` value to match the environment before running the sample. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-database) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/events.md index 5f62d08bf..12b7ae017 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/events.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/events.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Organize Pages Events in JavaScript PDF Viewer -The PDF Viewer provides events to track and respond to actions within the page organizer, allowing for the customization of page manipulation features. +The PDF Viewer exposes events for tracking and responding to actions within the page organizer, enabling customization of page manipulation workflows. ## pageOrganizerSaveAs @@ -18,7 +18,7 @@ The `pageOrganizerSaveAs` event is triggered when a save action is performed in - 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: +The event arguments provide information about the save event: - `fileName`: The name of the currently loaded PDF document. - `downloadDocument`: A base64 string of the modified PDF document data. @@ -51,8 +51,8 @@ The `pageOrganizerZoomChanged` event is triggered when the zoom level of the pag Event arguments: -- `previousZoomValue`: The previous zoom value. -- `currentZoomValue`: The current zoom value. +- `previousZoom`: The previous zoom value. +- `currentZoom`: The current zoom value. ```javascript ej.pdfviewer.PdfViewer.Inject( diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/extract-pages.md index b5124bf54..39b484f70 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/extract-pages.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/extract-pages.md @@ -10,8 +10,7 @@ domainurl: ##DomainURL## # Extract pages in JavaScript PDF Viewer -The PDF Viewer component lets you extract pages from a document using the Extract Pages option in the Organize Pages UI, and also control extraction programmatically. -The Extract Pages tool is available by default in Organize Pages. +The PDF Viewer component enables users to extract pages from a document using the Extract Pages option in the Organize Pages UI and to control extraction programmatically. The Extract Pages tool is available by default in Organize Pages. ## Extract Pages in Organize Pages diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/mobile-view.md index e355ade62..c259e40d4 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/mobile-view.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/mobile-view.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Organize Pages in Mobile PDF Viewer JavaScript -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. +The PDF Viewer offers a mobile-responsive layout for the `Organize Pages` feature, ensuring a seamless experience on smaller devices. On mobile devices, the toolbar and navigation elements adapt to screen size to provide easy access to page management tools. ## Mobile-Friendly Toolbar @@ -18,7 +18,7 @@ In the mobile view, the `Organize Pages` toolbar is displayed at the bottom of t ## Context Menu for Page Operations -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: +To perform actions on a page thumbnail, tap and hold the thumbnail to open a context menu. This menu contains the available page operations: * **Rotate Clockwise**: Rotate the selected page 90 degrees clockwise. * **Rotate Counter-Clockwise**: Rotate the selected page 90 degrees counter-clockwise. @@ -28,10 +28,10 @@ To perform actions on a page thumbnail, tap and hold on the thumbnail to open a * **Select All**: Select all pages in the document. -![Page Organizer Operations](../images/Context-Menu-Page-Operations1.png) +![Context menu for page operations on mobile](../images/Context-Menu-Page-Operations1.png) ## Rearranging Pages on Mobile 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 interface enables efficient PDF page management on handheld devices. \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/overview.md index 5201456a8..1b6fda878 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/overview.md @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Organize pages in JavaScript PDF Viewer -The JavaScript 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 JavaScript PDF Viewer component includes an Organize pages panel for preparing documents before sharing. Use it to tidy scanned files, reorder pages, 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 an editable document, ensure that the Organize Pages toolbar item is enabled, and select **Organize Pages** from the left vertical toolbar. The document must allow page-level edits (for example, it must not be password-protected or restricted); otherwise, the toolbar item is hidden. -The Organize Pages panel supports the following actions: +The Organize pages panel supports the following actions: * **Rotate pages**: Fix page orientation in 90-degree increments to correct scanned pages. * **Rearrange pages**: Drag and drop thumbnails to update the reading order. @@ -25,4 +25,12 @@ The Organize Pages panel supports the following actions: * **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. +Select **Save** to overwrite the current document, or **Save As** to download a new copy with the updated page order. Changes are shown in the panel and are applied only when the user selects **Save** or **Save As**; unsaved edits are discarded if the panel is closed without saving. + +## See also + +- [UI interactions for Organize Pages](./organize-page/ui-interactions) +- [Toolbar items for Organize Pages](./organize-page/toolbar) +- [Programmatic support for Organize Pages](./programmatic-support) +- [Organize Pages events](./events) +- [Organize Pages in mobile view](./mobile-view) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/programmatic-support.md index c6a1dcbee..b0889f2fe 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/programmatic-support.md @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Programmatic Support for Organize Pages in JavaScript PDF Viewer control -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 programmatic APIs to manage page organization. Use these APIs to enable the page organizer, open or close the organizer dialog, and customize page-management behaviors from application code. ## Enable or disable the page organizer -The page organizer feature can be enabled or disabled using the `enablePageOrganizer` property. By default, this feature is enabled. +Enable the page organizer using the `enablePageOrganizer` property. The default value is `true`. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -52,7 +52,7 @@ pdfviewer.appendTo('#PdfViewer'); ## Open the page organizer on document load -You can control whether the page organizer dialog opens automatically when a document is loaded using the `isPageOrganizerOpen` property. The default value is `false`. +Control whether the page organizer opens automatically when a document loads using the `isPageOrganizerOpen` property. The default value is `false`. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -90,7 +90,7 @@ pdfviewer.appendTo('#PdfViewer'); ## Customize page organizer settings -The `pageOrganizerSettings` API allows you to customize the page management functionalities. You can enable or disable actions such as deleting, inserting, rotating, copying, importing, and rearranging pages, as well as configure thumbnail zoom settings. By default, all actions are enabled, and standard zoom settings are applied. +Use the `pageOrganizerSettings` property to configure page-management actions and thumbnail zoom behavior. Settings include toggles for deleting, inserting, rotating, copying, importing, and rearranging pages, and controls for thumbnail zoom. By default, all actions are enabled, and standard zoom settings are applied. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -128,7 +128,7 @@ pdfviewer.appendTo('#PdfViewer'); ## Open the page organizer dialog -The `openPageOrganizer` method programmatically opens the page organizer dialog, providing access to page management tools. +Call the `openPageOrganizer` method on the viewer's `pageOrganizer` API to programmatically open the organizer dialog and access page-management tools. ```html @@ -142,7 +142,7 @@ document.getElementById('openPageOrganizer').addEventListener('click', function ## Close the page organizer dialog -The `closePageOrganizer` method programmatically closes the page organizer dialog. +Call the `closePageOrganizer` method on the viewer's `pageOrganizer` API to programmatically close the organizer dialog. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/toolbar.md index a822128b3..f2ad8e0b7 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/toolbar.md @@ -50,9 +50,9 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -## Show or hide the delete option +## Show or hide the Delete option -The `canDelete` property controls the visibility of the delete tool. When set to `false`, the delete tool will be hidden. +The `canDelete` property controls the visibility of the delete tool. Set to `false` to hide the delete tool. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -89,9 +89,9 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -## Show or hide the rotate option +## Show or hide the Rotate option -The `canRotate` property controls the visibility of the rotate tool. When set to `false`, the rotate tool will be hidden. +The `canRotate` property controls the visibility of the rotate tool. Set to `false` to hide the rotate tool. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -127,7 +127,7 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -## Show or hide the copy option +## Show or hide the Copy option The `canCopy` property controls the visibility of the copy tool. When set to `false`, the copy tool will be hidden. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/ui-interactions.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/ui-interactions.md index 618636afa..0686c2793 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/ui-interactions.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/ui-interactions.md @@ -10,88 +10,88 @@ domainurl: ##DomainURL## # UI Interactions for Organizing Pages in JavaScript PDF Viewer -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 PDF Viewer provides an interface for managing and organizing pages within a PDF document. This section describes the UI interactions available in the `Organize Pages` dialog. ## Rotating PDF pages -You can adjust the orientation of pages to ensure proper alignment. The rotate icon in the Organize Pages dialog provides the following options: +Pages can be rotated to correct or change their orientation. The rotate icon in the Organize Pages dialog provides the following options: -* **Rotate clockwise**: Rotate the selected pages 90 degrees clockwise. -* **Rotate counter-clockwise**: Rotate the selected pages 90 degrees counter-clockwise. +- **Rotate clockwise**: Rotate the selected pages 90 degrees clockwise. +- **Rotate counter-clockwise**: Rotate the selected pages 90 degrees counter-clockwise. -![Rotate PDF pages](../images/rotate-rearrange.gif) +![Rotate and rearrange page thumbnails](../images/rotate-rearrange.gif) ## Rearranging PDF pages -Easily change the sequence of pages using the drag-and-drop method: +Change the sequence of pages using drag-and-drop: -* **Drag and drop**: Click and drag a page thumbnail to the desired position within the document, then release it to reorder the pages. +- **Drag and drop**: Click and drag a page thumbnail to the desired position within the document, then release it to reorder the pages. -![Rearrange PDF pages](../images/rotate-rearrange.gif) +![Rearrange page thumbnails by dragging](../images/rotate-rearrange.gif) ## Inserting new pages -Effortlessly add blank pages to your document with the following options: +Blank pages can be inserted adjacent to existing pages using the following options: -* **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. +- **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. -![insert](../images/organize-insert.png) +![Insert blank page next to selected thumbnail](../images/organize-insert.png) ## Deleting PDF pages -Remove unwanted pages from your document with these steps: +Remove unwanted pages from the document with these steps: -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. +1. **Select pages to delete**: Click the thumbnails of the pages to remove; multiple pages can be selected. +2. **Delete selected pages**: Use the delete option in the Organize Pages pane to remove the selected pages from the document. -![Delete](../images/organize-delete.png) +![Delete selected page thumbnails](../images/organize-delete.png) ## Copying PDF pages -Duplicate pages within your PDF document effortlessly: +Duplicate pages within the PDF document: -* **Select pages to copy**: Click on the page thumbnails you wish to duplicate. -* **Copy selected pages**: Use the copy option to create duplicates. The copied pages will be added to the right of the selected pages. +- **Select pages to copy**: Click the page thumbnails to duplicate. +- **Copy selected pages**: Use the copy option to create duplicates; copied pages are added to the right of the selected pages. -![Copying](../images/organize-copy.png) +![Copy selected page thumbnails](../images/organize-copy.png) ## Importing a PDF document -Seamlessly import another PDF document into your current document: +Import another PDF document into the current document: + +- **Import PDF document**: Click the **Import Document** button to select and import a PDF. The imported document is inserted as a thumbnail. If a page is selected, the thumbnail is added to its right; if no pages are selected, the imported PDF is added at the start of the document. The imported PDF is merged with the current document when the changes are saved. -* **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. +If the import operation fails, an error message is displayed and the document remains unchanged. -![Import PDF](../images/import.gif) +![Import another PDF as thumbnails](../images/import.gif) ## Selecting all pages -Select all pages simultaneously to perform bulk operations, such as rotating or deleting all pages at once. +Select all pages simultaneously to perform bulk operations, such as rotating or deleting multiple pages. -![Select all PDF pages](../images/selectall.png) +![Select all page thumbnails](../images/selectall.png) ## Zooming page thumbnails -Adjust the size of page thumbnails for better visibility and precision: +Adjust the size of page thumbnails for 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. +* 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. -![Zoom PDF pages](../images/zoomOrganize.png) +![Zoom thumbnails for better visibility](../images/zoomOrganize.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 are reflected instantly in the Organize Pages dialog. Click the **Save** button to apply modifications to the document. Use **Save As** to download a new version of the PDF that includes the changes. ## Keyboard shortcuts The following keyboard shortcuts are available in the Organize Pages dialog: -* **Ctrl+Z**: Undo the last action. -* **Ctrl+Y**: Redo the last undone action. -* **Ctrl+Scroll**: Zoom in and out on page thumbnails for better visibility. +* **Ctrl + Z**: Undo the last action. +* **Ctrl + Y**: Redo the last undone action. +* **Ctrl + mouse wheel**: Zoom in and out on page thumbnails for better visibility (on macOS use the Command key). -![Undo and Redo actions](../images/undo-redo.png) +![Undo and redo actions in Organize Pages](../images/undo-redo.png) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pdf-overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pdf-overview.md index 5201456a8..8c8ec6139 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pdf-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pdf-overview.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Organize pages in JavaScript PDF Viewer -The JavaScript 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 JavaScript PDF Viewer component provides an Organize Pages panel for preparing 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. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pdf.md index 5c38ef1ae..2be258055 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pdf.md @@ -8,17 +8,17 @@ documentation: ug domainurl: ##DomainURL## --- -# Organize Pages in Javascript PDF Viewer control +# Organize Pages in JavaScript PDF Viewer control -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 copy or duplicate pages, the PDF Viewer facilitates these tasks effortlessly. +The PDF Viewer provides tools to organize PDF documents by inserting, deleting, rotating, rearranging, copying, and importing pages. These features enable efficient page-level editing within the viewer. ## 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](https://ej2.syncfusion.com/documentation/api/pdfviewer/pageOrganizerSettingsModel/) option to begin utilizing these capabilities. +To access the organize pages feature, open a PDF document in the PDF Viewer and choose the Organize Pages option from the left toolbar. See the [Organize Pages API](https://ej2.syncfusion.com/documentation/api/pdfviewer/pageOrganizerSettingsModel/) for configuration options. -![Alt text](./images/organize-page.png) +![Organize Pages dialog showing page thumbnails](./images/organize-page.png) -The page organization support enables you to perform various actions such as rotating, rearranging, inserting, copying, and deleting pages within a PDF document using organize pages dialog. +The page organizer enables rotating, rearranging, inserting, copying, importing, and deleting pages using an interactive dialog with page thumbnails. ### Rotating PDF pages @@ -29,71 +29,50 @@ You can adjust the orientation of PDF pages to ensure proper alignment. The rota ### Rearranging PDF pages -You can easily change the sequence of pages within your document using the drag and drop method: +Change the sequence of pages using drag-and-drop on the page thumbnails. -* `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order. - -![Alt text](./images/rotate-rearrange.gif) +![Demonstration of rotating and rearranging pages](./images/rotate-rearrange.gif) ### Inserting new pages -Effortlessly add new pages to your document with the following options: - -* `Insert blank page left`: Insert a blank page to the left of the selected page using the respective icon. -* `Insert blank page right`: Insert a blank page to the right of the selected page using the corresponding icon. +Insert blank pages to the left or right of a selected page using the respective toolbar icons. ### Deleting PDF pages -Removing unwanted pages from your document is straight forward: - -* `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. +Remove unwanted pages by selecting their thumbnails and using the delete action. Multiple pages can be selected simultaneously. ### Copying PDF pages -Duplicate the pages within your PDF document effortlessly: - -* `Select pages to copy`: Click on the page thumbnails you wish to duplicate. Use the copy 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. - -![Alt text](./images/insert-delete-copy.gif) +Duplicate pages by selecting thumbnails and using the copy action; duplicates are inserted to the right of the selected page. -### Importing a PDF Document +![Insert, delete, and copy page actions shown in the organizer](./images/insert-delete-copy.gif) -Seamlessly import a PDF document into your existing document: +### Importing a PDF document -* `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. +Import a PDF into the current document using the **Import Document** button. If a single page is selected, the imported document is inserted to the right of that page; if multiple or no pages are selected, the imported document is placed at the start. Use **Save** or **Save As** to merge and download the updated document. -![Alt text](./images/import.gif) +![Import a PDF into the organizer panel](./images/import.gif) ### Selecting all pages -Make comprehensive adjustments by selecting all pages simultaneously. This facilitates efficient editing and formatting across the entire document. +Select all thumbnails to apply actions across the entire document simultaneously. -![Alt text](./images/selectall.png) +![Select all pages control in the organizer](./images/selectall.png) -### Zooming Page Thumbnails +### 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: +Adjust thumbnail size using the zoom slider for better visibility or to view more pages at once. This is useful for detailed layouts or when working with many pages. -* 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 +![Thumbnail zoom slider in organizer panel](./images/zoomOrganize.png) -This feature is especially useful when working with documents containing complex layouts or small details that need careful examination during organization. +### Usage -![Alt text](./images/zoomOrganize.png) +- Changes in the organizer are applied immediately in the viewer; use the **Save** button to persist edits. +- Use **Save As** to download a modified copy of the document. -### Real-time updates +## APIs supported -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:** This API enables or disables the page organizer feature in the PDF Viewer. By default, it is set to `true`. {% tabs %} {% highlight ts tabtitle="Standalone" %} @@ -194,7 +173,7 @@ document.getElementById('openPageOrganizer').addEventListener('click', function ``` -**closePageOrganizer:** This API closes the currently open page organizer dialog within the PDF Viewer, if it is present. It allows users to dismiss the dialog when done with page organization tasks. +**closePageOrganizer:** This API closes the currently open page organizer dialog within the PDF Viewer. ```html @@ -214,11 +193,10 @@ 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+Scroll** : Zoom in and zoom out page thumbnails for better visibility. - -![Alt text](./images/undo-redo.png) +![Undo and redo controls in organizer](./images/undo-redo.png) #### 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! +The Organize Pages feature provides a set of tools for editing the page structure of PDF documents inside the viewer. Use the toolbar and organizer panel to insert, delete, rotate, rearrange, copy, import, and save changes to documents. [View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Organize%20pdf) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/overview.md index fa8ccd658..fcb148eca 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/overview.md @@ -9,7 +9,7 @@ documentation: ug # Overview of JavaScript PDF Viewer component -The Syncfusion [JavaScript PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk) component enables users to view, annotate, prepare and fill forms, and print PDF files directly in web applications. +The Syncfusion [JavaScript PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk) component enables users to view, annotate, prepare, and fill forms, and print PDF files directly in web applications. ## Setup @@ -34,7 +34,7 @@ npm install @syncfusion/ej2-pdfviewer ## Supported web platforms -* [JavaScript (ES5)](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) +* [JavaScript (ES5)](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) * [Angular](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) * [React](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) * [Vue](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/print.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/print.md index 2140ed3dd..941911347 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/print.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/print.md @@ -9,7 +9,7 @@ domainurl: ##DomainURL## --- # Print in JavaScript PDF Viewer -The Syncfusion JavaScript PDF Viewer component lets users print a loaded PDF document through the built-in toolbar or programmatic calls. Control whether printing is available by setting the `enablePrint` property. +The Syncfusion JavaScript PDF Viewer component allows users to print a loaded PDF document through the built-in toolbar or programmatic calls. Control printing availability by setting the `enablePrint` property. The following HTML and JavaScript examples render the PDF Viewer with printing enabled in standalone and server-backed applications. @@ -109,9 +109,9 @@ The PDF Viewer allows you to adjust the print rendering quality by setting the [ By default, `printScaleFactor` is set to 1. -N> Values outside the 0.5–5 range revert to the standard print quality (value 1). +N> Values outside the 0.5–5 range revert to the default print quality (value 1). -The following example demonstrates how to update the scale factor before printing. +The following example demonstrates how to update the scale factor before printing. Note: increasing `printScaleFactor` improves output sharpness but also increases rendering time. {% tabs %} {% highlight js tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/enable-print-rotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/enable-print-rotation.md index 2c0357253..ccdf7290b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/enable-print-rotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/enable-print-rotation.md @@ -8,11 +8,11 @@ documentation: ug domainurl: ##DomainURL## --- -# Enable print rotation in the JavaScript +# Enable print rotation in JavaScript PDF Viewer -Set the `enablePrintRotation` property to control whether landscape pages are rotated automatically to fit the paper orientation. Keep it enabled to minimize clipping, or disable it to preserve the original orientation. +Use the `enablePrintRotation` property to enable automatic rotation of landscape pages during printing so they match the paper orientation. Enable this setting to reduce clipping of landscape pages; disable it to preserve the document's original orientation. Ensure the `Print` module is injected before using this property — see the PdfViewer API reference: [PdfViewer API Reference](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default). -![Print Rotate](../../javascript-es6/images/print-rotate.gif) +![Print rotation demo showing landscape pages rotated for printing](../../javascript-es6/images/print-rotate.gif) {% tabs %} {% highlight js tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/events.md index ae2bbac6f..08721b11b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/events.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/events.md @@ -1,7 +1,7 @@ --- layout: post title: Print Events in JavaScript PDF Viewer | Syncfusion -description: Learn how to configure print events and track usage and implements workflows in the Syncfusion JavaScript PDF Viewer component. +description: Configure print events, cancel print, and track print usage in the Syncfusion JavaScript PDF Viewer component. platform: document-processing control: Print documentation: ug @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Print events in JavaScript PDF Viewer -Subscribe to print life cycle events to track usage and implement custom workflows. +Subscribe to print lifecycle events to track usage and implement custom workflows. | Name | Description | |--------------|-------------| @@ -21,8 +21,15 @@ Subscribe to print life cycle events to track usage and implement custom workflo The [`printStart`](https://ej2.syncfusion.com/documentation/api/pdfviewer#printstart) event runs when printing starts from the toolbar or from code. Use it to validate prerequisites or cancel the action. ### Event arguments + +Common properties: +- `fileName`: Name of the document being printed. +- `cancel` (boolean): Set to `true` to cancel the print operation. + Review [`PrintStartEventArgs`](https://ej2.syncfusion.com/documentation/api/pdfviewer/printStartEventArgs) for details such as `fileName` and the `cancel` option. +N> Setting `args.cancel = true` prevents the print action and, depending on the environment, prevents the print dialog from appearing. In server-backed printing, cancellation prevents the service call that generates print output. + The following example logs the file that is being printed and shows how to cancel the operation. {% tabs %} @@ -82,6 +89,9 @@ pdfviewer.appendTo('#PdfViewer'); The [`printEnd`](https://ej2.syncfusion.com/documentation/api/pdfviewer#printend) event triggers after printing completes. Use it to finalize analytics or inform users that printing finished. ### Event arguments +Common properties: +- `fileName`: Name of the document that was printed. + See [`PrintEndEventArgs`](https://ej2.syncfusion.com/documentation/api/pdfviewer/printEndEventArgs) for available values such as `fileName`. The following example logs the printed file name. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/overview.md index 2cf1ae0e2..81617b01e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/overview.md @@ -1,7 +1,7 @@ --- layout: post title: Print Overview in JavaScript PDF Viewer | Syncfusion -description: Learn how to enable, monitor and customize printing in the Syncfusion JavaScript PDF Viewer component. +description: Enable and customize printing, configure print events, cancel print, and monitor printing in the Syncfusion JavaScript PDF Viewer component. platform: document-processing control: Print documentation: ug @@ -10,15 +10,15 @@ domainurl: ##DomainURL## # Print Overview in JavaScript PDF Viewer Control -The JavaScript PDF Viewer includes built‑in printing via the toolbar and APIs so you can control how documents are printed and monitor the process. +The JavaScript PDF Viewer includes built-in printing via the toolbar and APIs so users can control how documents are printed and monitor the process. Select **Print** in the built-in toolbar to open the browser print dialog. -![Print](../../javascript-es6/images/print.gif) +![Browser print dialog from PDF Viewer](../../javascript-es6/images/print.gif) ## Enable or Disable Print in JavaScript PDF Viewer -The Syncfusion JavaScript PDF Viewer component lets users print a loaded PDF document through the built-in toolbar or programmatic calls. Control whether printing is available by setting the `enablePrint` property. +The Syncfusion JavaScript PDF Viewer component lets users print a loaded PDF document through the built-in toolbar or programmatic calls. Control whether printing is available by setting the `enablePrint` property (`true` enables printing; `false` disables it). The following JavaScript examples render the PDF Viewer with printing enabled in standalone and server-backed applications. @@ -69,7 +69,7 @@ pdfviewer.appendTo('#PdfViewer'); ## Print programmatically in JavaScript PDF Viewer -To start printing from code, call the `print.print()` method after loading a document. This approach is useful when you need to wire up custom UI or initiate printing automatically. +To start printing from code, call the `pdfviewer.print.print()` method after the document is fully loaded. This approach is useful when wiring up custom UI or initiating printing automatically; calling print before the document finishes loading can result in no output or an empty print dialog. ```html @@ -141,7 +141,9 @@ if (printButton) { - Control output quality with the printScaleFactor property (0.5–5) - Auto‑rotate pages during print using enablePrintRotation - Choose where printing happens with printMode (Default or NewWindow) -- Track the life cycle with printStart and printEnd events + - Track the lifecycle with printStart and printEnd events + +N> Ensure the `resourceUrl` value matches the deployed `ej2-pdfviewer-lib` version. Calling `print()` launches the browser print dialog; behavior varies by browser and may be affected by popup blockers or browser settings. [View Sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/print-modes.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/print-modes.md index cf9e9be6f..f7fb3dbac 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/print-modes.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/print-modes.md @@ -8,19 +8,19 @@ documentation: ug domainurl: ##DomainURL## --- -# Print modes in the JavaScript PDF Viewer +# Print Modes in the JavaScript PDF Viewer -Use the `printMode` property to choose how the document is printed. +The `printMode` property specifies how the PDF Viewer prints documents. -The supported values are: -* `Default`: Prints the document from the same window. -* `NewWindow`: Prints the document from a new window or tab, which can help with browser pop-up policies. +The `printMode` property accepts the following string values: +- `Default`: Prints the document from the same browser window. Use this when printing should remain in the current browsing context. +- `NewWindow`: Prints the document from a new window or tab. Use this to avoid interference with the current page; note that some browsers may block pop-ups. ![Print in New Window](../../javascript-es6/images/print-newwindow.gif) -N> Browser pop-up blockers must allow new windows or tabs when you use `pdfviewer.printMode ="NewWindow";`. +N> Browser pop-up blockers must allow new windows or tabs when using `pdfviewer.printMode = "NewWindow"`. -The following example shows how to set the print mode. +The following examples show how to set the `printMode` property. It can be specified in the viewer options during initialization or assigned to the `pdfviewer.printMode` property after instantiation. {% tabs %} {% highlight js tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/print-quality.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/print-quality.md index cc8d0e4a8..8e6ec4209 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/print-quality.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/print/print-quality.md @@ -8,15 +8,15 @@ documentation: ug domainurl: ##DomainURL## --- -# Customize print quality using the printScaleFactor API +# Customize Print Quality Using the `printScaleFactor` Property -The PDF Viewer allows you to adjust the print rendering quality by setting the [printScaleFactor](https://ej2.syncfusion.com/documentation/api/pdfviewer#printScaleFactor) property. Valid values range from 0.5 to 5. Higher values produce sharper output but also increase rendering time. +The PDF Viewer adjusts print rendering quality using the `printScaleFactor` property. This numeric property accepts values from 0.5 to 5. Higher values improve printed image sharpness but increase rendering time and memory usage. -By default, `printScaleFactor` is set to 1. +By default, `printScaleFactor` is `1`. -N> Values outside the 0.5–5 range revert to the standard print quality (value 1). +N> Values outside the supported range (0.5–5) revert to the default print quality (`1`). -The following example demonstrates how to update the scale factor before printing. +The following examples demonstrate how to set `printScaleFactor`. It can be provided in the viewer options during initialization or assigned to `pdfviewer.printScaleFactor` after instantiation. {% tabs %} {% highlight js tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-amazon-s3.md index b53341720..9061bfd59 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-amazon-s3.md @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Save PDF files to AWS S3 in JavaScript -The JavaScript PDF Viewer component supports saving PDF files to AWS S3 using either the standalone or server-backed configuration. The following steps demonstrate both approaches. +The JavaScript PDF Viewer component supports saving PDF files to AWS S3 using either a standalone (browser) configuration or a server-backed configuration. The following steps demonstrate both approaches and include notes on prerequisites and security considerations for production use. ## Using Standalone PDF Viewer -To save a PDF file to AWS S3, you can follow the steps below: +Follow the steps below to save a PDF file to AWS S3 from a browser-based JavaScript PDF Viewer. **Step 1:** Create a PDF Viewer sample in JavaScript @@ -30,7 +30,7 @@ Follow the instructions provided in this [link](https://help.syncfusion.com/docu 2. Configure the AWS SDK with the region, access key, and secret access key. This enables the application to interact with AWS services such as S3. -N> Replace **Your Region** with the actual Region of your AWS S3 account and **Your Access Key** with the actual Access Key of your AWS S3 account and **Your Security Access Key** with the actual Security Access Key of your AWS S3 account. +N> Replace the placeholder values with the AWS region and credentials. For production, avoid embedding long-lived AWS credentials in client-side code; use temporary credentials (Cognito, STS) or perform uploads via a trusted server. ```javascript AWS.config.update({ @@ -65,9 +65,9 @@ pdfviewer.toolbarClick = function (args) { 4. Retrieve the PDF Viewer instance, save the current PDF as a Blob, read it using FileReader to get an ArrayBuffer, and upload the ArrayBuffer to AWS S3 using the `putObject` method. -N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account. +N> Replace **Your Bucket Name** and **Your Key** with the target S3 bucket and object key. Ensure the S3 bucket is configured with appropriate permissions and CORS rules to allow browser uploads. -```typescript +```javascript private s3 = new AWS.S3(); function saveDocument() { @@ -94,7 +94,7 @@ function saveDocument() { }; ``` -N> Install the aws-sdk package in the application to use the previous code example using this command: `npm install aws-sdk` +N> Install the AWS SDK package to use the browser example. Run `npm install aws-sdk` for the v2 bundle, or prefer the AWS SDK v3 modular packages for smaller client bundles and better tree-shaking. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone). @@ -194,21 +194,28 @@ public IActionResult Download([FromBody] Dictionary jsonObject) } ``` -N> Replace the placeholders with the actual AWS access key, secret key, and bucket name. +N> Replace the placeholders with the appropriate AWS credentials and bucket name. For enhanced security, avoid storing long-lived credentials in configuration files; use environment variables or a secrets manager instead. **Step 3:** Set the PDF Viewer properties in the JavaScript PDF Viewer component Modify the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from AWS S3, and ensure that the document exists in the target bucket. ```javascript - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner +); + +var viewer = new ej.pdfviewer.PdfViewer(); // Replace the "localhost:44396" with the actual URL of your server viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; viewer.appendTo('#pdfViewer'); @@ -216,6 +223,6 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> Install the AWSSDK.S3 NuGet package in the web service application to use the previous code example. +N> The `AWSSDK.S3` NuGet package must be installed in the web service project to use the server example. Use secure secret management for credentials rather than storing them in source-controlled configuration files. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-azure-active-directory.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-azure-active-directory.md index 58c5f2f09..bb1827559 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-azure-active-directory.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-azure-active-directory.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## ### Overview -The JavaScript PDF Viewer component supports loading and saving PDF files with Azure Active Directory (AAD). The following steps describe how to securely load and store PDF documents using a server-backed web service. +The JavaScript PDF Viewer component supports loading and saving PDF files using Azure Active Directory (AAD). This article describes a server-backed pattern to securely load and store PDF documents. It is intended for developers implementing a server-client integration that avoids exposing secrets or long-lived credentials in the browser. ### Steps to open the PDF file from Azure Active Directory @@ -27,7 +27,7 @@ The JavaScript PDF Viewer component supports loading and saving PDF files with A - In the Azure portal, go to **Azure Active Directory** > **App registrations** > **New registration**. - Register your application and note down the **Application (client) ID** and **Directory (tenant) ID**. - ![app-registration](../images/app-registration.png) + ![Register an application in Azure AD](../images/app-registration.png) 3. Create a client secret: - In the registered application, go to **Certificates & secrets**. @@ -36,7 +36,7 @@ The JavaScript PDF Viewer component supports loading and saving PDF files with A - Click **Add**. - Copy the client secret value immediately, as it will be hidden later. Store it securely. - ![client-secret](../images/client-secret.png) + ![Create a client secret in Azure AD](../images/client-secret.png) --- @@ -46,7 +46,7 @@ The JavaScript PDF Viewer component supports loading and saving PDF files with A - In the Azure portal, use the search bar to search for **Storage accounts**. - Create a new storage account by filling in the required details (e.g., name, location, resource group, etc.). - ![storage-account](../images/storage-account.png) + ![Create an Azure Storage account](../images/storage-account.png) --- @@ -62,7 +62,7 @@ The JavaScript PDF Viewer component supports loading and saving PDF files with A - Select your application and click **Select**. - Click **Review + assign** to finalize the role assignment. - ![add-role](../images/add-role.png) + ![Assign Storage Blob Data Contributor role to the application](../images/add-role.png) --- ### Step 4: Upload the PDF document to Azure Storage @@ -73,7 +73,7 @@ The JavaScript PDF Viewer component supports loading and saving PDF files with A 2. Upload the PDF file: - Create a new container and upload the PDF document you want to access in the PDF Viewer. - ![upload-pdf](../images/upload-pdf.png) + ![Upload a PDF file to an Azure Blob container](../images/upload-pdf.png) --- ### Step 5: Server-side configuration @@ -171,89 +171,52 @@ public async Task SaveToAAD([FromBody] Dictionary ### Client-side code snippets +```html +
+ + +``` ```js -import { PdfViewer, Toolbar, TextSelection, TextSearch, Print, Navigation, Magnification, Annotation, FormDesigner, FormFields, CustomToolbarItemModel } from '@syncfusion/ej2-pdfviewer'; -import { ComboBox } from "@syncfusion/ej2-dropdowns"; - -// Inject required modules for PDF Viewer functionality -PdfViewer.Inject( - TextSelection, - TextSearch, - Print, - Navigation, - Toolbar, - Magnification, - Annotation, - FormDesigner, - FormFields +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.Print, + ej.pdfviewer.Navigation, + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.FormFields, + ej.pdfviewer.PageOrganizer ); -// Define custom toolbar items -let toolItem1: CustomToolbarItemModel = { - id: 'loadFromAAD', - text: 'Load From AAD', - tooltipText: 'Custom toolbar item', - align: 'left' -}; - -let toolItem2: CustomToolbarItemModel = { - id: 'saveToAAD', - text: 'Save To AAD', - tooltipText: 'Custom toolbar item', - align: 'left' -}; - -// Initialize the PDF Viewer with custom toolbar items -let pdfviewer: PdfViewer = new PdfViewer({ - serviceUrl: 'https://localhost:44308/pdfviewer', //provide the service url here - toolbarSettings: { - toolbarItems: [ - toolItem1, - toolItem2, - 'OpenOption', - 'PageNavigationTool', - 'MagnificationTool', - 'PanTool', - 'SelectionTool', - 'SearchOption', - 'PrintOption', - 'DownloadOption', - 'UndoRedoTool', - 'AnnotationEditTool', - 'FormDesignerEditTool', - 'CommentTool', - 'SubmitForm', - ] - } +var pdfviewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib' }); - -// Render the PDF Viewer in the DOM pdfviewer.appendTo('#PdfViewer'); -// Handle toolbar clicks -pdfviewer.toolbarClick = (args: { item?: { id: string } }) => { - if (args.item) { - if (args.item.id === 'loadFromAAD') { - // Handle 'Load From AAD' logic - const xhr = new XMLHttpRequest(); - //modify the url based on the file name - xhr.open('POST', `https://localhost:44308/pdfviewer/LoadFromAAD?fileName=pdf-succinctly.pdf`, true); - xhr.onreadystatechange = () => { - if (xhr.readyState === 4 && xhr.status === 200) { - const data = xhr.responseText; - console.log(data); // Handle the response - pdfviewer.load(data,''); // Load the document - } - }; - xhr.send(); - } else if (args.item.id === 'saveToAAD') { - // Handle 'Save To AAD' logic - pdfviewer.serverActionSettings.download = "SaveToAAD"; - pdfviewer.download(); // Trigger download +document.getElementById('btnLoad').onclick = function () { + var xhr = new XMLHttpRequest(); + xhr.open('POST', 'https://localhost:44308/pdfviewer/LoadFromAAD?fileName=pdf-succinctly.pdf', true); + xhr.onreadystatechange = function () { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + var data = xhr.responseText; + pdfviewer.load(data, ''); + } else { + console.error('LoadFromAAD failed', xhr.status, xhr.responseText); + } } - } + }; + xhr.send(); }; +document.getElementById('btnSave').onclick = function () { + pdfviewer.serverActionSettings.download = 'SaveToAAD'; + pdfviewer.download(); +}; ``` [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aad). \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-azure-blob-storage.md index a64805f2e..7dbc4ea03 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-azure-blob-storage.md @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Save PDF files to Azure Blob Storage in JavaScript -The JavaScript PDF Viewer component supports saving PDF files to Azure Blob Storage using either the standalone or server-backed configuration. The following steps demonstrate both approaches. +The JavaScript PDF Viewer component supports saving PDF files to Azure Blob Storage using either a standalone (browser) configuration or a server-backed configuration. The following steps demonstrate both approaches and include prerequisites and security guidance for production deployments. ## Using Standalone PDF Viewer -To save a PDF file to Azure Blob Storage, follow these steps: +Follow the steps below to save a PDF file to Azure Blob Storage from an JavaScript PDF Viewer. **Step 1:** Create a PDF Viewer sample in JavaScript @@ -30,7 +30,7 @@ import { BlockBlobClient } from "@azure/storage-blob"; 2. Add the following private property to `app.ts`, and assign the value from the configuration to the corresponding property. -N> Replace **Your SAS Url in Azure** with the actual SAS URL for the Azure Blob Storage account. +N> Replace **Your SAS Url in Azure** with the SAS URL generated for the target blob. For production, generate short-lived SAS tokens on the server rather than embedding SAS URLs in client code. ```typescript private SASUrl: string = "*Your SAS Url in Azure*"; @@ -75,7 +75,7 @@ function saveDocument() { }; ``` -N> Install the @azure/storage-blob package in the application to use the previous code example: `npm install @azure/storage-blob` +N> Install the Azure Storage Blob client package for browser use: `npm install @azure/storage-blob`. For server-side operations use `dotnet add package Azure.Storage.Blobs`. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-azure-blob-storage/tree/master/Open%20and%20Save%20PDF%20in%20Azure%20Blob%20Storage%20using%20Standalone). @@ -168,9 +168,9 @@ public IActionResult Download([FromBody] Dictionary jsonObject) } ``` -N> Replace the placeholders with the actual Azure Storage connection string and container name. +N> Replace the placeholders with the actual Azure Storage connection string and container name. For enhanced security, avoid storing connection strings in source-controlled files; use environment variables, managed identities, or a secret store such as Azure Key Vault. -**Step 2:** Modify the web service project to save the downloaded document to Azure Blob Storage +**Step 3:** Modify the web service project to save the downloaded document to Azure Blob Storage Create a web service project in .NET Core (version 3.0 and above) by following the steps in this [article](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above). In the controller.cs file of the web service project, add the following code to modify the `Download` method. This code saves the downloaded PDF document to Azure Blob Storage container. @@ -208,19 +208,26 @@ public IActionResult Download([FromBody] Dictionary jsonObject) } ``` -**Step 3:** Set the PDF Viewer properties in the JavaScript PDF Viewer component +**Step 4:** Set the PDF Viewer properties in the JavaScript PDF Viewer component Modify the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from Azure Blob Storage, and ensure that the document exists in the target container. ```javascript - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner +); + +var viewer = new ej.pdfviewer.PdfViewer(); // Replace the "localhost:44396" with the actual URL of your server viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; viewer.appendTo('#pdfViewer'); @@ -228,6 +235,6 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> Install the Azure.Storage.Blobs NuGet package in the web service application to use the previous code example. +N> Install the `Azure.Storage.Blobs` NuGet package in the web service project to use the server example. For security, avoid committing connection strings to source control and prefer environment variables, managed identities, or Azure Key Vault for secret management. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-azure-blob-storage/tree/master/Open%20and%20Save%20PDF%20in%20Azure%20Blob%20Storage%20using%20Server-Backend). \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-box-cloud-file-storage.md index afdf78937..b8c11b7b4 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-box-cloud-file-storage.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Save PDF files to Box cloud storage -To save a PDF file to Box cloud file storage, you can follow the steps below: +The JavaScript PDF Viewer component supports saving PDF files to Box cloud file storage using a server-backed web service. This article describes a recommended server-client pattern that keeps credentials secure and shows how to upload viewer documents to a Box folder. **Step 1:** Set up a Box developer account and create a Box application @@ -95,7 +95,7 @@ public async Task Download([FromBody] Dictionary } ``` -6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration. +6. Open the `appsettings.json` file in your web service project, add the required settings below the existing `"AllowedHosts"` configuration ```json { @@ -113,30 +113,14 @@ public async Task Download([FromBody] Dictionary } ``` -N> Replace the placeholders with the actual Box access token, folder ID, client ID, and client secret. +N> Replace the placeholders with the appropriate Box access token, folder ID, client ID, and client secret. For production, avoid storing secrets in configuration files; use environment variables or a secure secret manager and follow Box best practices for OAuth or JWT authentication. **Step 4:** Set the PDF Viewer properties in the JavaScript PDF Viewer component Modify the `serviceUrl` property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from Box cloud storage, and ensure that the document exists in the target folder. -```javascript +N> Install the Box .NET SDK in the web service project: `dotnet add package Box.V2`. -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); -// Replace the "localhost:44396" with the actual URL of your server -viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; -viewer.appendTo('#pdfViewer'); -viewer.load('PDF_Succinctly.pdf', null); - -``` - -N> Install the Box.V2.Core NuGet package in the web service application to use the previous code example. - -N> Replace `PDF_Succinctly.pdf` with the actual document name to load from Box cloud storage. Pass the document name from the Box folder to the `documentPath` property of the PDF Viewer component. +N> Replace `PDF_Succinctly.pdf` with the actual document name to load from Box cloud storage. Pass the document name from the Box folder to the `documentPath` property of the `JavaScript PDF Viewer` component. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-box-cloud-file-storage) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-dropbox-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-dropbox-cloud-file-storage.md index 7e5f9c61c..0a7bca62a 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-dropbox-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-dropbox-cloud-file-storage.md @@ -51,9 +51,9 @@ pdfviewer.toolbarClick = function (args) { }; ``` -3. Retrieve the PDF Viewer instance and save the current PDF as a Blob. Then, read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to Dropbox using the `filesUpload` method. +3. Retrieve the PDF viewer instance and save the current PDF as a Blob. Then read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to Dropbox using the `filesUpload` method of the Dropbox instance. -N> Replace **Your Access Token** with the actual Access Token of your Drop Box account. +N> Replace **Your Access Token** with the actual access token for the Dropbox app. ```typescript function saveDocument() { @@ -79,7 +79,7 @@ function saveDocument() { } ``` -N> Install the dropbox package in the application to use the previous code example: `npm install dropbox` +N> Install the `dropbox` package in the JavaScript project before running the sample: `npm install dropbox`. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Standalone) @@ -89,7 +89,7 @@ To save a PDF file to Dropbox cloud file storage, you can follow the steps below **Step 1:** Create a Dropbox API app -To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data. +To create a Dropbox API app, follow the Dropbox .NET tutorial: [Dropbox .NET tutorial](https://www.dropbox.com/developers/documentation/dotnet#tutorial). Use the Dropbox App Console to register an app and obtain the necessary access token and permissions. **Step 2:** Create a PDF Viewer sample in JavaScript @@ -97,7 +97,7 @@ Follow the instructions provided in this [link](https://help.syncfusion.com/docu **Step 3:** Modify the `PdfViewerController.cs` file in the web service project -1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project. +1. Create a web service project in .NET Core 3.0 or above. Refer to the Syncfusion knowledge base article on creating a PDF Viewer web service: [Create a PDF Viewer web service in .NET Core 3.0 and above](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above). 2. Open the `PdfViewerController.cs` file in your web service project. @@ -126,7 +126,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache } ``` -5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the Dropbox folder. +5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to the Dropbox storage. ```csharp @@ -163,7 +163,7 @@ public async Task Download([FromBody] Dictionary } ``` -6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration. +6. Open the `appsettings.json` file in the web service project and add the following entries below the existing `"AllowedHosts"` configuration ```json { @@ -179,21 +179,28 @@ public async Task Download([FromBody] Dictionary } ``` -N> Replace the placeholders with the actual Dropbox access token and target folder name. +N> Replace the placeholders with the actual Dropbox access token and folder name. **Step 4:** Set the PDF Viewer properties in the JavaScript PDF Viewer component Modify the `serviceUrl` property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from Dropbox, and ensure that the document exists in the target folder. ```javascript - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner +); + +var viewer = new ej.pdfviewer.PdfViewer(); // Replace the "localhost:44396" with the actual URL of your server viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; viewer.appendTo('#pdfViewer'); @@ -201,6 +208,6 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> Install the Dropbox.Api NuGet package in the web service application to use the previous code example. +N> Install the `Dropbox.Api` NuGet package in the web service application to use the previous code example. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Server-Backed) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-google-cloud-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-google-cloud-storage.md index 0c1d49a2b..6e1191776 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-google-cloud-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-google-cloud-storage.md @@ -10,15 +10,15 @@ domainurl: ##DomainURL## # Save PDF files to Google Cloud Storage -To save a PDF file to Google Cloud Storage, you can follow the steps below: +To save a PDF file to Google Cloud Storage, follow the steps below. **Step 1:** Create a PDF Viewer sample in JavaScript -Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) to create a simple PDF Viewer sample in JavaScript. This sets up the basic structure of the PDF Viewer application. +Follow the Syncfusion getting-started instructions for the JavaScript PDF Viewer: [JavaScript PDF Viewer getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started). This sets up the basic PDF Viewer application structure. **Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project -1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project. +1. Create a web service project in .NET Core 3.0 or above. Refer to the Syncfusion knowledge base article on creating a PDF Viewer web service: [Create a PDF Viewer web service in .NET Core 3.0 and above](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above). 2. Open the `PdfViewerController.cs` file in your web service project. @@ -30,7 +30,7 @@ using Google.Cloud.Storage.V1; using Google.Apis.Auth.OAuth2; ``` -4. Add the following private fields and constructor parameters to the `PdfViewerController` class. In the constructor, assign configuration values to the corresponding fields. +4. Add the following private fields and constructor parameters to the `PdfViewerController` class. In the constructor, assign the configuration values to the corresponding fields. ```csharp // Private readonly object _storageClient @@ -45,13 +45,14 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache _hostingEnvironment = hostingEnvironment; _cache = cache; - // The key file is used to authenticate with Google Cloud Storage. + // The key file is used to authenticate with Google Cloud Storage. Replace the path with the actual + // service account key JSON file provided by Google Cloud. string keyFilePath = "path/to/service-account-key.json"; // Load the service account credentials from the key file. var credentials = GoogleCredential.FromFile(keyFilePath); - // Create a storage client with Application Default Credentials + // Create a storage client using the service account credentials. _storageClient = StorageClient.Create(credentials); _configuration = configuration; @@ -60,7 +61,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache } ``` -5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the Google Cloud Storage bucket. +5. Modify the `Download()` method to save the downloaded PDF file to the Google Cloud Storage bucket. ```csharp [HttpPost("Download")] @@ -88,7 +89,7 @@ public IActionResult Download([FromBody] Dictionary jsonObject) } ``` -6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration. +6. Open the `appsettings.json` file in the web service project and add the following entries below the existing `"AllowedHosts"` configuration. ```json { @@ -103,23 +104,30 @@ public IActionResult Download([FromBody] Dictionary jsonObject) } ``` -N> Replace the placeholder with the actual Google Cloud Storage bucket name. +N> Replace **Your Bucket name from Google Cloud Storage** with the actual name of the Google Cloud Storage bucket. -N> Replace `path/to/service-account-key.json` with the actual file path to the service account key JSON file. +N> Replace **path/to/service-account-key.json** with the actual file path to the service account key JSON file. Provide the correct path and filename. **Step 3:** Set the PDF Viewer properties in the JavaScript PDF Viewer component Modify the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from Google Cloud Storage, and ensure that the document exists in the target bucket. ```javascript - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner +); + +var viewer = new ej.pdfviewer.PdfViewer(); // Replace the "localhost:44396" with the actual URL of your server viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; viewer.appendTo('#pdfViewer'); @@ -127,6 +135,6 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> Install the Google.Cloud.Storage.V1 NuGet package in the web service application to use the previous code example. +N> Install the `Google.Cloud.Storage.V1` NuGet package in the web service application to use the previous code example. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-google-cloud-storage) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-google-drive.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-google-drive.md index 8f0f2dd0f..dd2ae7d10 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-google-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-google-drive.md @@ -10,21 +10,21 @@ domainurl: ##DomainURL## # Save PDF files to Google Drive -To save a PDF file to Google Drive, you can follow the steps below: +This article describes how to save a PDF file to Google Drive from the Syncfusion JavaScript PDF Viewer using a server-side web service. Follow the steps below. **Step 1:** Set up the Google Drive API -You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/drive/api/guides/enable-sdk). +Create a Google Cloud project, enable the Google Drive API, and obtain OAuth 2.0 credentials. For details, see the [Google Drive](https://developers.google.com/drive/api/guides/enable-sdk) API enable guide. **Step 2:** Create a PDF Viewer sample in JavaScript -Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) to create a simple PDF Viewer sample in JavaScript. This sets up the basic structure of the PDF Viewer application. +Create a simple PDF Viewer sample in JavaScript by following the Syncfusion PDF Viewer for JavaScript [getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/JavaScript/getting-started) guide. This establishes the basic application structure required for the integration. **Step 3:** Modify the `PdfViewerController.cs` file in the web service project -1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project. +1. Create a [web service](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) project targeting .NET Core 3.0 or later. For guidance, see the Syncfusion knowledge base article on creating a PDF Viewer web service in .NET Core. -2. Open the `PdfViewerController.cs` file in your web service project. +2. Open the `PdfViewerController.cs` file in the web service project. 3. Import the required namespaces at the top of the file: @@ -54,7 +54,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache } ``` -5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the Google Drive folder. +5. Modify the `Download()` method to save the downloaded PDF file to the configured Google Drive folder. ```csharp [HttpPost("Download")] @@ -113,7 +113,7 @@ public async Task Download([FromBody] Dictionary } ``` -6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration. +6. Open the `appsettings.json` file in the web service project and add the following settings below the existing `"AllowedHosts"` configuration. ```json { @@ -138,17 +138,24 @@ N> Use a valid `client_id` from the JSON file to authenticate with the Google Dr **Step 4:** Set the PDF Viewer properties in the JavaScript PDF Viewer component -Modify the `serviceUrl` property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from Google Drive, and ensure that the document exists in the target folder. +Update the `serviceUrl` property of the PDF Viewer component to the web service URL, replacing `https://localhost:44396/pdfviewer` with the actual server endpoint. Set the `documentPath` property to the PDF file name that exists in the configured Google Drive folder. ```javascript - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner +); + +var viewer = new ej.pdfviewer.PdfViewer(); // Replace the "localhost:44396" with the actual URL of your server viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; viewer.appendTo('#pdfViewer'); @@ -156,6 +163,6 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> Install the Google.Apis.Drive.v3 NuGet package in the web service application to use the previous code example. +N> Install the `Google.Apis.Drive.v3` NuGet package in the web service application to use the previous code example. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-google-drive). \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-one-drive.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-one-drive.md index 585c24dea..f704398c9 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-one-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/save-pdf-file/to-one-drive.md @@ -10,21 +10,21 @@ domainurl: ##DomainURL## # Save PDF files to OneDrive -To save a PDF file to One Drive, you can follow the steps below: +This article describes how to save a PDF file to OneDrive from the Syncfusion JavaScript PDF Viewer using a server-side web service. Follow the steps below. **Step 1:** Create a Microsoft Graph API application -Need to create a Microsoft Graph API application and obtain the necessary credentials, namely the application ID and tenant ID. Follow the steps provided in the [link](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive) to create the application and obtain the required IDs. +Create a Microsoft Graph API application, and obtain the application (client) ID and tenant ID. For details, see the [Microsoft Graph guide](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive) for accessing files in OneDrive. **Step 2:** Create a PDF Viewer sample in JavaScript -Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) to create a simple PDF Viewer sample in JavaScript. This sets up the basic structure of the PDF Viewer application. +Create a simple PDF Viewer sample in JavaScript by following the Syncfusion PDF Viewer for JavaScript [getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) guide. This establishes the application structure required for the integration. **Step 3:** Modify the `PdfViewerController.cs` file in the web service project -1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project. +1. Create a web service project targeting .NET Core 3.0 or later. For guidance, see the Syncfusion knowledge base article on creating a PDF Viewer web service in .NET Core. -2. Open the `PdfViewerController.cs` file in your web service project. +2. Open the `PdfViewerController.cs` file in the web service project. 3. Import the required namespaces at the top of the file: @@ -54,7 +54,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache } ``` -5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the OneDrive folder. +5. Modify the `Download()` method to save the downloaded PDF file to the configured OneDrive folder. ```csharp [HttpPost("Download")] @@ -101,7 +101,7 @@ public async Task Download([FromBody] Dictionary } ``` -6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration. +6. Open `appsettings.json` in the web service project and add the following keys below the existing `AllowedHosts` configuration ```json { @@ -119,21 +119,28 @@ public async Task Download([FromBody] Dictionary ``` -N> Replace the placeholders with the actual tenant ID, application ID, and OneDrive folder name. +N> Replace the placeholders with actual values for the Tenant ID, Application ID, and OneDrive folder name. **Step 4:** Set the PDF Viewer properties in the JavaScript PDF Viewer component -Modify the `serviceUrl` property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from OneDrive, and ensure that the document exists in the target folder. +Update the `serviceUrl` property with the web service endpoint and set `documentPath` to the PDF file name stored in OneDrive. Ensure the document exists in the target OneDrive folder. ```javascript - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.Annotation, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner +); + +var viewer = new ej.pdfviewer.PdfViewer(); // Replace the "localhost:44396" with the actual URL of your server viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; viewer.appendTo('#pdfViewer'); @@ -141,11 +148,11 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> Install the following NuGet packages in the web service application: -- Microsoft.Identity.Client -- Microsoft.Graph -- Microsoft.Extensions.Configuration -- Microsoft.Extensions.Configuration.FileExtensions -- Microsoft.Extensions.Configuration.Json +N> Install the following NuGet packages in the web service application when required: +- `Microsoft.Identity.Client` +- `Microsoft.Graph` +- `Microsoft.Extensions.Configuration` +- `Microsoft.Extensions.Configuration.FileExtensions` +- `Microsoft.Extensions.Configuration.Json` [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-one-drive) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/how-to-deploy-docker-image-in-azure-app-service-for-container.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/how-to-deploy-docker-image-in-azure-app-service-for-container.md index df0cf4103..a06559aed 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/how-to-deploy-docker-image-in-azure-app-service-for-container.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/how-to-deploy-docker-image-in-azure-app-service-for-container.md @@ -41,8 +41,10 @@ az webapp create --resource-group pdfviewerresourcegroup --plan pdfviewerappserv **Step 4:** Browse to the app. -Open the app at http://.azurewebsites.net (for example, http://pdfviewerappservice.azurewebsites.net). Verify the API at http://pdfviewerappservice.azurewebsites.net/api/pdfviewer to confirm a default GET response. +Open the app at `https://.azurewebsites.net` (for example, `https://pdfviewerappservice.azurewebsites.net`). Use HTTPS in production. Verify the server API returns a default response at `https://.azurewebsites.net/api/pdfviewer`. -Append the service endpoint (for example, http://pdfviewerappservice.azurewebsites.net/api/pdfviewer) to the PDF Viewer client’s serviceUrl. Refer this [Getting started guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/) +Append the service endpoint (for example, `https://pdfviewerappservice.azurewebsites.net/api/pdfviewer`) to the PDF Viewer client's `serviceUrl`. -For production guidance, see [Microsoft Azure App Service for containers](https://docs.microsoft.com/azure/app-service/containers/quickstart-multi-container) \ No newline at end of file +See the PDF Viewer getting started guide for client configuration: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/ + +For guidance on deploying multi-container apps to Azure App Service for Containers, see the Azure quickstart: https://docs.microsoft.com/azure/app-service/containers/quickstart-multi-container \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md index a179acfeb..be78aa9b8 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md @@ -95,6 +95,6 @@ kubectl get all Browse to http:///api/pdfviewer to verify the default GET response. -**Step 6:** Use the service endpoint (for example, http:///api/pdfviewer) as the client’s serviceUrl. Getting started guide: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/ +**Step 6:** Use the service endpoint (for example, `https:///api/pdfviewer`) as the client's `serviceUrl`. See the PDF Viewer getting-started guide for client configuration: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/ -For production guidance, see Azure Kubernetes Service [documentation](https://docs.microsoft.com/azure/aks/kubernetes-walkthrough). \ No newline at end of file +For guidance on production deployments and AKS configuration, see the Azure Kubernetes Service walkthrough: https://docs.microsoft.com/azure/aks/kubernetes-walkthrough \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/how-to-deploy-pdfviewer-server-app-in-azure-app-service-from-visual-studio.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/how-to-deploy-pdfviewer-server-app-in-azure-app-service-from-visual-studio.md index 9025bf2b6..ce111f36d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/how-to-deploy-pdfviewer-server-app-in-azure-app-service-from-visual-studio.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/how-to-deploy-pdfviewer-server-app-in-azure-app-service-from-visual-studio.md @@ -21,22 +21,22 @@ domainurl: ##DomainURL## **Step 1:** In Solution Explorer, right-click the project and choose Publish (or use Build > Publish). -![azure publish](../images/azure_publish.png) +![Visual Studio Publish dialog](../images/azure_publish.png) **Step 2:** If a profile exists, select Create new profile. **Step 3:** In Pick a publish target, choose App Service. -![azure target](../images/azure_target.png) +![Pick a publish target dialog](../images/azure_target.png) **Step 4:** Select Publish. In Create App Service, sign in if prompted and review the default settings. -![azure pdfviewer](../images/azure_pdfviewer.png) +![Create App Service settings dialog](../images/azure_pdfviewer.png) -**Step 5:** Select Create. After deployment, the app loads at http://.azurewebsites.net (for example, http://ej2-pdfviewer-server20200513053326.azurewebsites.net). +**Step 5:** Select Create. After deployment, the app is available at `https://.azurewebsites.net` (for example, `https://ej2-pdfviewer-server20200513053326.azurewebsites.net`). -**Step 6:** Verify the API at http://ej2-pdfviewer-server20200513053326.azurewebsites.net/api/pdfviewer. A default GET response indicates the server is running. +**Step 6:** Verify the API at `https://.azurewebsites.net/api/pdfviewer`. A default GET response indicates the server is running. Use the service endpoint (for example, http://ej2-pdfviewer-server20200513053326.azurewebsites.net/api/pdfviewer) as the PDF Viewer client’s serviceUrl. Refer to the [getting started guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/) -For production guidance, see Azure App Service deployment [documentation](https://docs.microsoft.com/visualstudio/deployment/). \ No newline at end of file +For Azure App Service deployment guidance, see: https://docs.microsoft.com/visualstudio/deployment/ \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/pdfviewer-server-docker-image-overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/pdfviewer-server-docker-image-overview.md index 321984dc6..9d799ecde 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/pdfviewer-server-docker-image-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/server-deployment/pdfviewer-server-docker-image-overview.md @@ -59,9 +59,11 @@ Alternatively, run the container directly with the license key: docker run -d -p 6001:80 –e SYNCFUSION_LICENSE_KEY= YOUR_LICENSE_KEY syncfusion/pdfviewer-server:latest ``` -When the container starts, the server is available at http://localhost:6001. Open the API endpoint at http://localhost:6001/api/pdfviewer to verify the default GET response. +In production, avoid embedding license keys in files or image tags. Use environment variable management (for example, an `.env` file loaded by Compose), Docker secrets, or a platform-managed secret store. -**Step 4:** Set the PDF Viewer client’s serviceUrl to the server endpoint (for example, http://localhost:6001/api/pdfviewer). For details on creating a client application, see the [getting started guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/). +When the container starts, the server is available at `http://localhost:6001`. Open the API endpoint at `http://localhost:6001/api/pdfviewer` to verify the default GET response. For production deployments, use `https://` and a secure environment for license storage. + +**Step 4:** Set the PDF Viewer client's `serviceUrl` to the server endpoint (for example, `http://localhost:6001/api/pdfviewer`). For details on creating a client application, see the PDF Viewer getting-started guide: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/ ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/style-and-appearance/annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/style-and-appearance/annotation.md index 5c4802987..23f2bf184 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/style-and-appearance/annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/style-and-appearance/annotation.md @@ -77,7 +77,7 @@ Use the following CSS to update the Calibration annotation toolbar icon. } ``` -## Customize the Free Text icon +## Customize the free-text icon Use the following CSS to update the Free Text annotation toolbar icon. @@ -92,7 +92,7 @@ Use the following CSS to update the Free Text annotation toolbar icon. ## Customize the handwritten signature icon -Use the following CSS to update the Handwritten signature annotation toolbar icon. +When the icon is rendered via a pseudo-element, target the pseudo-element explicitly. ``` /* To specify font size and color */ @@ -115,7 +115,8 @@ Use the following CSS to update the Ink annotation toolbar icon. font-size: 20px; } ``` -## Customize the Close icon + +## Customize the close icon Use the following CSS to hide the Close icon. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/style-and-appearance/style-and-appearance.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/style-and-appearance/style-and-appearance.md index 11a559279..825bce0ce 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/style-and-appearance/style-and-appearance.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/style-and-appearance/style-and-appearance.md @@ -14,7 +14,7 @@ Override the default CSS classes to tailor the Syncfusion JavaScript PDF Viewer ## Customize the PDF Viewer root element -Use the following CSS to adjust the border of the PDF Viewer root element. +Use the following CSS to adjust the border of the PDF Viewer root element. Prefer CSS variables for color values so themes can be changed centrally. ``` .e-pdfviewer{ @@ -23,7 +23,7 @@ Use the following CSS to adjust the border of the PDF Viewer root element. ``` ## Customize the PDF Viewer container -Use the following CSS to update the background color of the PDF Viewer container. +Use the following CSS to update the background color of the PDF Viewer container. Use semantic variables for accessible theming. ``` /* To specify background color*/ @@ -33,7 +33,7 @@ Use the following CSS to update the background color of the PDF Viewer container ``` ## Customize the PDF Viewer page container -Use the following CSS to update the page container background within the PDF Viewer. +Use the following CSS to update the page container background within the PDF Viewer. If a distinct selector exists for page elements (for example, `.e-pv-page-container`), target that selector instead. ``` /* To specify background color*/ @@ -44,7 +44,7 @@ Use the following CSS to update the page container background within the PDF Vie ## Customize the bookmark icon -Use the following CSS to adjust the bookmark icon color in the PDF Viewer toolbar. +Use the following CSS to adjust the bookmark icon color in the PDF Viewer toolbar. Use `rem` for hover and base sizes to remain responsive. ``` /* To specify color of the bookmark */ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search.md index 0fa5479f0..5cd630c9c 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search.md @@ -132,14 +132,14 @@ pdfviewer.textSearch.searchText('pdf', false, true); **Note on Match Any Word:** The Match Any Word checkbox in the toolbar splits the input into multiple words and searches for each term individually. This differs from the `isMatchWholeWord` parameter, which enforces a whole-word match on the entire query string. -The following text search methods are available in the PDF Viewer, +The following text search methods are available in the PDF Viewer: * [**Search text**](https://ej2.syncfusion.com/documentation/api/pdfviewer/textSearch/#searchtext): Searches the target text in the PDF document and highlights each occurrence in the pages. * [**Search next**](https://ej2.syncfusion.com/documentation/api/pdfviewer/textSearch/#searchnext): Searches the next occurrence of the current query from the active match. * [**Search previous**](https://ej2.syncfusion.com/documentation/api/pdfviewer/textSearch/#searchprevious): Searches the previous occurrence of the current query from the active match. * [**Cancel text search**](https://ej2.syncfusion.com/documentation/api/pdfviewer/textSearch/#canceltextsearch): Cancels the current text search and removes the highlighted occurrences from the PDF Viewer. -![Alt text](./images/search.png) +![Text search panel showing highlighted matches and navigation controls](./images/search.png) ## Find text method Use the `findText` method to locate a string or an array of strings and return the bounding rectangles for each match. Optional parameters support case-sensitive comparisons and page scoping so you can retrieve coordinates for a single page or the entire document. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search/find-text.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search/find-text.md index 6746420cb..84a83f935 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search/find-text.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search/find-text.md @@ -16,8 +16,7 @@ Use the `findText` method to locate a string or an array of strings and return t ### Find and get the bounds of a text -Searches for the specified text within the document and returns the bounding rectangles of the matched text. The search can be case-sensitive based on the provided parameter. It returns the bounding rectangles for all pages in the document where the text was found. The following code snippet shows how to get the bounds of the specified text: -The following code snippet shows how to get the bounds of the specified text: +Searches for the specified text within the document and returns the bounding rectangles of the matched text. The search can be case-sensitive based on the provided parameter and returns matches from all pages in the document. The following code snippet shows how to get the bounds of the specified text: ```html
@@ -76,8 +75,7 @@ document.getElementById('textbounds').addEventListener('click', function () { ### Find and get the bounds of a text on the desired page -Searches for the specified text within the document and returns the bounding rectangles of the matched text. The search can be case-sensitive based on the provided parameter. It returns the bounding rectangles for that page in the document where the text was found. The following code snippet shows how to retrieve bounds for the specified text on a selected page: -The following code snippet shows how to retrieve bounds for the specified text on a selected page: +Searches for the specified text within the document and returns the bounding rectangles of the matched text on a specific page. The search can be case-sensitive based on the provided parameter and returns matches only from the selected page. The following code snippet shows how to retrieve bounds for the specified text on a selected page: ```html
@@ -135,7 +133,7 @@ document.getElementById('textbounds').addEventListener('click', function () { {% endtabs %} ### Find and get the bounds of the list of text -Searches for an array of strings within the document and returns the bounding rectangles for each occurrence. The search can be case-sensitive based on the provided parameters. It returns the bounding rectangles for all pages in the document where the strings were found. +Searches for an array of strings within the document and returns the bounding rectangles for each occurrence. The search can be case-sensitive based on the provided parameters and returns matches from all pages in the document where the strings were found. ```html
@@ -321,6 +319,8 @@ if (findTextButtons) { **pageIndex (optional, number):** Zero-based page index to search. If omitted, searches all pages. +N> `pageIndex` is zero-based; specify `0` for the first page. Omit this parameter to search the entire document. + ### Example workflow **findTextAsync('pdf', false):** diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search/text-search-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search/text-search-events.md index 711f3a2c3..5afa0defa 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search/text-search-events.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search/text-search-events.md @@ -14,7 +14,7 @@ The PDF Viewer triggers events during text search operations, allowing you to cu ## textSearchStart -The [textSearchStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer#textsearchstartevent) event fires as soon as a search begins from the toolbar interface or through the `textSearch.searchText` method. Use it to reset UI state, log analytics, or cancel the default search flow before results are processed. +The [textSearchStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer#textsearchstartevent) event fires as soon as a search begins from the toolbar interface or through the `textSearch.searchText` method. Use to reset UI state, log analytics, or cancel the default search flow before results are processed. - Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchStartEventArgs) exposes: - `searchText`: the term being searched. @@ -37,7 +37,7 @@ viewer.appendTo('#pdfViewer'); ## textSearchHighlight -The [textSearchHighlight](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer#textsearchhighlightevent) event triggers whenever a search result is brought into view, including navigation between matches. Use it to draw custom overlays or synchronize adjacent UI elements when a match is highlighted. +The [textSearchHighlight](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer#textsearchhighlightevent) event triggers whenever a search result is brought into view, including navigation between matches. Use to draw custom overlays or synchronize adjacent UI elements when a match is highlighted. - Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchHighlightEventArgs) exposes: - `bounds`: `RectangleBoundsModel | RectangleBoundsModel[]` representing the highlighted match. @@ -59,7 +59,7 @@ viewer.appendTo('#pdfViewer'); ## textSearchComplete -The [textSearchComplete](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer#textsearchcompleteevent) event runs after the search engine finishes scanning the document for the current query. Use it to update match counts, toggle navigation controls, or notify users when no results were found. +The [textSearchComplete](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer#textsearchcompleteevent) event runs after the search engine finishes scanning the document for the current query. Use to update match counts, toggle navigation controls, or notify users when no results were found. - Typical uses: - Update UI with the total number of matches and enable navigation controls. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search/text-search-features.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search/text-search-features.md index 0628449b0..3571d346f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search/text-search-features.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/text-search/text-search-features.md @@ -51,7 +51,7 @@ Enable Match Any Word to split the query into separate words. The popup proposes ### Enable or Disable Text Search -Use the following code snippet to enable or disable Text Search Features +Use the following snippet to enable or disable text search features ```html @@ -189,7 +189,7 @@ The following text search methods are available in the PDF Viewer, ![Alt text](../images/search.png) -Use the following code snippet to implement text search using SearchText API's +Use the following code snippet to implement text search using the SearchText API ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/textselection.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/textselection.md index 996337e07..b901e9113 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/textselection.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/textselection.md @@ -7,13 +7,13 @@ control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Text selection in JavaScript PDF Viewer control +# Text selection in JavaScript PDF Viewer -The TextSelection module lets users highlight and copy text from the loaded PDF. Selection is enabled by default and can be configured or monitored programmatically to match application workflows. +The TextSelection module allows users to highlight and copy text from the loaded PDF. Text selection is enabled by default and can be configured or monitored programmatically to match application workflows. ## Enable or disable text selection -Use the `enableTextSelection` property to enable or disable choosing text in the PDF Viewer. +Use the `enableTextSelection` property to enable or disable text selection in the PDF Viewer. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/annotation-toolbar.md index 905f849e4..8a85c5c15 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/annotation-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/annotation-toolbar.md @@ -19,7 +19,7 @@ Show or hide the annotation toolbar programmatically during initialization or at Use the [EnableAnnotationToolbar](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pdfViewerModel/#enableannotationtoolbar) property or the [showAnnotationToolbar](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar/#showannotationtoolbar) method to toggle visibility. -The following code snippet explains how to show or hide the annotation toolbar using the `showAnnotationToolbar` method. +The following example shows how to show or hide the annotation toolbar using the `showAnnotationToolbar` method. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/custom-toolbar.md index dc16e058e..ed3e4e44e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/custom-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/custom-toolbar.md @@ -10,13 +10,13 @@ domainurl: ##DomainURL## ## Custom Toolbar -The PDF Viewer provides APIs for user interaction options available in its built-in toolbar. Using these, you can create your own custom user interface for toolbar actions at the application level by hiding the default toolbar. +The PDF Viewer provides APIs for the user interaction options available in its built-in toolbar. Using these APIs, a custom application-level toolbar can be created by hiding the default toolbar and adding Syncfusion EJ2 toolbar components. Follow these steps to create a custom toolbar for the PDF Viewer: **Step 1: Create a simple PDF Viewer sample.** -Follow the steps provided in the [getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) guide to create a basic PDF Viewer sample. +Create a simple PDF Viewer sample by following the [getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) guide **Step 2: Add HTML elements for the custom toolbar.** diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/form-designer-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/form-designer-toolbar.md index 95ecf2d08..cb12396db 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/form-designer-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/form-designer-toolbar.md @@ -10,15 +10,15 @@ domainurl: ##DomainURL## # Form Designer Toolbar Customization in JavaScript -The form designer toolbar can be customized by showing or hiding default items and by controlling the order in which the items appear. +Customize the form designer toolbar by showing or hiding default items and controlling the order in which items appear. ## Show or hide the form designer toolbar -Show or hide the form designer toolbar programmatically during initialization or at runtime. +The form designer toolbar can be shown or hidden programmatically during initialization or at runtime. -Use the [EnableFormDesigner](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pdfViewerModel/#enableformdesigner) property or the [showFormDesignerToolbar](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar/#showformdesignertoolbar) method to toggle visibility. +Use the [enableFormDesigner](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pdfViewerModel/#enableformdesigner) property to set initial visibility or call the [showFormDesignerToolbar](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar/#showformdesignertoolbar) method at runtime to toggle visibility. The links below reference the corresponding API documentation. -The following code snippet explains how to show or hide the toolbar using the `EnableFormDesigner` property. +The following code snippet shows how to set the `enableFormDesigner` property during initialization. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -61,9 +61,9 @@ pdfviewer.appendTo('#PdfViewer'); ## How to customize the form designer toolbar -Choose which tools appear and control their order in the form designer toolbar. +Select which tools appear and control their order in the form designer toolbar. -Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/) with the [`FormDesignerToolbarItems`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/#formdesignertoolbaritems) property to choose which form design tools are available. The property accepts a list of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formDesignerToolbarItem/) 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. +Configure [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/) and set the [`FormDesignerToolbarItems`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/#formdesignertoolbaritems) property to specify available form-design tools. This property accepts a list of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formDesignerToolbarItem/) values; included items are displayed in the listed order and omitted items are hidden. This produces a consistent, streamlined form-design experience across devices. The following example demonstrates how to customize the form designer toolbar by configuring specific tools using `FormDesignerToolbarItem`. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/mobile-toolbar.md index a7ca21741..4d095af2b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/mobile-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/mobile-toolbar.md @@ -10,10 +10,11 @@ domainurl: ##DomainURL## --- # Mobile Toolbar Interface in Javascript PDF Viewer control -The Mobile PDF Viewer offers a variety of features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes essential tools like search, download, bookmarking, annotation, and page organization. Users also have the option to enable desktop toolbar features in mobile mode, providing a more extensive set of actions. +The Mobile PDF Viewer provides features for viewing, searching, annotating, and managing PDF documents on mobile devices. It exposes core tools such as search, download, bookmarking, annotation, and page organization. The desktop toolbar can also be enabled in mobile mode to expose additional actions when required. ## Mobile Mode Toolbar Configuration -In mobile mode, the toolbar is optimized for ease of use on small screens, presenting users with the most common actions for interacting with a PDF document. Below are the key features available in mobile mode: + +In mobile mode, the toolbar is optimized for small screens and presents the most common actions for interacting with a PDF document. The following key features are available in mobile mode: ![Mobile toolbar with primary PDF interaction options](../images/mobileToolbar.png) @@ -35,8 +36,7 @@ In mobile mode, the toolbar is optimized for ease of use on small screens, prese ![Annotation editing toolbar allowing users to add, edit, or delete annotations on a PDF](../images/editAnnotation.png) - -N> In mobile mode, the annotation toolbar is conveniently displayed at the bottom of the viewer. +N> In mobile mode, the annotation toolbar is displayed at the bottom of the viewer. ### More Options Menu: When you open the "more options" menu, you will see additional actions such as: @@ -49,13 +49,13 @@ When you open the "more options" menu, you will see additional actions such as: ## Enabling Desktop Mode in Mobile -The desktop version of the toolbar can be enabled on mobile devices by using the `enableDesktopMode` API. This API allows you to bring desktop-like features to the mobile PDF viewer, providing access to additional toolbar actions that are typically available on desktop platforms. +The desktop toolbar can be enabled on mobile devices by setting the `enableDesktopMode` option. Enabling this option exposes desktop-style toolbar actions in the mobile PDF Viewer. ### Steps to Enable Desktop Mode: -**Step 1:** Set `enableDesktopMode` to true in the API configuration. +**Step 1:** Set `enableDesktopMode` to true in the component configuration. -**Step 2:** This will replace the mobile toolbar with the desktop toolbar layout, allowing access to more actions and controls. +**Step 2:** The viewer will use the desktop toolbar layout, granting access to additional actions and controls. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -96,7 +96,7 @@ pdfviewer.appendTo('#PdfViewer'); ## Enable Scrolling in Desktop Mode with Touch Gestures -To ensure smooth scrolling of PDF documents on a mobile device in desktop mode, it is important to enable touch gesture scrolling. You can achieve this by setting the `enableTextSelection` option to **false**. +To ensure smooth touch scrolling of documents on mobile devices when the desktop toolbar is enabled, set the `enableTextSelection` option to **false**. This disables text-selection interactions that can interfere with touch-based scrolling. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -138,12 +138,11 @@ pdfviewer.appendTo('#PdfViewer'); ## Print Option Not Available -The Print option is not available in mobile mode by default. However, if you need to use the print functionality on mobile devices, we recommend enabling the desktop toolbar on mobile using the `enableDesktopMode` API. +The Print option is not available in mobile mode by default. Enabling the desktop toolbar on mobile via `enableDesktopMode` makes the Print option available. ### How to Use Print on Mobile: -**Enable Desktop Mode:** Set `enableDesktopMode` to true to load the desktop version of the toolbar on your mobile device. - -**Print Option:** Once desktop mode is enabled, the print option will be available, allowing you to print the document directly from your mobile device. +- Set `enableDesktopMode` to true to load the desktop toolbar on mobile. +- After enabling desktop mode, the Print option appears in the toolbar and can be used to print the document from the mobile device -N> In mobile mode, the print functionality will not be available unless desktop mode is enabled. \ No newline at end of file +N> Print functionality remains unavailable in the default mobile toolbar unless desktop mode is enabled. \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/primary-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/primary-toolbar.md index 6ac15e378..005fe3849 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/primary-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar-customization/primary-toolbar.md @@ -10,13 +10,13 @@ domainurl: ##DomainURL## # Primary Toolbar Customization in JavaScript PDF Viewer -The primary toolbar of the PDF Viewer can be customized by rearranging existing items, disabling default items, and adding custom items. New items can be placed at specific index positions among the existing items. +The primary toolbar of the PDF Viewer can be customized by rearranging existing items, disabling default items, and adding custom items. New items can be inserted at a specific index among existing toolbar items to control placement. ## Show or hide the primary toolbar -Toggle the built-in primary toolbar to create custom toolbar experiences or simplify the UI. In scenarios where a custom toolbar is required, the built-in toolbar can be hidden. Use the [enableToolbar](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pdfViewerModel/#enabletoolbar) property or the [showToolbar](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar/#showtoolbar) method to show or hide the primary toolbar. +Toggle the built-in primary toolbar to create custom toolbar experiences or simplify the UI. When a custom toolbar is required, hide the built-in toolbar. Use the [enableToolbar](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pdfViewerModel/#enabletoolbar) property or the [showToolbar](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar/#showtoolbar) method to show or hide the primary toolbar.method to show or hide the primary toolbar. -Show or hide the toolbar using the `enableToolbar` property: +### Show or hide the toolbar using the `enableToolbar` property: {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar.md index 8de28377d..4735ac0ed 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/toolbar.md @@ -8,25 +8,25 @@ documentation: ug domainurl: ##DomainURL## --- -# Built-In Toolbar in JavaScript Pdfviewer control +# Built-In Toolbar in JavaScript PDF Viewer -The PDF Viewer comes with a powerful built-in toolbar to execute important actions such as page navigation, text search,view mode,download,print,bookmark, and thumbnails. +The PDF Viewer includes a built-in toolbar for common actions such as page navigation, text search, view mode, download, print, bookmarks, and thumbnails. The following table shows built-in toolbar items and its actions:- | Option | Description | |---|---| -| OpenOption | This option provides an action to load the PDF documents to the PDF Viewer.| -| PageNavigationTool | This option provides an action to navigate the pages in the PDF Viewer. It contains GoToFirstPage,GoToLastPage,GotoPage,GoToNext, and GoToLast tools.| -| MagnificationTool | This option provides an action to magnify the pages either with predefined or user defined zoom factors in the PDF Viewer. Contains ZoomIn, ZoomOut, Zoom, FitPage and FitWidth tools| -| PanTool |This option provides an action for panning the pages in the PDF Viewer.| -| SelectionTool |This option provides an action to enable/disable the text selection in the PDF Viewer.| -| SearchOption |This option provides an action to search a word in the PDF documents.| -| PrintOption |This option provides an action to print the PDF document being loaded in the PDF Viewer.| -| DownloadOption |This Download option provides an action to download the PDF document that has been loaded in the PDF Viewer.| -| UndoRedoTool | This tool provides options to undo and redo the annotation actions performed in the PDF Viewer.| -| AnnotationEditTool | This tool provides options to enable or disable the edit mode of annotation in the PDF Viewer.| -| FormDesignerEditTool | This tool provides options to enable or disable the edit mode of form fields in the PDF Viewer.| +| OpenOption | Loads PDF documents into the PDF Viewer. | +| PageNavigationTool | Group of page navigation tools (GoToFirstPage, GoToLastPage, GoToPage, GoToNext, GoToPrevious). | +| MagnificationTool | Provides zoom controls and fit options (ZoomIn, ZoomOut, Zoom, FitPage, FitWidth). | +| PanTool | Enables panning of pages. | +| SelectionTool | Enables or disables text selection. | +| SearchOption | Opens the search panel to find text in the document. | +| PrintOption | Prints the loaded PDF. | +| DownloadOption | Downloads the current PDF document. | +| UndoRedoTool | Provides undo and redo for annotation actions. | +| AnnotationEditTool | Toggles annotation edit mode. | +| FormDesignerEditTool | Toggles form designer/edit mode for form fields. | ## Show/Hide the default toolbar @@ -62,8 +62,7 @@ The PDF Viewer has an option to show or hide the complete default toolbar. You c {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer#serviceurl) in the `index.html` file +N> To set up the **server-backed PDF Viewer**, add the following `serviceUrl` in the `index.html` file: `serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/es5-toolbar/toolbar-hide-cs1" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/troubleshooting/content-security-policy.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/troubleshooting/content-security-policy.md index 7ffb02cbc..3ac888348 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/troubleshooting/content-security-policy.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/troubleshooting/content-security-policy.md @@ -11,7 +11,7 @@ documentation: ug Content Security Policy (CSP) is a browser security feature that helps mitigate attacks such as cross-site scripting (XSS) and data injection by restricting the sources from which content can load. -When strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html) is enabled, several browser capabilities are disabled by default. To run the Syncfusion PDF Viewer control under strict CSP, include the following directives in the CSP meta tag. +When strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html) is enabled, several browser capabilities are disabled by default. To run the Syncfusion PDF Viewer control under strict CSP, include the following directives in the CSP meta tag. These directives can also be provided by the HTTP `Content-Security-Policy` response header from the server; the examples below show client-side meta tag usage. * The Syncfusion PDF Viewer control renders calculated **inline styles** and **base64** font icons, which strict CSP blocks. Allow these assets by adding the [`style-src 'self' 'unsafe-inline';`](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, as shown below. @@ -25,7 +25,7 @@ When strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/stri {% endhighlight %} {% endtabs %} -* The Syncfusion **material** and **tailwind** built-in themes reference the [`Roboto external font`](https://fonts.googleapis.com/css?family=Roboto:400,500), which strict CSP also blocks. Permit these resources by adding the font URLs to the [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the meta tag. +* The Syncfusion **material** and **tailwind** built-in themes reference the [`Roboto external font`](https://fonts.googleapis.com/css?family=Roboto:400,500), which strict CSP also blocks. Permit these external fonts by adding their URLs to both the [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the meta tag. The resulting meta tag must be placed within the `` element to resolve CSP violations when using the Syncfusion PDF Viewer control with the material and tailwind themes. @@ -56,6 +56,6 @@ The resulting meta tag must be placed within the `` element to resolve CSP {% endhighlight %} {% endtabs %} -N> Starting with the 2023 Vol 2 (v22.1) release, the Content Security Policy for the Syncfusion PDF Viewer control has been improved by using a [function template](../template#function-template) approach for template properties, eliminating the need for the `unsafe-eval` directive in the CSP meta tag. +N> Starting with the 2023 Vol 2 (v22.1) release, the Content Security Policy for the Syncfusion PDF Viewer control was improved by using a [function template](../template#function-template) approach for template properties, which eliminates the need for the `unsafe-eval` directive in the CSP meta tag. For older releases (pre-v22.1) that use previous template patterns, the `unsafe-eval` directive may still be required. [View the sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/Troubleshooting/Content%20Security%20Policy) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/troubleshooting/document-loading-issues.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/troubleshooting/document-loading-issues.md index dae31e31e..add9414fc 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/troubleshooting/document-loading-issues.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/troubleshooting/document-loading-issues.md @@ -9,9 +9,9 @@ documentation: ug # Document Loading Issues in Version 23.1 or Newer -If the document does not render in the viewer when using version 23.1 or newer, follow these steps: +If a document does not render in the viewer when using version 23.1 or newer, follow these steps: -1. Call `pdfviewer.dataBind()` before `load()`. Starting with v23.1, an explicit dataBind call is required to initialize data binding and render correctly. +1. Call `viewer.dataBind()` before `load()`. Starting with v23.1, an explicit `dataBind()` call is required to initialize data binding and render correctly. Ensure `dataBind()` is invoked after `appendTo()` and before `load()` as shown in the example. ```javascript var viewer = new ej.pdfviewer.PdfViewer ({ @@ -24,12 +24,14 @@ viewer.dataBind(); viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); ``` -2. Verify the document source. Ensure the URL or path is valid and accessible. -3. Check network connectivity. The viewer cannot fetch the document without a stable connection. -4. Inspect console errors. Use browser developer tools to identify issues. -5. Validate the initialization order. Initialize the viewer, call `dataBind()`, then call `load()`. -6. Update to the latest viewer version. Issues may be resolved in newer releases. -7. Configure CORS correctly for cross-domain documents. -8. Review Content Security Policy (CSP) settings. Ensure external resources are permitted. See the Content Security Policy troubleshooting guide in the Syncfusion documentation for details. +2. Verify the document source: ensure the document URL or file path is correct and reachable. +3. Check network connectivity: the viewer requires network access to fetch remote documents. +4. Inspect console errors using browser developer tools to identify runtime or network failures. +5. Confirm initialization order: instantiate the viewer, call `dataBind()`, then call `load()`. +6. Upgrade to the latest viewer release; the issue may be fixed in newer versions. +7. Configure CORS correctly for cross-origin documents so the viewer can retrieve remote files. +8. Review Content Security Policy (CSP) settings and permit any external resources required by the viewer. See the Content Security Policy troubleshooting guide in the Syncfusion documentation for details. -Following this checklist typically resolves document loading issues in v23.1 or newer. +N> For v23.1 and later, ensure `dataBind()` is called before `load()`; earlier releases may not require this call. + +Following this checklist typically resolves document loading issues in v23.1 and later.