From bc9294d90abc06a9505aef27f7d7d05284aac0bb Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Thu, 30 Jul 2026 19:36:49 +0530 Subject: [PATCH 01/70] 1044353: Updated Annotations and Forms Quality Enhancement --- .../annotations/annotation-comment-filter.md | 9 +- .../annotations/annotation-event.md | 2 +- .../annotations/annotation-permission.md | 2 +- .../annotation-types/area-annotation.md | 15 +- .../annotation-types/arrow-annotation.md | 15 +- .../annotation-types/circle-annotation.md | 25 +- .../annotation-types/distance-annotation.md | 23 +- .../annotation-types/free-text-annotation.md | 25 +- .../annotation-types/highlight-annotation.md | 21 +- .../annotation-types/ink-annotation.md | 23 +- .../annotation-types/line-annotation.md | 19 +- .../annotation-types/perimeter-annotation.md | 21 +- .../annotation-types/polygon-annotation.md | 27 ++- .../annotation-types/radius-annotation.md | 2 +- .../annotation-types/rectangle-annotation.md | 22 +- .../annotation-types/redaction-annotation.md | 221 ++++++++++++++---- .../annotation-types/stamp-annotation.md | 25 +- .../sticky-notes-annotation.md | 4 +- .../strikethrough-annotation.md | 6 +- .../annotation-types/underline-annotation.md | 6 +- .../annotations/annotations-api.md | 16 +- .../javascript-es5/annotations/comments.md | 4 +- .../javascript-es5/annotations/custom-data.md | 2 +- .../annotations/custom-tools.md | 8 +- .../annotations/customize-annotation.md | 4 +- .../export-import/export-annotation.md | 6 +- .../export-import/import-annotation.md | 2 +- .../javascript-es5/annotations/ink-eraser.md | 2 - .../annotations/line-angle-constraints.md | 8 +- .../javascript-es5/annotations/overview.md | 2 +- .../annotations/signature-annotation.md | 10 +- .../javascript-es5/forms/custom-data.md | 7 +- .../javascript-es5/forms/form-constrain.md | 4 +- .../javascript-es5/forms/form-designer.md | 6 +- .../javascript-es5/forms/form-field-events.md | 2 +- .../javascript-es5/forms/form-fields-api.md | 9 +- .../javascript-es5/forms/form-filling.md | 7 +- .../javascript-es5/forms/group-form-fields.md | 2 +- .../import-export-events.md | 1 - .../import-form-fields.md | 6 +- .../manage-form-fields/create-form-fields.md | 2 +- 41 files changed, 392 insertions(+), 231 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-comment-filter.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-comment-filter.md index 53c4cf5ecc..d6e2e04fdf 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-comment-filter.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-comment-filter.md @@ -23,7 +23,7 @@ Imagine reviewing a PDF document with feedback from 5 team members, resulting in Comment filtering is most useful in these scenarios: - **Team reviews**: Filter annotations by author to see feedback from specific reviewers -- **Status tracking**: Filter by status (Accepted, Rejected, Canceled) to track document workflow progress +- **Status tracking**: Filter by status (Accepted, Rejected, Cancelled) to track document workflow progress - **Color-coded reviews**: Filter by annotation color to organize feedback by priority or type - **Time-based review**: Filter by modification date to see recent changes - **Document collaboration**: Use "Filter document and comments panel" to synchronize your view with the document @@ -36,8 +36,8 @@ The JavaScript PDF Viewer provides a comment filter dialog in the comments panel ### Filter options - **Author**: Filter annotations by the author who created them. Use the "Include replies" checkbox to also include comments where the author has replied to other annotations. -- **Annotation Type**: Filter by specific annotation types such as Highlight, Underline, Strikethrough, Text Box, Sticky Notes, and more. -- **Status**: Filter annotations by their status (e.g., Accepted, Rejected, Canceled, Completed, None). +- **Annotation Type**: Filter by specific annotation types such as Highlight, Underline, Strikethrough, Free Text, Sticky Notes, and more. +- **Status**: Filter annotations by their status (e.g., Accepted, Rejected, Cancelled, Completed, None). - **Date**: Filter annotations by their modification date. - **Color**: Filter annotations by their color. @@ -63,7 +63,7 @@ Follow these steps to filter annotations by their type and status: 1. Click the **filter icon** in the comments panel toolbar 2. In the **Annotation Type** dropdown, select the annotation types you want to view (e.g., Highlight, Underline) -3. In the **Status** dropdown, select the status you want to filter by (e.g., Accepted, Rejected, Pending) +3. In the **Status** dropdown, select the status you want to filter by (e.g., Accepted, Rejected, Completed) 4. Click **APPLY** to see only annotations matching your criteria 5. Use the **CLEAR** button to reset all filters @@ -128,7 +128,6 @@ This approach is useful when you want to: Use the `applyCommentFilter` method to apply filters with specific criteria: - ```html 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 fc1f3ff1bc..22e897ce0b 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 @@ -1,5 +1,5 @@ --- -title: Annotations Events in JavaScript PDF Viewer control | Syncfusion +title: Annotation Events in JavaScript PDF Viewer control | Syncfusion description: Learn here all about Annotations Events in Syncfusion JavaScript PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer 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 cfec1cb860..1ea2d98396 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 @@ -121,7 +121,7 @@ var pdfviewer = new ej.pdfviewer.PdfViewer({ pdfviewer.appendTo('#PdfViewer'); ``` -Behavior notes +### Behavior notes - isLock true: The annotation is locked; users cannot move, resize, or edit it through the UI until it is unlocked. - skipPrint true: All annotations are omitted from the print output initiated from the viewer. - skipDownload true: All annotations are omitted from the exported/downloaded PDF from the viewer. 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 36b76702f2..238e85d926 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,10 +18,11 @@ Area is a measurement annotation used to measure the surface of a closed region ### Add area annotation via UI -- 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. +Use the annotation toolbar to add an area annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Click the **Measurement Annotation** dropdown. +3. Choose **Area**, then draw the region on the page. N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode. @@ -348,11 +349,11 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `AreaSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding an Area annotation. ```html @@ -447,7 +448,7 @@ Supported units for measurement annotations are ## Setting default scale ratio settings during control initialization -The properties of scale ratio for measurement annotation can be set before creating the control using ScaleRatioSettings as shown in the following code snippet, +The properties of scale ratio for measurement annotation can be set before creating the control using `measurementSettings` as shown in the following code snippet, {% tabs %} {% highlight js tabtitle="Standalone" %} 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 a030fc3f89..62375a77b5 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,10 +18,11 @@ Arrow is a shape annotation used to point, direct attention, or indicate flow. C ### Add arrow annotation via UI -Use the annotation toolbar to: -- Click the **Edit Annotation** button in the PDF Viewer toolbar. -- Open the **Shape Annotation** dropdown. -- Choose **Arrow**, then draw on the page. +Use the annotation toolbar to add an arrow annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Shape Annotation** dropdown. +3. Choose **Arrow**, then draw on the page. N> When in pan mode, selecting a shape annotation switches the viewer to text select mode. @@ -171,7 +172,7 @@ You can select, move, and resize Arrow annotations directly in the viewer: The fill color, stroke color, thickness, and opacity of arrow shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. -##### Editing fill color +#### Editing fill color The fill color of the annotation can be edited using the color palette provided in the Edit Color tool. @@ -335,11 +336,11 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `ArrowSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding an arrow annotation. ```html 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 e6a32dccc2..c53ec3492f 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,10 +18,11 @@ Circle is a shape annotation used to highlight circular regions or draw emphasis ### Add circle annotation via UI -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. +Use the annotation toolbar to add a circle annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Shape Annotation** dropdown. +3. Choose **Circle**, then draw on the page. N> When in pan mode, selecting a shape annotation switches the viewer to text select mode. @@ -216,7 +217,9 @@ The opacity of the annotation can be edited using the range slider provided in t ### Edit an existing circle annotation programmatically -Use editAnnotation on items from annotationCollection. +To modify an existing circle annotation programmatically, use the editAnnotation() method. + +Here is an example of using editAnnotation(): ```html @@ -350,17 +353,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `CircleSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding a Circle annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -389,12 +392,12 @@ document.getElementById('Circle')?.addEventListener('click', function () { height: 75, opacity: 0.5, strokeColor: '#FF0000', - fillColor: '#000fff#', + fillColor: '#000fff', author: 'User1' }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -423,7 +426,7 @@ document.getElementById('Circle')?.addEventListener('click', function () { height: 75, opacity: 0.5, strokeColor: '#FF0000', - fillColor: '#000fff#', + fillColor: '#000fff', author: 'User1' }); }); 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 91ce8d7d2f..8436490022 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,10 +18,11 @@ Distance is a measurement annotation used to measure the length between two poin ### Add distance annotation via UI -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. +Use the annotation toolbar to add a distance annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Measurement Annotation** dropdown. +3. Choose **Distance**, then draw on the page. N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode. @@ -185,7 +186,7 @@ You can select, move, and resize Distance annotations directly in the viewer: 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. -##### Edit fill color +#### Edit fill color The fill color of the annotation can be edited using the color palette provided in the Edit Color tool. @@ -211,7 +212,9 @@ The opacity of the annotation can be edited using the range slider provided in t ### Edit an existing distance annotation programmatically -Use editAnnotation on items from annotationCollection. +To modify an existing distance annotation programmatically, use the editAnnotation() method. + +Here is an example of using editAnnotation(): ```html @@ -337,17 +340,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `DistanceSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding a Distance annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -377,7 +380,7 @@ document.getElementById('Distance')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, 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 53aad96fdd..88f534c813 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,10 +18,11 @@ 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 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. +Use the annotation toolbar to add a Free Text annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Click the **Free Text Annotation** button to enable Free Text mode. +3. Click on the page to add text. N> When in pan mode, selecting Free Text switches the viewer to text select mode. @@ -247,7 +248,9 @@ Edit opacity using the range slider in the Edit Opacity tool. ### Edit Free Text annotation programmatically -Use editAnnotation to update existing Free Text content. +To modify an existing Free Text annotation programmatically, use the editAnnotation() method. + +Here is an example of using editAnnotation(): ```html @@ -317,10 +320,6 @@ document.getElementById('changeContent').addEventListener('click', function () { {% endhighlight %} {% endtabs %} - - - - ## Default Free Text settings during initialization Set default Free Text properties before creating the control using freeTextSettings. @@ -374,17 +373,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `FreeTextSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding a FreeText annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -421,7 +420,7 @@ document.getElementById('FreeText')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, 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 a16dda9b56..a8541538e6 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 @@ -27,10 +27,11 @@ 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, or select text first and then click **Highlight**. +Use the annotation toolbar to add a highlight annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. +2. Select **Highlight** to enable highlight mode. +3. 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) @@ -70,7 +71,7 @@ document.getElementById('set').addEventListener('click', function () { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, add the below `serviceUrl` in the `index.ts` file: `pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` +N> To set up the **server-backed PDF Viewer**, add the below `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/highlight-mode-cs1" %} @@ -112,7 +113,7 @@ document.getElementById('setNone').addEventListener('click', function () { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, add the below `serviceUrl` in the `index.ts` file: +N> To set up the **server-backed PDF Viewer**, add the below `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/highlight-normal-mode-cs1" %} @@ -336,17 +337,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `highlightSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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 properties while adding a Highlight annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -385,7 +386,7 @@ document.getElementById('highlight')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, 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 93c8926fec..aa74175838 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,10 +18,11 @@ Ink is a freehand drawing annotation used to sketch, sign, or mark up content. ### Add ink annotation via UI -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. +Use the annotation toolbar to add an ink annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Click the **Draw Ink** button to enable ink mode. +3. Draw on any page of the PDF document. ![Ink tool in the annotation toolbar](../../images/ink_tool.png) @@ -80,7 +81,7 @@ if (setNone) { ### Add ink annotation programmatically -Use addAnnotation to programmatically create an Ink annotation. +The PDF Viewer library allows adding ink annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method. ```html @@ -187,7 +188,9 @@ Edit opacity using the range slider in the Edit Opacity tool. ### Edit an existing ink annotation programmatically -Use editAnnotation to modify properties and bounds of an existing ink annotation. +To modify an existing ink annotation programmatically, use the editAnnotation() method. + +Here is an example of using editAnnotation(): ```html @@ -323,17 +326,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `InkSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding an Ink annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -366,7 +369,7 @@ document.getElementById('Ink')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, 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 636bfa3f25..c222ca4b70 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,10 +18,11 @@ Line is a shape annotation used to mark straight connections or callouts. Common ### Add line annotation via UI -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. +Use the annotation toolbar to add a line annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Shape Annotation** dropdown. +3. Choose **Line**, then draw on the page. N> When in pan mode, selecting a shape annotation switches the viewer to text select mode. @@ -104,7 +105,7 @@ document.getElementById('setNone').addEventListener('click', function() { ### Add a line annotation programmatically -Use the addAnnotation method with Line settings. +The PDF Viewer library allows adding shape annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method. ```html @@ -352,17 +353,17 @@ N> In both [Arrow](https://ej2.syncfusion.com/documentation/api/pdfviewer/index- ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `lineSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding a line annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -397,7 +398,7 @@ document.getElementById('line')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, 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 f3f0297d00..bcc9c64e41 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,10 +18,11 @@ Perimeter is a measurement annotation used to measure the length around a closed ### Add perimeter annotation via UI -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. +Use the annotation toolbar to add a perimeter annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Measurement Annotation** dropdown. +3. Choose **Perimeter**, then draw the polyline on the page. N> When in pan mode, selecting measurement annotations switches the viewer to text select mode. @@ -363,17 +364,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `PerimeterSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding a Perimeter annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -404,8 +405,8 @@ document.getElementById('Perimeter')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -=ej.pdfviewer.PdfViewer.Inject( +{% highlight js tabtitle="Server-Backed" %} +ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, @@ -443,7 +444,7 @@ The scale ratio and unit of measurement can be modified using the scale ratio op ![Scale ratio](../../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/polygon-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/polygon-annotation.md index 469178bb38..8aba84da10 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,10 +18,11 @@ Polygon is a shape annotation used to outline irregular regions, highlight areas ### Add polygon annotation via UI -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. +Use the annotation toolbar to add a polygon annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Shape Annotation** dropdown. +3. Choose **Polygon**, then draw on the page. N> When in pan mode, selecting shape annotations switches the viewer to text select mode. @@ -220,7 +221,9 @@ The opacity of the annotation can be edited using the range slider provided in t ### Edit an existing polygon annotation programmatically -Use editAnnotation on items from annotationCollection. +To modify an existing polygon annotation programmatically, use the editAnnotation() method. + +Here is an example of using editAnnotation(): ```html @@ -348,11 +351,11 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `PolygonSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding a Polygon annotation. ```html @@ -387,13 +390,13 @@ document.getElementById('Polygon')?.addEventListener('click', function () { vertexPoints: [ { x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 } ], - fillColor:'#ff000', + fillColor:'#ff0000', opacity: 0.9, - strokeColor:'##ff000' + strokeColor:'#ff0000' }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -422,9 +425,9 @@ document.getElementById('Polygon')?.addEventListener('click', function () { vertexPoints: [ { x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 } ], - fillColor:'#ff000', + fillColor:'#ff0000', opacity: 0.9, - strokeColor:'##ff000' + strokeColor:'#ff0000' }); }); {% endhighlight %} 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 9322791d71..f01125d768 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 @@ -104,7 +104,7 @@ document.getElementById('setNone').addEventListener('click', function() { ### Add a radius annotation programmatically -Add radius 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#addannotation) method. ```html 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 cde1e1489c..8ec24d1b9e 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 @@ -390,14 +390,26 @@ document.getElementById('Rectangle')?.addEventListener('click', function () { }); {% endhighlight %} {% highlight js tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, RectangleSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); -const pdfviewer: PdfViewer = new PdfViewer(); +var pdfviewer = new ej.pdfviewer.PdfViewer(); pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; pdfviewer.appendTo('#PdfViewer'); + //Apply Rectangle Settings while adding individual Annotation document.getElementById('Rectangle')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Rectangle', { @@ -409,7 +421,7 @@ document.getElementById('Rectangle')?.addEventListener('click', function () { strokeColor: '#FF0000', fillColor: '#000fff#', author: 'User1' - } as RectangleSettings); + }); }); {% endhighlight %} {% endtabs %} 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 c755640a27..da5e35cbfc 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 @@ -43,27 +43,50 @@ Use the `addAnnotation` method with the Redaction type to add redaction annotati ``` ```js -document.getElementById('addRedactAnnot')?.addEventListener('click', () => { - viewer.annotation.addAnnotation('Redaction', { - bound: { x: 200, y: 480, width: 150, height: 75 }, - pageNumber: 1, - markerFillColor: '#0000FF', - markerBorderColor: 'white', - fillColor: 'red', - overlayText: 'Confidential', - fontColor: 'yellow', - fontFamily: 'Times New Roman', - fontSize: 8, - beforeRedactionsApplied: false - }); -}); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +var addRedactAnnot = document.getElementById('addRedactAnnot'); +if (addRedactAnnot) { + addRedactAnnot.addEventListener('click', function () { + pdfviewer.annotation.addAnnotation('Redaction', { + bound: { x: 200, y: 480, width: 150, height: 75 }, + pageNumber: 1, + markerFillColor: '#0000FF', + markerBorderColor: 'white', + fillColor: 'red', + overlayText: 'Confidential', + fontColor: 'yellow', + fontFamily: 'Times New Roman', + fontSize: 8, + beforeRedactionsApplied: false + }); + }); +} ``` Track additions using the annotationAdd event. ```js -viewer.annotationAdd = (args) => { - console.log('Annotation added:', args); +pdfviewer.annotationAdd = function (args) { + console.log('Annotation added:', args); }; ``` @@ -88,23 +111,46 @@ Use editAnnotation to modify overlay text, colors, fonts, etc. ``` ```js -document.getElementById('editRedactAnnotation')?.addEventListener('click', () => { - for (let i = 0; i < viewer.annotationCollection.length; i++) { - if (viewer.annotationCollection[i].subject === 'Redaction') { - viewer.annotationCollection[i].overlayText = 'EditedAnnotation'; - viewer.annotationCollection[i].markerFillColor = '#22FF00'; - viewer.annotationCollection[i].markerBorderColor = '#000000'; - viewer.annotationCollection[i].isRepeat = true; - viewer.annotationCollection[i].fillColor = '#F8F8F8'; - viewer.annotationCollection[i].fontColor = '#333333'; - viewer.annotationCollection[i].fontSize = 14; - viewer.annotationCollection[i].fontFamily = 'Symbol'; - viewer.annotationCollection[i].textAlign = 'Right'; - viewer.annotationCollection[i].beforeRedactionsApplied = false; - viewer.annotation.editAnnotation(viewer.annotationCollection[i]); - } - } -}); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +var editRedactAnnotation = document.getElementById('editRedactAnnotation'); +if (editRedactAnnotation) { + editRedactAnnotation.addEventListener('click', function () { + for (var i = 0; i < pdfviewer.annotationCollection.length; i++) { + if (pdfviewer.annotationCollection[i].subject === 'Redaction') { + pdfviewer.annotationCollection[i].overlayText = 'EditedAnnotation'; + pdfviewer.annotationCollection[i].markerFillColor = '#22FF00'; + pdfviewer.annotationCollection[i].markerBorderColor = '#000000'; + pdfviewer.annotationCollection[i].isRepeat = true; + pdfviewer.annotationCollection[i].fillColor = '#F8F8F8'; + pdfviewer.annotationCollection[i].fontColor = '#333333'; + pdfviewer.annotationCollection[i].fontSize = 14; + pdfviewer.annotationCollection[i].fontFamily = 'Symbol'; + pdfviewer.annotationCollection[i].textAlign = 'Right'; + pdfviewer.annotationCollection[i].beforeRedactionsApplied = false; + pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); + } + } + }); +} ``` ## Delete redaction annotations @@ -125,9 +171,32 @@ Delete by id using deleteAnnotationById: ``` ```js -document.getElementById('deleteAnnotationbyId')?.addEventListener('click', () => { - viewer.annotationModule.deleteAnnotationById(viewer.annotationCollection[0].annotationId); -}); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +var deleteAnnotationbyId = document.getElementById('deleteAnnotationbyId'); +if (deleteAnnotationbyId) { + deleteAnnotationbyId.addEventListener('click', function () { + pdfviewer.annotationModule.deleteAnnotationById(pdfviewer.annotationCollection[0].annotationId); + }); +} ``` ## Redact pages @@ -146,9 +215,32 @@ Options include Current Page, Odd Pages Only, Even Pages Only, and Specific Page ``` ```js -document.getElementById('addPageRedactions')?.addEventListener('click', () => { - viewer.annotation.addPageRedactions([1, 3, 5, 7]); -}); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +var addPageRedactions = document.getElementById('addPageRedactions'); +if (addPageRedactions) { + addPageRedactions.addEventListener('click', function () { + pdfviewer.annotation.addPageRedactions([1, 3, 5, 7]); + }); +} ``` ## Apply redaction @@ -168,9 +260,32 @@ N> Redaction is permanent and cannot be undone. ``` ```js -document.getElementById('redact')?.addEventListener('click', () => { - viewer.annotation.redact(); -}); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +var redact = document.getElementById('redact'); +if (redact) { + redact.addEventListener('click', function () { + pdfviewer.annotation.redact(); + }); +} ``` N> Applying redaction is irreversible. @@ -180,7 +295,27 @@ N> Applying redaction is irreversible. Configure defaults with redactionSettings: ```js -viewer.redactionSettings = { +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.redactionSettings = { overlayText: 'Confidential', markerFillColor: '#FF0000', markerBorderColor: '#000000', 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 a978f30342..0d515eb903 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 @@ -96,6 +96,21 @@ document.getElementById('signStamp') && document.getElementById('signStamp').add document.getElementById('standardBusinessStamp') && document.getElementById('standardBusinessStamp').addEventListener('click', function () { pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, undefined, ej.pdfviewer.StandardBusinessStampItem.Approved); }); + +document.getElementById('customStamp') && document.getElementById('customStamp').addEventListener('click', function () { + pdfviewer.annotation.addAnnotation('Stamp', { + offset: { x: 100, y: 440 }, + width: 46, + height: 100, + pageNumber: 1, + isLock: true, + author: 'Guest', + customStamps: [{ + customStampName: 'Image', + customStampImageSource: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...' + }] + }); +}); {% endhighlight %} {% endtabs %} @@ -273,11 +288,9 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -[View Sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master) - ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `StampSettings`. +Set properties for individual annotations before creating the control using `StampSettings`. > After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. @@ -313,7 +326,7 @@ document.getElementById('Stamp')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Stamp', { offset: { x: 200, y: 140 }, pageNumber: 1, opacity: 0.3, author: 'Guest User' - } ,'Approved'); + }, ej.pdfviewer.DynamicStampItem.Approved); }); {% endhighlight %} {% highlight js tabtitle="Server-Backed" %} @@ -342,11 +355,13 @@ document.getElementById('Stamp')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Stamp', { offset: { x: 200, y: 140 }, pageNumber: 1, opacity: 0.3, author: 'Guest User' - } ,'Approved'); + }, ej.pdfviewer.DynamicStampItem.Approved); }); {% endhighlight %} {% endtabs %} +[View Sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master) + ## See also - [Annotation Overview](../overview) 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 d2a64aa1b4..838b53deb2 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 @@ -18,9 +18,9 @@ Sticky Notes are comment annotations used to leave notes, replies, and review st ### Add annotations in UI -Use the Comments tool to: +To add a sticky note annotation via the UI: - Click the Comments button in the PDF Viewer toolbar. -- Click on the page where the sticky note should be added. +- Click 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) 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 d346dadd9a..186966043a 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 @@ -269,10 +269,6 @@ Use the range slider in the Edit Opacity tool to change annotation opacity. ![Delete button](../../../javascript-es6/images/delete_button.png) -#### Edit strikethrough annotation properties - -The color and opacity of strikethrough annotations can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar. - ### Edit existing strikethrough annotations programmatically To modify existing strikethrough annotations programmatically, use the `editAnnotation()` method. Example: @@ -412,7 +408,7 @@ Set properties for individual annotations before creating the control using `Str 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 strikethrough settings. ```html 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 23bdecfd77..4f2e16e2ce 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 @@ -246,8 +246,6 @@ if (underline) { {% endhighlight %} {% endtabs %} -## Edit underline annotation - ## Edit underline annotations ### Edit underline annotations in UI @@ -275,8 +273,6 @@ Use the range slider in the Edit Opacity tool to change annotation opacity. To modify existing underline annotations programmatically, use the `editAnnotation()` method. Example: -To modify an existing underline annotation programmatically, use the editAnnotation() method. Example: - ```html ``` @@ -412,7 +408,7 @@ Set properties for individual annotations before creating the control using `und 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 underline settings. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md index 4c4da1a46d..68bf8c4a83 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md @@ -1334,11 +1334,11 @@ pdfviewer.appendTo('#PdfViewer'); - [Annotation Overview](../overview) - [Annotation Types](../annotations/annotation-types/area-annotation) -- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar) -- [Create and Modify Annotation](../../annotations/create-modify-annotation) -- [Customize Annotation](../../annotations/customize-annotation) -- [Remove Annotation](../../annotations/delete-annotation) -- [Handwritten Signature](../../annotations/signature-annotation) -- [Export and Import Annotation](../../annotations/export-import/export-annotation) -- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view) -- [Annotation Events](../../annotations/annotation-event) \ No newline at end of file +- [Annotation Toolbar](../toolbar-customization/annotation-toolbar) +- [Create and Modify Annotation](../annotations/create-modify-annotation) +- [Customize Annotation](../annotations/customize-annotation) +- [Remove Annotation](../annotations/delete-annotation) +- [Handwritten Signature](../annotations/signature-annotation) +- [Export and Import Annotation](../annotations/export-import/export-annotation) +- [Annotation in Mobile View](../annotations/annotations-in-mobile-view) +- [Annotation Events](../annotations/annotation-event) \ No newline at end of file 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 fa7c18b372..df2752d73a 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md @@ -113,7 +113,7 @@ Edit comments and replies in the following ways: ### How to add comments and replies programmatically -Comments can be added to the PDF document programmatically using the `editAnnotation` property. +Comments can be added to the PDF document programmatically using the `editAnnotation` method. The following example shows how to add comments and a reply in response to a button click. @@ -184,7 +184,7 @@ document.getElementById("addReply")?.addEventListener("click", function() { ### How to edit comments programmatically -Comments can be edited in the PDF document programmatically using the `editAnnotation` property. +Comments can be edited in the PDF document programmatically using the `editAnnotation` method. The following example shows how to edit comments and a reply in response to a button click. 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 5d89c11fab..f00b458dac 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 @@ -1,7 +1,7 @@ --- layout: post title: Custom Data in annotations in JavaScript PDF Viewer | Syncfusion -description: Learn how to use add custom Data in annotation in Syncfusion JavaScript PDF Viewer +description: Learn how to add custom Data in annotations in Syncfusion JavaScript PDF Viewer platform: document-processing control: PDF Viewer documentation: ug 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 e1f9f77c05..d8f79dc242 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 @@ -156,11 +156,9 @@ var annoToolbar = new Tool({ annoToolbar.appendTo('#annotationToolbar'); ``` -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. -- 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. +N> `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. +N> Default annotation styles can be predefined using the corresponding settings properties (for example, `areaSettings`). +N> 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 45b81cad2d..7d8e307f47 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 @@ -62,8 +62,6 @@ Other annotations: - 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) -Set defaults for specific annotation types when creating the PdfViewer instance. Below are examples using settings already used in the annotation type pages. - {% tabs %} {% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( @@ -186,7 +184,7 @@ if (btn) { } ``` -## Customize Annotation Settings +## Customize Annotation Settings Defines the settings of the annotations. You can change annotation settings like author name, height, width etc., using [annotationSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#annotationsettings) API 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 2e8a6b9047..e9da3a2aea 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 @@ -10,10 +10,10 @@ domainurl: ##DomainURL## # Export annotations in JavaScript PDF Viewer -PDF Viewer provides support to export annotations. You can export annotations from the PDF Viewer in two ways: +PDF Viewer provides support for exporting annotations. You can export annotations from the PDF Viewer in two ways: - Using the built-in UI in the Comments panel (JSON or XFDF file) -- Programmatically (JSON, XFDF, or as an object for custom handling) +- Programmatically (export to JSON, XFDF, or as a JSON object for custom handling) ## Export using the UI (Comments panel) @@ -28,7 +28,7 @@ Follow the steps to export annotations: 2. Click the overflow menu (three dots) at the top of the panel. 3. Choose Export annotation to JSON file or Export annotation to XFDF file. -This generates and downloads the selected format containing all annotations in the current document. +This generates and downloads a file in the selected format containing all annotations in the current document. ![Export Annotation](../annotation-images/export-annot.png) 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 a020f3769e..df34c36a26 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 @@ -18,7 +18,7 @@ The Comments panel provides import options in its overflow menu: - Import annotations from JSON file - Import annotations from XFDF file -Steps: +Follow the steps to import annotations: 1. Open the Comments panel in the PDF Viewer. 2. Click the overflow menu (three dots) at the top of the panel. 3. Choose the appropriate import option and select the file. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-eraser.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-eraser.md index be5e82a40f..341acb1300 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-eraser.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-eraser.md @@ -131,7 +131,6 @@ document.getElementById('disableBtn').addEventListener('click', function() { Use the `inkEraserSize` property to control the width of the eraser: - ```html @@ -190,7 +189,6 @@ function applyRoleBasedEraserSettings() { You can programmatically switch between Ink drawing mode and Eraser mode for a seamless workflow: - ```html 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 4d6c9ac907..5a0c7b153b 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 @@ -1,7 +1,7 @@ --- layout: post title: Line angle constraints in JavaScript PDF Viewer | Syncfusion -description: Learn to add, edit, delete, and configure highlight, underline, strikethrough, and squiggly text markup annotations programmatically in PDF Viewer. +description: Learn how to enable and configure line angle constraints in the Syncfusion JavaScript PDF Viewer to snap line-type annotations to fixed angles for precise drawings and measurements. platform: document-processing control: PDF Viewer documentation: ug @@ -12,7 +12,7 @@ domainurl: ##DomainURL## 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](../../javascript-es6/annotations/annotation-images/line-angle-constraint.gif) ## Enable line angle constraints @@ -21,7 +21,6 @@ Set the `enableLineAngleConstraints` property within `annotationDrawingOptions` The following code demonstrates enabling line angle constraints: ```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", @@ -29,8 +28,7 @@ var pdfviewer = new ej.pdfviewer.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); - pdfviewer.appendTo('#PdfViewer'); - +pdfviewer.appendTo('#PdfViewer'); ``` ## Work with constrained annotations 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 74db220781..5f29233fa2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/overview.md @@ -28,7 +28,7 @@ The PDF Viewer provides a complete set of annotation tools for reviewing, measur ## Annotation manipulation capabilities - [Create annotations](../annotations/create-modify-annotation): Use the toolbar, context menu, or APIs to add highlights, notes, shapes, and more directly onto the PDF document. -- [Edit annotations](../annotations/create-modify-annotation.md): Modify existing annotations by moving, resizing, or updating text and style properties like color, opacity, and thickness. +- [Edit annotations](../annotations/create-modify-annotation): Modify existing annotations by moving, resizing, or updating text and style properties like color, opacity, and thickness. - [Customize annotations](../annotations/customize-annotation): Adjust appearance and behavior—such as fonts, fill colors, and opacity—through the UI or configuration options. - [Undo and redo annotations](../annotations/annotations-undo-redo): Revert or reapply annotation actions (add, edit, delete) using toolbar buttons or corresponding APIs. - [Import and export annotations](../annotations/export-import/export-annotation): Save and load annotations in JSON or XFDF formats to persist markups across sessions or share them with others. 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 d6754bfe0b..eeef482143 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 @@ -33,7 +33,7 @@ The handwritten signature can be added to the PDF document using the annotation Refer to the following code sample to switch to the handwritten signature mode programmatically. ```html - + ``` {% tabs %} {% highlight ts tabtitle="Standalone" %} @@ -81,7 +81,7 @@ With the PDF Viewer library, you can programmatically add a handwritten signatur Here is an example of adding a handwritten signature programmatically using the `addAnnotation()` method: ```html - + ``` {% tabs %} @@ -252,7 +252,7 @@ document.getElementById('Signature')?.addEventListener('click', function () { height: 65, signatureItem: ['Signature'], signatureDialogSettings: { - displayMode: DisplayMode.Text, hideSaveSignature: false + displayMode: ej.pdfviewer.DisplayMode.Text, hideSaveSignature: false }, canSave: false, path: 'Syncfusion', @@ -290,7 +290,7 @@ document.getElementById('Signature')?.addEventListener('click', function () { height: 65, signatureItem: ['Signature'], signatureDialogSettings: { - displayMode: DisplayMode.Text, hideSaveSignature: false + displayMode: ej.pdfviewer.DisplayMode.Text, hideSaveSignature: false }, canSave: false, path: 'Syncfusion', @@ -341,7 +341,7 @@ 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. +Note: 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 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 1bf494a8d2..f3b23ce089 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 @@ -30,6 +30,7 @@ This page explains how to: You can attach custom data at the time of field creation by passing a `customData` object in the settings parameter of `addFormField()`. ```js +// Ensure the viewer instance (var viewer = new ej.pdfviewer.PdfViewer({ ... })) is created and appended before this code runs. viewer.documentLoad = function () { var meta = { businessId: 'C-1024', tags: ['profile','kiosk'], requiredRole: 'admin' }; viewer.formDesignerModule.addFormField('Textbox', { @@ -70,7 +71,7 @@ viewer.checkBoxFieldSettings = { ## Update or Replace PDF Form Field Custom Data -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. +Modify the `customData` of an existing form field using [`updateFormField()`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#updateformfields). The field can be identified using its object reference or field ID. ```js // Retrieve existing fields @@ -85,7 +86,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/javascript/documentation/api/pdfviewer/index-default#updateformfields) to avoid overwriting previously stored data. ## Read Custom Data from PDF Form Fields @@ -121,7 +122,7 @@ viewer.documentLoad = function () { - [Form Designer overview](./overview) - [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) - [Create form fields](./overview-create-forms) -- [Group form fields](../group-form-fields) +- [Group form fields](./group-form-fields) - [Form flags](./form-constrain) - [Form validation](./form-validation) - [Form fields API](./form-fields-api) \ No newline at end of file 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 be521e030f..4e270dc391 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 @@ -22,7 +22,7 @@ This topic explains: The following flags are supported in the PDF Viewer: -- [isReadOnly](#make-fields-read-only) +- [isReadOnly](#make-fields-read-only) Prevents users from modifying the form field in the UI while still allowing updates through APIs. - [isRequired](#mark-fields-as-required) @@ -33,7 +33,7 @@ The following flags are supported in the PDF Viewer: ## Key actions -### Make fields read only +### 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 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 4186925d88..7ae8cdc083 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 @@ -73,7 +73,7 @@ pdfviewer.appendTo('#PdfViewer'); ## Form designer UI -When [Form Designer mode](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formdesigner) is enabled in the [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. +When [Form Designer mode](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formdesigner) is enabled in the [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. ![FormDesigner](../../javascript-es6/images/FormDesigner.gif) @@ -128,7 +128,7 @@ For more information about creating and editing form fields in the PDF Viewer, r ## Show or Hide the Built-in Form Designer Toolbar -You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) method. This allows you to display or hide the Form Designer tools in the PDF Viewer based on your application requirements. +You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) property. This allows you to display or hide the Form Designer tools in the PDF Viewer based on your application requirements. **Use this method to:** - Show the Form Designer toolbar when form design is required @@ -186,7 +186,7 @@ Move, resize, and edit an existing form field directly in the PDF Viewer using t ![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 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 +For more information, see [Editing Form Fields](./manage-form-fields/modify-form-fields). ## Deleting form fields 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 223ab59cd1..40a84f8f22 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 @@ -49,7 +49,7 @@ Form field events can be used to: You can wire up form field events on the PDF Viewer instance to execute custom logic when specific actions occur. ```js -var pdfviewer = new PdfViewer({ +var pdfviewer = new ej.pdfviewer.PdfViewer({ // Basic examples for common form-field events formFieldAdd: function (args) { console.log('formFieldAdd', args); }, formFieldRemove: function (args) { console.log('formFieldRemove', args); }, 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 7621eff181..4c45f61866 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 @@ -39,7 +39,7 @@ Updates the value of one or more form fields programmatically. ``` {% tabs %} {% highlight js tabtitle="index.js" %} -var btn = document.getElementById('updateFormFields'); +var btn = document.getElementById('updateFormFieldsValue'); if (btn) { btn.onclick = function () { // Retrieve form fields collection @@ -218,7 +218,7 @@ Clears values of specified or all fields without removing the fields themselves. ``` {% tabs %} {% highlight js tabtitle="index.js" %} -var btn = document.getElementById('clearFormFields'); +var btn = document.getElementById('clearformfield'); if (btn) { btn.onclick = function () { var field = pdfviewer.retrieveFormFields(); @@ -248,8 +248,7 @@ if (element) { ## isFormDesignerToolbarVisible -Opens the form designer toolbar when the PDF document is loaded in the PDF Viewer control initially -and get the form designer Toolbar Visible status. +Gets whether the Form Designer toolbar is currently visible. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -320,4 +319,4 @@ pdfviewer.enableFormDesignerToolbar(true); // show - [Group form fields](./group-form-fields) - [Add custom data to form fields](./custom-data) - [Form Constrain](./form-constrain) -- [Form fields Validation](./form-validation) \ No newline at end of file +- [Form Validation](./form-validation) \ No newline at end of file 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 b9c8abf22e..16c3f0da93 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 @@ -37,7 +37,7 @@ The following example demonstrates how to update PDF form field values programma // Wire up the button click document.getElementById('updateBtn').onclick = function () { // Retrieve form fields - var fields = pdfviewer.retrieveFormFields?.() || pdfviewer.formFieldCollection || []; + var fields = pdfviewer.retrieveFormFields() || []; // Get form fields by name var field = fields.find(function (f) { return f && f.name === 'name'; }) || fields[0]; @@ -73,8 +73,9 @@ Imported form field data is automatically mapped to the corresponding form field ``` ```js document.getElementById('importJson').addEventListener('click', function () { + // Ensure the viewer instance (var pdfviewer = new ej.pdfviewer.PdfViewer({ ... })) is created and appended before this code runs. // The file for importing should be accessible at the given path or as a file stream depending on your integration - viewer.importFormFields('File', FormFieldDataFormat.Json); + pdfviewer.importFormFields('File', 'Json'); }); ``` @@ -132,7 +133,7 @@ pdfviewer.validateFormFields = function (args) { - [Form Designer overview](./overview) - [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) - [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/customize-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields -- [Edit form fields](./manage-form-fields/edit-form-fields) +- [Edit form fields](./manage-form-fields/modify-form-fields) - [Group form fields](./group-form-fields) - [Add custom data to form fields](./custom-data) - [Form Constrain](./form-constrain) 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 974103c594..48c53be538 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 @@ -100,7 +100,7 @@ pdfviewer.documentLoad = function () { ## See also -- [Form Designer overview](../overview) +- [Form Designer overview](./overview) - [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) - [Create form fields](./manage-form-fields/create-form-fields) - [Modify form fields](./manage-form-fields/modify-form-fields) 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 0f8a8faee0..efb46feabe 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 @@ -78,5 +78,4 @@ viewer.exportFailed = function (args) { - [Add custom data to form fields](../custom-data) - [Import form fields](./import-form-fields) - [Export form fields](./export-form-fields) -- [Form validation](../form-validation) - [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 0849db4d90..7460ddd99b 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 @@ -30,7 +30,7 @@ N> For server-backed viewers, set `serviceUrl` before importing. The method trig ```js document.getElementById('importFdf').addEventListener('click', function () { // The file for importing should be accessible at the given path or as a file stream depending on your integration - viewer.importFormFields('File', 'Fdf'); + viewer.importFormFields('formData.fdf', 'Fdf'); }); ``` @@ -43,7 +43,7 @@ document.getElementById('importFdf').addEventListener('click', function () { ```js document.getElementById('importXfdf').addEventListener('click', function () { // The file for importing should be accessible at the given path or as a file stream depending on your integration - viewer.importFormFields('File', 'Xfdf'); + viewer.importFormFields('formData.xfdf', 'Xfdf'); }); ``` @@ -55,7 +55,7 @@ document.getElementById('importXfdf').addEventListener('click', function () { ```js document.getElementById('importJson').addEventListener('click', function () { // The file for importing should be accessible at the given path or as a file stream depending on your integration - viewer.importFormFields('File', 'Json'); + viewer.importFormFields('formData.json', 'Json'); }); ``` 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 7be1dcc362..2fce7cd644 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 @@ -253,7 +253,7 @@ document.getElementById('addPasswordField').addEventListener('click', function ( - [Form Designer overview](../overview) - [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) - [Modify form fields](./modify-form-fields) -- [Style form fields](./style-form-fields) +- [Style form fields](./customize-form-fields) - [Remove form fields](./remove-form-fields) - [Group form fields](../group-form-fields) - [Form validation](../form-validation) From e676f492f64c5016e448f09da2abf67ebb57016f Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Fri, 31 Jul 2026 13:29:18 +0530 Subject: [PATCH 02/70] 1044353: Resolved CI failures and removed unwanted files --- .../annotations/annotations-api.md | 2 +- .../javascript-es5/annotations/custom-data.md | 4 +- .../annotations/customize-annotation.md | 38 +- .../export-import/import-annotation.md | 2 +- .../annotations/free-text-annotation.md | 298 --------- .../annotations/ink-annotation.md | 270 -------- .../annotations/line-angle-constraints.md | 2 +- .../annotations/measurement-annotation.md | 581 ------------------ .../javascript-es5/annotations/overview.md | 2 +- .../annotations/shape-annotation.md | 534 ---------------- .../annotations/signature-annotation.md | 2 +- .../annotations/stamp-annotation.md | 381 ------------ .../annotations/sticky-notes-annotation.md | 245 -------- .../annotations/text-markup-annotation.md | 575 ----------------- 14 files changed, 26 insertions(+), 2910 deletions(-) delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/free-text-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/measurement-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/shape-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/stamp-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/sticky-notes-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/text-markup-annotation.md diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md index 68bf8c4a83..34beb21a37 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md @@ -1,7 +1,7 @@ --- layout: post title: Annotations API in JavaScript PDF Viewer | Syncfusion -description: Learn how to read and configure annotations using APIs in the Syncfusion JavaScript PDF Viewer. +description: Learn how to read and configure annotations using APIs in the Syncfusion JavaScript PDF Viewer for enhanced document interactions. platform: document-processing control: PDF Viewer documentation: ug 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 f00b458dac..7a9c01b643 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 @@ -1,14 +1,14 @@ --- layout: post title: Custom Data in annotations in JavaScript PDF Viewer | Syncfusion -description: Learn how to add custom Data in annotations in Syncfusion JavaScript PDF Viewer +description: Learn how to add and use custom key-value data in annotations in Syncfusion JavaScript PDF Viewer. platform: document-processing control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Custom data in annotations +# Custom data in PDF annotations Annotations can include custom key–value data via the `customData` property. This is supported at two levels: 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 7d8e307f47..bd884d1bd6 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 @@ -33,34 +33,34 @@ Set defaults for specific annotation types when creating the `PdfViewer` instanc Text markup annotations: -- 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) +- 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: -- 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) -- Polygon: Use [`polygonSettings`](./annotation-types/polygon-annotation/#default-polygon-settings-during-initialization) +- 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) +- Polygon: Use [`polygonSettings`](./annotation-types/polygon-annotation#default-polygon-settings-during-initialization) 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) -- Area: Use [`areaSettings`](./annotation-types/area-annotation/#default-area-settings-during-initialization) -- Radius: Use [`radiusSettings`](./annotation-types/radius-annotation/#default-radius-settings-during-initialization) -- Volume: Use [`volumeSettings`](./annotation-types/volume-annotation/#default-volume-settings-during-initialization) +- Distance: Use [`distanceSettings`](./annotation-types/distance-annotation#default-distance-settings-during-initialization) +- Perimeter: Use [`perimeterSettings`](./annotation-types/perimeter-annotation#default-perimeter-settings-during-initialization) +- Area: Use [`areaSettings`](./annotation-types/area-annotation#default-area-settings-during-initialization) +- 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: -- 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) -- 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) +- 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) +- 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) {% tabs %} {% highlight js tabtitle="Standalone" %} 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 df34c36a26..9647719b80 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 @@ -7,7 +7,7 @@ control: PDF Viewer documentation: ug --- -# Import annotations in JavaScript PDF Viewer +# Import annotations in PDF 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. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/free-text-annotation.md deleted file mode 100644 index bc46a7f0bf..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/free-text-annotation.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -layout: post -title: Free text annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about free text annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Free text annotation in JavaScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete free text annotations. - -## Add a free text annotation to the PDF document - -Free text annotations can be added to the PDF document using the annotation toolbar. - -* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it. -* Select the **Free Text Annotation** button to enable free text annotation mode. -* Add text anywhere on the pages of the PDF document. - -When in pan mode, selecting free text annotation switches the PDF Viewer to text select mode. - -![Free text tool in the annotation toolbar](../images/freetext_tool.png) - -The following example switches to free text annotation mode using a button click. - - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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" - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let addFreeTextAnnotationButton = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotationButton) { - addFreeTextAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("FreeText"); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let addFreeTextAnnotationButton = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotationButton) { - addFreeTextAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("FreeText"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add a free text annotation programmatically to the PDF document - -The PDF Viewer library allows adding a free text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#annotation) method. - -Here is an example of adding a free text annotation programmatically using addAnnotation(): - -```html - - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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" - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let addFreeTextAnnotation = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotation) { - addFreeTextAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("FreeText", { - offset: { x: 120, y: 80 }, - fontSize: 16, - fontFamily: "Helvetica", - pageNumber: 1, - width: 200, - height: 40, - isLock: false, - defaultText: "Syncfusion" - } ); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let addFreeTextAnnotation = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotation) { - addFreeTextAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("FreeText", { - offset: { x: 120, y: 80 }, - fontSize: 16, - fontFamily: "Helvetica", - pageNumber: 1, - width: 200, - height: 40, - isLock: false, - defaultText: "Syncfusion" - } ); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Change the content of an existing free text annotation programmatically - -To change the content of an existing free text annotation programmatically, use the editAnnotation() method. - -Here is an example of changing the content of a free text annotation using editAnnotation(): - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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" - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let changeContent = document.getElementById('changeContent'); -if (changeContent) { - changeContent.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Text Box') { - pdfviewer.annotationCollection[i].dynamicText = 'syncfusion'; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let changeContent = document.getElementById('changeContent'); -if (changeContent) { - changeContent.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Text Box') { - pdfviewer.annotationCollection[i].dynamicText = 'syncfusion'; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -N> The current version of the PDF Viewer does not edit existing document text. New free text annotations can be added and modified within the document. - -## Edit the properties of free text annotations - -Font family, font size, styles, font color, text alignment, fill color, stroke color, border thickness, and opacity can be edited using the Font Family, Font Size, Font Color, Text Align, Font Style, Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. - -### Edit font family - -Edit the font family by selecting a font in the Font Family tool. - -![Change font family](../images/fontfamily.png) - -### Edit font size - -Edit the font size by selecting a size in the Font Size tool. - -![Change font size](../images/fontsize.png) - -### Edit font color - -Edit the font color using the color palette in the Font Color tool. - -![Change font color](../images/fontcolor.png) - -### Edit text alignment - -Align text by selecting an option from the Text Align tool. - -![Set text alignment](../images/textalign.png) - -### Edit text styles - -Edit text styles by selecting options in the Font Style tool. - -![Change text styles](../images/fontstyle.png) - -### Edit fill color - -Edit the fill color using the color palette in the Edit Color tool. - -![Change fill color](../images/fillcolor.png) - -### Edit stroke color - -Edit the stroke color using the color palette in the Edit Stroke Color tool. - -![Change stroke color](../images/fontstroke.png) - -### Edit thickness - -Edit border thickness using the range slider in the Edit Thickness tool. - -![Change border thickness](../images/fontthickness.png) - -### Edit opacity - -Edit opacity using the range slider in the Edit Opacity tool. - -![Change opacity](../images/fontopacity.png) - -## Set default properties during control initialization - -Default properties for free text annotations can be set before creating the control using FreeTextSettings. - -After changing default values, the selected values are applied. The following example sets default free text annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - freeTextSettings : { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' } - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - freeTextSettings : { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' } - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-annotation.md deleted file mode 100644 index 477e9f9900..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-annotation.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -layout: post -title: Ink annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about ink annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Ink annotation in JavaScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete ink annotations. - -![Ink annotations overview](../images/ink_annotation.png) - -## Add an ink annotation to the PDF document - -Ink annotations can be added to the PDF document using the annotation toolbar. - -* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it. -* Select the **Draw Ink** button to enable ink annotation mode. -* Draw on any page of the PDF document. - -![Ink tool in the annotation toolbar](../images/ink_tool.png) - -The following example switches to ink annotation mode. - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Ink"); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Ink"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add an ink annotation programmatically to the PDF document - -The PDF Viewer library allows adding an ink annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. - -Here is an example of adding an ink annotation programmatically using addAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Ink", { - offset: { x: 150, y: 100 }, - pageNumber: 1, - width : 200, - height:60, - path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]' - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Ink", { - offset: { x: 150, y: 100 }, - pageNumber: 1, - width : 200, - height:60, - path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]' - }); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing ink annotation programmatically - -To modify an existing ink annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let editInkAnnotation = document.getElementById('editInkAnnotation'); -if (editInkAnnotation) { - editInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "Ink") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let editInkAnnotation = document.getElementById('editInkAnnotation'); -if (editInkAnnotation) { - editInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "Ink") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit the properties of ink annotations - -Stroke color, thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. - -### Edit stroke color - -Edit the stroke color using the color palette in the Edit Stroke Color tool. - -![Change ink stroke color](../images/ink_strokecolor.png) - -### Edit thickness - -Edit thickness using the range slider in the Edit Thickness tool. - -![Change ink thickness](../images/ink_thickness.png) - -### Edit opacity - -Edit opacity using the range slider in the Edit Opacity tool. - -![Change ink opacity](../images/ink_opacity.png) - -## Set default properties during control initialization - -Default properties for ink annotations can be set before creating the control using InkAnnotationSettings. - -After changing default values, the selected values are applied. -Refer to the following code sample to set the default ink annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"; -pdfviewer.inkAnnotationSettings = {author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6}; -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'; -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.inkAnnotationSettings = {author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6}; -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ No newline at end of file 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 5a0c7b153b..16ad9d835b 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 @@ -1,7 +1,7 @@ --- layout: post title: Line angle constraints in JavaScript PDF Viewer | Syncfusion -description: Learn how to enable and configure line angle constraints in the Syncfusion JavaScript PDF Viewer to snap line-type annotations to fixed angles for precise drawings and measurements. +description: Learn to enable line angle constraints in Syncfusion JavaScript PDF Viewer for precise line-type annotations. platform: document-processing control: PDF Viewer documentation: ug diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/measurement-annotation.md deleted file mode 100644 index 5bda021b57..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/measurement-annotation.md +++ /dev/null @@ -1,581 +0,0 @@ ---- -layout: post -title: Measurement annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about measurement annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): distance, perimeter, area, radius, and volume. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Measurement annotation in JavaScript PDF Viewer control - -The PDF Viewer provides options to add measurement annotations. The supported measurement annotations are: - -* Distance -* Perimeter -* Area -* Radius -* Volume - -![Measurement annotations overview](../images/calibrate_annotation.png) - -## Adding measurement annotations to the PDF document - -The measurement annotations 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. -* Click the **Measurement Annotation** drop-down button. The pop-up lists available measurement annotation types. -* Select a measurement type to enable its annotation mode. -* Measure and add annotations on the pages of the PDF document. - -When in pan mode, selecting a measurement annotation switches the PDF Viewer to text select mode. - - ![CalibrateTool](../images/calibrate_tool.png) - -The following example switches to distance annotation mode. - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); -let distanceMode = document.getElementById('distanceMode'); -if (distanceMode) { - distanceMode.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Distance"); - } - }); -} - - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let distanceMode = document.getElementById('distanceMode'); -if (distanceMode) { - distanceMode.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Distance"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add a measurement annotation to the PDF document programmatically - -The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. - -Here is an example showing how to add measurement annotations programmatically using addAnnotation(): - -```html - - - - - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let addDistanceAnnotation = document.getElementById('addDistanceAnnotation'); -if (addDistanceAnnotation) { - addDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Distance", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - }); - } - }); -} - -let addPerimeterAnnotation = document.getElementById('addPerimeterAnnotation'); -if (addPerimeterAnnotation) { - addPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Perimeter", { - offset: { x: 200, y: 350 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }] - }); - } - }); -} - -let addAreaAnnotation = document.getElementById('addAreaAnnotation'); -if (addAreaAnnotation) { - addAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Area", { - offset: { x: 200, y: 500 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }] - }); - } - }); -} - -let addRadiusAnnotation = document.getElementById('addRadiusAnnotation'); -if (addRadiusAnnotation) { - addRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Radius", { - offset: { x: 200, y: 630 }, - pageNumber: 1, - width: 90, - height: 90 - }); - } - }); -} - -let addVolumeAnnotation = document.getElementById('addVolumeAnnotation'); -if (addVolumeAnnotation) { - addVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Volume", { - offset: { x: 200, y: 810 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 }] - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let addDistanceAnnotation = document.getElementById('addDistanceAnnotation'); -if (addDistanceAnnotation) { - addDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Distance", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - }); - } - }); -} - -let addPerimeterAnnotation = document.getElementById('addPerimeterAnnotation'); -if (addPerimeterAnnotation) { - addPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Perimeter", { - offset: { x: 200, y: 350 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }] - }); - } - }); -} - -let addAreaAnnotation = document.getElementById('addAreaAnnotation'); -if (addAreaAnnotation) { - addAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Area", { - offset: { x: 200, y: 500 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }] - }); - } - }); -} - -let addRadiusAnnotation = document.getElementById('addRadiusAnnotation'); -if (addRadiusAnnotation) { - addRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Radius", { - offset: { x: 200, y: 630 }, - pageNumber: 1, - width: 90, - height: 90 - }); - } - }); -} - -let addVolumeAnnotation = document.getElementById('addVolumeAnnotation'); -if (addVolumeAnnotation) { - addVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Volume", { - offset: { x: 200, y: 810 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 }] - }); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing measurement annotation programmatically - -To modify an existing measurement annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - - - - - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); -let editDistanceAnnotation = document.getElementById('editDistanceAnnotation'); -if (editDistanceAnnotation) { - editDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Distance calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPerimeterAnnotation = document.getElementById('editPerimeterAnnotation'); -if (editPerimeterAnnotation) { - editPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Perimeter calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editAreaAnnotation = document.getElementById('editAreaAnnotation'); -if (editAreaAnnotation) { - editAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Area calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRadiusAnnotation = document.getElementById('editRadiusAnnotation'); -if (editRadiusAnnotation) { - editRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Radius calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editVolumeAnnotation = document.getElementById('editVolumeAnnotation'); -if (editVolumeAnnotation) { - editVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Volume calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let editDistanceAnnotation = document.getElementById('editDistanceAnnotation'); -if (editDistanceAnnotation) { - editDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Distance calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPerimeterAnnotation = document.getElementById('editPerimeterAnnotation'); -if (editPerimeterAnnotation) { - editPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Perimeter calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editAreaAnnotation = document.getElementById('editAreaAnnotation'); -if (editAreaAnnotation) { - editAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Area calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRadiusAnnotation = document.getElementById('editRadiusAnnotation'); -if (editRadiusAnnotation) { - editRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Radius calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editVolumeAnnotation = document.getElementById('editVolumeAnnotation'); -if (editVolumeAnnotation) { - editVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Volume calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit the properties of measurement 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. - -### Edit fill color - -The fill color of the annotation can be edited using the color palette provided in the Edit Color tool. - -![CalibrateFillColor](../images/calibrate_fillcolor.png) - -### Edit stroke color - -The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool. - -![CalibrateStrokeColor](../images/calibrate_stroke.png) - -### Edit thickness - -Edit border thickness using the range slider provided in the Edit Thickness tool. - -![CalibrateThickness](../images/calibrate_thickness.png) - -### Edit opacity - -The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. - -![CalibrateOpacity](../images/calibrate_opacity.png) - -### Edit the line properties - -Line-based measurement annotations (distance and perimeter) have additional options in the Line Properties window. Open it by right-clicking the annotation and selecting Properties from the context menu. - -![CalibrateProperty](../images/calibrate_lineprop.png) - -## Set default properties during control initialization - -Default properties for measurement annotations can be set before creating the control using distanceSettings, perimeterSettings, areaSettings, radiusSettings, and volumeSettings. - -Refer to the following code snippet to set the default annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - distanceSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}, - perimeterSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}, - areaSettings :{fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}, - radiusSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}, - volumeSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'}, - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - distanceSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}, - perimeterSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}, - areaSettings :{fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}, - radiusSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}, - volumeSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'}, - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} -## Editing scale ratio and unit of the measurement annotation - -The scale ratio and unit of measurement can be modified using the scale ratio option provided in the context menu of the PDF Viewer control. - - ![CalibrateScaleRatio](../images/calibrate_scaleratio.png) - -The Units of measurements support for the measurement annotations in the PDF Viewer are - -* Inch -* Millimeter -* Centimeter -* Point -* Pica -* Feet - -![CalibrateScaleDialog](../images/calibrate_scaledialog.png) - -## Setting default scale ratio settings during control initialization - -The properties of scale ratio for measurement annotation can be set before creating the control using ScaleRatioSettings as shown in the following code snippet, - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - measurementSettings = {scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'}, - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - measurementSettings = {scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'}, - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} 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 5f29233fa2..1ca014f970 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/overview.md @@ -1,7 +1,7 @@ --- layout: post title: Overview of Annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about overview of annotations in the Syncfusion JavaScript PDF Viewer. +description: Learn about annotations in Syncfusion JavaScript PDF Viewer for reviewing, marking up, and annotating PDF documents. platform: document-processing control: PDF Viewer documentation: ug diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/shape-annotation.md deleted file mode 100644 index 3b547003b4..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/shape-annotation.md +++ /dev/null @@ -1,534 +0,0 @@ ---- -layout: post -title: Shape annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about shape annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2), including add, edit, delete, and default settings. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Shape annotation in JavaScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete shape annotations. The supported shape annotation types are: - -* Line -* Arrow -* Rectangle -* Circle -* Polygon - -![Shape annotations overview](../images/shape_annot.png) - -## Adding a shape annotation to the PDF document - -Shape annotations 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. -* Click the **Shape Annotation** drop-down button. The pop-up lists available shape annotation types. -* Select a shape type to enable its annotation mode. -* Draw the shape on the pages of the PDF document. - -N> When in pan mode and a shape annotation tool is selected, the PDF Viewer switches to text select mode automatically to ensure a smooth interaction experience. - -![Shape annotation toolbar](../images/shape_toolbar.png) - -Refer to the following code sample to switch to the circle annotation mode. - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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" - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let circleAnnotationButton = document.getElementById('circleAnnotationButton'); -if (circleAnnotationButton) { - circleAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Circle"); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let circleAnnotationButton = document.getElementById('circleAnnotationButton'); -if (circleAnnotationButton) { - circleAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Circle"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add a shape annotation to the PDF document programmatically - -The PDF Viewer library allows adding a shape annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#addannotation) method. - -Here is an example showing how to add shape annotations programmatically using addAnnotation(): - -```html - - - - - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let addLineAnnotation = document.getElementById('addLineAnnotation'); -if (addLineAnnotation) { - addLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Line", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - }); - } - }); -} - -let addArrowAnnotation = document.getElementById('addArrowAnnotation'); -if (addArrowAnnotation) { - addArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Arrow", { - offset: { x: 200, y: 370 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 370 }, { x: 350, y: 370 }] - }); - } - }); -} - -let addRectangleAnnotation = document.getElementById('addRectangleAnnotation'); -if (addRectangleAnnotation) { - addRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Rectangle", { - offset: { x: 200, y: 480 }, - pageNumber: 1, - width: 150, - height: 75 - }); - } - }); -} - -let addCircleAnnotation = document.getElementById('addCircleAnnotation'); -if (addCircleAnnotation) { - addCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Circle", { - offset: { x: 200, y: 620 }, - pageNumber: 1, - width: 90, - height: 90 - }); - } - }); -} - -let addPolygonAnnotation = document.getElementById('addPolygonAnnotation'); -if (addPolygonAnnotation) { - addPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Polygon", { - offset: { x: 200, y: 800 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 }] - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let addLineAnnotation = document.getElementById('addLineAnnotation'); -if (addLineAnnotation) { - addLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Line", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - }); - } - }); -} - -let addArrowAnnotation = document.getElementById('addArrowAnnotation'); -if (addArrowAnnotation) { - addArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Arrow", { - offset: { x: 200, y: 370 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 370 }, { x: 350, y: 370 }] - }); - } - }); -} - -let addRectangleAnnotation = document.getElementById('addRectangleAnnotation'); -if (addRectangleAnnotation) { - addRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Rectangle", { - offset: { x: 200, y: 480 }, - pageNumber: 1, - width: 150, - height: 75 - }); - } - }); -} - -let addCircleAnnotation = document.getElementById('addCircleAnnotation'); -if (addCircleAnnotation) { - addCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Circle", { - offset: { x: 200, y: 620 }, - pageNumber: 1, - width: 90, - height: 90 - }); - } - }); -} - -let addPolygonAnnotation = document.getElementById('addPolygonAnnotation'); -if (addPolygonAnnotation) { - addPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Polygon", { - offset: { x: 200, y: 800 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 }] - }); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing shape annotation programmatically - -To modify an existing shape annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - - - - - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); -let editLineAnnotation = document.getElementById('editLineAnnotation'); -if (editLineAnnotation) { - editLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Line") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editArrowAnnotation = document.getElementById('editArrowAnnotation'); -if (editArrowAnnotation) { - editArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Arrow") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRectangleAnnotation = document.getElementById('editRectangleAnnotation'); -if (editRectangleAnnotation) { - editRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Rectangle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editCircleAnnotation = document.getElementById('editCircleAnnotation'); -if (editCircleAnnotation) { - editCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Circle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPolygonAnnotation = document.getElementById('editPolygonAnnotation'); -if (editPolygonAnnotation) { - editPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Polygon") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let editLineAnnotation = document.getElementById('editLineAnnotation'); -if (editLineAnnotation) { - editLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Line") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editArrowAnnotation = document.getElementById('editArrowAnnotation'); -if (editArrowAnnotation) { - editArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Arrow") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRectangleAnnotation = document.getElementById('editRectangleAnnotation'); -if (editRectangleAnnotation) { - editRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Rectangle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editCircleAnnotation = document.getElementById('editCircleAnnotation'); -if (editCircleAnnotation) { - editCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Circle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPolygonAnnotation = document.getElementById('editPolygonAnnotation'); -if (editPolygonAnnotation) { - editPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Polygon") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Editing the properties of the shape annotation - -The fill color, stroke color, thickness, and opacity of shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. - -### Editing fill color - -The fill color of the annotation can be edited using the color palette provided in the Edit Color tool. - -![Edit fill color for shapes](../images/shape_fillColor.png) - -### Editing stroke color - -The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool. - -![Edit stroke color for shapes](../images/shape_strokecolor.png) - -### Editing thickness - -The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool. - -![Edit thickness for shapes](../images/shape_thickness.png) - -### Editing opacity - -The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. - -![Edit opacity for shapes](../images/shape_opacity.png) - -### Editing the line properties - -Line and arrow annotations have additional options in the Line Properties window. Open it by right-clicking a line or arrow annotation and selecting Properties from the context menu. - -Refer to the following code sample to set the default annotation settings. - -![Line properties dialog](../images/shape_lineprty.png) - -## Set default properties during control initialization - -Default properties for shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - lineSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}, - arrowSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}, - rectangleSettings : {fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}, - circleSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}, - polygonSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'} - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - lineSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}, - arrowSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}, - rectangleSettings : {fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}, - circleSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}, - polygonSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'} - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ No newline at end of file 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 eeef482143..2200f77b45 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 @@ -77,7 +77,7 @@ if (handWrittenSignature) { ### Add a handwritten signature programmatically -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. +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 the `addAnnotation()` method: ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/stamp-annotation.md deleted file mode 100644 index 0af4ee5c88..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/stamp-annotation.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -layout: post -title: Stamp annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about stamp annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): dynamic, sign here, standard business, and custom stamps. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Stamp annotation in JavaScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotations in PDF documents: - -* Dynamic -* Sign Here -* Standard Business -* Custom Stamp - -![StampAnnotation](../images/stamp_annot.png) - -## Add stamp annotations to the PDF document - -The stamp annotations 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. -* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types. - -![StampTool](../images/stamp_tool.png) - -* Select a stamp type to enable its annotation mode. - -![StampPopup](../images/selectstamp_annot.png) - -* Place the stamp on the pages of the PDF document. - -N> When in pan mode and a stamp annotation tool is selected, the PDF Viewer switches to text select mode automatically for a smooth interaction experience. - -The following examples switch to stamp annotation modes. - -```html - - - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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" - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', 'NotApproved'); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, 'Witness'); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, undefined, 'Approved'); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, SignStampItem, StandardBusinessStampItem, DynamicStampItem,} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'; -pdfviewer.appendTo('#PdfViewer'); - -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', 'NotApproved'); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, 'Witness'); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, undefined, 'Approved'); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add a custom stamp to the PDF document - -* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types. -* Click the Custom Stamp button. - -![CustomStamp](../images/customStamp.png) - -* In the file explorer dialog, choose an image and add it to the PDF page. - ->Only JPG and JPEG image formats are supported for custom stamp annotations. - -## Add a stamp annotation to the PDF document programmatically - -The PDF Viewer library allows adding a stamp annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#annotation) method. - -Here are examples showing how to add stamp annotations programmatically using addAnnotation(): - -```html - - - - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 140 }, - pageNumber: 1 - }, 'Approved'); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 240 }, - pageNumber: 1 - }, undefined,'Witness'); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 340 }, - pageNumber: 1 - }, undefined, undefined, 'Approved'); - } - }); -} - -let customStamp = document.getElementById('customStamp'); -if (customStamp) { - customStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation('Stamp', - { - offset: { x: 100, y: 440 }, - width: 46, - author: 'Guest', - height: 100, - isLock: true, - pageNumber: 1, - customStamps: [ - { - customStampName: "Image", - customStampImageSource: - "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAqwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQHAv/EAEEQAAEDAwIEAwYDBAYLAAAAAAECAwQABREGIRIxQVETYXEHFCIygZEVQmIjUnKCJCUzU6HRFhc1c5KisbKzwvD/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APcaUpQKUpQKUpQKUpQKUpQKVzXGdFtsN2ZPfbYjNJ4nHHDgJFfEK5Q5ttbuUaQhcNxvxUPcklPfflQdlYJxURpe/salthuMNpxEYvuNtKc28VKVcPGB2JB577Vyz7pNuUxy26eWlCml8Mu4OI4kR/0oB2Wvp2T17EJK43qDbloakOqL7m6I7TanHVjOMhCQTjzxgVut89i4Mqdj8Y4VlC0OIKFIUOYKTuOn0INRZZtWkrVLuDpIIHHJlPK4nX1dOJR5kk4A5DYDArVoWbHuVgTPjvF5Ul5xx5zhIBc4jkJyBlI+UHqE0FjpSlApSlApSlApSlApSlApSlApSlArClAczgVmqr7QZLptkezxHi1KvD4ihxKsFprBU6v6IB+pFBTdUKf1uUuFa0WpyUIVoYBx706chchXdKEhZSPLNXXVTsOw6NdjNxkvJS0iLEidHnDhLaPME4z5ZzVHk6kTHu1vTpyE1Jf8L3Oww1ZDaGc4XJXjklXDhP6UlWd63ybrL1rq1mNa1hLcAKEeQgcTbbvyuScHnw5KGweZJPIVRYoDT6okfSlnfWhmCwlu43FGAUKxu2j9atyT+UHvirZBixLZBaiQ2kR4zCMIQnZKRWuz2yLZ7czBgo4GWh13KidypR6qJJJPevOvaFqCXqC4HSGmzxlxQbmvJJAPXwwe2M8R9R3FQc1xde9qOqEW+C44jTFuVxPvtnHvCvI+e4HYZPavV4sdmLGajxmktMtJCENpGAkDkBUbpixRNO2dm3Q0/Cj4lrPNazzUf/uWKlkkEZByKDNKUoFKUoFKUoFKUoFKwahZ2p7dFfMZhTs+ZnHu0FHirB/VjZHqogUE3WOIYzUApzUlwBKUxLOwQCFL/bv467DCEn6qr5i6btk5ht+ZOlXlCxlLkiTxtr8whGG8fy0HdK1FZorymHbjH8dPNlC+NY/lTk1XNTe0m12SCXBFnrkOpX7uh6ItkKUBzPGEnhzjcA1bokKLAZS1BjMx20jAQy2EjHoK85i6PuOovaFNv+pWPDt8J/ggMKUCXktq+BX8HNXmT2G9HLF1trSyW2GrUFgbluT3eCIRIS26tS/iSjwgCcDl35Z3qBlSb/edVcN58e4tojKafiW2MfDQpRBXF8X5UnZPGsq5ZAr0TV2j52oL9Anx7wqCxHYWypLbeXAFH4lNqz8KiNs8x0qy2e1QrNbmYFuZDUdkYSkHOT1JPUk7k0HhsG6u3SHPeisLFwnucE95hOPdmc8DUNhR/OrCR5Ak9NvX9F6cRp20IZIR706AX1I5DA2Qn9KRsPvzJqGmXG0N6pfk3KTEhW2ykBsLKUh2Y4nKlY6lKCAOuVmuafry5T5rFs0vaHQ5JSVIm3FBaQhvq7wfNwjurAPnQZ9pms1WtlVmtDqRcnxwrdK+ERknqT0Vj7DftUN7OA1BilywWx65TnU8PjOAtMsJJzlbhBypXMhPFgADbrF6B0sNSagkzrk+5cbTDeUQ5IHwy3T+bHbYE/y9yK9sabQ02lDSAhCRhKUjAAoIaFaZ8gh++zg8vIKYsUFphB+/Ev8AmONuVTYGBgcqzSoFKUoFKUoFKUoFcV4mOW+2yJbEN6Y40gqTHYGVuHsK7awRmg8rd/1gameJn2n8Ptv5YQn+78f+8cSFLI57AJ8/Oy2eyalhxkRo79htEVI2YgQ1uEH+JSgD68NW/FQ2r7yqxWCTNZR4knZqM1/ePLPChP3IoKRc4l91FqJ3TkfUst2Aygfiz7TDTaEA8mkEAnjPXfAH2NohaPehR2Y8bVF9QwygNttJMcJSkDAAAZru0hY02CyMxFK8SWv9rMfPN55W6lE9d9vQCpughmrLNZVxI1Fc19kupYUn/wAYP+NdQVMjD+khEhsfM40nhUPMp3z9D9K76xQRN/uNxjWj3qwW9F0krKfDa8YISUn83F25VVocf2kXdR/EJlrskZQxiM14ryR5ZJA9c/SrHo973m2SFjPhCfKSzn9wPLCceXbyxUpPmRrdDemTHUMx2UFbjizgJAoPGrbpyJBRPvEi53STfhc34MRCVMrckLSvCT8aFEEjBUQdhUlfbHcrcItuYvc+VqbUBDcpf7PgDSfnJPBxBCQcDBGcnlUn7Om4kly+aonhbPBPkeGiRsIqCEqUcHkSMZ9K5bRqqMbjJ1E5FkTrndFe72m2sAF1MVBI4iD8iVKyoqO2w7VRbrJpRdkt7MGDe56GGhgJ8Njn1P8AZ9fPNd5gXNKQEXt0q7uRmz/0AqFja29znGFq2EmxuqaLzDrkhK2XUj5gF7YUNvhqsX+66nvtqlarsrsmDa7aUvQIqQULuCUqHiLdGPk4c8I686g9BMK8/lu7IxyzCB/9q4bpJkWeP7xd9TQojGeHjdipRk9hlW5/yrF21raoEGM/HcM+TMSDEhwyFuv55YA5DfcnYVx2fTD9wm/jeskMS7goYYhY42IKeyQeajtlR68tqCUjtXWVHakQL/FejupC23PcwsLSeoKVgEVsLWomsFMm1yAM5C2HGir6hSsfY1B6ILViuV50utSWkRpHvNvQTgGO6OLCe/CviB7bVMXjVMC2vCG0VTrk4MtQIeHHleZHJCf1KwKDTcNSqskB2XqSCYjTQ3fYcDzSj0SOSgSdhlP1r50FqherbM5cVQVQwmQtkNlfFxBON8/XB8wa4JNsfUzJ1Jq/wXFQWnH4tvbPEzFCUk8RyPjd2+bkOQ7nHs0iSLRY7dBkKUoy4gnYV8yHFEFxPoCtOPU+VBdaUpQKUpQKqF4H4xry027YxrYyq4yB3cPwND/vV9BVvNVTRf8ATrhqC9KIUJU4x2T2aZHAB/xcZ+tBa6UpQKr+r7lIjRWrdaz/AFrcleBF2z4W3xOq8kDf1wOtSV5ukSz216fOc4GGhk4GSo9EpHVROwHU1DaWtst2S9qG+N8Nzlp4WWSc+6R85S0P1dVHqfSgm7Rb2bTbItvjcXhR2g2kqOVKx1J6k8zVbfP+leoSxkGx2h7LxztJlD8h6FCOZ/VjtXdq25ymWY9ptSv61uSi2yr+4Rj43T5JHLzIrRfHIujtCy/dthFiqQyD8zrqhgZ7qUo/40FJsbL2q7W/YYchUdqdMlXC5SEDJQhbq/CbHTKuEEj90edXfRWi4Gk4yvAUqTMdADsp35ikckj91I7Vn2e6bTpnTUaG5hUtweLJcHVw9PQch6VZ6Dhudot12aQ1dIEWa2hXEhEllLgSe4Cga7OBPBwYHDjGMbYr6pQRNp03ZrM669arVChuu/OphkJJ8tunlUt0pSgjLxYLVew2LtAYleEctqcT8SPRXMfevq0WO12VtTdpgRoiVHKy02AVnuo8z9akaUEBr2O9L0beI8dtx1xyMpIQ2kqUodQANycZrk07JVeLyq4R2HmrZCiiJFW62UF9SilS1AHfhHAgA7b8XlVqIzWMb0GaUpQKUpQc9wkCJAkyVcmWlOH6AmoL2bsqZ0LZi4SXHowfcUeZU58ZP3VUpqNlcjT1zYaGVuRHUJA6koIFcuiZDcnR9lea+RcFkgdvgG1BN1omS48GM7JluoZYaSVuOLOEpSOZJrXdLjEtUF2bcJLceM0MrccOAP8AP0qqR4czWk1qfd2HItgZWFxLe6MLlKHJ14dE9kH1NBttDEjVVzYvtxaUza4547ZCdThSz0kLHQ4+UdAc86tcmQzDjOyJLiW2WUFxxxWwSkDJJ+lbQAOVVPU6vx29xdLsqPgBKZdzIG3ghWEtE9CtX/Kk0GzSTDlwekamnNlL08BMNCs5ZijdAweRVniPqB0qsarce1XrezWlghVsiTCp3B/tFtDicPok8CP4lq7VedSzXYFr8OBwpmyVCPEyPhStQPxEfupAKj5JNVz2eW9t2RIvLJWqGlsQbetXN1pCsuPerjmVZ6gCqLyBis0pUClKUClKUClKUClKUClKUClKUGCMjFVNqw36yeOxpmbb/wAPdcU43GntLPuqlHJCFJO6ckkJI2zzq20oKtE0iZE5q46mnKu8to8TLSmwiMwe6G99/wBSiTVoGwrNcV4uUez2yTcJiiGY7ZWrAyT2AHUk7D1oMXq6R7PapNxlk+FHQVkAZKj0SB1JOAPWozRtqfhW5ybcf9qXJz3qZk54FEbNg9kDCfoT1qGi++alvEGJdGwlq2hE+e0FApTKVu0we4Qk8R7nhNXkcqCs6q0zK1DcIWbkqNbW23ESmWk4ceCsZAV+UEAgnngnvViix2okZqPHbS2y0kIbQkYCUjYAVtpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKouv7mwi7W2HJBdZiJNxXHSd5DoUER2gOpU4rI/gq9VxO2i3PXRu6OwmFz2m/DbkKQCtKck4B+p+9BxaTtblqtQEvhM+UtUqatO4U8vdW/YbJHkkVNVgDFZoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoP//Z" - } - ] - }); - } - }); -} -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 140 }, - pageNumber: 1 - }, 'Approved'); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 240 }, - pageNumber: 1 - }, undefined,'Witness'); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 340 }, - pageNumber: 1 - }, undefined, undefined, 'Approved'); - } - }); -} - -let customStamp = document.getElementById('customStamp'); -if (customStamp) { - customStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation('Stamp', - { - offset: { x: 100, y: 440 }, - width: 46, - author: 'Guest', - height: 100, - isLock: true, - pageNumber: 1, - customStamps: [ - { - customStampName: "Image", - customStampImageSource: - "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAqwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQHAv/EAEEQAAEDAwIEAwYDBAYLAAAAAAECAwQABREGIRIxQVETYXEHFCIygZEVQmIjUnKCJCUzU6HRFhc1c5KisbKzwvD/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APcaUpQKUpQKUpQKUpQKUpQKVzXGdFtsN2ZPfbYjNJ4nHHDgJFfEK5Q5ttbuUaQhcNxvxUPcklPfflQdlYJxURpe/salthuMNpxEYvuNtKc28VKVcPGB2JB577Vyz7pNuUxy26eWlCml8Mu4OI4kR/0oB2Wvp2T17EJK43qDbloakOqL7m6I7TanHVjOMhCQTjzxgVut89i4Mqdj8Y4VlC0OIKFIUOYKTuOn0INRZZtWkrVLuDpIIHHJlPK4nX1dOJR5kk4A5DYDArVoWbHuVgTPjvF5Ul5xx5zhIBc4jkJyBlI+UHqE0FjpSlApSlApSlApSlApSlApSlApSlArClAczgVmqr7QZLptkezxHi1KvD4ihxKsFprBU6v6IB+pFBTdUKf1uUuFa0WpyUIVoYBx706chchXdKEhZSPLNXXVTsOw6NdjNxkvJS0iLEidHnDhLaPME4z5ZzVHk6kTHu1vTpyE1Jf8L3Oww1ZDaGc4XJXjklXDhP6UlWd63ybrL1rq1mNa1hLcAKEeQgcTbbvyuScHnw5KGweZJPIVRYoDT6okfSlnfWhmCwlu43FGAUKxu2j9atyT+UHvirZBixLZBaiQ2kR4zCMIQnZKRWuz2yLZ7czBgo4GWh13KidypR6qJJJPevOvaFqCXqC4HSGmzxlxQbmvJJAPXwwe2M8R9R3FQc1xde9qOqEW+C44jTFuVxPvtnHvCvI+e4HYZPavV4sdmLGajxmktMtJCENpGAkDkBUbpixRNO2dm3Q0/Cj4lrPNazzUf/uWKlkkEZByKDNKUoFKUoFKUoFKUoFKwahZ2p7dFfMZhTs+ZnHu0FHirB/VjZHqogUE3WOIYzUApzUlwBKUxLOwQCFL/bv467DCEn6qr5i6btk5ht+ZOlXlCxlLkiTxtr8whGG8fy0HdK1FZorymHbjH8dPNlC+NY/lTk1XNTe0m12SCXBFnrkOpX7uh6ItkKUBzPGEnhzjcA1bokKLAZS1BjMx20jAQy2EjHoK85i6PuOovaFNv+pWPDt8J/ggMKUCXktq+BX8HNXmT2G9HLF1trSyW2GrUFgbluT3eCIRIS26tS/iSjwgCcDl35Z3qBlSb/edVcN58e4tojKafiW2MfDQpRBXF8X5UnZPGsq5ZAr0TV2j52oL9Anx7wqCxHYWypLbeXAFH4lNqz8KiNs8x0qy2e1QrNbmYFuZDUdkYSkHOT1JPUk7k0HhsG6u3SHPeisLFwnucE95hOPdmc8DUNhR/OrCR5Ak9NvX9F6cRp20IZIR706AX1I5DA2Qn9KRsPvzJqGmXG0N6pfk3KTEhW2ykBsLKUh2Y4nKlY6lKCAOuVmuafry5T5rFs0vaHQ5JSVIm3FBaQhvq7wfNwjurAPnQZ9pms1WtlVmtDqRcnxwrdK+ERknqT0Vj7DftUN7OA1BilywWx65TnU8PjOAtMsJJzlbhBypXMhPFgADbrF6B0sNSagkzrk+5cbTDeUQ5IHwy3T+bHbYE/y9yK9sabQ02lDSAhCRhKUjAAoIaFaZ8gh++zg8vIKYsUFphB+/Ev8AmONuVTYGBgcqzSoFKUoFKUoFKUoFcV4mOW+2yJbEN6Y40gqTHYGVuHsK7awRmg8rd/1gameJn2n8Ptv5YQn+78f+8cSFLI57AJ8/Oy2eyalhxkRo79htEVI2YgQ1uEH+JSgD68NW/FQ2r7yqxWCTNZR4knZqM1/ePLPChP3IoKRc4l91FqJ3TkfUst2Aygfiz7TDTaEA8mkEAnjPXfAH2NohaPehR2Y8bVF9QwygNttJMcJSkDAAAZru0hY02CyMxFK8SWv9rMfPN55W6lE9d9vQCpughmrLNZVxI1Fc19kupYUn/wAYP+NdQVMjD+khEhsfM40nhUPMp3z9D9K76xQRN/uNxjWj3qwW9F0krKfDa8YISUn83F25VVocf2kXdR/EJlrskZQxiM14ryR5ZJA9c/SrHo973m2SFjPhCfKSzn9wPLCceXbyxUpPmRrdDemTHUMx2UFbjizgJAoPGrbpyJBRPvEi53STfhc34MRCVMrckLSvCT8aFEEjBUQdhUlfbHcrcItuYvc+VqbUBDcpf7PgDSfnJPBxBCQcDBGcnlUn7Om4kly+aonhbPBPkeGiRsIqCEqUcHkSMZ9K5bRqqMbjJ1E5FkTrndFe72m2sAF1MVBI4iD8iVKyoqO2w7VRbrJpRdkt7MGDe56GGhgJ8Njn1P8AZ9fPNd5gXNKQEXt0q7uRmz/0AqFja29znGFq2EmxuqaLzDrkhK2XUj5gF7YUNvhqsX+66nvtqlarsrsmDa7aUvQIqQULuCUqHiLdGPk4c8I686g9BMK8/lu7IxyzCB/9q4bpJkWeP7xd9TQojGeHjdipRk9hlW5/yrF21raoEGM/HcM+TMSDEhwyFuv55YA5DfcnYVx2fTD9wm/jeskMS7goYYhY42IKeyQeajtlR68tqCUjtXWVHakQL/FejupC23PcwsLSeoKVgEVsLWomsFMm1yAM5C2HGir6hSsfY1B6ILViuV50utSWkRpHvNvQTgGO6OLCe/CviB7bVMXjVMC2vCG0VTrk4MtQIeHHleZHJCf1KwKDTcNSqskB2XqSCYjTQ3fYcDzSj0SOSgSdhlP1r50FqherbM5cVQVQwmQtkNlfFxBON8/XB8wa4JNsfUzJ1Jq/wXFQWnH4tvbPEzFCUk8RyPjd2+bkOQ7nHs0iSLRY7dBkKUoy4gnYV8yHFEFxPoCtOPU+VBdaUpQKUpQKqF4H4xry027YxrYyq4yB3cPwND/vV9BVvNVTRf8ATrhqC9KIUJU4x2T2aZHAB/xcZ+tBa6UpQKr+r7lIjRWrdaz/AFrcleBF2z4W3xOq8kDf1wOtSV5ukSz216fOc4GGhk4GSo9EpHVROwHU1DaWtst2S9qG+N8Nzlp4WWSc+6R85S0P1dVHqfSgm7Rb2bTbItvjcXhR2g2kqOVKx1J6k8zVbfP+leoSxkGx2h7LxztJlD8h6FCOZ/VjtXdq25ymWY9ptSv61uSi2yr+4Rj43T5JHLzIrRfHIujtCy/dthFiqQyD8zrqhgZ7qUo/40FJsbL2q7W/YYchUdqdMlXC5SEDJQhbq/CbHTKuEEj90edXfRWi4Gk4yvAUqTMdADsp35ikckj91I7Vn2e6bTpnTUaG5hUtweLJcHVw9PQch6VZ6Dhudot12aQ1dIEWa2hXEhEllLgSe4Cga7OBPBwYHDjGMbYr6pQRNp03ZrM669arVChuu/OphkJJ8tunlUt0pSgjLxYLVew2LtAYleEctqcT8SPRXMfevq0WO12VtTdpgRoiVHKy02AVnuo8z9akaUEBr2O9L0beI8dtx1xyMpIQ2kqUodQANycZrk07JVeLyq4R2HmrZCiiJFW62UF9SilS1AHfhHAgA7b8XlVqIzWMb0GaUpQKUpQc9wkCJAkyVcmWlOH6AmoL2bsqZ0LZi4SXHowfcUeZU58ZP3VUpqNlcjT1zYaGVuRHUJA6koIFcuiZDcnR9lea+RcFkgdvgG1BN1omS48GM7JluoZYaSVuOLOEpSOZJrXdLjEtUF2bcJLceM0MrccOAP8AP0qqR4czWk1qfd2HItgZWFxLe6MLlKHJ14dE9kH1NBttDEjVVzYvtxaUza4547ZCdThSz0kLHQ4+UdAc86tcmQzDjOyJLiW2WUFxxxWwSkDJJ+lbQAOVVPU6vx29xdLsqPgBKZdzIG3ghWEtE9CtX/Kk0GzSTDlwekamnNlL08BMNCs5ZijdAweRVniPqB0qsarce1XrezWlghVsiTCp3B/tFtDicPok8CP4lq7VedSzXYFr8OBwpmyVCPEyPhStQPxEfupAKj5JNVz2eW9t2RIvLJWqGlsQbetXN1pCsuPerjmVZ6gCqLyBis0pUClKUClKUClKUClKUClKUClKUGCMjFVNqw36yeOxpmbb/wAPdcU43GntLPuqlHJCFJO6ckkJI2zzq20oKtE0iZE5q46mnKu8to8TLSmwiMwe6G99/wBSiTVoGwrNcV4uUez2yTcJiiGY7ZWrAyT2AHUk7D1oMXq6R7PapNxlk+FHQVkAZKj0SB1JOAPWozRtqfhW5ybcf9qXJz3qZk54FEbNg9kDCfoT1qGi++alvEGJdGwlq2hE+e0FApTKVu0we4Qk8R7nhNXkcqCs6q0zK1DcIWbkqNbW23ESmWk4ceCsZAV+UEAgnngnvViix2okZqPHbS2y0kIbQkYCUjYAVtpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKouv7mwi7W2HJBdZiJNxXHSd5DoUER2gOpU4rI/gq9VxO2i3PXRu6OwmFz2m/DbkKQCtKck4B+p+9BxaTtblqtQEvhM+UtUqatO4U8vdW/YbJHkkVNVgDFZoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoP//Z" - } - ] - }); - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Edit an existing stamp annotation programmatically - -To modify an existing stamp annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); -if (editAnnotation) { - editAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "stamp") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].annotationSettings.isLock = true; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -if (editAnnotation) { - editAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "stamp") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].annotationSettings.isLock = true; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Set default properties during control initialization - -Default properties for stamp annotations can be set before creating the control using StampSettings. - -After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default stamp annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - stampSettings : {opacity: 0.3, author: 'Guest User'} - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - stampSettings : {opacity: 0.3, author: 'Guest User'} - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/sticky-notes-annotation.md deleted file mode 100644 index e5a5c63bd3..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/sticky-notes-annotation.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -layout: post -title: Sticky notes in JavaScript PDF Viewer control | Syncfusion -description: Learn about sticky note annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Sticky notes in JavaScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete sticky note annotations in the PDF document. - -![StickyNotesAnnotation](../images/stickynotes_annotation.png) - -## Add a sticky note annotation to the PDF document - -Sticky note annotations can be added to the PDF document using the annotation toolbar. - -* Click the **Comments** button in the PDF Viewer toolbar. The annotation toolbar appears below it. -* Click the position where the sticky note annotation should be added. -* The sticky note annotation is added at the clicked position. - - ![StickyNotesTool](../images/stickynotes_tool.png) - -Annotation comments can be added using the comment panel. - -* Select a sticky note annotation in the PDF document and right-click it. -* Select Comment from the context menu. -* Add comments, replies, and status using the comment panel. - -![StickyNotesComment](../images/stickynotes_comment.png) - -## Add a sticky note annotation to the PDF document programmatically - -The PDF Viewer library allows adding a sticky note annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method. - -Here is an example showing how to add a sticky note annotation programmatically using addAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("StickyNotes", { - offset: { x: 100, y: 200 }, - pageNumber: 1, - isLock: false - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("StickyNotes", { - offset: { x: 100, y: 200 }, - pageNumber: 1, - isLock: false - }); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing sticky note annotation programmatically - -To modify an existing sticky note annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "sticky") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "sticky") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit the properties of sticky note annotations - -### Editing opacity - -Edit opacity using the range slider in the Edit Opacity tool. - -![StickyNotesOpacity](../images/sticky_opacity.png) - -### Editing comments - -Comment text, replies, and status can be edited using the comment panel. - -* Open the comment panel using the Comment Panel button in the annotation toolbar. - - ![StickyNotesComment](../images/commentPanel.png) - -Modify or delete comments or replies, and change status using the menu options in the comment panel. - - ![StickyNotesEdit](../images/sticky_editbtn.png) - -## Set default properties during control initialization - -Default properties for sticky note annotations can be set before creating the control using StickyNotesSettings. - -After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default sticky note annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - stickyNotesSettings : {author: 'Syncfusion'} - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - stickyNotesSettings : {author: 'Syncfusion'} - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} - -## Disable sticky note annotations - -The PDF Viewer control provides an option to disable sticky note annotations. The following example disables the feature. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - enableStickyNotesAnnotation : false - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - enableStickyNotesAnnotation : false - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/text-markup-annotation.md deleted file mode 100644 index 13005db875..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/text-markup-annotation.md +++ /dev/null @@ -1,575 +0,0 @@ ---- -layout: post -title: Text markup annotation in JavaScript PDF Viewer | Syncfusion -description: Learn to add, edit, delete, and customize text markup annotations like highlight, underline, and squiggly in Syncfusion JavaScript PDF Viewer. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Text markup annotation in JavaScript PDF Viewer - -The PDF Viewer provides options to add, edit, and delete text markup annotations, including Highlight, Underline, Strikethrough, and Squiggly. - -![Alt text](../images/text_markup_annotation.png) - -## Highlight text - -There are two ways to highlight text: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Highlight** in the context menu. - -![Alt text](../images/highlight_context.png) - - -2. Using the annotation toolbar -* 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**. - -![Alt text](../images/highlight_button.PNG) - -When pan mode is active and a text markup mode is entered, the PDF Viewer switches to text selection mode to enable selection. - -Refer to the following code snippet to switch to highlight mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/highlight-mode-cs1/index.html %} -{% 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 -`serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` - -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/highlight-mode-cs1" %} - -Refer to the following code snippet to switch back to normal mode from highlight mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/highlight-normal-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/highlight-normal-mode-cs1" %} - -## Highlight text programmatically - -Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let highlight = document.getElementById('highlight'); -if (highlight) { - highlight.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Highlight", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let highlight = document.getElementById('highlight'); -if (highlight) { - highlight.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Highlight", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Underline text - -There are two ways to underline text: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Underline** in the context menu. - -![Alt text](../images/underline_context.png) - - -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**. - -![Alt text](../images/underline_button.png) - -In the pan mode, if the underline mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for underlining the text. - -Refer to the following code snippet to switch to underline mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/underline-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/underline-mode-cs1" %} - - -Refer to the following code snippet to switch back to normal mode from underline mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/underline-normal-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/underline-normal-mode-cs1" %} - -## Underline text programmatically - -Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let underline = document.getElementById('underline'); -if (underline) { - underline.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Underline", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let underline = document.getElementById('underline'); -if (underline) { - underline.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Underline", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Strikethrough text - -There are two ways to strikethrough text: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Strikethrough** in the context menu. - -![Alt text](../images/strikethrough_context.png) - - -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**. - -![Alt text](../images/strikethrough_button.png) - -In the pan mode, if the strikethrough mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for striking through the text. - -Refer to the following code snippet to switch to strikethrough mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/strikethrough-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/strikethrough-mode-cs1" %} - -Refer to the following code snippet to switch back to normal mode from strikethrough mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/strikethrough-normal-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/strikethrough-normal-mode-cs1" %} - -## Strikethrough text programmatically - -Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let strikethrough = document.getElementById('strikethrough'); -if (strikethrough) { - strikethrough.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Strikethrough", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let strikethrough = document.getElementById('strikethrough'); -if (strikethrough) { - strikethrough.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Strikethrough", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Add squiggly to text - -There are two ways to add squiggly to text: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Squiggly** in the context menu. - -![Alt text](../images/squiggly_context.png) - -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**. - -![Alt text](../images/squiggly_button.png) - -In the pan mode, if the squiggly mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for adding squiggly to the text. - -Refer to the following code snippet to switch to squiggly mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/squiggly-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/squiggly-mode-cs1" %} - -Refer to the following code snippet to switch back to normal mode from squiggly mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/squiggly-normal-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/squiggly-normal-mode-cs1" %} - -## Add squiggly to text programmatically - -Programmatically add squiggly using the [addAnnotation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let squiggly = document.getElementById('squiggly'); -if (squiggly) { - squiggly.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Squiggly", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let squiggly = document.getElementById('squiggly'); -if (squiggly) { - squiggly.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Squiggly", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Deleting a text markup annotation - -The selected annotation can be deleted in the following ways: - -1. Using the Delete/Backspace key - * Select the annotation. - * Press Delete (or Backspace). The selected annotation is removed. - -2. Using the annotation toolbar - * Select the annotation. - * Click **Delete Annotation** in the annotation toolbar. The selected annotation is removed. - -![Alt text](../images/delete_button.png) - -## Edit text markup annotation properties - -The color and the opacity of the text markup annotation can be edited using the Edit Color tool and the Edit Opacity tool in the annotation toolbar. - -### Edit color - -Use the color palette in the Edit Color tool to change the annotation color. - -![Alt text](../images/edit_color.png) - -### Edit opacity - -Use the range slider in the Edit Opacity tool to change annotation opacity. - -![Alt text](../images/edit_opacity.png) - -## Set default properties during control initialization - -Set default properties before creating the control using `highlightSettings`, `underlineSettings`, `strikethroughSettings`, and `squigglySettings`. - -> 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 annotation settings. - -{% tabs %} -{% highlight js tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"", - highlightSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''}, - underlineSettings: {author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9, modifiedDate: ''}, - strikethroughSettings: {author: 'Guest User', subject: 'Not Important', color: '#ff00ff', opacity: 0.9, modifiedDate: ''}, - squigglySettings: {author: 'Guest User', subject: 'Spelling Error', color: '#ff0000', opacity: 0.9, modifiedDate: ''} -}); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - highlightSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''}, - underlineSettings: {author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9, modifiedDate: ''}, - strikethroughSettings: {author: 'Guest User', subject: 'Not Important', color: '#ff00ff', opacity: 0.9, modifiedDate: ''}, - squigglySettings: {author: 'Guest User', subject: 'Spelling Error', color: '#ff0000', opacity: 0.9, modifiedDate: ''} -}); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} - -## Perform undo and redo - -The PDF Viewer supports undo and redo for changes. For text markup annotations, undo and redo are provided for: - -* Inclusion of the text markup annotations. -* Deletion of the text markup annotations. -* Change of either color or opacity of the text markup annotations. - -Undo and redo actions can be performed in the following ways: - -1. Using keyboard shortcuts: - After performing a text markup annotation action, press Ctrl+Z to undo and Ctrl+Y to redo. -2. Using the toolbar: - Use the **Undo** and **Redo** tools in the toolbar. - -Refer to the following code snippet to call undo and redo actions from the client side. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/undo-redo-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/undo-redo-cs1" %} - -## Save text markup annotations - -Click the download tool in the toolbar to save text markup annotations to the PDF document. The original document is not modified. - -## Print text markup annotations - -Click the print tool in the toolbar to print the PDF document with text markup annotations. The original document is not modified. - -## Disable text markup annotation - -Disable text markup annotations using the `enableTextMarkupAnnotation` property. - -{% tabs %} -{% highlight js tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - enableTextMarkupAnnotation: false, - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - enableTextMarkupAnnotation: false, - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer' - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} - -## See also - -* [Toolbar items](../toolbar) -* [Feature modules](../feature-module) From 56d37184fdaae5a7e55324c9018f508e5ce3d82b Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Fri, 31 Jul 2026 13:47:24 +0530 Subject: [PATCH 03/70] 1044353: Resolved CI failures --- .../PDF/PDF-Viewer/javascript-es5/annotations/custom-data.md | 2 +- .../javascript-es5/annotations/customize-annotation.md | 2 +- .../annotations/export-import/import-annotation.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) 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 7a9c01b643..e9b9a3f527 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 @@ -1,7 +1,7 @@ --- layout: post title: Custom Data in annotations in JavaScript PDF Viewer | Syncfusion -description: Learn how to add and use custom key-value data in annotations in Syncfusion JavaScript PDF Viewer. +description: Learn how to add, store, and retrieve custom key-value data in annotations using Syncfusion JavaScript PDF Viewer. platform: document-processing control: PDF Viewer documentation: ug 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 bd884d1bd6..316a9e79c0 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 @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Customize annotations +# Customize annotation properties 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. 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 9647719b80..80af6f1d53 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 @@ -1,6 +1,6 @@ --- layout: post -title: Import annotations in JavaScript PDF Viewer | Syncfusion +title: Import annotations in JavaScript PDF Viewer ES5 | Syncfusion description: Learn how to import annotations in Syncfusion JavaScript PDF Viewer using UI options and programmatic APIs. platform: document-processing control: PDF Viewer From f80337a2d015978e9422bdae7d37b8708960de6f Mon Sep 17 00:00:00 2001 From: ATCHAYASEKAR-SF4414 Date: Mon, 3 Aug 2026 18:20:12 +0530 Subject: [PATCH 04/70] Revamp User Guide Documentation in PowerPoint presentation to Image Conversion --- .../NET/Convert-PowerPoint-to-Image-in-ASP-NET-MVC.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-ASP-NET-MVC.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-ASP-NET-MVC.md index 60cdebd0d7..b67464c963 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-ASP-NET-MVC.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-ASP-NET-MVC.md @@ -35,7 +35,7 @@ Step 3: Install the [Syncfusion.Presentation.AspNet.Mvc5](https://www.nuget.org/ N> Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in your application to use our components. -Step 4: Include the following namespace in that **HomeController.cs** file. +Step 4: Include the following namespace in the **HomeController.cs** file. {% tabs %} {% highlight c# tabtitle="C#" %} @@ -65,7 +65,7 @@ Step 6: Add a new button in the Index.cshtml as shown below. {% endhighlight %} {% endtabs %} -Step 7: Add the below code snippet in **HomeController.cs** to **convert a PowerPoint to image in ASP.NET MVC**. +Step 7: Add the below code snippet in the **HomeController.cs** to **convert a PowerPoint to image in ASP.NET MVC**. {% tabs %} {% highlight c# tabtitle="C#" %} @@ -147,7 +147,7 @@ Step 2: Install the NuGet package from [NuGet.org](https://www.nuget.org/). N> Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in your application to use our components. -Step 3: Include the following namespace in that **HomeController.cs** file. +Step 3: Include the following namespace in the **HomeController.cs** file. {% tabs %} {% highlight c# tabtitle="C#" %} @@ -177,7 +177,7 @@ Step 5: Add a new button in the Index.cshtml as shown below. {% endhighlight %} {% endtabs %} -Step 6: Add the below code snippet in **HomeController.cs** to **convert a PowerPoint to image in ASP.NET MVC**. +Step 6: Add the below code snippet in the **HomeController.cs** to **convert a PowerPoint to image in ASP.NET MVC**. {% tabs %} {% highlight c# tabtitle="C#" %} From c5094e9843841aa9f85577409580c359d1786090 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 4 Aug 2026 10:41:20 +0530 Subject: [PATCH 05/70] Revamped the save-pdf-files --- .../PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md | 4 ++-- .../javascript-es6/save-pdf-file/to-azure-blob-storage.md | 6 +++--- .../save-pdf-file/to-box-cloud-file-storage.md | 4 ++-- .../save-pdf-file/to-dropbox-cloud-file-storage.md | 6 +++--- .../javascript-es6/save-pdf-file/to-google-cloud-storage.md | 2 +- .../javascript-es6/save-pdf-file/to-google-drive.md | 2 +- .../PDF-Viewer/javascript-es6/save-pdf-file/to-one-drive.md | 2 +- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md index 282327b3dc..ea0dc24575 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md @@ -19,7 +19,7 @@ Follow the steps below to save a PDF file to AWS S3 from a browser-based TypeScr Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in typescript. This will set up the basic structure of your PDF Viewer application. -**Step 2:** Modify the `src/app/app.ts` file in the Angular project +**Step 2:** Modify the `src/app/app.ts` file in the TypeScript project 1. Import the required namespaces at the top of the file: @@ -33,7 +33,7 @@ N> Replace the placeholder values with the AWS region and credentials. For produ ```typescript AWS.config.update({ - region: '**Your Region**', // Update this your region + region: '**Your Region**', // Update this with your region accessKeyId: '*Your Access Key*', // Update this with your access key id secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key }); diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md index 59975cd0ac..db12ed5a64 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md @@ -13,13 +13,13 @@ The TypeScript PDF Viewer component supports saving PDF files to Azure Blob Stor ## Using Standalone PDF Viewer -Follow the steps below to save a PDF file to Azure Blob Storage from an TypeScript PDF Viewer. +Follow the steps below to save a PDF file to Azure Blob Storage from a TypeScript PDF Viewer. **Step 1:** Create a PDF Viewer sample in TypeScript Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in TypeScript. This sets up the basic structure of the PDF Viewer application. -**Step 2:** Modify the `src/app/app.ts` file in the Angular project +**Step 2:** Modify the `src/app/app.ts` file in the TypeScript project 1. Import the required namespaces at the top of the file: @@ -80,7 +80,7 @@ N> Install the Azure Storage Blob client package for browser use: `npm install @ ## Using server-backed PDF Viewer -To save a PDF file to Azure Blob Storage, you can follow the steps below +To save a PDF file to Azure Blob Storage, you can follow the steps below. **Step 1:** Create a PDF Viewer sample in TypeScript diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md index 2341bd44e2..796c5ea4b7 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md @@ -9,7 +9,7 @@ documentation: ug # Save PDF files to Box cloud storage -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. +The TypeScript 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 @@ -94,7 +94,7 @@ public async Task Download([FromBody] Dictionary } ``` -6. Open the `appsettings.json` file in your web service project, add the required settings 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 { diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md index 8fc03f0612..eceae7b0bd 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md @@ -19,11 +19,11 @@ To save a PDF file to Dropbox, follow these steps: 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. -**Step 2:** Create a Simple PDF Viewer Sample in TypeScript +**Step 2:** Create a PDF Viewer sample in TypeScript Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in TypeScript. This sets up the basic structure of the PDF Viewer application. -**Step 3:** Modify the `src/app/app.ts` file in the Angular project +**Step 3:** Modify the `src/app/app.ts` file in the TypeScript project 1. Import the required namespaces at the top of the file: @@ -162,7 +162,7 @@ public async Task Download([FromBody] Dictionary } ``` -6. Open the `appsettings.json` file in the web service project and add the following entries 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 { diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md index b78b0679f1..23003eca79 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md @@ -13,7 +13,7 @@ To save a PDF file to Google Cloud Storage, follow the steps below. **Step 1:** Create a PDF Viewer sample in TypeScript -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. +Follow the Syncfusion getting-started instructions for the TypeScript PDF Viewer: [TypeScript PDF Viewer getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started). This sets up the basic PDF Viewer application structure. **Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-drive.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-drive.md index ec45d8afeb..395297c8eb 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-drive.md @@ -9,7 +9,7 @@ documentation: ug # Save PDF files to Google Drive in TypeScript -This article describes how to save a PDF file to Google Drive from the JavaScript PDF Viewer using a server-side web service. Follow the steps below. +This article describes how to save a PDF file to Google Drive from the TypeScript PDF Viewer using a server-side web service. Follow the steps below. **Step 1:** Set up the Google Drive API diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-one-drive.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-one-drive.md index 21bc0b5b2c..772a70ccaa 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-one-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-one-drive.md @@ -100,7 +100,7 @@ public async Task Download([FromBody] Dictionary } ``` -6. Open `appsettings.json` in the web service project and add the following keys 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 { From b0505e2cbafd8c606c0fef5e8a8ad215843a1418 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 4 Aug 2026 10:49:46 +0530 Subject: [PATCH 06/70] Revamped text-search samples --- .../javascript-es6/text-search/find-text.md | 29 +++++++++---------- .../text-search/text-search-events.md | 14 ++++----- .../text-search/text-search-features.md | 10 +++---- 3 files changed, 26 insertions(+), 27 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/find-text.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/find-text.md index da7a9ac2ce..fd803087d8 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/find-text.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/find-text.md @@ -25,7 +25,7 @@ Searches for the specified text within the document and returns the bounding rec {% tabs %} {% highlight ts tabtitle="Standalone" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -42,7 +42,7 @@ document.getElementById('textbounds')?.addEventListener('click', function() { {% endhighlight %} {% highlight ts tabtitle="Server-backed" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -70,7 +70,7 @@ Searches for the specified text within the document and returns the bounding rec {% tabs %} {% highlight ts tabtitle="Standalone" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -87,7 +87,7 @@ document.getElementById('textbounds')?.addEventListener('click', function() { {% endhighlight %} {% highlight ts tabtitle="Server-backed" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -115,7 +115,7 @@ Searches for an array of strings within the document and returns the bounding re {% tabs %} {% highlight ts tabtitle="Standalone" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -132,7 +132,7 @@ document.getElementById('textbounds')?.addEventListener('click', function() { {% endhighlight %} {% highlight ts tabtitle="Server-backed" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -160,7 +160,7 @@ Searches for an array of strings within the document and returns the bounding re {% tabs %} {% highlight ts tabtitle="Standalone" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -177,7 +177,7 @@ document.getElementById('textbounds')?.addEventListener('click', function() { {% endhighlight %} {% highlight ts tabtitle="Server-backed" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -214,8 +214,7 @@ Example 1: Search for a single string ('pdf') case-insensitively across all page ``` ```ts import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, - TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, PageOrganizer, - ExtractTextOption} from '@syncfusion/ej2-pdfviewer'; + TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer'; PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, PageOrganizer); @@ -275,8 +274,8 @@ This will search for the terms "pdf" and "the" in a case-insensitive manner only ## See Also -[Text Search Features](./text-search-features) -[Text Search Events](./text-search-events) -[Extract Text](../how-to/extract-text-ts) -[Extract Text Options](../how-to/extract-text-option-ts) -[Extract Text Completed](../how-to/extract-text-completed-ts) \ No newline at end of file +- [Text Search Features](./text-search-features) +- [Text Search Events](./text-search-events) +- [Extract Text](../how-to/extract-text-ts) +- [Extract Text Options](../how-to/extract-text-option-ts) +- [Extract Text Completed](../how-to/extract-text-completed-ts) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-events.md index 9937fd0a35..808d047631 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-events.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-events.md @@ -28,7 +28,7 @@ const viewer: PdfViewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', textSearchStart: function (args: any) { // args.searchText contains the term being searched - // args.cancel can be set to true to stop the default search + // args.cancel is available on the event arguments to stop the default search when set to true console.log(`Text search started for: "${args.searchText}"`); } }); @@ -76,7 +76,7 @@ The [textSearchComplete](https://ej2.syncfusion.com/documentation/api/pdfviewer# const viewer: PdfViewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', textSearchComplete: (args: any) => { - // args.totalMatches may indicate how many results were found (when available) + // args.totalMatches contains the total number of matches found console.log('Text search completed.', args); } }); @@ -87,8 +87,8 @@ viewer.appendTo('#pdfViewer'); ## See Also -[Text Search Features](./text-search-features) -[Find Text](./find-text) -[Extract Text](../how-to/extract-text-ts) -[Extract Text Options](../how-to/extract-text-option-ts) -[Extract Text Completed](../how-to/extract-text-completed-ts) \ No newline at end of file +- [Text Search Features](./text-search-features) +- [Find Text](./find-text) +- [Extract Text](../how-to/extract-text-ts) +- [Extract Text Options](../how-to/extract-text-option-ts) +- [Extract Text Completed](../how-to/extract-text-completed-ts) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-features.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-features.md index 4441cd3f8f..a8613bc489 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-features.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-features.md @@ -298,8 +298,8 @@ document.getElementById('btnCancel')?.addEventListener('click', () => cancelText ## See Also -[Find Text](./find-text) -[Text Search Events](./text-search-events) -[Extract Text](../how-to/extract-text-ts) -[Extract Text Options](../how-to/extract-text-option-ts) -[Extract Text Completed](../how-to/extract-text-completed-ts) \ No newline at end of file +- [Find Text](./find-text) +- [Text Search Events](./text-search-events) +- [Extract Text](../how-to/extract-text-ts) +- [Extract Text Options](../how-to/extract-text-option-ts) +- [Extract Text Completed](../how-to/extract-text-completed-ts) \ No newline at end of file From ede4961c94d0ff98190d986e3577f831a43a77eb Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 4 Aug 2026 11:06:48 +0530 Subject: [PATCH 07/70] Revamped the toolbar-customization samples --- .../toolbar-customization/annotation-toolbar.md | 4 ++-- .../javascript-es6/toolbar-customization/custom-toolbar.md | 2 +- .../toolbar-customization/form-designer-toolbar.md | 2 +- .../javascript-es6/toolbar-customization/mobile-toolbar.md | 3 ++- .../javascript-es6/toolbar-customization/primary-toolbar.md | 2 +- 5 files changed, 7 insertions(+), 6 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar.md index 793032c29d..1026a59ff4 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar.md @@ -69,13 +69,13 @@ document.getElementById('set').addEventListener('click', ()=> { {% endhighlight %} {% endtabs %} -## How to customize the annotation toolbar +## Customize the annotation toolbar Choose which tools appear and control their order in the annotation toolbar. Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/) with the [`AnnotationToolbarItems`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/#annotationtoolbaritems) property to choose which tools are displayed in the annotation toolbar. The property accepts a list of [`AnnotationToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationToolbarItem/) values. Only the items included in this list are shown; any item not listed is hidden. The rendered order follows the sequence of items in the list. -The annotation toolbar is presented when entering annotation mode in PdfViewer and adapts responsively based on the available width. Include the Close tool to allow users to exit the annotation toolbar when needed. +The annotation toolbar appears when entering annotation mode in PdfViewer and adapts responsively based on the available width. The Close tool allows users to exit the annotation toolbar when needed. The following example demonstrates how to customize the annotation toolbar by specifying a selected set of tools using `AnnotationToolbarItem`. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md index 5ac8c7eeb8..444072a48d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Custom Toolbar in TypeScript PDF Viewer -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. +The PDF Viewer exposes 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: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar.md index 471b9bf98c..2a758ca63f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar.md @@ -65,7 +65,7 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -## How to customize the form designer toolbar +## Customize the form designer toolbar Select which tools appear and control their order in the form designer toolbar. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/mobile-toolbar.md index 0ba7b3a343..395f8a4e55 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/mobile-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/mobile-toolbar.md @@ -7,6 +7,7 @@ control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- + # Mobile Toolbar Interface in TypeScript PDF Viewer control 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. @@ -127,6 +128,6 @@ The Print option is not available in mobile mode by default. Enabling the deskto ### How to Use Print on Mobile: - 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 +- After enabling desktop mode, the Print option appears in the toolbar and can be used to print the document from the mobile device. 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-es6/toolbar-customization/primary-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/primary-toolbar.md index bc5097705f..1d47d1a702 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/primary-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/primary-toolbar.md @@ -16,7 +16,7 @@ The primary toolbar of the PDF Viewer can be customized by rearranging existing 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/documentation/api/pdfviewer/pdfViewerModel/#enabletoolbar) property or the [showToolbar](https://ej2.syncfusion.com/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 ts tabtitle="index.ts" %} From bd6f059f378bb9593fc2e2aedac5fb575aa91e9e Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 4 Aug 2026 11:25:19 +0530 Subject: [PATCH 08/70] revamped the troubleshooting samples --- .../javascript-es6/troubleshooting/document-loading-issues.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md index 7afb43e0eb..0694b3671f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md @@ -33,7 +33,7 @@ pdfviewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null 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. +8. Review Content Security Policy (CSP) settings and permit any external resources required by the viewer. N> For v23.1 and later, ensure `dataBind()` is called before `load()`; earlier releases may not require this call. From 0ad03ab50fd404d1987f1fab206b701f82c993d7 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 4 Aug 2026 12:53:56 +0530 Subject: [PATCH 09/70] Revamped the other samples --- .../PDF/PDF-Viewer/javascript-es6/accessibility.md | 8 ++++---- .../PDF/PDF-Viewer/javascript-es6/download.md | 8 +++++--- .../PDF/PDF-Viewer/javascript-es6/event.md | 4 ++-- .../PDF/PDF-Viewer/javascript-es6/globalization.md | 2 +- .../PDF/PDF-Viewer/javascript-es6/how-to-overview.md | 6 +++--- .../PDF/PDF-Viewer/javascript-es6/magnification.md | 4 ++-- .../PDF-Viewer/javascript-es6/module-injection.md | 2 +- .../PDF/PDF-Viewer/javascript-es6/navigation.md | 12 ++++++------ .../PDF/PDF-Viewer/javascript-es6/open-pdf-files.md | 2 +- .../PDF/PDF-Viewer/javascript-es6/organize-pdf.md | 4 ++-- .../PDF/PDF-Viewer/javascript-es6/overview.md | 4 +++- .../javascript-es6/server-to-standalone.md | 2 +- .../PDF/PDF-Viewer/javascript-es6/toolbar.md | 8 ++++---- 13 files changed, 35 insertions(+), 31 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md index acfcb88985..0e2bbebd8a 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Accessibility in Syncfusion PDF Viewer control TypeScript +# Accessibility in Syncfusion TypeScript PDF Viewer 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. The accessibility compliance for the PDF Viewer component is summarized below. @@ -80,9 +80,9 @@ The PDF Viewer follows WAI-ARIA [keyboard interaction](https://www.w3.org/WAI/AR |||**Shortcut for Text Search**| | CONTROL + F | COMMAND + F |Open the search toolbar| |||**Shortcut for Text Selection**| -|CONTROL + C |CONTROL + C | Copy the selected text or annotation or form field | -| CONTROL + X | CONTROL + X |Cut the selected text or annotation of the form field| -|CONTROL + Y |CONTROL + Y |Paste the selected text or annotation or form field| +| CONTROL + C | COMMAND + C | Copy the selected text or annotation or form field | +| CONTROL + X | COMMAND + X |Cut the selected text or annotation or form field| +|CONTROL + V | COMMAND + V |Paste the selected text or annotation or form field| |||**Shortcuts for the general operation**| | CONTROL + Z | CONTROL + Z |Undo the action| |CONTROL + Y |CONTROL + Y |Redo the action| diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md index ef14478233..83d775bbe5 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md @@ -120,19 +120,21 @@ The following example illustrates how to access the downloaded document as a bas ```ts +let pdfstream: string; + document.getElementById('download').addEventListener('click', function () { //API to perform download action. - viewer.download(); - viewer.downloadEnd = function (args) { + pdfviewer.downloadEnd = function (args) { pdfstream = args.downloadDocument; //Print the document as a base64 string in the console window. console.log(pdfstream); }; + pdfviewer.download(); }); document.getElementById('load').addEventListener('click', function () { //Load the base64 string in the viewer. - viewer.load(pdfstream, null); + pdfviewer.load(pdfstream, null); }); ``` diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md index aed96e08dd..a3856f9afb 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md @@ -22,7 +22,7 @@ The following table lists commonly used events supported by the PDF Viewer compo | [`commentDelete`](#commentdelete) | Triggers when a comment is deleted from the comment panel. | | [`commentEdit`](#commentedit) | Triggers when a comment is edited in the comment panel. | | [`commentSelect`](#commentselect) | Triggers when a comment is selected in the comment panel. | -| [`commentStatusChanged`](#commentstatuschanged) | Triggers when a comment’s status changes in the comment panel. | +| [`commentStatusChanged`](#commentstatuschanged) | Triggers when a comment's status changes in the comment panel. | | [`created`](#created) | Triggers during the creation of the PDF Viewer component. | | [`customContextMenuBeforeOpen`](#customcontextmenubeforeopen) | Fires before the custom context menu opens. | | [`customContextMenuSelect`](#customcontextmenuselect) | Fires when a custom context menu item is selected. | @@ -127,7 +127,7 @@ The [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api - nonFillableFields: Array detailing required/invalid fields When it triggers -- Add a form field and mark it Required (UI: right‑click field > Properties > Required). +- Add a form field and mark it Required (UI: right-click field > Properties > Required). - Leave the field empty and click Download. The event fires and provides the list of fields that failed validation. Example: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/globalization.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/globalization.md index 80a309189e..8a8de62d11 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/globalization.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/globalization.md @@ -64,7 +64,7 @@ The following table lists the default text values used by the PDF Viewer in the |Highlight context|Highlight| |Underline context|Underline| |Strikethrough context|Strike through| -|Server error|Web-service is not listening. PDF Viewer depends on web-service for all it's features. Please start the web service to continue.| +|Server error|Web-service is not listening. PDF Viewer depends on web-service for all its features. Please start the web service to continue.| |Open text|Open| |First text|First Page| |Previous text|Previous Page| diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md index e7db33a657..02c19e44df 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md @@ -34,7 +34,7 @@ The frequently asked questions for the Essential® PDF Viewer are * [How to display custom tooltip for annotation?](./how-to/display-custom-tool-tip-for-annotation) * [How to get the download start event?](./how-to/download-start-event-ts) * [How to enable or disable the local storage?](./how-to/enable-local-storage-ts) -* [Enable the resizer for text markup annotation?](./how-to/enable-resize) +* [How to enable the resizer for text markup annotation?](./how-to/enable-resize) * [How to enable or disable the text selection?](./how-to/enable-text-selection-ts) * [How to export the PDF pages as images?](./how-to/export-as-image-ts) * [How to extract text from the PDF document?](./how-to/extract-text-completed-ts) @@ -54,7 +54,7 @@ The frequently asked questions for the Essential® PDF Viewer are * [How to get the annotation when it is overlapped with another annotation on its selection?](./how-to/overlapped-annotation) * [How to get the page render started and completed event?](./how-to/pagerenderstarted-pagerendercompleted-ts) * [How to print the PDF document silently?](./how-to/print-document) -* [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium''?](./how-to/resolve-unable-to-find-an-entry-point-error) +* [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium'`?](./how-to/resolve-unable-to-find-an-entry-point-error) * [How to restrict the zooming in mobile mode?](./how-to/restricting-zoom-in-mobile-mode-ts) * [How to save the PDF document to database or URL?](./how-to/save-pdf-document-to-url) * [How to select annotations in multi page?](./how-to/select-multi-page-annotations) @@ -62,5 +62,5 @@ The frequently asked questions for the Essential® PDF Viewer are * [How to show or hide a particular annotation?](./how-to/show-hide-annotation-ts) * [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect-ts) * [How to unload the PDF document from the viewer?](./how-to/unload-document) -* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded) +* [How to load document after resources loaded?](./how-to/load-document-after-resources-loaded) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md index 7f736f18b9..5ffb3ec50d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md @@ -73,8 +73,8 @@ The following magnification options are available in the default toolbar of PDF * [**ZoomIn**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomin):- Zoom in from the current zoom value of PDF pages. * [**ZoomOut**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomout):- Zoom out from the current zoom value of PDF pages. * [**Zoom**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomto):- Zoom to specific zoom value of PDF pages. -* [**FitPage**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#fittopage):- Fits the page width with in the available view port size. -* [**FitWidth**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#fittowidth):- Fits the view port width based on the page content size. +* [**FitPage**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#fittopage):- Fits the page width within the available viewport size. +* [**FitWidth**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#fittowidth):- Fits the viewport width based on the page content size. ![Magnification tools in PDF Viewer](./images/zoom.png) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/module-injection.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/module-injection.md index 550ada53f5..a31a0a7f53 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/module-injection.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/module-injection.md @@ -1,7 +1,7 @@ --- layout: post title: Module Injection for TypeScript PDF Viewer | Syncfusion -description: Syncfusion Typescript PDF Viewer to enable optional features like toolbar, navigation, annotations, search. +description: Syncfusion TypeScript PDF Viewer to enable optional features like toolbar, navigation, annotations, search. control: PDF Viewer documentation: ug domainurl: ##DomainURL## diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md index 5f3551d1b4..5f5e87a8ac 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md @@ -17,7 +17,7 @@ The TypeScript PDF Viewer supports multiple navigation options, including toolba The default toolbar includes 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 next page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotonextpage):- Navigates to the next page of a PDF 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. @@ -120,12 +120,12 @@ You can also perform page navigation programmatically: {% tabs %} {% highlight ts tabtitle="Standalone" %} -import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print TextSelection, TextSearch, Annotation, FormFields } from '@syncfusion/ej2-pdfviewer'; +import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields } from '@syncfusion/ej2-pdfviewer'; PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection, TextSearch, Annotation, FormFields ); let viewer: PdfViewer = new PdfViewer(); -viewer.appendTo('#pdfViewer'); +viewer.appendTo('#PdfViewer'); viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); // Go To First Page @@ -152,14 +152,14 @@ document.getElementById('goToPreviousPage').addEventListener('click', () => { {% endhighlight %} {% highlight ts tabtitle="Server-Backed" %} -import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print TextSelection, TextSearch, Annotation, FormFields } from '@syncfusion/ej2-pdfviewer'; +import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields } from '@syncfusion/ej2-pdfviewer'; PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection, TextSearch, Annotation, FormFields ); let viewer: PdfViewer = new PdfViewer(); viewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -viewer.appendTo('#pdfViewer'); +viewer.appendTo('#PdfViewer'); viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); // Go To First Page @@ -289,7 +289,7 @@ Hyperlink navigation enables users to open URLs embedded in the PDF. ![PDF Viewer hyperlink navigation](./images/link.png) -## Table of content navigation +## Table of contents navigation Table of contents navigation allows users to jump to sections defined in the document outline. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-files.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-files.md index 7accdc9319..3d974167a8 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-files.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-files.md @@ -114,7 +114,7 @@ Use the [TypeScript getting started guide](https://help.syncfusion.com/document- document.getElementById('load').addEventListener('click', () => { viewer.load( 'data:application/pdf;base64,'+ AddBase64String, null); -} +}); ``` [View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/Save%20and%20Load/Load%20PDF%20file%20from%20base64%20string) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md index 0ab0aa1995..daa588674f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md @@ -185,8 +185,8 @@ document.getElementById('openPageOrganizer').addEventListener('click', function ``` ```ts document.getElementById('closePageOrganizer').addEventListener('click', function () { - viewer.pageOrganizer.openPageOrganizer(); -} + viewer.pageOrganizer.closePageOrganizer(); +}); ``` ## Keyboard shortcuts The following keyboard shortcuts are available at the organize pages dialog. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/overview.md index b34480c1f8..83394a7410 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/overview.md @@ -1,9 +1,11 @@ --- +layout: post title: Overview of JavaScript (ES6) PDF Viewer | Syncfusion description: Learn here all about the Syncfusion TypeScript PDF Viewer, its capabilities, and supported platforms. platform: document-processing control: PDF Viewer -documentation: UG +documentation: ug +domainurl: ##DomainURL## --- # Overview of JavaScript (ES6) PDF Viewer diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-to-standalone.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-to-standalone.md index e6c2fd82db..e2f3930786 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-to-standalone.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-to-standalone.md @@ -49,7 +49,7 @@ When you migrate to standalone mode, the processing location for various feature | **Thumbnail View** | Thumbnail images are generated on the server and transmitted to the client. | Thumbnails are rendered directly in the browser without server involvement. | | **Bookmark View** | Bookmark data is processed on the server and sent to the client for rendering. | Bookmark navigation is managed locally using the Syncfusion EJ2 PDF Viewer. | | **Text Search** | Text search operations are performed on the server, and results are returned to the client. | Text search is executed entirely within the browser. | -| **Print** | The server handles print preparation and formatting, then sends the processed output back to the client for printing. | The server handles print preparation and formatting, then sends the processed output back to the client for printing. | +| **Print** | The server handles print preparation and formatting, then sends the processed output back to the client for printing. | Print preparation and formatting are executed directly in the browser using the Syncfusion EJ2 PDF Library, with no server round-trip. | | **Toolbar** | Toolbar actions such as zoom, navigation, and export are processed on the server, and results are returned to the client. | Toolbar operations are executed instantly on the client without requiring server communication. | **Key Insight:** In standalone mode, all PDF processing occurs in the browser, eliminating the need for server coordination. Your server only serves the PDF file as a static resource or through a simple API endpoint. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar.md index b3643e4d7a..a253ace82d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar.md @@ -181,11 +181,11 @@ Add the below [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewe {% previewsample "/document-Processing/code-snippet/pdfviewer/javascript-es6/toolbar/toolbar-method-cs1" %} -## Show/Hide the default toolbaritem +## Show/Hide the default toolbar item The PDF Viewer has an option to show or hide these grouped items in the default toolbar. -* **Show/Hide toolbaritem using toolbarSettings as in the following code snippet.** +* **Show/Hide toolbar item using toolbarSettings as in the following code snippet.** {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -244,7 +244,7 @@ Add the below `serviceUrl` in the `index.ts` file {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/toolbar/toolbar-items-cs1" %} -* **Show/Hide toolbaritem using showToolbaritem as in the following code snippet** +* **Show/Hide toolbar item using showToolbaritem as in the following code snippet** {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -558,7 +558,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkVie **Step 5:** Add EJ2 Toolbar for perform primary actions like Open, Previous page, Next page, Go to page,Print and Download using the following code snippet, ```ts - Tool toolbarObj = new Tool({ + let toolbarObj = new Tool({ items: [ { prefixIcon: 'e-pv-open-document', tooltipText: 'Open', id: 'openButton', click: openDocument.bind(this) }, { prefixIcon: 'e-pv-bookmark-icon', tooltipText: 'Bookmark', id: 'bookmarkButton', click: bookmarkClicked }, From 4ddd8faa965c793fb3215ef72799e3c04b13544f Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 4 Aug 2026 13:44:43 +0530 Subject: [PATCH 10/70] Revamped the server-deployment samples --- .../how-to-deploy-docker-image-in-azure-kubernetes-service.md | 2 +- .../pdfviewer-server-docker-image-overview.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md index d468fe393d..8b533cb42c 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md @@ -101,7 +101,7 @@ kubectl apply -f ./pdfviewer-server.yaml kubectl get all ``` -It can take several minutes for Azure to provision the LoadBalancer IP. When the external IP is available, browse to `http:///api/pdfviewer` to verify the default GET response. Enable HTTPS with an ingress controller or Azure Front Door for production workloads. +It can take several minutes for Azure to provision the LoadBalancer IP. When the external IP is available, browse to `http:///api/pdfviewer` to verify the default GET response. Enable HTTPS with an ingress controller or Azure Front Door for production workloads. **Step 6:** Connect the client to the server endpoint. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md index a683d0d164..f34f198025 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md @@ -61,7 +61,7 @@ docker-compose up Alternatively, run the container directly with the license key: ```console -docker run -d -p 6001:80 –e SYNCFUSION_LICENSE_KEY= YOUR_LICENSE_KEY syncfusion/pdfviewer-server:latest +docker run -d -p 6001:80 -e SYNCFUSION_LICENSE_KEY=YOUR_LICENSE_KEY syncfusion/pdfviewer-server:latest ``` 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. @@ -135,7 +135,7 @@ services: # Provide your license key for activation SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY REDIS_CACHE_CONNECTION_STRING: YOUR_REDIS_CACHE_CONNECTION_STRING - DOCUMENT_SLIDING_EXPIRATION_TIME: “20” + DOCUMENT_SLIDING_EXPIRATION_TIME: "20" ports: - "6001:80" ``` From 6822aab9aa20d410d02f3bf31dc904500b028897 Mon Sep 17 00:00:00 2001 From: ATCHAYASEKAR-SF4414 Date: Tue, 4 Aug 2026 14:35:36 +0530 Subject: [PATCH 11/70] updated the retired platform --- ...ges-Required-for-PPTXtoImage-Conversion.md | 45 +++++++------------ 1 file changed, 16 insertions(+), 29 deletions(-) diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/NuGet-Packages-Required-for-PPTXtoImage-Conversion.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/NuGet-Packages-Required-for-PPTXtoImage-Conversion.md index cf03b2a371..ad3cd101d1 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/NuGet-Packages-Required-for-PPTXtoImage-Conversion.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/NuGet-Packages-Required-for-PPTXtoImage-Conversion.md @@ -37,14 +37,6 @@ WPF -ASP.NET MVC4 - - -{{'[Syncfusion.Presentation.AspNet.Mvc4.nupkg](https://www.nuget.org/packages/Syncfusion.Presentation.AspNet.Mvc4/)'| markdownify }} - - - - ASP.NET MVC5 @@ -105,6 +97,14 @@ The following NuGet packages need to be included in your application based on th {{'[Syncfusion.Xamarin.PresentationRenderer.nupkg](https://www.nuget.org/packages/Syncfusion.Xamarin.PresentationRenderer/)'| markdownify }} + + +ASP.NET MVC4 + + +{{'[Syncfusion.Presentation.AspNet.Mvc4.nupkg](https://www.nuget.org/packages/Syncfusion.Presentation.AspNet.Mvc4/)'| markdownify }} + + N> 1. PowerPoint Presentation to image conversion is supported from .NET Framework 2.0 and .NET Standard 1.4 onwards for ASP.NET Core and Xamarin. @@ -180,14 +180,6 @@ WPF -ASP.NET MVC4 - - -{{'[Syncfusion.OfficeChartToImageConverter.AspNet.Mvc4.nupkg](https://www.nuget.org/packages/Syncfusion.OfficeChartToImageConverter.AspNet.Mvc4/)'| markdownify }} - - - - ASP.NET MVC5 @@ -237,6 +229,14 @@ Xamarin
{{'[Syncfusion.Xamarin.PresentationRenderer.nupkg](https://www.nuget.org/packages/Syncfusion.Xamarin.PresentationRenderer/)'| markdownify }} + + +ASP.NET MVC4 + + +{{'[Syncfusion.OfficeChartToImageConverter.AspNet.Mvc4.nupkg](https://www.nuget.org/packages/Syncfusion.OfficeChartToImageConverter.AspNet.Mvc4/)'| markdownify }} + + ## NuGet package installation and uninstallation @@ -283,19 +283,6 @@ WPF -ASP.NET MVC4 - - -* Install-package Syncfusion.Presentation.AspNet.MVC4

-* Install-package Syncfusion.OfficeChartToImageConverter.AspNet.MVC4 - - -* Uninstall-package Syncfusion.Presentation.AspNet.MVC4 -RemoveDependencies

-* Uninstall-package Syncfusion.OfficeChartToImageConverter.AspNet.MVC4 -RemoveDependencies - - - - ASP.NET MVC5 From f77c3c5637a8391f7168b54cf3a377c82f85a2fe Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 4 Aug 2026 15:09:35 +0530 Subject: [PATCH 12/70] Resolved the invalid url CI failures --- .../PDF/PDF-Viewer/javascript-es6/download.md | 2 +- .../PDF/PDF-Viewer/javascript-es6/event.md | 180 +++++++++--------- .../javascript-es6/how-to-overview.md | 2 +- .../javascript-es6/magnification.md | 10 +- .../PDF-Viewer/javascript-es6/navigation.md | 10 +- .../javascript-es6/open-pdf-files.md | 6 +- .../PDF-Viewer/javascript-es6/organize-pdf.md | 2 +- .../save-pdf-file/to-amazon-s3.md | 2 +- .../save-pdf-file/to-azure-blob-storage.md | 4 +- 9 files changed, 109 insertions(+), 109 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md index 83d775bbe5..a39f372093 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md @@ -107,7 +107,7 @@ pdfviewer.download(); ## How to get the base64 string while downloading the PDF document -The [downloadEnd](https://ej2.syncfusion.com/documentation/api/pdfviewer/#downloadend) event fires after a download completes and exposes the downloaded document as a base64 string. +The [downloadEnd] (https://ej2.syncfusion.com/documentation/api/pdfviewer/#downloadend) event fires after a download completes and exposes the downloaded document as a base64 string. The following example illustrates how to access the downloaded document as a base64 string. Note: Handling very large base64 strings may impact memory usage; consider using a stream when possible. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md index a3856f9afb..1ecff9ad67 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md @@ -70,9 +70,9 @@ Note: For annotation and signature events, see the dedicated Annotations Events ## bookmarkClick -The [bookmarkClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#bookmarkclickevent) event triggers when a bookmark item is clicked in the bookmark panel. +The [bookmarkClick] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#bookmarkclickevent) event triggers when a bookmark item is clicked in the bookmark panel. -- Event arguments: [BookmarkClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/bookmarkClickEventArgs/). +- Event arguments: [BookmarkClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/bookmarkClickEventArgs). Example: @@ -94,7 +94,7 @@ viewer.appendTo('#pdfViewer'); ## toolbarClick -The [toolbarClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#toolbarclickevent) event triggers when a toolbar item is clicked. Use it to handle actions based on the clicked item's id or name. +The [toolbarClick] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#toolbarclickevent) event triggers when a toolbar item is clicked. Use it to handle actions based on the clicked item's id or name. - Event arguments: `ClickEventArgs`. @@ -118,9 +118,9 @@ viewer.appendTo('#pdfViewer'); ## validateFormFields -The [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#validateformfieldsevent) event triggers when form field validation fails, typically before a download or submit action proceeds. Use this event to inspect which required fields are empty and show custom messages or block application logic if needed. +The [validateFormFields] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#validateformfieldsevent) event triggers when form field validation fails, typically before a download or submit action proceeds. Use this event to inspect which required fields are empty and show custom messages or block application logic if needed. -- Event arguments: [ValidateFormFieldsArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs/) +- Event arguments: [ValidateFormFieldsArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs) - name: Event name - documentName: Current document name - formField: The last interacted field’s data (if applicable) @@ -160,9 +160,9 @@ Tip ## zoomChange -The [zoomChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#zoomchangeevent) event triggers when the magnification value changes. +The [zoomChange] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#zoomchangeevent) event triggers when the magnification value changes. -- Event arguments: [ZoomChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/zoomChangeEventArgs/). +- Event arguments: [ZoomChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/zoomChangeEventArgs). Example: @@ -184,9 +184,9 @@ viewer.appendTo('#pdfViewer'); ## buttonFieldClick -The [buttonFieldClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#buttonfieldclickevent) event triggers when a button form field is clicked. +The [buttonFieldClick] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#buttonfieldclickevent) event triggers when a button form field is clicked. -- Event arguments: [ButtonFieldClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/buttonFieldClickEventArgs/). +- Event arguments: [ButtonFieldClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/buttonFieldClickEventArgs). Example: @@ -208,9 +208,9 @@ viewer.appendTo('#pdfViewer'); ## commentAdd -The [commentAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentaddevent) event triggers when a comment is added in the comment panel. +The [commentAdd] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentaddevent) event triggers when a comment is added in the comment panel. -- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs/). +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs). Example: @@ -232,9 +232,9 @@ viewer.appendTo('#pdfViewer'); ## commentDelete -The [commentDelete](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentdeleteevent) event triggers when a comment is deleted in the comment panel. +The [commentDelete] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentdeleteevent) event triggers when a comment is deleted in the comment panel. -- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs/). +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs). Example: @@ -256,9 +256,9 @@ viewer.appendTo('#pdfViewer'); ## commentEdit -The [commentEdit](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commenteditevent) event triggers when a comment is edited in the comment panel. +The [commentEdit] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commenteditevent) event triggers when a comment is edited in the comment panel. -- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs/). +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs). Example: @@ -280,9 +280,9 @@ viewer.appendTo('#pdfViewer'); ## commentSelect -The [commentSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentselectevent) event triggers when a comment is selected in the comment panel. +The [commentSelect] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentselectevent) event triggers when a comment is selected in the comment panel. -- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs/). +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs). Example: @@ -304,9 +304,9 @@ viewer.appendTo('#pdfViewer'); ## commentStatusChanged -The [commentStatusChanged](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentstatuschangedevent) event triggers when a comment status is changed in the comment panel. +The [commentStatusChanged] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentstatuschangedevent) event triggers when a comment status is changed in the comment panel. -- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs/). +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs). Example: @@ -328,7 +328,7 @@ viewer.appendTo('#pdfViewer'); ## created -The [created](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#createdevent) event is triggered during the creation of the PDF Viewer component. +The [created] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#createdevent) event is triggered during the creation of the PDF Viewer component. - Event arguments: `void`. @@ -353,9 +353,9 @@ viewer.appendTo('#pdfViewer'); ## customContextMenuBeforeOpen -The [customContextMenuBeforeOpen](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#customcontextmenubeforeopenevent) event fires just before the context menu is shown. Use it to show or hide items based on the current state (for example, only show search items when text is selected). +The [customContextMenuBeforeOpen] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#customcontextmenubeforeopenevent) event fires just before the context menu is shown. Use it to show or hide items based on the current state (for example, only show search items when text is selected). -- Event arguments: [CustomContextMenuBeforeOpenEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/customContextMenuBeforeOpenEventArgs/) +- Event arguments: [CustomContextMenuBeforeOpenEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/customContextMenuBeforeOpenEventArgs) - name: Event name - ids: Array of menu item ids that will be shown; remove ids to hide items for this open @@ -412,9 +412,9 @@ const menuItems: any[] = [ ## customContextMenuSelect -The [customContextMenuSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#customcontextmenuselectevent) event fires when a custom menu item is clicked. Use it to branch logic by the clicked item's id. +The [customContextMenuSelect] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#customcontextmenuselectevent) event fires when a custom menu item is clicked. Use it to branch logic by the clicked item's id. -- Event arguments: [CustomContextMenuSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/customContextMenuSelectEventArgs/). +- Event arguments: [CustomContextMenuSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/customContextMenuSelectEventArgs). - name: Event name - id: The id of the clicked menu item @@ -473,9 +473,9 @@ viewer.documentLoad = function (args) { ## documentLoad -The [documentLoad](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#documentloadevent) event occurs after a document is successfully loaded and parsed. +The [documentLoad] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#documentloadevent) event occurs after a document is successfully loaded and parsed. -- Event arguments: [LoadEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/loadEventArgs/). +- Event arguments: [LoadEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/loadEventArgs). Example: @@ -497,9 +497,9 @@ viewer.documentLoad = function (args) { ## documentLoadFailed -The [documentLoadFailed](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#documentloadfailedevent) event triggers when loading a document fails. +The [documentLoadFailed] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#documentloadfailedevent) event triggers when loading a document fails. -- Event arguments: [LoadFailedEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/loadFailedEventArgs/). +- Event arguments: [LoadFailedEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/loadFailedEventArgs). Example: @@ -520,9 +520,9 @@ viewer.documentLoadFailed = function (args) { ## documentUnload -The [documentUnload](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#documentunloadevent) event triggers when closing the current document. +The [documentUnload] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#documentunloadevent) event triggers when closing the current document. -- Event arguments: [UnloadEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/unloadEventArgs/). +- Event arguments: [UnloadEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/unloadEventArgs). Example: @@ -545,9 +545,9 @@ viewer.documentUnload = function (args) { ## downloadEnd -The [downloadEnd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#downloadendevent) event triggers after a document download completes. +The [downloadEnd] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#downloadendevent) event triggers after a document download completes. -- Event arguments: [DownloadEndEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/downloadEndEventArgs/). +- Event arguments: [DownloadEndEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/downloadEndEventArgs). Example: @@ -569,9 +569,9 @@ viewer.appendTo('#pdfViewer'); ## downloadStart -The [downloadStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#downloadstartevent) event triggers when the download operation is initiated. +The [downloadStart] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#downloadstartevent) event triggers when the download operation is initiated. -- Event arguments: [DownloadStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/downloadStartEventArgs/). +- Event arguments: [DownloadStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/downloadStartEventArgs). Example: @@ -593,9 +593,9 @@ viewer.appendTo('#pdfViewer'); ## exportFailed -The [exportFailed](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportfailedevent) event triggers when exporting annotations fails. +The [exportFailed] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportfailedevent) event triggers when exporting annotations fails. -- Event arguments: [ExportFailureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportFailureEventArgs/). +- Event arguments: [ExportFailureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportFailureEventArgs). Example: @@ -617,9 +617,9 @@ viewer.appendTo('#pdfViewer'); ## exportStart -The [exportStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportstartevent) event triggers when exporting annotations starts. +The [exportStart] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportstartevent) event triggers when exporting annotations starts. -- Event arguments: [ExportStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportStartEventArgs/). +- Event arguments: [ExportStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportStartEventArgs). Example: @@ -641,9 +641,9 @@ viewer.appendTo('#pdfViewer'); ## exportSuccess -The [exportSuccess](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportsuccessevent) event triggers when annotations are exported successfully. +The [exportSuccess] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportsuccessevent) event triggers when annotations are exported successfully. -- Event arguments: [ExportSuccessEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportSuccessEventArgs/). +- Event arguments: [ExportSuccessEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportSuccessEventArgs). Example: @@ -665,9 +665,9 @@ viewer.appendTo('#pdfViewer'); ## extractTextCompleted -The [extractTextCompleted](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#extracttextcompletedevent) event triggers when text extraction completes. +The [extractTextCompleted] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#extracttextcompletedevent) event triggers when text extraction completes. -- Event arguments: [ExtractTextCompletedEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/extractTextCompletedEventArgs/). +- Event arguments: [ExtractTextCompletedEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/extractTextCompletedEventArgs). Example: @@ -689,9 +689,9 @@ viewer.appendTo('#pdfViewer'); ## hyperlinkClick -The [hyperlinkClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#hyperlinkclickevent) event triggers when a hyperlink is clicked. +The [hyperlinkClick] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#hyperlinkclickevent) event triggers when a hyperlink is clicked. -- Event arguments: [HyperlinkClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/hyperlinkClickEventArgs/). +- Event arguments: [HyperlinkClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/hyperlinkClickEventArgs). Example: @@ -713,7 +713,7 @@ viewer.appendTo('#pdfViewer'); ## hyperlinkMouseOver -The [hyperlinkMouseOver](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#hyperlinkmouseoverevent) event triggers when hovering over a hyperlink. +The [hyperlinkMouseOver] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#hyperlinkmouseoverevent) event triggers when hovering over a hyperlink. - Event arguments: HyperlinkMouseOverArgs. @@ -737,9 +737,9 @@ viewer.appendTo('#pdfViewer'); ## importFailed -The [importFailed](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importfailedevent) event triggers when importing annotations fails. +The [importFailed] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importfailedevent) event triggers when importing annotations fails. -- Event arguments: [ImportFailureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importFailureEventArgs/). +- Event arguments: [ImportFailureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importFailureEventArgs). Example: @@ -761,9 +761,9 @@ viewer.appendTo('#pdfViewer'); ## importStart -The [importStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importstartevent) event triggers when importing annotations starts. +The [importStart] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importstartevent) event triggers when importing annotations starts. -- Event arguments: [ImportStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importStartEventArgs/). +- Event arguments: [ImportStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importStartEventArgs). Example: @@ -785,9 +785,9 @@ viewer.appendTo('#pdfViewer'); ## importSuccess -The [importSuccess](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importsuccessevent) event triggers when annotations are imported successfully. +The [importSuccess] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importsuccessevent) event triggers when annotations are imported successfully. -- Event arguments: [ImportSuccessEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importSuccessEventArgs/). +- Event arguments: [ImportSuccessEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importSuccessEventArgs). Example: @@ -809,9 +809,9 @@ viewer.appendTo('#pdfViewer'); ## keyboardCustomCommands -The [keyboardCustomCommands](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#keyboardcustomcommandsevent) event triggers when customized keyboard command keys are pressed. +The [keyboardCustomCommands] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#keyboardcustomcommandsevent) event triggers when customized keyboard command keys are pressed. -- Event arguments: [KeyboardCustomCommandsEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/keyboardCustomCommandsEventArgs/). +- Event arguments: [KeyboardCustomCommandsEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/keyboardCustomCommandsEventArgs). - name: Event name - keyboardCommand: The command metadata raised by Command Manager @@ -872,7 +872,7 @@ viewer.keyboardCustomCommands = (args: any): void => { ## moveSignature -The [moveSignature](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#movesignatureevent) event triggers when a signature is moved across the page. +The [moveSignature] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#movesignatureevent) event triggers when a signature is moved across the page. - Event arguments: `MoveSignatureEventArgs`. @@ -896,9 +896,9 @@ viewer.appendTo('#pdfViewer'); ## pageChange -The [pageChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagechangeevent) event triggers when the current page number changes (for example, via scrolling or navigation controls). +The [pageChange] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagechangeevent) event triggers when the current page number changes (for example, via scrolling or navigation controls). -- Event arguments: [PageChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageChangeEventArgs/). +- Event arguments: [PageChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageChangeEventArgs). Example: @@ -920,9 +920,9 @@ viewer.appendTo('#pdfViewer'); ## pageClick -The [pageClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pageclickevent) event triggers when a mouse click occurs on a page. +The [pageClick] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pageclickevent) event triggers when a mouse click occurs on a page. -- Event arguments: [PageClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageClickEventArgs/). +- Event arguments: [PageClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageClickEventArgs). Example: @@ -944,7 +944,7 @@ viewer.appendTo('#pdfViewer'); ## pageMouseover -The [pageMouseover](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagemouseoverevent) event triggers when the mouse moves over a page. +The [pageMouseover] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagemouseoverevent) event triggers when the mouse moves over a page. - Event arguments: `PageMouseoverEventArgs`. @@ -968,7 +968,7 @@ viewer.appendTo('#pdfViewer'); ## pageOrganizerSaveAs -The [pageOrganizerSaveAs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pageorganizersaveasevent) event triggers when a Save As action is performed in the page organizer. +The [pageOrganizerSaveAs] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pageorganizersaveasevent) event triggers when a Save As action is performed in the page organizer. - Event arguments: `PageOrganizerSaveAsEventArgs`. @@ -992,9 +992,9 @@ viewer.appendTo('#pdfViewer'); ## pageRenderComplete -The [pageRenderComplete](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagerendercompleteevent) event triggers after a page finishes rendering. +The [pageRenderComplete] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagerendercompleteevent) event triggers after a page finishes rendering. -- Event arguments: [PageRenderCompleteEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageRenderCompleteEventArgs/). +- Event arguments: [PageRenderCompleteEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageRenderCompleteEventArgs). Example: @@ -1016,9 +1016,9 @@ viewer.appendTo('#pdfViewer'); ## pageRenderInitiate -The [pageRenderInitiate](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagerenderinitiateevent) event triggers when page rendering begins. +The [pageRenderInitiate] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagerenderinitiateevent) event triggers when page rendering begins. -- Event arguments: [PageRenderInitiateEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageRenderInitiateEventArgs/). +- Event arguments: [PageRenderInitiateEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageRenderInitiateEventArgs). Example: @@ -1040,9 +1040,9 @@ viewer.appendTo('#pdfViewer'); ## printEnd -The [printEnd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#printendevent) event triggers when a print action completes. +The [printEnd] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#printendevent) event triggers when a print action completes. -- Event arguments: [PrintEndEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/printEndEventArgs/). +- Event arguments: [PrintEndEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/printEndEventArgs). Example: @@ -1064,9 +1064,9 @@ viewer.appendTo('#pdfViewer'); ## printStart -The [printStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#printstartevent) event triggers when a print action is initiated. +The [printStart] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#printstartevent) event triggers when a print action is initiated. -- Event arguments: [PrintStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/printStartEventArgs/). +- Event arguments: [PrintStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/printStartEventArgs). Example: @@ -1088,9 +1088,9 @@ viewer.appendTo('#pdfViewer'); ## removeSignature -The [removeSignature](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#removesignatureevent) event triggers when a signature is removed. +The [removeSignature] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#removesignatureevent) event triggers when a signature is removed. -- Event arguments: [RemoveSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/removeSignatureEventArgs/). +- Event arguments: [RemoveSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/removeSignatureEventArgs). Example: @@ -1112,9 +1112,9 @@ viewer.appendTo('#pdfViewer'); ## resizeSignature -The [resizeSignature](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#resizesignatureevent) event triggers when a signature is resized. +The [resizeSignature] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#resizesignatureevent) event triggers when a signature is resized. -- Event arguments: [ResizeSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/resizeSignatureEventArgs/). +- Event arguments: [ResizeSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/resizeSignatureEventArgs). Example: @@ -1136,7 +1136,7 @@ viewer.appendTo('#pdfViewer'); ## resourcesLoaded -The [resourcesLoaded](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#resourcesloadedevent) event triggers after the viewer's required resources are loaded. +The [resourcesLoaded] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#resourcesloadedevent) event triggers after the viewer's required resources are loaded. - Event arguments: `void`. @@ -1160,9 +1160,9 @@ viewer.appendTo('#pdfViewer'); ## signaturePropertiesChange -The [signaturePropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signaturepropertieschangeevent) event triggers when signature properties change. +The [signaturePropertiesChange] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signaturepropertieschangeevent) event triggers when signature properties change. -- Event arguments: [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/). +- Event arguments: [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs). Example: @@ -1184,9 +1184,9 @@ viewer.appendTo('#pdfViewer'); ## signatureSelect -The [signatureSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signatureselectevent) event triggers when a signature is selected. +The [signatureSelect] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signatureselectevent) event triggers when a signature is selected. -- Event arguments: [SignatureSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureSelectEventArgs/). +- Event arguments: [SignatureSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureSelectEventArgs). Example: @@ -1208,9 +1208,9 @@ viewer.appendTo('#pdfViewer'); ## signatureUnselect -The [signatureUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signatureunselectevent) event triggers when a signature is unselected. +The [signatureUnselect] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signatureunselectevent) event triggers when a signature is unselected. -- Event arguments: [SignatureUnselectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureUnselectEventArgs/). +- Event arguments: [SignatureUnselectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureUnselectEventArgs). Example: @@ -1232,9 +1232,9 @@ viewer.appendTo('#pdfViewer'); ## textSearchComplete -The [textSearchComplete](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchcompleteevent) event triggers when a text search completes. +The [textSearchComplete] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchcompleteevent) event triggers when a text search completes. -- Event arguments: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchCompleteEventArgs/). +- Event arguments: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchCompleteEventArgs). Example: @@ -1256,9 +1256,9 @@ viewer.appendTo('#pdfViewer'); ## textSearchHighlight -The [textSearchHighlight](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchhighlightevent) event triggers when searched text is highlighted. +The [textSearchHighlight] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchhighlightevent) event triggers when searched text is highlighted. -- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchHighlightEventArgs/). +- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchHighlightEventArgs). Example: @@ -1280,9 +1280,9 @@ viewer.appendTo('#pdfViewer'); ## textSearchStart -The [textSearchStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchstartevent) event triggers when a text search is initiated. +The [textSearchStart] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchstartevent) event triggers when a text search is initiated. -- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchStartEventArgs/). +- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchStartEventArgs). Example: @@ -1304,9 +1304,9 @@ viewer.appendTo('#pdfViewer'); ## textSelectionEnd -The [textSelectionEnd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textselectionendevent) event triggers when text selection is complete. +The [textSelectionEnd] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textselectionendevent) event triggers when text selection is complete. -- Event arguments: [TextSelectionEndEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSelectionEndEventArgs/). +- Event arguments: [TextSelectionEndEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSelectionEndEventArgs). Example: @@ -1328,7 +1328,7 @@ viewer.appendTo('#pdfViewer'); ## textSelectionStart -The [textSelectionStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textselectionstartevent) event triggers when text selection is initiated. +The [textSelectionStart] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textselectionstartevent) event triggers when text selection is initiated. - Event arguments: `TextSelectionStartEventArgs`. @@ -1352,9 +1352,9 @@ viewer.appendTo('#pdfViewer'); ## thumbnailClick -The [thumbnailClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#thumbnailclickevent) event triggers when a thumbnail is clicked. +The [thumbnailClick] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#thumbnailclickevent) event triggers when a thumbnail is clicked. -- Event arguments: [ThumbnailClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/thumbnailClickEventArgs/). +- Event arguments: [ThumbnailClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/thumbnailClickEventArgs). Example: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md index 02c19e44df..0d53304326 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -## Frequently Asked Questions in TypeScript PDF Viewer +# Frequently Asked Questions in TypeScript PDF Viewer The frequently asked questions for the Essential® PDF Viewer are listed below. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md index 5ffb3ec50d..88aa413631 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md @@ -70,11 +70,11 @@ pdfviewer.appendTo('#PdfViewer'); The following magnification options are available in the default toolbar of PDF Viewer, -* [**ZoomIn**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomin):- Zoom in from the current zoom value of PDF pages. -* [**ZoomOut**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomout):- Zoom out from the current zoom value of PDF pages. -* [**Zoom**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomto):- Zoom to specific zoom value of PDF pages. -* [**FitPage**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#fittopage):- Fits the page width within the available viewport size. -* [**FitWidth**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#fittowidth):- Fits the viewport width based on the page content size. +* [**ZoomIn**] (https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomin):- Zoom in from the current zoom value of PDF pages. +* [**ZoomOut**] (https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomout):- Zoom out from the current zoom value of PDF pages. +* [**Zoom**] (https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomto):- Zoom to specific zoom value of PDF pages. +* [**FitPage**] (https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#fittopage):- Fits the page width within the available viewport size. +* [**FitWidth**] (https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#fittowidth):- Fits the viewport width based on the page content size. ![Magnification tools in PDF Viewer](./images/zoom.png) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md index 5f5e87a8ac..c643f6d8f2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md @@ -16,11 +16,11 @@ The TypeScript PDF Viewer supports multiple navigation options, including toolba The default toolbar includes 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 a PDF 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):- 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 a PDF 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. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-files.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-files.md index 3d974167a8..dc0ce7c732 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-files.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-files.md @@ -24,7 +24,7 @@ Follow the [TypeScript getting started guide](https://help.syncfusion.com/docume 1. Create a web service project in .NET Core 3.0 or later. Refer to [How to create a PDF Viewer web service in .NET Core](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for guidance. 2. Open the `PdfViewerController.cs` file. -3. Modify the [Load](https://ej2.syncfusion.com/documentation/api/pdfviewer/#load) method to resolve remote URLs when `isFileName` is `true`. +3. Modify the [Load] (https://ej2.syncfusion.com/documentation/api/pdfviewer/#load) method to resolve remote URLs when `isFileName` is `true`. ```csharp @@ -74,7 +74,7 @@ public IActionResult Load([FromBody] Dictionary jsonData) **Step 3:** Configure the PDF Viewer in the TypeScript application -Update the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) with the hosted web service endpoint (replace `https://localhost:44396/pdfviewer` with your server URL) and set `documentPath` to the PDF file to load. +Update the [serviceUrl] (https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) with the hosted web service endpoint (replace `https://localhost:44396/pdfviewer` with your server URL) and set `documentPath` to the PDF file to load. ```typescript @@ -153,7 +153,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache } ``` -5. Modify the [Load](https://ej2.syncfusion.com/documentation/api/pdfviewer/#load) method to stream the PDF from SQL Server when `isFileName` is `true`. +5. Modify the [Load] (https://ej2.syncfusion.com/documentation/api/pdfviewer/#load) method to stream the PDF from SQL Server when `isFileName` is `true`. ```csharp diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md index daa588674f..61a3036f02 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md @@ -14,7 +14,7 @@ The PDF Viewer provides tools to organize PDF documents by inserting, deleting, ## Getting started -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. +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. ![Organize Pages dialog showing page thumbnails](./images/organize-page.png) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md index ea0dc24575..2d19de5afa 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md @@ -193,7 +193,7 @@ N> Replace the placeholders with the appropriate AWS credentials and bucket name **Step 3:** Set the PDF Viewer properties in the TypeScript 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. +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. ```typescript diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md index db12ed5a64..f3a77d1b2e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md @@ -115,7 +115,7 @@ public PdfViewerController(IConfiguration configuration, ILogger Replace the placeholders with the actual Azure Storage connection string and **Step 3:** Set the PDF Viewer properties in the TypeScript 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. +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. ```typescript import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, From 618b6b7cb65f45295461d93a7d4cb50cfc9eda7e Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 4 Aug 2026 17:02:37 +0530 Subject: [PATCH 13/70] Resolve the CI front matter errors --- .../javascript-es6/save-pdf-file/to-amazon-s3.md | 2 +- .../javascript-es6/save-pdf-file/to-azure-blob-storage.md | 2 +- .../save-pdf-file/to-box-cloud-file-storage.md | 4 ++-- .../save-pdf-file/to-dropbox-cloud-file-storage.md | 4 ++-- .../save-pdf-file/to-google-cloud-storage.md | 6 +++--- ...w-to-deploy-docker-image-in-azure-kubernetes-service.md | 6 +++--- .../pdfviewer-server-docker-image-overview.md | 4 ++-- .../toolbar-customization/annotation-toolbar.md | 7 +++---- .../toolbar-customization/form-designer-toolbar.md | 6 +++--- .../toolbar-customization/primary-toolbar.md | 4 ++-- .../troubleshooting/document-loading-issues.md | 6 +++--- 11 files changed, 25 insertions(+), 26 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md index 2d19de5afa..664667dc5e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md @@ -135,7 +135,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 AWS S3 bucket. +5. Modify the [Download()] (https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the AWS S3 bucket. ```csharp diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md index f3a77d1b2e..f55830e8e7 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md @@ -1,6 +1,6 @@ --- layout: post -title: Save PDF files to Azure Blob Storage in TypeScript PDF Viewer | Syncfusion +title: Save PDF Files to Azure Blob Storage in Syncfusion TypeScript PDF Viewer description: Learn how to save PDF files to Azure Blob Storage using the Syncfusion TypeScript PDF Viewer component in standalone and server-backed configurations. platform: document-processing control: PDF Viewer diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md index 796c5ea4b7..4c77cad66d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md @@ -7,7 +7,7 @@ control: PDF Viewer documentation: ug --- -# Save PDF files to Box cloud storage +# Save PDF Files to Box Cloud Storage in Syncfusion PDF Viewer The TypeScript 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. @@ -55,7 +55,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 Box cloud storage folder. +5. Modify the [Download()] (https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the Box cloud storage folder. ```csharp [HttpPost("Download")] diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md index eceae7b0bd..f29c10166e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md @@ -7,7 +7,7 @@ control: PDF Viewer documentation: ug --- -# Save PDF files to Dropbox cloud storage +# Save PDF Files to Dropbox Cloud Storage in Syncfusion PDF Viewer The TypeScript PDF Viewer component supports saving PDF files to Dropbox using either the standalone or server-backed configuration. The following steps demonstrate both approaches. @@ -125,7 +125,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache } ``` -5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to the Dropbox storage. +5. Modify the [Download()] (https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to the Dropbox storage. ```csharp diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md index 23003eca79..a8a1908f3c 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md @@ -1,13 +1,13 @@ --- layout: post -title: Save PDF files to Google Cloud Storage in TypeScript PDF Viewer | Syncfusion +title: Save PDF Files to Google Cloud Storage in Syncfusion PDF Viewer description: Learn how to save PDF files to Google Cloud Storage using the Syncfusion TypeScript PDF Viewer component with a server-backed web service. platform: document-processing control: PDF Viewer documentation: ug --- -# Save PDF files to Google Cloud Storage +# Save PDF Files to Google Cloud Storage in Syncfusion PDF Viewer To save a PDF file to Google Cloud Storage, follow the steps below. @@ -108,7 +108,7 @@ N> Replace **path/to/service-account-key.json** with the actual file path to the **Step 3:** Set the PDF Viewer properties in the TypeScript 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. +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. ```typescript diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md index 8b533cb42c..9be3049885 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md @@ -1,19 +1,19 @@ --- layout: post -title: Deploy TypeScript PDF Viewer server to Azure Kubernetes Service (AKS) +title: Deploy Syncfusion PDF Viewer Server to Azure Kubernetes Service description: Deploy the Syncfusion PDF Viewer server Docker image to Azure Kubernetes Service (AKS), expose it securely, and connect it to the TypeScript PDF Viewer client. platform: document-processing control: PDF Viewer documentation: ug --- -# Deploy Docker image to Azure Kubernetes Service (AKS) +# Manage Docker Image Deployments in Azure Kubernetes Service Host the Syncfusion PDF Viewer server container on Azure Kubernetes Service (AKS) to deliver PDFs to the TypeScript PDF Viewer client at scale. The following workflow provisions the infrastructure, deploys the published image from Docker Hub, and exposes a public endpoint for the component’s `serviceUrl`. ## Prerequisites -- Azure subscription and Azure CLI installed. See the [Install the Azure CLI](https://learn.microsoft.com/cli/azure/install-azure-cli) guide. +- Azure subscription and Azure CLI installed. See the [Install the Azure CLI](https://learn.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest) guide. - Sign in to Azure before you create resources. ```console diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md index f34f198025..ab8e9c79a2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md @@ -1,6 +1,6 @@ --- layout: post -title: TypeScript PDF Viewer server Docker image overview +title: TypeScript Syncfusion PDF Viewer server Docker image overview description: Run the Syncfusion PDF Viewer server Docker image, configure licensing and Redis cache, and connect it to the TypeScript PDF Viewer client. platform: document-processing control: PDF Viewer @@ -122,7 +122,7 @@ if(ele) { The PDF Viewer server caches loaded document instances. To use a distributed cache, configure Azure Cache for Redis with Docker Compose as follows. -**Step 1:** Create an Azure Cache for Redis instance and copy the connection string. Follow the [Azure Cache for Redis quickstart](https://learn.microsoft.com/azure/azure-cache-for-redis/cache-dotnet-core-quickstart). +**Step 1:** Create an Azure Cache for Redis instance and copy the connection string. Follow the [Azure Cache for Redis quickstart](https://learn.microsoft.com/en-us/azure/redis/dotnet). **Step 2:** Provide the connection string with the `REDIS_CACHE_CONNECTION_STRING` variable in `docker-compose.yml`. The default sliding expiration is 10 minutes. To change it, set `DOCUMENT_SLIDING_EXPIRATION_TIME`. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar.md index 1026a59ff4..afd7d1ec07 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar.md @@ -3,8 +3,7 @@ layout: post title: Annotation Toolbar in TypeScript PDF Viewer control | Syncfusion description: Learn here all about annotation toolbar customization in Syncfusion TypeScript PDF Viewer control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Annotation Toolbar Customization -publishingplatform: PDF Viewer +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- @@ -17,7 +16,7 @@ The annotation toolbar can be customized by showing or hiding default items and Show or hide the annotation toolbar programmatically during initialization or at runtime. -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. +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 example shows how to show or hide the annotation toolbar using the `showAnnotationToolbar` method. @@ -73,7 +72,7 @@ document.getElementById('set').addEventListener('click', ()=> { Choose which tools appear and control their order in the annotation toolbar. -Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/) with the [`AnnotationToolbarItems`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/#annotationtoolbaritems) property to choose which tools are displayed in the annotation toolbar. The property accepts a list of [`AnnotationToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationToolbarItem/) values. Only the items included in this list are shown; any item not listed is hidden. The rendered order follows the sequence of items in the list. +Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings) with the [`AnnotationToolbarItems`] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/#annotationtoolbaritems) property to choose which tools are displayed in the annotation toolbar. The property accepts a list of [`AnnotationToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationToolbarItem) values. Only the items included in this list are shown; any item not listed is hidden. The rendered order follows the sequence of items in the list. The annotation toolbar appears when entering annotation mode in PdfViewer and adapts responsively based on the available width. The Close tool allows users to exit the annotation toolbar when needed. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar.md index 2a758ca63f..dba9276afc 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar.md @@ -1,6 +1,6 @@ --- layout: post -title: Form Designer Toolbar Customization in TypeScript PDF Viewer Component | Syncfusion +title: Customize Form Designer Toolbar in Syncfusion PDF Viewer description: Learn here all about form designer toolbar customization in Syncfusion TypeScript PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer @@ -16,7 +16,7 @@ Customize the form designer toolbar by showing or hiding default items and contr The form designer toolbar can be shown or hidden programmatically during initialization or at runtime. -Use the [enableFormDesigner](https://ej2.syncfusion.com/documentation/api/pdfviewer/pdfViewerModel/#enableformdesigner) property to set initial visibility or call the [showFormDesignerToolbar](https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbar/#showformdesignertoolbar) method at runtime to toggle visibility. The links below reference the corresponding API documentation. +Use the [enableFormDesigner] (https://ej2.syncfusion.com/documentation/api/pdfviewer/pdfViewerModel/#enableformdesigner) property to set initial visibility or call the [showFormDesignerToolbar] (https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbar/#showformdesignertoolbar) method at runtime to toggle visibility. The links below reference the corresponding API documentation. The following code snippet shows how to set the `enableFormDesigner` property during initialization. @@ -69,7 +69,7 @@ pdfviewer.appendTo('#PdfViewer'); Select which tools appear and control their order in the form designer toolbar. -Configure [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbarSettings/) and set the [`FormDesignerToolbarItems`](https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbarSettings/#formdesignertoolbaritems) property to specify available form-design tools. This property accepts a list of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/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. +Configure [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbarSettings) and set the [`FormDesignerToolbarItems`] (https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbarSettings/#formdesignertoolbaritems) property to specify available form-design tools. This property accepts a list of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/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-es6/toolbar-customization/primary-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/primary-toolbar.md index 1d47d1a702..907886c38d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/primary-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/primary-toolbar.md @@ -1,6 +1,6 @@ --- layout: post -title: Primary Toolbar Customization in TypeScript PDF Viewer Component | Syncfusion +title: Primary Toolbar Customization in Syncfusion PDF Viewer description: Learn here all about primary toolbar customization in Syncfusion TypeScript PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer @@ -14,7 +14,7 @@ The primary toolbar of the PDF Viewer can be customized by rearranging existing ## 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/documentation/api/pdfviewer/pdfViewerModel/#enabletoolbar) property or the [showToolbar](https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbar/#showtoolbar) method to show or hide the primary toolbar.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/documentation/api/pdfviewer/pdfViewerModel/#enabletoolbar) property or the [showToolbar] (https://ej2.syncfusion.com/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 diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md index 0694b3671f..01201ebdd2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md @@ -1,13 +1,13 @@ --- layout: post -title: Fix document loading issues in v23.1+ for the TypeScript PDF Viewer component -description: Resolve document rendering failures in v23.1 or newer by calling dataBind before load, verifying source URLs, checking CORS and CSP, and confirming network connectivity in the TypeScript PDF Viewer. +title: Fix Document Loading Issues in Syncfusion PDF Viewer v23.1+ +description: Resolve document rendering failures in Syncfusion PDF Viewer v23.1+ by using dataBind, validating URLs, checking CORS/CSP, and network access. platform: document-processing control: PDF Viewer documentation: ug --- -# Document Loading Issues in Version 23.1 or Newer +# Troubleshoot Document Loading Issues in Version 23.1+ If a document does not render in the viewer when using version 23.1 or newer, follow these steps: From 30121632660442ca2ef601087c763eddf09e0b1f Mon Sep 17 00:00:00 2001 From: Dhanush Sugumaran Date: Tue, 4 Aug 2026 17:14:16 +0530 Subject: [PATCH 14/70] Task(1045705): Revamped the UG documentation for the Core Vue PDF Viewer documentation pages --- .../PDF/PDF-Viewer/vue/accessibility.md | 2 +- .../PDF/PDF-Viewer/vue/content-security-policy.md | 12 ++++++------ .../PDF/PDF-Viewer/vue/download.md | 4 ++-- Document-Processing/PDF/PDF-Viewer/vue/event.md | 15 +++++++++------ .../PDF/PDF-Viewer/vue/feature-module.md | 7 ++++--- .../PDF/PDF-Viewer/vue/how-to-overview.md | 6 +++--- .../PDF/PDF-Viewer/vue/interaction-mode.md | 2 +- .../PDF/PDF-Viewer/vue/magnification.md | 2 +- Document-Processing/PDF/PDF-Viewer/vue/mcp.md | 2 +- .../PDF/PDF-Viewer/vue/mobile-toolbar.md | 2 ++ .../PDF/PDF-Viewer/vue/navigation.md | 2 +- .../PDF/PDF-Viewer/vue/open-pdf-files.md | 2 +- .../PDF/PDF-Viewer/vue/organize-pdf.md | 4 ++-- .../PDF/PDF-Viewer/vue/overview.md | 2 +- Document-Processing/PDF/PDF-Viewer/vue/quasar.md | 4 ++-- .../PDF/PDF-Viewer/vue/server-to-standalone.md | 4 ++-- .../PDF/PDF-Viewer/vue/text-markup-annotation.md | 11 ----------- Document-Processing/PDF/PDF-Viewer/vue/toolbar.md | 4 +++- 18 files changed, 42 insertions(+), 45 deletions(-) delete mode 100644 Document-Processing/PDF/PDF-Viewer/vue/text-markup-annotation.md diff --git a/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md b/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md index 8b0e53e0f4..28b0516a8d 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md @@ -82,7 +82,7 @@ The PDF Viewer follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/ap | CONTROL + F | COMMAND + F |Open the search toolbar| |||**Shortcut for Text Selection**| |CONTROL + C |CONTROL + C | Copy the selected text or annotation or form field | -| CONTROL + X | CONTROL + X |Cut the selected text or annotation of the form field| +|CONTROL + X |CONTROL + X |Cut the selected text, annotation, or form field| |CONTROL + Y |CONTROL + Y |Paste the selected text or annotation or form field| |||**Shortcuts for the general operation**| | CONTROL + Z | CONTROL + Z |Undo the action| diff --git a/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md b/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md index b51ddff90b..fc814d2a69 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md @@ -1,8 +1,8 @@ --- layout: post title: Content Security Policy with Vue PDF Viewer component | Syncfusion -description: Learn here all about Content Security Policy with Vue PDF Viewer component of Syncfusion Essential JS 2 and more details. -control: CSP +description: Learn about configuring Content Security Policy with the Syncfusion Vue PDF Viewer component and related best practices. +control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## @@ -39,7 +39,7 @@ The PDF Viewer is rendered with calculated inline styles and base64-encoded font Include the following directives to permit inline styles and external fonts: {% tabs %} -{% highlight razor tabtitle="HTML" %} +{% highlight html tabtitle="HTML" %} ... @@ -68,7 +68,7 @@ The meta tag should be placed within the `` section of the HTML document t When images are added as blob or base64 data to the PDF Viewer, they are blocked in strict CSP mode. To permit these resources, include the [`img-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directive in the CSP meta tag: {% tabs %} -{% highlight razor tabtitle="HTML" %} +{% highlight html tabtitle="HTML" %} @@ -1031,6 +1033,7 @@ Example:
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md b/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md index 07c502c8f8..05c2899cd2 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Feature modules in Vue PDF viewer Control +# Feature modules in Vue PDF Viewer Control The [Vue PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk) exposes functionality as feature modules that can be imported selectively. Import and register only the modules required by an application to keep bundle sizes small and enable specific capabilities on demand. The following feature modules are available: @@ -42,8 +42,9 @@ N> In addition to registering the required modules, enable the corresponding com |Annotation|``| |FormFields|``| |FormDesigner|``| +|StickyNotesAnnotation|``| ## See also -* [Toolbar items](../pdfviewer/toolbar) -* [Toolbar customization](../pdfviewer/how-to/toolbar-customization) +* [Toolbar items](./toolbar) +* [Toolbar customization](./toolbar-customization/custom-toolbar) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md index 759d64b4fe..f4f7fd0448 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md @@ -36,7 +36,7 @@ The frequently asked questions in Essential® PDF Viewer are liste * [How to enable or disable the local storage?](./how-to/enable-local-storage) * [How to enable or disable the text selection?](./how-to/enable-text-selection) * [How to export the PDF pages as images?](./how-to/export-as-image) -* [How to extract text from the PDF document?](./how-to/extract-text-completed) +* [How to extract text Completed from the PDF document?](./how-to/extract-text-completed) * [How to extract text from a specific region?](./how-to/extract-text-option) * [How to extract text from the PDF document?](./how-to/extract-text) * [How to find the text in the PDF document asynchronously?](./how-to/find-text-async) @@ -49,7 +49,7 @@ The frequently asked questions in Essential® PDF Viewer are liste * [How to open the bookmark pane when the document is loaded?](./how-to/open-bookmark) * [How to open the thumbnail pane when the document is loaded?](./how-to/open-thumbnail) * [How to get the page render started and completed event?](./how-to/pagerenderstarted-pagerendercompleted) -* [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium''?](./how-to/resolve-unable-to-find-an-entry-point-error) +* [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium'`?](./how-to/resolve-unable-to-find-an-entry-point-error) * [How to restrict the zooming in mobile mode?](./how-to/restricting-zoom-in-mobile-mode) * [How to show custom stamp item in the stamp annotation?](./how-to/show-custom-stamp-item) * [How to show or hide a particular annotation?](./how-to/show-hide-annotation) @@ -63,4 +63,4 @@ The frequently asked questions in Essential® PDF Viewer are liste * [How to convert pixel to point in server side?](./how-to/convert-pixel-to-point-in-server-side) * [Why is the web service not listening?](./how-to/webservice-not-listening) * [How to select annotation?](./how-to/select-annotation) -* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded) \ No newline at end of file +* [How to load document after resources loaded?](./how-to/load-document-after-resources-loaded) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/interaction-mode.md b/Document-Processing/PDF/PDF-Viewer/vue/interaction-mode.md index de2a3d378c..dd0862b956 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/interaction-mode.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/interaction-mode.md @@ -14,7 +14,7 @@ The PDF Viewer provides two interaction modes for working with a loaded PDF docu ## Selection mode -Selection mode allows users to select and copy text from the loaded PDF. Touch-based panning and page scrolling are disabled in this mode. Enable or disable text selection using the following code snippet. +Selection mode allows users to select and copy text from the loaded PDF. Touch-based panning and page scrolling are disabled in this mode. Enable text selection using the following code snippet. {% tabs %} {% highlight html tabtitle="Composition API (Standalone)" %} diff --git a/Document-Processing/PDF/PDF-Viewer/vue/magnification.md b/Document-Processing/PDF/PDF-Viewer/vue/magnification.md index c8f149929f..6b32518f18 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/magnification.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/magnification.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Magnification in Vue PDF viewer control -The PDF Viewer includes magnification controls—ZoomIn, ZoomOut, Zoom, FitPage, and FitWidth—in the default toolbar. The magnification controls can be shown or hidden in the toolbar. +The PDF Viewer includes magnification controls—ZoomIn, ZoomOut, Zoom, FitPage, FitWidth, and Auto in the default toolbar. The magnification controls can be shown or hidden in the toolbar. The following examples show how to enable magnification in the PDF Viewer. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/mcp.md b/Document-Processing/PDF/PDF-Viewer/vue/mcp.md index 09ea6b952a..5fb5c5f5ae 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/mcp.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/mcp.md @@ -238,4 +238,4 @@ The MCP Server acts purely as a knowledge bridge, connecting your AI model with ## See also -- [Model Context Protocol](https://modelcontextprotocol.io/docs/2026-07-28/getting-started/intro) +* [Model Context Protocol](https://modelcontextprotocol.io/docs/2026-07-28/getting-started/intro) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md index b743e26af1..067b1bd381 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md @@ -225,4 +225,6 @@ export default { The Print option is not available in the default mobile toolbar. To access print functionality on mobile devices, enable desktop mode by setting `enableDesktopMode` to `true`. Once desktop mode is active, the print option becomes available in the toolbar, allowing users to print PDF documents directly from their mobile device. +N> Ensure the `Print` module is included in the `provide` block of your PDF Viewer configuration. + N> Print functionality on mobile devices typically opens the native print dialog, allowing users to save as PDF, print to wireless printers, or use other platform-specific print options. \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/navigation.md b/Document-Processing/PDF/PDF-Viewer/vue/navigation.md index 6ed02e3386..f30ccec70e 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/navigation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/navigation.md @@ -14,7 +14,7 @@ The Vue PDF Viewer supports several internal and external navigation methods. ## Toolbar page navigation option -The default toolbar of PDF Viewer contains the following navigation options +The default toolbar of the PDF Viewer contains the following navigation options * [**Go to page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation/#gotopage):- Navigates to the specific page of a PDF document. * [**Show next page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation/#gotonextpage):- Navigates to the next page of PDF a document. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-files.md b/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-files.md index ddf8f5e12a..1bb37f007c 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-files.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-files.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Open PDF files in Vue PDF Viewer -This article explains how to open and display PDF files in the Vue PDF Viewer from various sources. In this section, you can find the information about how to open PDF files from URL, database, local file system, and as base64 string. +This article explains how to open and display PDF files in the Vue PDF Viewer from various sources. In this section, you can find the information about how to open PDF files from URL, database, local files , and as base64 string. N> Ensure that the web service is running and reachable before loading documents in the Vue PDF Viewer component. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf.md index 23b95e0635..bca9dc71a1 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf.md @@ -51,7 +51,7 @@ Removing unwanted pages from your document is straight forward: ### Copying PDF pages -Duplicate the pages within your PDF document effortlessly: +Duplicates 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. @@ -370,7 +370,7 @@ The following keyboard shortcuts are available at the organize pages dialog. ![Undo and redo icons in organizer](images/undo-redo.png) -#### Conclusion +## Conclusion With the Organize Pages feature in the PDF Viewer, managing your PDF documents has never been easier. Whether you are adding new content, adjusting page orientation, moving the pages, duplicating the pages, or removing unnecessary pages, this feature provides the tools you need to streamline your document management workflow. Explore these capabilities today and take control of your PDF documents with ease! diff --git a/Document-Processing/PDF/PDF-Viewer/vue/overview.md b/Document-Processing/PDF/PDF-Viewer/vue/overview.md index cd697d8c46..98478a516d 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/overview.md @@ -34,7 +34,7 @@ The [`Vue PDF Viewer`](https://www.syncfusion.com/pdf-viewer-sdk) component is a * [Handwritten signature](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/annotation/signature-annotation) * [Toolbar](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/toolbar) - Built-in toolbar and custom toolbars for common viewer actions. * [Globalization](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/globalization) - Localize the UI. -* Open and display [normal and protected PDF files](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) with AES and RC4 encryption. +* [Open and display](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) normal and protected PDF files with AES and RC4 encryption. ## Supported Web platforms diff --git a/Document-Processing/PDF/PDF-Viewer/vue/quasar.md b/Document-Processing/PDF/PDF-Viewer/vue/quasar.md index c7bc849742..e9030aa51a 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/quasar.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/quasar.md @@ -2,7 +2,7 @@ layout: post title: Getting Started with Quasar Framework and Vue PDF Viewer | Syncfusion description: Check out and learn about getting Started with the Quasar Framework and Vue PDF Viewer Component of Syncfusion Essential JS 2 and more details. -control: Quasar +control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## @@ -87,7 +87,7 @@ N> Refer to the [Themes topic](https://ej2.syncfusion.com/vue/documentation/appe ## Add the Syncfusion® Vue component -Add the PDF Viewer component to your Quasar application. The component is added to the root `src/App.vue` file, which is the default entry point for a Quasar Vite project. +Add the PDF Viewer component to your Quasar application. The component is added to the root `src/App.vue` file, which is the default entry point for a Quasar project. ### Import and register the PDF Viewer diff --git a/Document-Processing/PDF/PDF-Viewer/vue/server-to-standalone.md b/Document-Processing/PDF/PDF-Viewer/vue/server-to-standalone.md index 2dc9eac994..05a6748a93 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/server-to-standalone.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/server-to-standalone.md @@ -47,7 +47,7 @@ When you migrate to standalone mode, the processing location for various feature | **Thumbnail View** | Thumbnail images are generated on the server and transmitted to the client. | Thumbnails are rendered directly in the browser without server involvement. | | **Bookmark View** | Bookmark data is processed on the server and sent to the client for rendering. | Bookmark navigation is managed locally using the Syncfusion EJ2 PDF Viewer. | | **Text Search** | Text search operations are performed on the server, and results are returned to the client. | Text search is executed entirely within the browser. | -| **Print** | The server handles print preparation and formatting, then sends the processed output back to the client for printing. | The server handles print preparation and formatting, then sends the processed output back to the client for printing. | +| **Print** | The server handles print preparation and formatting, then sends the processed output back to the client for printing. | Print is handled locally in the browser using the Syncfusion EJ2 PDF Viewer, without requiring server communication. | | **Toolbar** | Toolbar actions such as zoom, navigation, and export are processed on the server, and results are returned to the client. | Toolbar operations are executed instantly on the client without requiring server communication. | **Key Insight:** In standalone mode, all PDF processing occurs in the browser, eliminating the need for server coordination. Your server only serves the PDF file as a static resource or through a simple API endpoint. @@ -125,7 +125,7 @@ export default { ### Step 3: Add the `resourceUrl` Property -Add the [resourceUrl](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#resouceurl) property to point to the PDFium resource files. You can choose between two approaches: CDN hosting (recommended for quick migration) or local hosting. +Add the [resourceUrl](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#resourceurl) property to point to the PDFium resource files. You can choose between two approaches: CDN hosting (recommended for quick migration) or local hosting. #### Option A: Using CDN (Recommended for Quick Migration) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/text-markup-annotation.md deleted file mode 100644 index 06d7ea5363..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/vue/text-markup-annotation.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -layout: post -title: Text markup annotation in Vue PDF Viewer component | Syncfusion -description: Learn here all about Text markup annotation in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more. -control: Text markup annotation -platform: document-processing -documentation: ug -domainurl: ##DomainURL## ---- - -vue/documentation/pdfviewer/annotation/text-markup-annotation/ \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar.md index 149e5d2062..0b30037f70 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/toolbar.md @@ -676,6 +676,7 @@ export default { {% endtabs %} >Note : Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] + ### Align Property The align property is used to specify the alignment of a toolbar item within the toolbar. @@ -700,6 +701,7 @@ The prefix property is used to set the CSS class or icon that should be added as The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions. When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item. + These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel` in the context of PDF Viewer. When configuring the toolbar using the `ToolbarSettings` property, you can include these properties to customize the appearance and behavior of each toolbar item. N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference. @@ -1241,5 +1243,5 @@ Sample : ## See also -* [Toolbar customization](./how-to/toolbar-customization) +* [Toolbar customization](./toolbar-customization/custom-toolbar) * [Feature Modules](./feature-module) \ No newline at end of file From ca2ba109416492c0ef3b656907f453664126cc7f Mon Sep 17 00:00:00 2001 From: ATCHAYASEKAR-SF4414 Date: Tue, 4 Aug 2026 17:17:49 +0530 Subject: [PATCH 15/70] committed the changes for blazor --- .../NET/Convert-PowerPoint-to-Image-in-Blazor.md | 4 +--- .../NET/Convert-PowerPoint-to-PDF-in-Blazor.md | 6 ++---- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Blazor.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Blazor.md index a82a14b00c..c4dcfddc26 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Blazor.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Blazor.md @@ -34,9 +34,7 @@ Step 1: Create a new C# Blazor Web app project. ![Select the framework in Blazor Web App Server in Visual Studio](Workingwith-Blazor/Blazor_image_Server_Web_Additional_Information.png) -Step 2: Install the `Syncfusion.PresentationRenderer.Net.Core` NuGet package. - -To convert a **PowerPoint presentation to Image in a Web App Server**, Install the [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) NuGet package as reference to the project from [NuGet.org](https://www.nuget.org/). +Step 2: To convert a **PowerPoint presentation to PDF in a Blazor Web App Server**, install the [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) NuGet package from [NuGet.org](https://www.nuget.org/). ![Install Syncfusion.PresentationRenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Nuget_Package_PowerPoint_Presentation_to_PDF.png) diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Blazor.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Blazor.md index c51b22f712..bbf0ea563c 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Blazor.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Blazor.md @@ -8,7 +8,7 @@ documentation: UG # Convert PowerPoint to PDF in Blazor -Syncfusion® PowerPoint is a [.NET Core PowerPoint library](https://www.syncfusion.com/document-sdk/net-powerpoint-library) used to create, read, edit and convert PowerPoint presentation programmatically without **Microsoft PowerPoint** or interop dependencies. Using this library, you can convert a PowerPoint Presentation to PDF in Blazor. +Syncfusion® PowerPoint is a [.NET Core PowerPoint library](https://www.syncfusion.com/document-sdk/net-powerpoint-library) used to create, read, edit and convert PowerPoint presentation programmatically without **Microsoft PowerPoint** or interop dependencies. Using this library, you can **convert a PowerPoint Presentation to PDF in Blazor**. ## Blazor Web App Server Application @@ -34,9 +34,7 @@ Step 1: Create a new C# Blazor Web app project. ![Select the framework in Blazor Web App Server in Visual Studio](Workingwith-Blazor/Blazor_image_Server_Web_Additional_Information.png) -Step 2: Install the `Syncfusion.PresentationRenderer.Net.Core` NuGet package. - -To convert a **PowerPoint presentation to PDF in a Web App Server**, install the [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) NuGet package as reference to the project from [NuGet.org](https://www.nuget.org/). +Step 2: To convert a **PowerPoint presentation to PDF in a Blazor Web App Server**, install the [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) NuGet package from [NuGet.org](https://www.nuget.org/). ![Install Syncfusion.PresentationRenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Nuget_Package_PowerPoint_Presentation_to_PDF.png) From 477458decbea9ec55092e210c88a788be5dfe00c Mon Sep 17 00:00:00 2001 From: Dhanush Sugumaran Date: Tue, 4 Aug 2026 18:13:59 +0530 Subject: [PATCH 16/70] Task(1045705): Resolved the CI failure --- .../PDF/PDF-Viewer/vue/feature-module.md | 2 +- Document-Processing/PDF/PDF-Viewer/vue/mcp.md | 8 +- .../PDF/PDF-Viewer/vue/mobile-toolbar.md | 230 ------------------ .../PDF/PDF-Viewer/vue/navigation.md | 10 +- .../PDF/PDF-Viewer/vue/overview.md | 2 +- 5 files changed, 11 insertions(+), 241 deletions(-) delete mode 100644 Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md diff --git a/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md b/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md index 05c2899cd2..f8e5a58e91 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Feature modules in Vue PDF Viewer Control -The [Vue PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk) exposes functionality as feature modules that can be imported selectively. Import and register only the modules required by an application to keep bundle sizes small and enable specific capabilities on demand. The following feature modules are available: +The Vue PDF Viewer exposes functionality as feature modules that can be imported selectively. Import and register only the modules required by an application to keep bundle sizes small and enable specific capabilities on demand. The following feature modules are available: * **Toolbar**: Built-in toolbar for user interaction. * **Magnification**: Zoom and fit options for improved viewing. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/mcp.md b/Document-Processing/PDF/PDF-Viewer/vue/mcp.md index 5fb5c5f5ae..5045562d77 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/mcp.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/mcp.md @@ -33,13 +33,13 @@ Before beginning, ensure the following prerequisites are met: - An active [Syncfusion® API key](https://syncfusion.com/account/api-key) - A **Vue application** (existing or new); see [Vue PDF Viewer documentation](./getting-started) - An active Syncfusion® license (any of the following): - - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - - [Free Community License](https://www.syncfusion.com/products/communitylicense) - - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) + - Commercial License + - Free Community License + - Free Trial ### Getting Your API Key -Generate the Syncfusion® API key from the [API Key page](https://www.syncfusion.com/account/api-key) and store it in a `.txt` or `.key` file. The saved file will be referenced in the MCP configuration: +Generate the Syncfusion® API key from the API Key page and store it in a `.txt` or `.key` file. The saved file will be referenced in the MCP configuration: ````json "env": { diff --git a/Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md deleted file mode 100644 index 067b1bd381..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -layout: post -title: Mobile Toolbar Interface in Vue PDF Viewer component | Syncfusion -description: Learn All About the Mobile Toolbar Interface in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more. -control: Mobile Toolbar Interface -platform: document-processing -documentation: ug -domainurl: ##DomainURL## ---- -# Mobile toolbar interface in Vue PDF Viewer - -The Vue PDF Viewer provides a mobile-optimized toolbar interface for viewing, searching, annotating, and managing PDF documents on mobile devices. The toolbar includes Syncfusion® tools for search, download, bookmarking, annotation, and page organization. For advanced use cases, the desktop toolbar can be enabled on mobile devices to access additional features and controls. - -## Mobile mode toolbar configuration - -In mobile mode, the toolbar is optimized for small screens, presenting users with the most common actions for PDF interaction. The toolbar displays only the essential features to maximize screen real estate while maintaining usability. - -![Mobile toolbar with primary PDF interaction options](images/mobileToolbar.png) - -### Main toolbar options - -The following toolbar options are available in mobile mode: - -**OpenOption:** Tap to load a PDF document into the viewer. - -**SearchOption:** Access the search functionality to find text within the document. - -![Search bar displayed for finding text within a PDF](images/searchOption.png) - -**UndoRedoTool:** Quickly undo or redo annotation changes. - -**OrganizePagesTool:** Enable page organization features to reorder, delete, or rotate document pages. - -![Page organization interface for modifying PDF pages](images/organizePages.png) - -**AnnotationEditTool:** Activate annotation editing to add or modify annotations on the PDF. - -![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 displayed at the bottom of the viewer for easy access. - -### More options menu - -The "more options" menu provides additional actions: - -**DownloadOption:** Tap to download the currently open PDF document to the device. - -**BookmarkOption:** View and navigate to bookmarks within the document. - -![More options menu showing additional actions like download and bookmark](images/more-options.png) - -## Enable desktop mode on mobile devices - -By default, the PDF Viewer automatically detects the device type and displays the optimized toolbar layout. For applications that require the full desktop toolbar experience on mobile devices, enable desktop mode using the `enableDesktopMode` property. This provides access to all available toolbar actions and controls typically reserved for desktop platforms. - - -### Steps to enable desktop mode - -**Step 1**: Set the `enableDesktopMode` property to `true` in your PDF Viewer configuration. - -**Step 2**: The mobile toolbar is replaced with the desktop toolbar layout, providing access to additional actions and controls. - -{% tabs %} -{% highlight html tabtitle="Standalone" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - -{% endhighlight %} -{% endtabs %} - -## Optimize touch scrolling in desktop mode - -When using desktop mode on mobile devices, text selection may interfere with natural touch scrolling. To ensure smooth document scrolling with touch gestures, disable text selection by setting `enableTextSelection` to `false`. This allows users to scroll documents naturally without accidentally triggering text selection. - -{% tabs %} -{% highlight html tabtitle="Standalone" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - -{% endhighlight %} -{% endtabs %} - -## Access print functionality on mobile - -The Print option is not available in the default mobile toolbar. To access print functionality on mobile devices, enable desktop mode by setting `enableDesktopMode` to `true`. Once desktop mode is active, the print option becomes available in the toolbar, allowing users to print PDF documents directly from their mobile device. - -N> Ensure the `Print` module is included in the `provide` block of your PDF Viewer configuration. - -N> Print functionality on mobile devices typically opens the native print dialog, allowing users to save as PDF, print to wireless printers, or use other platform-specific print options. \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/navigation.md b/Document-Processing/PDF/PDF-Viewer/vue/navigation.md index f30ccec70e..edd8876f6e 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/navigation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/navigation.md @@ -16,11 +16,11 @@ The Vue PDF Viewer supports several internal and external navigation methods. The default toolbar of the PDF Viewer contains the following navigation options -* [**Go to page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation/#gotopage):- Navigates to the specific page of a PDF document. -* [**Show next page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation/#gotonextpage):- Navigates to the next page of PDF a document. -* [**Show previous page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation/#gotopreviouspage):- Navigates to the previous page of a PDF document. -* [**Show first page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation/#gotofirstpage):- Navigates to the first page of a PDF document. -* [**Show last page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation/#gotolastpage):- Navigates to the last page of a PDF document. +* [**Go to page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation#gotopage):- Navigates to the specific page of a PDF document. +* [**Show next page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation#gotonextpage):- Navigates to the next page of PDF a document. +* [**Show previous page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation#gotopreviouspage):- Navigates to the previous page of a PDF document. +* [**Show first page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation#gotofirstpage):- Navigates to the first page of a PDF document. +* [**Show last page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation#gotolastpage):- Navigates to the last page of a PDF document. You can enable or disable page navigation in the PDF Viewer using the following code snippet. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/overview.md b/Document-Processing/PDF/PDF-Viewer/vue/overview.md index 98478a516d..0c320f27c0 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/overview.md @@ -33,7 +33,7 @@ The [`Vue PDF Viewer`](https://www.syncfusion.com/pdf-viewer-sdk) component is a * [Form designer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/forms/form-designer) * [Handwritten signature](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/annotation/signature-annotation) * [Toolbar](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/toolbar) - Built-in toolbar and custom toolbars for common viewer actions. -* [Globalization](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/globalization) - Localize the UI. +* [Globalization](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/localization/default-language) - Localize the UI. * [Open and display](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) normal and protected PDF files with AES and RC4 encryption. ## Supported Web platforms From 74ad90e32c29daf3039e3472d7e30911f88afd12 Mon Sep 17 00:00:00 2001 From: Dhanush Sugumaran Date: Tue, 4 Aug 2026 18:24:18 +0530 Subject: [PATCH 17/70] Task(1045705): Revamped the event page in the Vue platform --- Document-Processing/PDF/PDF-Viewer/vue/event.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/event.md b/Document-Processing/PDF/PDF-Viewer/vue/event.md index 5a86f6c798..8a9a222421 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/event.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/event.md @@ -3896,6 +3896,6 @@ export default { ## See also -- [Annotation events](./annotations/annotation-event) -- [Form field events](./form-designer/form-field-events) -- [Organize PDF events](./organize-pdf/organize-pdf-events) +- [Annotation events](./annotation/annotation-event) +- [Form field events](./forms/form-field-events) +- [Organize PDF events](./organize-pages/events) From 060cfb4e3d61f32eef3de806c89fd1194fc3717b Mon Sep 17 00:00:00 2001 From: Dhanush Sugumaran Date: Tue, 4 Aug 2026 18:27:52 +0530 Subject: [PATCH 18/70] Task(1045705): Remove the duplicate file --- .../PDF/PDF-Viewer/vue/organize-pdf.md | 377 ------------------ 1 file changed, 377 deletions(-) delete mode 100644 Document-Processing/PDF/PDF-Viewer/vue/organize-pdf.md diff --git a/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf.md deleted file mode 100644 index bca9dc71a1..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -layout: post -title: Organize Pages in Vue PDF Viewer component | Syncfusion -description: Learn here all about Organize Pages in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more. -control: PDF Viewer -platform: document-processing -documentation: ug -domainurl: ##DomainURL## ---- - -# Organize Pages in Vue PDF Viewer component - -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. - -## Getting started - -To access the organize pages feature, simply open the PDF document in the PDF Viewer and navigate to the left vertical toolbar. Look for the `Organize Pages` option to begin utilizing these capabilities. - -![Organize pages toolbar option](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. - -### Rotating PDF pages - -You can adjust the orientation of PDF pages to ensure proper alignment. The rotate icon offers the following options: - -* `Rotate clockwise`: Rotate the selected pages 90 degrees clockwise. -* `Rotate counter-clockwise`: Rotate the selected pages 90 degrees counter-clockwise. - -### Rearranging PDF pages - -You can easily change the sequence of pages within your document using the drag and drop method: - -* `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order. - -![Rotate and rearrange pages animation](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. - -### 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. - -### Copying PDF pages - -Duplicates 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. - -![Insert, delete, and copy pages animation](images/insert-delete-copy.gif) - -### Importing a PDF Document - -Seamlessly import a PDF document into your existing 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 PDF into document animation](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 pages thumbnail vie](images/selectall.png) - -### Zooming Page Thumbnails - -Adjust the size of page thumbnails within the organizer panel for better visibility and precision when editing. The zoom functionality allows you to: - -* Increase or decrease the size of page thumbnails using the zoom slider -* See more details on pages when zoomed in -* View more pages simultaneously when zoomed out - -This feature is especially useful when working with documents containing complex layouts or small details that need careful examination during organization. - -![Thumbnail zoom slider in organizer](./images/zoomOrganize.png) - -### Real-time updates - -Witness instant changes in page organization reflected within the PDF Viewer. Simply click the **Save** button to preserve your modifications. - -### Save As 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. - -## APIs 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. - -{% tabs %} -{% highlight html tabtitle="Standalone" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - -{% endhighlight %} -{% endtabs %} - -**isPageOrganizerOpen:** This API determines whether the page organizer dialog will be displayed automatically when a document is loaded into the PDF Viewer. By default, it is set to `false`, meaning the dialog is not displayed initially. - -{% tabs %} -{% highlight html tabtitle="Standalone" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - -{% endhighlight %} -{% endtabs %} - -**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, copying, importing and rearranging pages, as well as configuring thumbnail zoom settings. By default, all these actions are enabled and standard zoom settings are applied. - -{% tabs %} -{% highlight html tabtitle="Standalone" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - -{% endhighlight %} -{% endtabs %} - -**openPageOrganizer:** This API opens the page organizer dialog within the PDF Viewer, providing access to manage PDF pages. - -```html - -``` - -```ts -openPageOrganizer: function () { - var viewer = this.$refs.pdfviewer.ej2Instances; - // Open Page Organizer panel. - viewer.pageOrganizer.openPageOrganizer(); -} -``` - -**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. - -```html - -``` - -```ts -closePageOrganizer: function () { - var viewer = this.$refs.pdfviewer.ej2Instances; - // Close Page Organizer panel. - viewer.pageOrganizer.closePageOrganizer(); -} -``` - -## Keyboard shortcuts - -The following keyboard shortcuts are available at the organize pages dialog. - -* **Ctrl+Z** : Undo the last action performed. -* **Ctrl+Y** : Redo the action that was undone -* **Ctrl+Scroll** : Zoom in and zoom out page thumbnails for better visibility. - -![Undo and redo icons 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! - -[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to/Organize%20pdf) \ No newline at end of file From ae331d9617393ab84d39e1b7c78b8fce9a6822af Mon Sep 17 00:00:00 2001 From: Dhanush Sugumaran Date: Tue, 4 Aug 2026 19:26:49 +0530 Subject: [PATCH 19/70] Task(1045705): Resolved the CI failure --- Document-Processing/PDF/PDF-Viewer/vue/event.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/event.md b/Document-Processing/PDF/PDF-Viewer/vue/event.md index 8a9a222421..de64b18155 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/event.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/event.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Events in Vue PDF Viewer -The PDF Viewer component triggers events throughout its lifecycle, enabling you to respond to user interactions and document state changes. These events are organized into categories: **Component Lifecycle** (created, resourcesLoaded), **Navigation** (pageChange, pageClick), **Document Operations** (documentLoad, documentLoadFailed, downloadStart, downloadEnd, printStart, printEnd), **User Interactions** (toolbarClick, bookmarkClick, thumbnailClick), **Text Operations** (textSelectionStart, textSelectionEnd, textSearchStart, textSearchComplete), **Annotations** (commentAdd, commentEdit, commentDelete), **Forms** (buttonFieldClick, validateFormFields), and **Customization** (customContextMenuBeforeOpen, customContextMenuSelect). Subscribe to events using the `@eventName` syntax to execute custom code when specific actions occur. +The PDF Viewer component triggers events throughout its life cycle, enabling you to respond to user interactions and document state changes. These events are organized into categories: **Component Life cycle** (created, resourcesLoaded), **Navigation** (pageChange, pageClick), **Document Operations** (documentLoad, documentLoadFailed, downloadStart, downloadEnd, printStart, printEnd), **User Interactions** (toolbarClick, bookmarkClick, thumbnailClick), **Text Operations** (textSelectionStart, textSelectionEnd, textSearchStart, textSearchComplete), **Annotations** (commentAdd, commentEdit, commentDelete), **Forms** (buttonFieldClick, validateFormFields), and **Customization** (customContextMenuBeforeOpen, customContextMenuSelect). Subscribe to events using the `@eventName` syntax to execute custom code when specific actions occur. ## Commonly used events From 9fed3b967aa84e7966ded2be003db858889da6b1 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 4 Aug 2026 21:48:35 +0530 Subject: [PATCH 20/70] Resolved the CI errors --- .../PDF/PDF-Viewer/javascript-es6/event.md | 2 +- .../save-pdf-file/to-amazon-s3.md | 2 +- .../save-pdf-file/to-azure-blob-storage.md | 2 +- .../to-box-cloud-file-storage.md | 2 +- ...ocker-image-in-azure-kubernetes-service.md | 2 +- .../pdfviewer-server-docker-image-overview.md | 4 +- .../toolbar-customization/custom-toolbar.md | 82 +++++++++---------- 7 files changed, 48 insertions(+), 48 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md index 1ecff9ad67..eae3471e0e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Events in TypeScript PDF Viewer -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 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 following table lists commonly used events supported by the PDF Viewer component: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md index 664667dc5e..df2d2729be 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md @@ -29,7 +29,7 @@ import * as AWS from 'aws-sdk'; 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 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. +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 (Cognition, STS) or perform uploads via a trusted server. ```typescript AWS.config.update({ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md index f55830e8e7..d1cb5ef700 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md @@ -74,7 +74,7 @@ function saveDocument() { }; ``` -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`. +N> Install the Azure Storage Blob client package for browser use: `npm install @azure/storage-blob`. For server-side operations use `dot net 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). diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md index 4c77cad66d..e03c2045e1 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md @@ -134,7 +134,7 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> Install the Box .NET SDK in the web service project: `dotnet add package Box.V2`. +N> Install the Box .NET SDK in the web service project: `dot net add package Box.V2`. 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. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md index 9be3049885..2f4eb46ef6 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md @@ -20,7 +20,7 @@ Host the Syncfusion PDF Viewer server container on Azure Kubernetes Service (AKS az login ``` -Ensure the AKS nodes can pull the `syncfusion/pdfviewerserver:latest` image from Docker Hub or from a private registry mirror if outbound internet access is restricted. +Ensure the AKS nodes can pull the `syncfusion/pdfviewer server:latest` image from Docker Hub or from a private registry mirror if outbound internet access is restricted. ## Deploy the PDF Viewer server diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md index ab8e9c79a2..b04e3cc50b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md @@ -10,11 +10,11 @@ documentation: ug The Syncfusion PDF Viewer component enables viewing, printing, form filling, and annotating PDF files in web applications. The client component requires a server-side Web API to process and render PDF content. -Use the PDF Viewer server Docker image to host this backend quickly in containerized environments. The container exposes a REST API that the TypeScript PDF Viewer client calls through its `serviceUrl` value. +Use the PDF Viewer server Docker image to host this back end quickly in containerized environments. The container exposes a REST API that the TypeScript PDF Viewer client calls through its `serviceUrl` value. PDF Viewer is a commercial product and requires a valid license in production environments. Request a license or trial key from the [Syncfusion licensing portal](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key). -PDF Viewer is available for JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor. Choose the Docker image when you need a lightweight deployment option or when multiple clients share the same backend. +PDF Viewer is available for JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor. Choose the Docker image when you need a lightweight deployment option or when multiple clients share the same back end. ## Prerequisites diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md index 444072a48d..7118121fc1 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md @@ -125,12 +125,12 @@ Add Syncfusion EJ2 Toolbar components to perform primary actions like Open, Prev items: [ { prefixIcon: 'e-pv-open-document', tooltipText: 'Open', id: 'openButton', click: openDocument.bind(this) }, { prefixIcon: 'e-pv-bookmark-icon', tooltipText: 'Bookmark', id: 'bookmarkButton', click: bookmarkClicked }, - // tslint:disable-next-line:max-line-length + // ts lint:disable-next-line:max-line-length { prefixIcon: 'e-pv-previous-page-navigation-icon', id: 'previousPage', tooltipText: 'Previous Page', align: 'Center', click: previousClicked.bind(this) }, - // tslint:disable-next-line:max-line-length + // ts lint:disable-next-line:max-line-length { prefixIcon: 'e-pv-next-page-navigation-icon', id: 'nextPage', tooltipText: 'Next Page', align: 'Center', click: nextClicked.bind(this) }, { template: inputTemplate, tooltipText: 'Page Number', align: 'Center' }, - { template: ele, tooltipText: 'Page Number', align: 'Center' }, + { template: elem, tooltipText: 'Page Number', align: 'Center' }, { prefixIcon: 'e-pv-search-icon', tooltipText: 'Text Search', align: 'Right', click: searchClicked.bind(this) }, { prefixIcon: 'e-pv-print-document-icon', tooltipText: 'Print', align: 'Right', click: printClicked.bind(this) }, { prefixIcon: 'e-pv-download-document-icon', tooltipText: 'Download', align: 'Right', click: downloadClicked.bind(this) } @@ -353,7 +353,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkVie */ let inputTemplate: string = '
'; -let ele: string = '
of 0
'; +let elem: string = '
of 0
'; let isBookmarkOpen: boolean = false; let isBookmarkClick: boolean = false; let isTextSearchBoxOpen: boolean = false; @@ -389,12 +389,12 @@ function bookmarkClicked(): void { { dataSource: bookmarks, id: 'Id', - parentID: 'Pid', + parentID: 'Pi', text: 'Title', hasChildren: 'HasChild', }, nodeSelected: nodeClick }); - treeObj.appendTo('#bookmarkview'); + treeObj.appendTo('#bookmarkView'); bookmarkPopup.show(); isBookmarkOpen = true; isBookmarkClick = true; @@ -463,7 +463,7 @@ function onCurrentPageBoxKeypress(event: KeyboardEvent): boolean { event.preventDefault(); return false; } else { - // tslint:disable-next-line:radix + // ts lint:disable-next-line:radix let currentPageNumber: number = parseInt((currentPageBox as HTMLInputElement).value); if (event.which === 13) { if (currentPageNumber > 0 && currentPageNumber <= viewer.pageCount) { @@ -482,22 +482,22 @@ function onCurrentPageBoxClicked(): void { } function readFile(args: any): void { - // tslint:disable-next-line - let upoadedFiles: any = args.target.files; + // ts lint:disable-next-line + let uploadedFiles: any = args.target.files; if (args.target.files[0] !== null) { - let uploadedFile: File = upoadedFiles[0]; + let uploadedFile: File = uploadedFiles[0]; if (uploadedFile) { let reader: FileReader = new FileReader(); - let filename: string = upoadedFiles[0].name; + let filename: string = uploadedFiles[0].name; reader.readAsDataURL(uploadedFile); - // tslint:disable-next-line + // ts lint:disable-next-line reader.onload = (e: any): void => { let uploadedFileUrl: string = e.currentTarget.result; viewer.load(uploadedFileUrl, null); viewer.fileName = filename; (currentPageBox as HTMLInputElement).value = '1'; document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount; - document.getElementById('bookmarkview').innerHTML = ''; + document.getElementById('bookmarkView').innerHTML = ''; isBookmarkOpen = false; }; } @@ -540,14 +540,14 @@ function updateZoomButtons(): void { function nodeClick(args: NodeSelectEventArgs): boolean { let bookmarksDetails: any = viewer.bookmark.getBookmarks(); let bookmarksDestination: any = bookmarksDetails.bookmarksDestination; - let bookid: number = Number(args.nodeData.id); - let pageIndex: number = bookmarksDestination.bookMarkDestination[bookid].PageIndex; - let Y: number = bookmarksDestination.bookMarkDestination[bookid].Y; + let bookId: number = Number(args.nodeData.id); + let pageIndex: number = bookmarksDestination.bookMarkDestination[bookId].PageIndex; + let Y: number = bookmarksDestination.bookMarkDestination[bookId].Y; viewer.bookmark.goToBookmark(pageIndex, Y); return false; } -function searchInputKeypressed(event: KeyboardEvent): void { +function searchInputKeypress(event: KeyboardEvent): void { enablePrevButton(true); enableNextButton(true); if (event.which === 13) { @@ -628,12 +628,12 @@ function updateSearchInputIcon(isEnable: boolean): void { items: [ { prefixIcon: 'e-pv-open-document', tooltipText: 'Open', id: 'openButton', click: openDocument.bind(this) }, { prefixIcon: 'e-pv-bookmark-icon', tooltipText: 'Bookmark', id: 'bookmarkButton', click: bookmarkClicked }, - // tslint:disable-next-line:max-line-length + // ts lint:disable-next-line:max-line-length { prefixIcon: 'e-pv-previous-page-navigation-icon', id: 'previousPage', tooltipText: 'Previous Page', align: 'Center', click: previousClicked.bind(this) }, - // tslint:disable-next-line:max-line-length + // ts lint:disable-next-line:max-line-length { prefixIcon: 'e-pv-next-page-navigation-icon', id: 'nextPage', tooltipText: 'Next Page', align: 'Center', click: nextClicked.bind(this) }, { template: inputTemplate, tooltipText: 'Page Number', align: 'Center' }, - { template: ele, tooltipText: 'Page Number', align: 'Center' }, + { template: elem, tooltipText: 'Page Number', align: 'Center' }, { prefixIcon: 'e-pv-search-icon', tooltipText: 'Text Search', align: 'Right', click: searchClicked.bind(this) }, { prefixIcon: 'e-pv-print-document-icon', tooltipText: 'Print', align: 'Right', click: printClicked.bind(this) }, { prefixIcon: 'e-pv-download-document-icon', tooltipText: 'Download', align: 'Right', click: downloadClicked.bind(this) } @@ -660,7 +660,7 @@ function updateSearchInputIcon(isEnable: boolean): void { searchInput = document.getElementById('searchInput'); bookmarkPopup = new Dialog({ showCloseIcon: true, header: 'Bookmarks', closeOnEscape: false, isModal: false, target: document.getElementById('pdfViewer'), - content: '
', + content: '
', buttons: [{ buttonModel: {}, }], position: { X: 'left', Y: 'top' }, cssClass: 'e-bookmark-popup', beforeClose: (): void => { @@ -698,7 +698,7 @@ function updateSearchInputIcon(isEnable: boolean): void { searchButton = document.getElementById('searchBtn'); searchInput.addEventListener('focus', () => { searchInput.parentElement.classList.add('e-input-focus'); }); searchInput.addEventListener('blur', () => { searchInput.parentElement.classList.remove('e-input-focus'); }); - searchInput.addEventListener('keypress', searchInputKeypressed); + searchInput.addEventListener('keypress', searchInputKeypress); document.getElementById('previousSearch').addEventListener('click', previousSearchClicked); document.getElementById('nextSearch').addEventListener('click', nextSearchClicked); currentPageBox.addEventListener('keypress', onCurrentPageBoxKeypress); @@ -729,7 +729,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkVie */ let inputTemplate: string = '
'; -let ele: string = '
of 0
'; +let elem: string = '
of 0
'; let isBookmarkOpen: boolean = false; let isBookmarkClick: boolean = false; let isTextSearchBoxOpen: boolean = false; @@ -765,12 +765,12 @@ function bookmarkClicked(): void { { dataSource: bookmarks, id: 'Id', - parentID: 'Pid', + parentID: 'Pi', text: 'Title', hasChildren: 'HasChild', }, nodeSelected: nodeClick }); - treeObj.appendTo('#bookmarkview'); + treeObj.appendTo('#bookmarkView'); bookmarkPopup.show(); isBookmarkOpen = true; isBookmarkClick = true; @@ -839,7 +839,7 @@ function onCurrentPageBoxKeypress(event: KeyboardEvent): boolean { event.preventDefault(); return false; } else { - // tslint:disable-next-line:radix + // ts lint:disable-next-line:radix let currentPageNumber: number = parseInt((currentPageBox as HTMLInputElement).value); if (event.which === 13) { if (currentPageNumber > 0 && currentPageNumber <= viewer.pageCount) { @@ -858,22 +858,22 @@ function onCurrentPageBoxClicked(): void { } function readFile(args: any): void { - // tslint:disable-next-line - let upoadedFiles: any = args.target.files; + // ts lint:disable-next-line + let uploadedFiles: any = args.target.files; if (args.target.files[0] !== null) { - let uploadedFile: File = upoadedFiles[0]; + let uploadedFile: File = uploadedFiles[0]; if (uploadedFile) { let reader: FileReader = new FileReader(); - let filename: string = upoadedFiles[0].name; + let filename: string = uploadedFiles[0].name; reader.readAsDataURL(uploadedFile); - // tslint:disable-next-line + // ts lint:disable-next-line reader.onload = (e: any): void => { let uploadedFileUrl: string = e.currentTarget.result; viewer.load(uploadedFileUrl, null); viewer.fileName = filename; (currentPageBox as HTMLInputElement).value = '1'; document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount; - document.getElementById('bookmarkview').innerHTML = ''; + document.getElementById('bookmarkView').innerHTML = ''; isBookmarkOpen = false; }; } @@ -916,14 +916,14 @@ function updateZoomButtons(): void { function nodeClick(args: NodeSelectEventArgs): boolean { let bookmarksDetails: any = viewer.bookmark.getBookmarks(); let bookmarksDestination: any = bookmarksDetails.bookmarksDestination; - let bookid: number = Number(args.nodeData.id); - let pageIndex: number = bookmarksDestination.bookMarkDestination[bookid].PageIndex; - let Y: number = bookmarksDestination.bookMarkDestination[bookid].Y; + let bookId: number = Number(args.nodeData.id); + let pageIndex: number = bookmarksDestination.bookMarkDestination[bookId].PageIndex; + let Y: number = bookmarksDestination.bookMarkDestination[bookId].Y; viewer.bookmark.goToBookmark(pageIndex, Y); return false; } -function searchInputKeypressed(event: KeyboardEvent): void { +function searchInputKeypress(event: KeyboardEvent): void { enablePrevButton(true); enableNextButton(true); if (event.which === 13) { @@ -1004,12 +1004,12 @@ function updateSearchInputIcon(isEnable: boolean): void { items: [ { prefixIcon: 'e-pv-open-document', tooltipText: 'Open', id: 'openButton', click: openDocument.bind(this) }, { prefixIcon: 'e-pv-bookmark-icon', tooltipText: 'Bookmark', id: 'bookmarkButton', click: bookmarkClicked }, - // tslint:disable-next-line:max-line-length + // ts lint:disable-next-line:max-line-length { prefixIcon: 'e-pv-previous-page-navigation-icon', id: 'previousPage', tooltipText: 'Previous Page', align: 'Center', click: previousClicked.bind(this) }, - // tslint:disable-next-line:max-line-length + // ts lint:disable-next-line:max-line-length { prefixIcon: 'e-pv-next-page-navigation-icon', id: 'nextPage', tooltipText: 'Next Page', align: 'Center', click: nextClicked.bind(this) }, { template: inputTemplate, tooltipText: 'Page Number', align: 'Center' }, - { template: ele, tooltipText: 'Page Number', align: 'Center' }, + { template: elem, tooltipText: 'Page Number', align: 'Center' }, { prefixIcon: 'e-pv-search-icon', tooltipText: 'Text Search', align: 'Right', click: searchClicked.bind(this) }, { prefixIcon: 'e-pv-print-document-icon', tooltipText: 'Print', align: 'Right', click: printClicked.bind(this) }, { prefixIcon: 'e-pv-download-document-icon', tooltipText: 'Download', align: 'Right', click: downloadClicked.bind(this) } @@ -1036,7 +1036,7 @@ function updateSearchInputIcon(isEnable: boolean): void { searchInput = document.getElementById('searchInput'); bookmarkPopup = new Dialog({ showCloseIcon: true, header: 'Bookmarks', closeOnEscape: false, isModal: false, target: document.getElementById('pdfViewer'), - content: '
', + content: '
', buttons: [{ buttonModel: {}, }], position: { X: 'left', Y: 'top' }, cssClass: 'e-bookmark-popup', beforeClose: (): void => { @@ -1074,7 +1074,7 @@ function updateSearchInputIcon(isEnable: boolean): void { searchButton = document.getElementById('searchBtn'); searchInput.addEventListener('focus', () => { searchInput.parentElement.classList.add('e-input-focus'); }); searchInput.addEventListener('blur', () => { searchInput.parentElement.classList.remove('e-input-focus'); }); - searchInput.addEventListener('keypress', searchInputKeypressed); + searchInput.addEventListener('keypress', searchInputKeypress); document.getElementById('previousSearch').addEventListener('click', previousSearchClicked); document.getElementById('nextSearch').addEventListener('click', nextSearchClicked); currentPageBox.addEventListener('keypress', onCurrentPageBoxKeypress); From e37b772235641346e26df24e3f3d603d1feb3800 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Wed, 5 Aug 2026 10:36:04 +0530 Subject: [PATCH 21/70] Resolved the gif issues and file path errors --- Document-Processing-toc.html | 1 + .../PDF/PDF-Viewer/javascript-es6/organize-pdf.md | 2 -- .../javascript-es6/save-pdf-file/to-azure-blob-storage.md | 2 +- .../save-pdf-file/to-box-cloud-file-storage.md | 4 ++-- .../toolbar-customization/custom-toolbar.md | 8 ++++---- 5 files changed, 8 insertions(+), 9 deletions(-) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 9e04561dfc..c2e36ccf93 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -2310,6 +2310,7 @@
  • Download
  • Event
  • Text Selection
    • +
  • Globalization
  • Localization
    • Default Language
      • diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md index 61a3036f02..9b198e0ec7 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md @@ -41,8 +41,6 @@ Insert blank pages to the left or right of a selected page using the respective Duplicate pages by selecting thumbnails and using the copy action; duplicates are inserted to the right of the selected page. -![Insert, delete, and copy page actions shown in the organizer](./images/insert-delete-copy.gif) - ### Copying PDF pages Duplicate pages by selecting thumbnails and using the copy action; duplicates are inserted to the right of the selected page. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md index d1cb5ef700..0d76aa6d60 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md @@ -1,6 +1,6 @@ --- layout: post -title: Save PDF Files to Azure Blob Storage in Syncfusion TypeScript PDF Viewer +title: Save PDFs to Azure Blob Storage in Syncfusion TS PDF Viewer description: Learn how to save PDF files to Azure Blob Storage using the Syncfusion TypeScript PDF Viewer component in standalone and server-backed configurations. platform: document-processing control: PDF Viewer diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md index e03c2045e1..b9643469ad 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md @@ -1,13 +1,13 @@ --- layout: post -title: Save PDF files to Box cloud storage in TypeScript PDF Viewer | Syncfusion +title: Save PDFs to Box Storage in Syncfusion TypeScript PDF Viewer description: Learn how to save PDF files to Box cloud storage using the Syncfusion TypeScript PDF Viewer component with a server-backed web service. platform: document-processing control: PDF Viewer documentation: ug --- -# Save PDF Files to Box Cloud Storage in Syncfusion PDF Viewer +# Save PDF Files to Box Storage in Syncfusion PDF Viewer The TypeScript 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. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md index 7118121fc1..9e17960765 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md @@ -680,7 +680,7 @@ function updateSearchInputIcon(isEnable: boolean): void { let previousSearch: Button = new Button({ iconCss: 'e-pv-previous-search' }); previousSearch.appendTo('#previousSearch'); - let nextSearch: Button = new Button({ iconCss: 'e-pv-next-search-btn' }); + let nextSearch: Button = new Button({ iconCss: 'e-pv-next-search-button' }); nextSearch.appendTo('#nextSearch'); let matchCaseCheck: CheckBox = new CheckBox({ label: 'Match case', change: checkBoxChanged }); @@ -695,7 +695,7 @@ function updateSearchInputIcon(isEnable: boolean): void { document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount; updatePageNavigation(); }; - searchButton = document.getElementById('searchBtn'); + searchButton = document.getElementById('searchButton'); searchInput.addEventListener('focus', () => { searchInput.parentElement.classList.add('e-input-focus'); }); searchInput.addEventListener('blur', () => { searchInput.parentElement.classList.remove('e-input-focus'); }); searchInput.addEventListener('keypress', searchInputKeypress); @@ -1056,7 +1056,7 @@ function updateSearchInputIcon(isEnable: boolean): void { let previousSearch: Button = new Button({ iconCss: 'e-pv-previous-search' }); previousSearch.appendTo('#previousSearch'); - let nextSearch: Button = new Button({ iconCss: 'e-pv-next-search-btn' }); + let nextSearch: Button = new Button({ iconCss: 'e-pv-next-search-button' }); nextSearch.appendTo('#nextSearch'); let matchCaseCheck: CheckBox = new CheckBox({ label: 'Match case', change: checkBoxChanged }); @@ -1071,7 +1071,7 @@ function updateSearchInputIcon(isEnable: boolean): void { document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount; updatePageNavigation(); }; - searchButton = document.getElementById('searchBtn'); + searchButton = document.getElementById('searchButton'); searchInput.addEventListener('focus', () => { searchInput.parentElement.classList.add('e-input-focus'); }); searchInput.addEventListener('blur', () => { searchInput.parentElement.classList.remove('e-input-focus'); }); searchInput.addEventListener('keypress', searchInputKeypress); From 8c9a30b350e2c3bf42763ab9ed1726d65480539c Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Wed, 5 Aug 2026 11:50:48 +0530 Subject: [PATCH 22/70] Resolved the CI errors --- .../javascript-es6/save-pdf-file/to-google-cloud-storage.md | 2 +- .../javascript-es6/toolbar-customization/custom-toolbar.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md index a8a1908f3c..1d2670a2a3 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md @@ -7,7 +7,7 @@ control: PDF Viewer documentation: ug --- -# Save PDF Files to Google Cloud Storage in Syncfusion PDF Viewer +# Save and Manage PDFs in Google Cloud Storage To save a PDF file to Google Cloud Storage, follow the steps below. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md index 9e17960765..6feea658de 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md @@ -490,7 +490,7 @@ function readFile(args: any): void { let reader: FileReader = new FileReader(); let filename: string = uploadedFiles[0].name; reader.readAsDataURL(uploadedFile); - // ts lint:disable-next-line + // tslint:disable-next-line reader.onload = (e: any): void => { let uploadedFileUrl: string = e.currentTarget.result; viewer.load(uploadedFileUrl, null); @@ -866,7 +866,7 @@ function readFile(args: any): void { let reader: FileReader = new FileReader(); let filename: string = uploadedFiles[0].name; reader.readAsDataURL(uploadedFile); - // ts lint:disable-next-line + // tslint:disable-next-line reader.onload = (e: any): void => { let uploadedFileUrl: string = e.currentTarget.result; viewer.load(uploadedFileUrl, null); From 5299b85d5e8fc1b2818b11f23bdcf502a03ac111 Mon Sep 17 00:00:00 2001 From: ATCHAYASEKAR-SF4414 Date: Wed, 5 Aug 2026 12:44:29 +0530 Subject: [PATCH 23/70] modified the filestream code snippet in the fallback fonts --- .../Fallback-Fonts-in-PPTXtoPDF-Conversion.md | 45 +++++++------------ 1 file changed, 15 insertions(+), 30 deletions(-) diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Fallback-Fonts-in-PPTXtoPDF-Conversion.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Fallback-Fonts-in-PPTXtoPDF-Conversion.md index 993badc158..cf2a926fe3 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Fallback-Fonts-in-PPTXtoPDF-Conversion.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Fallback-Fonts-in-PPTXtoPDF-Conversion.md @@ -188,36 +188,21 @@ The following code example demonstrates how a user can add fallback fonts for Sy {% tabs %} {% highlight C# tabtitle="C# [Cross-platform]" %} -//Load the PowerPoint presentation into stream. -using (FileStream fileStreamInput = new FileStream("Template.pptx", FileMode.Open, FileAccess.Read)) -{ - //Open the existing PowerPoint presentation with loaded stream. - using (IPresentation pptxDoc = Presentation.Open(fileStreamInput)) - { - //Adds fallback font for basic symbols like bullet characters. - pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Symbols, "Segoe UI Symbol, Arial Unicode MS, Wingdings"); - //Adds fallback font for mathematics symbols. - pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Mathematics, "Cambria Math, Noto Sans Math, Segoe UI Symbol, Arial Unicode MS"); - //Adds fallback font for emojis. - pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Emoji, "Segoe UI Emoji, Noto Color Emoji, Arial Unicode MS"); - //Create the MemoryStream to save the converted PDF. - using (MemoryStream pdfStream = new MemoryStream()) - { - //Convert the PowerPoint document to PDF document. - using (PdfDocument pdfDocument = PresentationToPdfConverter.Convert(pptxDoc)) - { - //Save the converted PDF document to MemoryStream. - pdfDocument.Save(pdfStream); - pdfStream.Position = 0; - } - //Create the output PDF file stream. - using (FileStream fileStreamOutput = File.Create("Output.pdf")) - { - //Copy the converted PDF stream into created output PDF stream. - pdfStream.CopyTo(fileStreamOutput); - } - } - } +//Open the existing PowerPoint presentation. +using (IPresentation pptxDoc = Presentation.Open(@"Data/Template.pptx")) + { + //Adds fallback font for basic symbols like bullet characters. + pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Symbols, "Segoe UI Symbol, Arial Unicode MS, Wingdings"); + //Adds fallback font for mathematics symbols. + pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Mathematics, "Cambria Math, Noto Sans Math, Segoe UI Symbol, Arial Unicode MS"); + //Adds fallback font for emojis. + pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Emoji, "Segoe UI Emoji, Noto Color Emoji, Arial Unicode MS"); + //Convert the PowerPoint document to PDF document. + using (PdfDocument pdfDocument = PresentationToPdfConverter.Convert(pptxDoc)) + { + //Save the PDF document to the file system. + pdfDocument.Save(@"../../../Output/PPTXToPDF.pdf"); + } } {% endhighlight %} From dcc4581d8961a28c98c58413570f6a3caba8eb1e Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Wed, 5 Aug 2026 13:36:11 +0530 Subject: [PATCH 24/70] Resolved the CI failures --- .../javascript-es6/toolbar-customization/custom-toolbar.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md index 6feea658de..906c63d0fb 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md @@ -336,7 +336,6 @@ Add the following scripts for handling user interactions with the custom toolbar {% tabs %} {% highlight ts tabtitle="Standalone" %} -```ts import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, @@ -709,10 +708,8 @@ function updateSearchInputIcon(isEnable: boolean): void { enableNextButton(false); enablePrevButton(false); -``` {% endhighlight %} {% highlight ts tabtitle="Server-Backed" %} -```ts import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, @@ -1085,7 +1082,6 @@ function updateSearchInputIcon(isEnable: boolean): void { enableNextButton(false); enablePrevButton(false); -``` {% endhighlight %} {% endtabs %} From 99e65d4bb72ba44266405a6964f4768c4d1f84c0 Mon Sep 17 00:00:00 2001 From: ATCHAYASEKAR-SF4414 Date: Wed, 5 Aug 2026 14:27:13 +0530 Subject: [PATCH 25/70] modified the method name --- .../NET/Font-Substitution-in-PPTXtoPDF-Conversion.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Font-Substitution-in-PPTXtoPDF-Conversion.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Font-Substitution-in-PPTXtoPDF-Conversion.md index 60806937e4..a1791658bd 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Font-Substitution-in-PPTXtoPDF-Conversion.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Font-Substitution-in-PPTXtoPDF-Conversion.md @@ -138,7 +138,7 @@ using (IPresentation pptxDoc = Presentation.Open("Sample.pptx")) /// /// FontSettings type of the Presentation in which the specified font stream is used but unavailable in production environment. /// Retrieves the unavailable font name and receives the substitute font stream for conversion. -private static void FontSettings_SubstituteFont(object sender, SubstituteFontEventArgs args) +private static void SubstituteFont(object sender, SubstituteFontEventArgs args) { if (args.OriginalFontName == "Arial" && args.FontStyle == FontStyle.Bold) args.AlternateFontStream = new FileStream("cambriab.ttf", FileMode.Open); From 463e39ee063d3cbbc2dc9cbc118a72b33f7934ae Mon Sep 17 00:00:00 2001 From: ATCHAYASEKAR-SF4414 Date: Wed, 5 Aug 2026 16:38:10 +0530 Subject: [PATCH 26/70] removed the extra bracket --- .../NET/Fallback-Fonts-in-PPTXtoImage-Conversion.md | 1 - 1 file changed, 1 deletion(-) diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Fallback-Fonts-in-PPTXtoImage-Conversion.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Fallback-Fonts-in-PPTXtoImage-Conversion.md index c8e7a6c9c5..9ba15da082 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Fallback-Fonts-in-PPTXtoImage-Conversion.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Fallback-Fonts-in-PPTXtoImage-Conversion.md @@ -213,7 +213,6 @@ using (IPresentation pptxDoc = Presentation.Open("Template.pptx")) } } } -} {% endhighlight %} {% endtabs %} From 06180b8f135499a708a08f148316771110394958 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Wed, 5 Aug 2026 17:28:54 +0530 Subject: [PATCH 27/70] 1046071: Navigation Open PDF and Organize Pages --- .../interactive-pdf-navigation/bookmark.md | 10 +-- .../interactive-pdf-navigation/hyperlink.md | 13 ++-- .../page-thumbnail.md | 4 +- .../interactive-pdf-navigation/page.md | 12 ++-- .../open-pdf-file/from-amazon-s3.md | 8 +-- .../from-azure-active-directory.md | 13 ++-- .../open-pdf-file/from-azure-blob-storage.md | 8 +-- .../from-box-cloud-file-storage.md | 6 +- .../from-google-cloud-storage.md | 6 +- .../open-pdf-file/from-google-drive.md | 6 +- .../asp-net-mvc/organize-pages/events.md | 14 ++--- .../organize-pages/extract-pages.md | 2 - .../asp-net-mvc/organize-pages/mobile-view.md | 2 +- .../organize-pages/programmatic-support.md | 4 +- .../asp-net-mvc/organize-pages/toolbar.md | 61 +++++++++++++++++-- 15 files changed, 109 insertions(+), 60 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/bookmark.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/bookmark.md index 446d95f999..dbe8913eb6 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/bookmark.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/bookmark.md @@ -10,7 +10,7 @@ documentation: ug # Bookmark navigation in ASP.NET MVC 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., +You can enable/disable bookmark navigation by using the following code snippet: {% tabs %} {% highlight html tabtitle="Standalone" %} @@ -38,7 +38,7 @@ Here is an example of how to use the **goToBookmark** method: {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - +
      @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() @@ -54,7 +54,7 @@ Here is an example of how to use the **goToBookmark** method: {% endhighlight %} {% highlight cshtml tabtitle="Server-Backed" %} - +
      @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() @@ -70,9 +70,9 @@ Here is an example of how to use the **goToBookmark** method: {% endhighlight %} {% endtabs %} -x - Specifies the pageIndex for Navigate. +x - Specifies the page index to navigate to. -y - Specifies the Y coordinates value of the Page. +y - Specifies the Y coordinate value of the page. 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. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/hyperlink.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/hyperlink.md index 847f93bea0..61f01b21e4 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/hyperlink.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/hyperlink.md @@ -23,13 +23,13 @@ Use the table of contents to quickly navigate to headings and sections defined i ![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. ![Hyperlink Navigation in PDF Viewer](../images/link.png) -### Enabling and Disabling Hyperlinks +### 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. @@ -45,21 +45,22 @@ The following example demonstrates how to disable hyperlink navigation: {% highlight html tabtitle="Standalone" %} ```html
      - @Html.EJS().PdfViewer("pdfviewer").EnableHyperlink(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() + @Html.EJS().PdfViewer("pdfviewer").EnableHyperlink(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
      ``` {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} ```html
      - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableHyperlink(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableHyperlink(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
      ``` {% endhighlight %} {% endtabs %} > Note: Disabling hyperlinks only affects the viewer's behavior and does not alter the original PDF document. -### Controlling Link Behavior + +### Controlling link behavior The `hyperlinkOpenState` property determines how external URLs are opened when a hyperlink is clicked. @@ -88,7 +89,7 @@ The following example configures hyperlinks to open in a new tab: {% endhighlight %} {% endtabs %} -### Handling Hyperlink Events +### Handling hyperlink events The PDF Viewer exposes events that allow for monitoring and customizing hyperlink interactions. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page-thumbnail.md index d1f8492931..c334570eac 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page-thumbnail.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page-thumbnail.md @@ -1,6 +1,6 @@ --- layout: post -title: Thumbnail Navigation in ASP.NET Core PDF Viewer control | Syncfusion +title: Thumbnail Navigation in ASP.NET MVC PDF Viewer control | Syncfusion description: Discover how to navigate PDF pages using thumbnails in the Syncfusion ASP.NET MVC PDF Viewer control for a visual and intuitive experience. platform: document-processing control: PDF Viewer @@ -10,7 +10,7 @@ documentation: ug # Page Thumbnail navigation 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., +You can enable/disable thumbnail navigation by using the following code snippet: {% tabs %} {% highlight html tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page.md index 9ecf61a8cd..a131701f08 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page.md @@ -7,21 +7,21 @@ control: PDF Viewer documentation: ug --- -# Navigation in ASP.NET MVC PDF Viewer control +# Page navigation in ASP.NET MVC PDF Viewer The ASP.NET MVC PDF Viewer supports different internal and external navigations. ## Toolbar page navigation option -The default toolbar of PDF Viewer contains the following navigation options +The default toolbar of PDF Viewer contains the following navigation options: * **Go to page** :- Navigates to the specific page of a PDF document. -* **Show next page** :- Navigates to the next page of PDF a document. +* **Show next page** :- Navigates to the next page of a PDF document. * **Show previous page** :- Navigates to the previous page of a PDF document. * **Show first page** :- Navigates to the first page of a PDF document. * **Show last page** :- Navigates to the last page of a PDF document. -You can enable/disable page navigation option in PDF Viewer using the following code snippet., +You can enable/disable page navigation option in PDF Viewer using the following code snippet: {% tabs %} {% highlight html tabtitle="Standalone" %} @@ -48,7 +48,7 @@ Also, you can programmatically perform page navigation options as follows. {% highlight cshtml tabtitle="Standalone" %} - + @@ -84,7 +84,7 @@ Also, you can programmatically perform page navigation options as follows. {% highlight cshtml tabtitle="Server-Backed" %} - + diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md index c1a4036095..dab71ed95f 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md @@ -18,7 +18,7 @@ Follow these steps to load a PDF from AWS S3 in the standalone PDF Viewer. **Step 1:** Create AWS S3 account - Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. +Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. **Step 2:** Create PDF Viewer Sample in ASP.NET MVC @@ -53,7 +53,7 @@ AWS.config.update({ }); ``` -2. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then Uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion® PDF Viewer then load Base64 string generated into the viewer.load method. +2. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion® PDF Viewer using the viewer.load 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. @@ -94,7 +94,7 @@ Follow these steps to load a PDF from AWS S3 using the server-backed PDF Viewer. **Step 1:** Create AWS S3 account - Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. +Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. **Step 2:** Create PDF Viewer Sample in ASP.NET MVC @@ -114,7 +114,7 @@ using Amazon.S3.Model; 2. Modify the `Load()` method to load the PDF files from AWS S3. ```csharp - private readonly string _accessKey = "Your Access Key from AWS S35"; + private readonly string _accessKey = "Your Access Key from AWS S3"; private readonly string _secretKey = "Your Secret Key from AWS S3"; private readonly string _bucketName = "Your Bucket name from AWS S3"; diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md index ab5a0eb010..d8e82086ea 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md @@ -135,13 +135,12 @@ public async Task SaveToAAD(jsonObjects responseData) {% endhighlight %} {% endtabs %} -3. Configure server-side code: - - Open the server-side application (e.g., ASP.NET MVC) 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). +3. Configure the server-side code with the following values in `HomeController.cs`: + - `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). 4. Add the following code snippet in `Index.cshtml`. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md index 9e060bcbb9..198e19b784 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md @@ -18,7 +18,7 @@ Follow these steps to load a PDF from Azure Blob Storage in the standalone PDF V **Step 1:** Create the Azure Blob Storage account -Log in to the Azure Portal. Create a new Storage Account with preferred settings. Note access keys during the setup. Within the Storage Account, create a Blob Container following the steps in this [link](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal). +Log in to the Azure Portal. Create a new Storage Account with preferred settings. Note the access keys during the setup. Within the Storage Account, create a Blob Container following the steps in this [link](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal). **Step 2:** Create PDF Viewer Sample in ASP.NET MVC @@ -28,7 +28,7 @@ Follow instructions provided in the Syncfusion® 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. +N> Replace **Your account name in Azure** with the actual account name for your Azure Blob Storage account, **Your container name in Azure** with the actual container name, and **Your Blob name in Azure** with the actual blob name. ```csharp var accountName = "*Your account name in Azure*"; @@ -36,7 +36,7 @@ var containerName = "*Your container name in Azure*"; var blobName = "*Your Blob name in Azure*"; ``` -2. Constructs the URL to the PDF in Azure Blob Storage. Calls fetchAndConvertToBase64 to fetch the PDF and convert it to a base64 string. Then Loads the base64 string into the PDF Viewer. +2. Constructs the URL to the PDF in Azure Blob Storage. Calls fetchAndConvertToBase64 to fetch the PDF and convert it to a base64 string. Then loads the base64 string into the PDF Viewer. ```csharp function loadDocument() { @@ -103,7 +103,7 @@ Follow these steps to load a PDF from Azure Blob Storage using the server-backed **Step 1:** Create the Azure Blob Storage account -Log in to the Azure Portal. Create a new Storage Account with preferred settings. Note access keys during the setup. Within the Storage Account, create a Blob Container following the steps in this [link](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal). +Log in to the Azure Portal. Create a new Storage Account with preferred settings. Note the access keys during the setup. Within the Storage Account, create a Blob Container following the steps in this [link](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal). **Step 2:** Create PDF Viewer Sample in ASP.NET MVC diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-box-cloud-file-storage.md index 33600c7da9..a695771211 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-box-cloud-file-storage.md @@ -14,7 +14,7 @@ Follow these steps to load a PDF from Box cloud storage using the server-backed **Step 1:** Set up a Box developer account and create a Box application -To access Box storage programmatically, you'll need a developer account with Box. Go to the [Box Developer Console](https://developer.box.com/), sign in or create a new account, and then create a new Box application. This application will provide you with the necessary credentials Client ID and Client Secret to authenticate and access Box APIs. Before accessing files, you need to authenticate your application to access your Box account. Box API supports `OAuth 2.0 authentication` for this purpose. +To access Box storage programmatically, you'll need a developer account with Box. Go to the [Box Developer Console](https://developer.box.com/), sign in or create a new account, and then create a new Box application. This application will provide you with the necessary credentials: Client ID and Client Secret to authenticate and access Box APIs. Before accessing files, you need to authenticate your application to access your Box account. Box API supports `OAuth 2.0 authentication` for this purpose. **Step 2:** Create a PDF Viewer sample in ASP.NET MVC @@ -85,7 +85,7 @@ using Box.V2.Models; } ``` -N> replace **Your_Box_Storage_Access_Token** with your actual box access token, and **Your_Folder_ID** with the ID of the folder in your box storage where you want to perform specific operations. Remember to use your valid box API credentials, as **Your_Box_Storage_ClientID** and **Your_Box_Storage_ClientSecret"** are placeholders for your application's API key and secret. +N> Replace **Your_Box_Storage_Access_Token** with your actual Box access token, and **Your_Folder_ID** with the ID of the folder in your Box storage where you want to perform specific operations. Use your valid Box API credentials; **Your_Box_Storage_ClientID** and **Your_Box_Storage_ClientSecret** are placeholders for your application's API key and secret. **Step 4:** Configure the PDF Viewer component @@ -106,6 +106,6 @@ Set the [serviceUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2 ``` N> The **Box.V2.Core** NuGet package must be installed in your application to use the previous code example. -N> Replace `PDF_Succinctly.pdf` with the actual document name that you want to load from Box cloud file storage. Make sure to 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 that you want to load from Box cloud file storage. Make sure to pass the document name from the Box folder to the `documentPath` property of the 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/asp-net-mvc/open-pdf-file/from-google-cloud-storage.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-cloud-storage.md index 15de42eaf7..e471273f4f 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-cloud-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-cloud-storage.md @@ -14,11 +14,11 @@ Follow these steps to load a PDF from Google Cloud Storage using the server-back **Step 1:** Create a Service Account -Open the Google Cloud Console. Navigate to `IAM & Admin` > `Service accounts`. Click `Create Service Account`.` Enter a name, assign roles (e.g., Storage Object Admin), and create a key in JSON format. Download the key file securely. Utilize the downloaded key file in your applications or services for authentication and access to the Google Cloud Storage bucket. For additional details, refer to the [official documentation](https://cloud.google.com/iam/docs/service-accounts-create). +Open the Google Cloud Console. Navigate to `IAM & Admin` > `Service accounts`. Click `Create Service Account`. Enter a name, assign roles (e.g., Storage Object Admin), and create a key in JSON format. Download the key file securely. Utilize the downloaded key file in your applications or services for authentication and access to the Google Cloud Storage bucket. For additional details, refer to the [official documentation](https://cloud.google.com/iam/docs/service-accounts-create). **Step 2:** Create a PDF Viewer sample in ASP.NET MVC -Follow instructions provided in the Syncfusion® PDF Viewer Getting Started [Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started-with-server-backed) to create a simple PDF Viewer sample in ASP.NET MVC +Follow instructions provided in the Syncfusion® PDF Viewer Getting Started [Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started-with-server-backed) to create a simple PDF Viewer sample in ASP.NET MVC. **Step 3:** Modify the `HomeController.cs` file in the project @@ -31,7 +31,7 @@ using Google.Apis.Auth.OAuth2; ``` -2. Add the following private fields and constructor parameters to the `HomeController.cs` class, In the constructor, assign the values from the configuration to the corresponding fields +2. Add the following private fields and constructor parameters to the `HomeController.cs` class. In the constructor, assign the values from the configuration to the corresponding fields. ```csharp diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-drive.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-drive.md index a8f98fec25..4b3b3f27b1 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-drive.md @@ -32,7 +32,7 @@ using Google.Apis.Services; using Google.Apis.Util.Store; ``` -2. Modify the `Load()` method to load the PDF files from Google drive. +2. Modify the `Load()` method to load the PDF files from Google Drive. ```csharp @@ -117,9 +117,9 @@ private readonly string tokenjson = "Path to create token.json file"; } ``` -N> Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google drive folder ID , Your name for your application and the path for the JSON file. +N> Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google Drive folder ID, your application name, and the path to the JSON file. -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 **folderId** value 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 diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/events.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/events.md index dd91c74ac3..de34cc101e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/events.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/events.md @@ -1,7 +1,7 @@ --- layout: post title: Organize Events in PDF Viewer | Syncfusion -description: Learn how to organize pages Events in the MVC PDF viewer, including rotating, rearranging, inserting, deleting, and copying pages on mobile devices. +description: Learn about the events available for Organize Pages in the ASP.NET MVC PDF Viewer, including pageOrganizerSaveAs and pageOrganizerZoomChanged. platform: document-processing control: PDF Viewer documentation: ug @@ -63,8 +63,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. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -75,8 +75,8 @@ Event arguments: @@ -89,8 +89,8 @@ Event arguments: diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/extract-pages.md index 85968b9829..5a7d0df305 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/extract-pages.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/extract-pages.md @@ -53,8 +53,6 @@ Two options appear in the secondary toolbar: ## Programmatic options and APIs -## Programmatic options and APIs - You can control the Extract Pages experience via settings and invoke extraction through code. ### Enable/disable Extract Pages diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/mobile-view.md index 626dbcdca1..390a0ca65c 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/mobile-view.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/mobile-view.md @@ -7,7 +7,7 @@ control: PDF Viewer documentation: ug --- -# Organize Pages in Mobile PDF Viewer ASP.NET MVC +# Organize Pages in Mobile PDF Viewer ASP.NET MVC 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. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/programmatic-support.md index a18f4b5463..f1051c29c6 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/programmatic-support.md @@ -61,14 +61,14 @@ The `pageOrganizerSettings` API allows you to customize the page management func {% highlight cshtml tabtitle="Standalone" %}
      - @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanDelete = false, CanInsert = false, CanRotate = false, canCopy = false, canRearrange = false, canImport = false, imageZoom = 1, showImageZoomingSlider = true, imageZoomMin = 1, imageZoomMax = 5 }).Render() + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanDelete = false, CanInsert = false, CanRotate = false, CanCopy = false, CanRearrange = false, CanImport = false, imageZoom = 1, showImageZoomingSlider = true, imageZoomMin = 1, imageZoomMax = 5 }).Render()
      {% endhighlight %} {% highlight cshtml tabtitle="Server-Backed" %}
      - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanDelete = false, CanInsert = false, CanRotate = false, canCopy = false, canRearrange = false, canImport = false, imageZoom = 1, showImageZoomingSlider = true, imageZoomMin = 1, imageZoomMax = 5 }).Render() + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanDelete = false, CanInsert = false, CanRotate = false, CanCopy = false, CanRearrange = false, CanImport = false, imageZoom = 1, showImageZoomingSlider = true, imageZoomMin = 1, imageZoomMax = 5 }).Render()
      {% endhighlight %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md index 4aa0cf93ab..e577a2f16e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md @@ -14,7 +14,7 @@ The PDF Viewer allows you to customize the toolbar for the organize pages featur ## Show or hide the insert option -The `canInsert` property controls the visibility of the insert tool. When set to `false`, the insert tool will be hidden from the toolbar. +The `CanInsert` property controls the visibility of the insert tool. When set to `false`, the insert tool will be hidden from the toolbar. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -35,7 +35,7 @@ The `canInsert` property controls the visibility of the insert tool. When set to ## 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. When set to `false`, the delete tool will be hidden. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -56,7 +56,7 @@ The `canDelete` property controls the visibility of the delete tool. When set to ## 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. When set to `false`, the rotate tool will be hidden. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -77,12 +77,63 @@ The `canRotate` property controls the visibility of the rotate tool. When set to ## 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. +The `CanCopy` property controls the visibility of the copy tool. When set to `false`, the copy tool will be hidden. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
      + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanCopy = false }).Render() +
      + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
      + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanCopy = false }).Render() +
      + +{% endhighlight %} +{% endtabs %} ## Show or hide the import option -The `canImport` property controls the visibility of the import tool. When set to `false`, the import tool will be hidden. +The `CanImport` property controls the visibility of the import tool. When set to `false`, the import tool will be hidden. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
      + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanImport = false }).Render() +
      + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
      + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanImport = false }).Render() +
      + +{% endhighlight %} +{% endtabs %} ## Show or hide the rearrange option The `canRearrange` property controls the ability to rearrange pages. When set to `false`, pages cannot be rearranged. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
      + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanRearrange = false }).Render() +
      + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
      + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanRearrange = false }).Render() +
      + +{% endhighlight %} +{% endtabs %} From 79b02d1721b88cae7b555f7754eb1c6c86907f96 Mon Sep 17 00:00:00 2001 From: ATCHAYASEKAR-SF4414 Date: Thu, 6 Aug 2026 15:48:32 +0530 Subject: [PATCH 28/70] updated the proper shape values --- .../NET/Working-with-Animation.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-Animation.md b/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-Animation.md index 821356dfff..b51a0e02cb 100644 --- a/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-Animation.md +++ b/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-Animation.md @@ -31,7 +31,7 @@ IPresentation pptxDoc = Presentation.Create(); //Add a blank slide to Presentation ISlide slide = pptxDoc.Slides.Add(SlideLayoutType.Blank); //Add normal shape to slide -IShape cubeShape = slide.Shapes.AddShape(AutoShapeType.Cube, 50, 200, 300, 300); +IShape cubeShape = slide.Shapes.AddShape(AutoShapeType.Cube, 100, 100, 300, 300); //Access the animation sequence to create effects ISequence sequence = slide.Timeline.MainSequence; //Add bounce effect to the shape @@ -47,7 +47,7 @@ using (IPresentation pptxDoc = Presentation.Create()) //Add a blank slide to Presentation ISlide slide = pptxDoc.Slides.Add(SlideLayoutType.Blank); //Add normal shape to slide - IShape cubeShape = slide.Shapes.AddShape(AutoShapeType.Cube, 50, 200, 300, 300); + IShape cubeShape = slide.Shapes.AddShape(AutoShapeType.Cube, 100, 100, 300, 300); //Access the animation sequence to create effects ISequence sequence = slide.Timeline.MainSequence; //Add bounce effect to the shape @@ -63,7 +63,7 @@ Using pptxDoc As IPresentation = Presentation.Create() 'Add a blank slide to Presentation Dim slide As ISlide = pptxDoc.Slides.Add(SlideLayoutType.Blank) 'Add normal shape to slide - Dim cubeShape As IShape = slide.Shapes.AddShape(AutoShapeType.Cube, 50, 200, 300, 300) + Dim cubeShape As IShape = slide.Shapes.AddShape(AutoShapeType.Cube, 100, 100, 300, 300) 'Access the animation sequence to create effects Dim sequence As ISequence = slide.Timeline.MainSequence 'Add bounce effect to the shape @@ -89,9 +89,9 @@ IPresentation pptxDoc = Presentation.Create(); //Add a blank slide to Presentation ISlide slide = pptxDoc.Slides.Add(SlideLayoutType.Blank); //Add normal shape to slide -IShape cubeShape = slide.Shapes.AddShape(AutoShapeType.Cube, 50, 200, 300, 300); -//Add a shape to act as button -IShape buttonShape = slide.Shapes.AddShape(AutoShapeType.Oval, 100,100,50,50); +IShape cubeShape = slide.Shapes.AddShape(AutoShapeType.Cube, 200, 100, 300, 300); +//Add a shape to act as button. +IShape buttonShape = slide.Shapes.AddShape(AutoShapeType.Oval, 130, 75, 50, 50); //Create the interactive sequence to make the animation effects interactive by triggering with button click ISequence interactiveSequence = slide.Timeline.InteractiveSequences.Add(buttonShape); //Add Fly effect with top subtype to animate the shape as fly from top @@ -107,9 +107,9 @@ using (IPresentation pptxDoc = Presentation.Create()) //Add a blank slide to Presentation ISlide slide = pptxDoc.Slides.Add(SlideLayoutType.Blank); //Add normal shape to slide - IShape cubeShape = slide.Shapes.AddShape(AutoShapeType.Cube, 50, 200, 300, 300); - //Add a shape to act as button - IShape buttonShape = slide.Shapes.AddShape(AutoShapeType.Oval, 100,100,50,50); + IShape cubeShape = slide.Shapes.AddShape(AutoShapeType.Cube, 200, 100, 300, 300); + //Add a shape to act as button. + IShape buttonShape = slide.Shapes.AddShape(AutoShapeType.Oval, 130, 75, 50, 50); //Create the interactive sequence to make the animation effects interactive by triggering with button click ISequence interactiveSequence = slide.Timeline.InteractiveSequences.Add(buttonShape); //Add Fly effect with top subtype to animate the shape as fly from top @@ -125,9 +125,9 @@ Using pptxDoc As IPresentation = Presentation.Create() 'Add a blank slide to Presentation Dim slide As ISlide = pptxDoc.Slides.Add(SlideLayoutType.Blank) 'Add normal shape to slide - Dim cubeShape As IShape = slide.Shapes.AddShape(AutoShapeType.Cube, 50, 200, 300, 300) + Dim cubeShape As IShape = slide.Shapes.AddShape(AutoShapeType.Cube, 200, 100, 300, 300) 'Add a shape to act as button - Dim buttonShape As IShape = slide.Shapes.AddShape(AutoShapeType.Oval, 100, 100, 50, 50) + Dim buttonShape As IShape = slide.Shapes.AddShape(AutoShapeType.Oval, 130, 75, 50, 50) 'Create the interactive sequence to make the animation effects interactive by triggering with button click Dim interactiveSequence As ISequence = slide.Timeline.InteractiveSequences.Add(buttonShape) 'Add Fly effect with top subtype to animate the shape as fly from top @@ -212,7 +212,7 @@ IPresentation pptxDoc = Presentation.Create(); //Add a blank slide to Presentation ISlide slide = pptxDoc.Slides.Add(SlideLayoutType.Blank); //Add normal shape to slide -IShape cubeShape = slide.Shapes.AddShape(AutoShapeType.Cube, 50, 200, 300, 300); +IShape cubeShape = slide.Shapes.AddShape(AutoShapeType.Cube, 100, 100, 300, 300); //Access the animation sequence to create effects ISequence sequence = slide.Timeline.MainSequence; //Add random bars effect to the shape @@ -230,7 +230,7 @@ using (IPresentation pptxDoc = Presentation.Create()) //Add a blank slide to Presentation ISlide slide = pptxDoc.Slides.Add(SlideLayoutType.Blank); //Add normal shape to slide - IShape cubeShape = slide.Shapes.AddShape(AutoShapeType.Cube, 50, 200, 300, 300); + IShape cubeShape = slide.Shapes.AddShape(AutoShapeType.Cube, 100, 100, 300, 300); //Access the animation sequence to create effects ISequence sequence = slide.Timeline.MainSequence; //Add random bars effect to the shape @@ -248,7 +248,7 @@ Using pptxDoc As IPresentation = Presentation.Create() 'Add a blank slide to Presentation Dim slide As ISlide = pptxDoc.Slides.Add(SlideLayoutType.Blank) 'Add normal shape to slide - Dim cubeShape As IShape = slide.Shapes.AddShape(AutoShapeType.Cube, 50, 200, 300, 300) + Dim cubeShape As IShape = slide.Shapes.AddShape(AutoShapeType.Cube, 100, 100, 300, 300) 'Access the animation sequence to create effects Dim sequence As ISequence = slide.Timeline.MainSequence 'Add random bars effect to the shape From 4ea8f72424bf8efdec34e6c2858fd97fa13513b2 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Thu, 6 Aug 2026 17:30:27 +0530 Subject: [PATCH 29/70] 1046071: Resolved CI failures --- .../PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md | 3 +-- .../asp-net-mvc/open-pdf-file/from-azure-active-directory.md | 5 ++--- .../asp-net-mvc/open-pdf-file/from-azure-blob-storage.md | 5 ++--- .../asp-net-mvc/open-pdf-file/from-box-cloud-file-storage.md | 1 - .../asp-net-mvc/open-pdf-file/from-google-cloud-storage.md | 3 +-- .../asp-net-mvc/open-pdf-file/from-google-drive.md | 1 - .../PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md | 3 +-- 7 files changed, 7 insertions(+), 14 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md index dab71ed95f..3f46f871cb 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md @@ -4,11 +4,10 @@ title: Open PDF from AWS S3 in ASP.NET MVC PDF Viewer | Syncfusion description: Learn how to load PDFs from AWS S3 in the Syncfusion ASP.NET MVC PDF Viewer component using standalone and server-backed approaches. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- -# Open PDF from AWS S3 +# Open PDF from AWS S3 in ASP.NET MVC The ASP.NET MVC PDF Viewer component supports loading PDF files from AWS S3 using either the standalone or the server-backed PDF Viewer. The following steps demonstrate both approaches. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md index d8e82086ea..87fd48c1ea 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md @@ -1,14 +1,13 @@ --- layout: post -title: Open PDF from Azure Active Directory in ASP.NET MVC PDF Viewer | Syncfusion +title: Open PDF from Azure Active Directory in MVC PDF Viewer | Syncfusion description: Learn how to load and save PDFs using Azure Active Directory (AAD) with the Syncfusion ASP.NET MVC PDF Viewer component. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- -# Open PDF from Azure Active Directory +# Open PDF from Azure Active Directory in ASP.NET MVC ### Overview diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md index 198e19b784..c250a174b7 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md @@ -1,14 +1,13 @@ --- layout: post -title: Open PDF from Azure Blob Storage in ASP.NET MVC PDF Viewer | Syncfusion +title: Open PDF from Azure Blob Storage in MVC PDF Viewer | Syncfusion description: Learn how to load PDFs from Azure Blob Storage in the Syncfusion ASP.NET MVC PDF Viewer component using standalone and server-backed approaches. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- -# Open PDF from Azure Blob Storage +# Open PDF from Azure Blob Storage in ASP.NET MVC The ASP.NET MVC PDF Viewer component supports loading PDF files from Azure Blob Storage using either the standalone or the server-backed PDF Viewer. The following steps demonstrate both approaches. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-box-cloud-file-storage.md index a695771211..c1113326f7 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-box-cloud-file-storage.md @@ -4,7 +4,6 @@ title: Open PDF from Box cloud storage in ASP.NET MVC PDF Viewer | Syncfusion description: Learn how to load PDFs from Box cloud storage in the Syncfusion ASP.NET MVC PDF Viewer component using a server-backed approach. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-cloud-storage.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-cloud-storage.md index e471273f4f..da9530f366 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-cloud-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-cloud-storage.md @@ -1,10 +1,9 @@ --- layout: post -title: Open PDF from Google Cloud Storage in ASP.NET MVC PDF Viewer | Syncfusion +title: Open PDF from Google Cloud Storage MVC PDF Viewer | Syncfusion description: Learn how to load PDFs from Google Cloud Storage in the Syncfusion ASP.NET MVC PDF Viewer component using a server-backed approach. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-drive.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-drive.md index 4b3b3f27b1..495d7d1a42 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-drive.md @@ -4,7 +4,6 @@ title: Open PDF from Google Drive in ASP.NET MVC PDF Viewer | Syncfusion description: Learn how to load PDFs from Google Drive in the Syncfusion ASP.NET MVC PDF Viewer component using a server-backed approach. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md index e577a2f16e..bf89c665e5 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md @@ -1,10 +1,9 @@ --- layout: post -title: Organize Page Toolbar Customization in ASP.NET MVC PDF Viewer control | Syncfusion +title: Organize Page Toolbar Customization in MVC PDF Viewer | Syncfusion description: Learn here all about Organize Page Toolbar Customization in Syncfusion ASP.NET MVC PDF Viewer control of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- From e3b3247348aec9be50c8fc6f95b5e60f73135b34 Mon Sep 17 00:00:00 2001 From: ATCHAYASEKAR-SF4414 Date: Thu, 6 Aug 2026 18:28:12 +0530 Subject: [PATCH 30/70] updated the shape type --- .../PowerPoint/PowerPoint-Library/NET/Working-with-shapes.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-shapes.md b/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-shapes.md index db61cc0c8b..b344582f9e 100644 --- a/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-shapes.md +++ b/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-shapes.md @@ -149,7 +149,7 @@ IPresentation pptxDoc = Presentation.Open("Sample.pptx"); //Gets the first slide of the Presentation ISlide slide = pptxDoc.Slides[0]; //Gets the first shape of the slide -IShape shape = slide.Shapes[0]; +IShape shape = slide.Shapes[0] as IShape; //Sets the shape name shape.ShapeName = "Shape1"; //Retrieves the line format of the shape @@ -178,7 +178,7 @@ IPresentation pptxDoc = Presentation.Open("Sample.pptx"); //Gets the first slide of the Presentation ISlide slide = pptxDoc.Slides[0]; //Gets the first shape of the slide -IShape shape = slide.Shapes[0]; +IShape shape = slide.Shapes[0] as IShape; //Sets the shape name shape.ShapeName = "Shape1"; //Retrieves the line format of the shape From 0069cf27880e2be0b8b34581e0b90cef29b1f85a Mon Sep 17 00:00:00 2001 From: Dharanya Sakthivel Date: Fri, 7 Aug 2026 14:27:18 +0530 Subject: [PATCH 31/70] ES-1042923-Revamp-UG --- .../Word-document/Compare-Word-documents.md | 159 ++++++----- .../Iterating-Word-document-elements.md | 59 +++-- .../Word-document/Merging-Word-documents.md | 38 +-- .../NET/Word-document/Print-Word-documents.md | 25 +- .../NET/Word-document/Split-Word-documents.md | 59 +++-- .../Word-Library/NET/Working-With-Images.md | 125 ++++----- .../NET/Working-with-Bookmarks.md | 78 +++--- .../Word-Library/NET/Working-with-Fields.md | 36 +-- .../NET/Working-with-Hyperlinks.md | 241 +++++++++-------- .../NET/Working-with-Paragraph.md | 83 +++--- .../Word-Library/NET/Working-with-Sections.md | 44 ++-- .../Word-Library/NET/Working-with-Shapes.md | 247 +++++++++--------- .../Word-Library/NET/Working-with-Tables.md | 71 ++--- .../NET/Working-with-Word-document.md | 58 ++-- .../NET/mail-merge/mail-merge-events.md | 61 ++--- .../NET/mail-merge/mail-merge-for-group.md | 27 +- .../mail-merge-for-nested-groups.md | 57 ++-- .../NET/mail-merge/mail-merge-options.md | 63 +++-- .../mail-merge-troubleshooting-tips.md | 24 +- .../NET/mail-merge/simple-mail-merge.md | 22 +- .../Word-Library/NET/working-with-lists.md | 64 ++--- .../NET/working-with-mail-merge.md | 88 ++++--- 22 files changed, 937 insertions(+), 792 deletions(-) diff --git a/Document-Processing/Word/Word-Library/NET/Word-document/Compare-Word-documents.md b/Document-Processing/Word/Word-Library/NET/Word-document/Compare-Word-documents.md index ea797ad22a..f2ef60b190 100644 --- a/Document-Processing/Word/Word-Library/NET/Word-document/Compare-Word-documents.md +++ b/Document-Processing/Word/Word-Library/NET/Word-document/Compare-Word-documents.md @@ -37,12 +37,15 @@ N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-plat {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Compare-Word-documents/Compare-two-Word-documents/.NET/Compare-Word-documents/Program.cs" %} -//Load the original document. +using Syncfusion.DocIO; +using Syncfusion.DocIO.DLS; + +// Load the original document. using (FileStream originalDocumentStreamPath = new FileStream("Data/OriginalDocument.docx", FileMode.Open, FileAccess.Read)) { using (WordDocument originalDocument = new WordDocument(originalDocumentStreamPath, FormatType.Docx)) { - //Load the revised document. + // Load the revised document. using (FileStream revisedDocumentStreamPath = new FileStream("Data/RevisedDocument.docx", FileMode.Open, FileAccess.Read)) { using (WordDocument revisedDocument = new WordDocument(revisedDocumentStreamPath, FormatType.Docx)) @@ -50,38 +53,48 @@ using (FileStream originalDocumentStreamPath = new FileStream("Data/OriginalDocu // Compare the original and revised Word documents. originalDocument.Compare(revisedDocument); - //Save the Word document to MemoryStream - MemoryStream stream = new MemoryStream(); - originalDocument.Save(stream, FormatType.Docx); + // Save the Word document to MemoryStream. + using (MemoryStream stream = new MemoryStream()) + { + originalDocument.Save(stream, FormatType.Docx); + // Save the stream to a file. + File.WriteAllBytes("Result.docx", stream.ToArray()); + } } - } - } + } + } } {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Load the original document. +using Syncfusion.DocIO; +using Syncfusion.DocIO.DLS; + +// Load the original document. using (WordDocument originalDocument = new WordDocument("Data/OriginalDocument.docx", FormatType.Docx)) { - //Load the revised document. + // Load the revised document. using (WordDocument revisedDocument = new WordDocument("Data/RevisedDocument.docx", FormatType.Docx)) - { + { // Compare the original and revised Word documents. originalDocument.Compare(revisedDocument); - //Save the Word document. - originalDocument.Save("Result.docx"); + // Save the Word document. + originalDocument.Save("Result.docx"); } } {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} +Imports Syncfusion.DocIO +Imports Syncfusion.DocIO.DLS + ' Load the original document. Using originalDocument As New WordDocument("Data/OriginalDocument.docx", FormatType.Docx) ' Load the revised document. Using revisedDocument As New WordDocument("Data/RevisedDocument.docx", FormatType.Docx) - ' Compare the original document and revised documents. + ' Compare the original and revised Word documents. originalDocument.Compare(revisedDocument) ' Save the Word document. originalDocument.Save("Result.docx") @@ -97,61 +110,74 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Set Author and Date -Compare the two Word documents by setting the author and date for revisions to identify the changes. In DocIO, the default setting for the "author" field is "Author", and the default setting for the "dateTime" field is the current time. +Compare the two Word documents by setting the author and date for revisions to identify the changes. In DocIO, the default author is "Author" and the default date/time is the current time. The following sample uses an overload of the [`Compare`](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html) method that accepts an author and date. The following code example shows how to set the author and date for revision while comparing two Word documents. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Compare-Word-documents/Set-author-and-date/.NET/Program.cs" %} -//Load the original document. +using Syncfusion.DocIO; +using Syncfusion.DocIO.DLS; + +// Load the original document. using (FileStream originalDocumentStreamPath = new FileStream("Data/OriginalDocument.docx", FileMode.Open, FileAccess.Read)) { using (WordDocument originalDocument = new WordDocument(originalDocumentStreamPath, FormatType.Docx)) { - //Load the revised document. + // Load the revised document. using (FileStream revisedDocumentStreamPath = new FileStream("Data/RevisedDocument.docx", FileMode.Open, FileAccess.Read)) { using (WordDocument revisedDocument = new WordDocument(revisedDocumentStreamPath, FormatType.Docx)) { // Compare the original and revised Word documents. - originalDocument.Compare(revisedDocument,"Nancy Davolio", DateTime.Now.AddDays(-1)); + originalDocument.Compare(revisedDocument, "Nancy Davolio", DateTime.Now.AddDays(-1)); - //Save the Word document to MemoryStream - MemoryStream stream = new MemoryStream(); - originalDocument.Save(stream, FormatType.Docx); + // Save the Word document to MemoryStream. + using (MemoryStream stream = new MemoryStream()) + { + originalDocument.Save(stream, FormatType.Docx); + // Save the stream to a file. + File.WriteAllBytes("Result.docx", stream.ToArray()); + } } - } - } + } + } } {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Load the original document. +using Syncfusion.DocIO; +using Syncfusion.DocIO.DLS; + +// Load the original document. using (WordDocument originalDocument = new WordDocument("Data/OriginalDocument.docx", FormatType.Docx)) { - //Load the revised document. + // Load the revised document. using (WordDocument revisedDocument = new WordDocument("Data/RevisedDocument.docx", FormatType.Docx)) - { - // Compare the original document and revised documents. - originalDocument.Compare(revisedDocument,"Nancy Davolio", DateTime.Now.AddDays(-1)); - //Save the Word document. - originalDocument.Save("Result.docx"); + { + // Compare the original and revised Word documents. + originalDocument.Compare(revisedDocument, "Nancy Davolio", DateTime.Now.AddDays(-1)); + // Save the Word document. + originalDocument.Save("Result.docx"); } } {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -' Open the original Word document. -Using originalDocument As New WordDocument(originalFilePath, FormatType.Docx) - ' Open the revised Word document. - Using revisedDocument As New WordDocument(revisedFilePath, FormatType.Docx) - ' Compare the original document with the revised document. +Imports Syncfusion.DocIO +Imports Syncfusion.DocIO.DLS + +' Load the original document. +Using originalDocument As New WordDocument("Data/OriginalDocument.docx", FormatType.Docx) + ' Load the revised document. + Using revisedDocument As New WordDocument("Data/RevisedDocument.docx", FormatType.Docx) + ' Compare the original and revised Word documents. originalDocument.Compare(revisedDocument, "Nancy Davolio", DateTime.Now.AddDays(-1)) ' Save the Word document. - originalDocument.Save(resultFilePath) + originalDocument.Save("Result.docx") End Using End Using @@ -176,25 +202,30 @@ The following code example illustrates how to compare two Word documents by igno {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Compare-Word-documents/Ignore-format-changes/.NET/Ignore-format-changes/Program.cs" %} -//Load the original document -using (FileStream originalDocumentStreamPath = new FileStream("OriginalDocument.docx", FileMode.Open, FileAccess.Read)) +using Syncfusion.DocIO; +using Syncfusion.DocIO.DLS; + +// Load the original document. +using (FileStream originalDocumentStreamPath = new FileStream("Data/OriginalDocument.docx", FileMode.Open, FileAccess.Read)) { using (WordDocument originalDocument = new WordDocument(originalDocumentStreamPath, FormatType.Docx)) { - //Load the revised document - using (FileStream revisedDocumentStreamPath = new FileStream("RevisedDocument.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite)) + // Load the revised document. + using (FileStream revisedDocumentStreamPath = new FileStream("Data/RevisedDocument.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite)) { - using (WordDocument revisedDocument = new WordDocument(revisedDocumentStreamPath, FormatType.Automatic)) + using (WordDocument revisedDocument = new WordDocument(revisedDocumentStreamPath, FormatType.Docx)) { - //Set the Comparison option to detect format changes, whether to detect format changes while comparing two Word documents. + // Set whether to detect format changes while comparing two Word documents. ComparisonOptions compareOptions = new ComparisonOptions(); compareOptions.DetectFormatChanges = false; - //Compare the original document with the revised document + // Compare the original and revised Word documents. originalDocument.Compare(revisedDocument, "Syncfusion", DateTime.Now, compareOptions); - //Save the Word document to MemoryStream + // Save the Word document to MemoryStream. using (MemoryStream stream = new MemoryStream()) { originalDocument.Save(stream, FormatType.Docx); + // Save the stream to a file. + File.WriteAllBytes("Result.docx", stream.ToArray()); } } } @@ -204,36 +235,42 @@ using (FileStream originalDocumentStreamPath = new FileStream("OriginalDocument. {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Load the original document -using (WordDocument originalDocument = new WordDocument("OriginalDocument.docx")) +using Syncfusion.DocIO; +using Syncfusion.DocIO.DLS; + +// Load the original document. +using (WordDocument originalDocument = new WordDocument("Data/OriginalDocument.docx", FormatType.Docx)) { - //Load the revised document - using (WordDocument revisedDocument = new WordDocument("RevisedDocument.docx")) + // Load the revised document. + using (WordDocument revisedDocument = new WordDocument("Data/RevisedDocument.docx", FormatType.Docx)) { - //Set the Comparison option detect format changes, whether to detect format changes while comparing two Word documents. + // Set whether to detect format changes while comparing two Word documents. ComparisonOptions compareOptions = new ComparisonOptions(); compareOptions.DetectFormatChanges = false; - //Compare the original document with the revised document + // Compare the original and revised Word documents. originalDocument.Compare(revisedDocument, "Syncfusion", DateTime.Now, compareOptions); - //Save the Word document. - originalDocument.Save(output); - } -} + // Save the Word document. + originalDocument.Save("Result.docx"); + } +} {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Load the original document -Using originalDocument As New WordDocument("OriginalDocument.docx") - 'Load the revised document - Using revisedDocument As New WordDocument("RevisedDocument.docx") - 'Set the Comparison option to detect format changes +Imports Syncfusion.DocIO +Imports Syncfusion.DocIO.DLS + +' Load the original document. +Using originalDocument As New WordDocument("Data/OriginalDocument.docx", FormatType.Docx) + ' Load the revised document. + Using revisedDocument As New WordDocument("Data/RevisedDocument.docx", FormatType.Docx) + ' Set whether to detect format changes while comparing two Word documents. Dim compareOptions As New ComparisonOptions() compareOptions.DetectFormatChanges = False - 'Compare the original document with the revised document + ' Compare the original and revised Word documents. originalDocument.Compare(revisedDocument, "Syncfusion", DateTime.Now, compareOptions) - 'Save the Word document - originalDocument.Save(output) + ' Save the Word document. + originalDocument.Save("Result.docx") End Using End Using diff --git a/Document-Processing/Word/Word-Library/NET/Word-document/Iterating-Word-document-elements.md b/Document-Processing/Word/Word-Library/NET/Word-document/Iterating-Word-document-elements.md index c3f21a3288..2671a6625c 100644 --- a/Document-Processing/Word/Word-Library/NET/Word-document/Iterating-Word-document-elements.md +++ b/Document-Processing/Word/Word-Library/NET/Word-document/Iterating-Word-document-elements.md @@ -7,7 +7,7 @@ documentation: UG --- # Iterating Word document elements -The following are the important points to be remembered while iterating the document elements +The following are the important points to be remembered while iterating the document elements. * Document consists of one or more sections. * Section contains the contents present in Headers, Footers and main document through the instances of [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html). @@ -28,7 +28,7 @@ using (WordDocument document = new WordDocument(fileStreamPath, FormatType.Autom { foreach (WSection section in document.Sections) { - //Accesses the Body of section where all the contents in document are apart + //Accesses the Body of section where all the contents in document reside WTextBody sectionBody = section.Body; IterateTextBody(sectionBody); WHeadersFooters headersFooters = section.HeadersFooters; @@ -41,6 +41,8 @@ using (WordDocument document = new WordDocument(fileStreamPath, FormatType.Autom document.Save(stream, FormatType.Docx); //Closes the Word document document.Close(); + //Saves the MemoryStream to a file + File.WriteAllBytes("Result.docx", stream.ToArray()); } {% endhighlight %} @@ -50,7 +52,7 @@ WordDocument document = new WordDocument("Template.docx"); //Processes the body contents for each section in the Word document foreach (WSection section in document.Sections) { - //Accesses the Body of section where all the contents in document are apart + //Accesses the Body of section where all the contents in document reside WTextBody sectionBody = section.Body; IterateTextBody(sectionBody); WHeadersFooters headersFooters = section.HeadersFooters; @@ -69,7 +71,7 @@ document.Close(); Dim document As New WordDocument("Template.docx") 'Processes the body contents for each section in the Word document For Each section As WSection In document.Sections - 'Accesses the Body of section where all the contents in document are apart + 'Accesses the Body of section where all the contents in document reside Dim sectionBody As WTextBody = section.Body IterateTextBody(sectionBody) Dim headersFooters As WHeadersFooters = section.HeadersFooters @@ -118,7 +120,7 @@ private static void IterateTextBody(WTextBody textBody) break; case EntityType.BlockContentControl: BlockContentControl blockContentControl = bodyItemEntity as BlockContentControl; - //Iterates to the body items of Block Content Control. + //Iterates through the body items of Block Content Control. IterateTextBody(blockContentControl.TextBody); break; } @@ -155,7 +157,7 @@ private static void IterateTextBody(WTextBody textBody) break; case EntityType.BlockContentControl: BlockContentControl blockContentControl = bodyItemEntity as BlockContentControl; - //Iterates to the body items of Block Content Control. + //Iterates through the body items of Block Content Control. IterateTextBody(blockContentControl.TextBody); break; } @@ -171,7 +173,7 @@ For i As Integer = 0 To textBody.ChildEntities.Count - 1 'Accesses the body items (should be either paragraph, table or block content control) as IEntity Dim bodyItemEntity As IEntity = textBody.ChildEntities(i) 'A Text body has 3 types of elements - Paragraph, Table and Block Content Control - 'decide the element type using EntityType + 'Determines the element type using EntityType Select Case bodyItemEntity.EntityType Case EntityType.Paragraph Dim paragraph As WParagraph = TryCast(bodyItemEntity, WParagraph) @@ -188,7 +190,7 @@ For i As Integer = 0 To textBody.ChildEntities.Count - 1 Exit Select Case EntityType.BlockContentControl Dim BlockContentControl As BlockContentControl = TryCast(bodyItemEntity, BlockContentControl) - 'Iterates to the body items of Block Content Control. + 'Iterates through the body items of Block Content Control. IterateTextBody(BlockContentControl.TextBody) Exit Select End Select @@ -256,7 +258,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Modify Hyperlink Uri -The following code example shows how to iterate throughout the paragraph and modify the hyperlink ([Hyperlink](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Hyperlink.html)) Uri and specific text ([WTextRange](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Hyperlink.html)) with another. +The following code example shows how to iterate throughout the paragraph and modify the hyperlink ([Hyperlink](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Hyperlink.html)) Uri and specific text ([WTextRange](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextRange.html)) with another. The sample also replaces the text "Andrew" with "Fuller" and updates any hyperlink whose display text is "HTML" to point to `http://www.w3schools.com/`. These values are sample-specific; update them to suit your document. {% tabs %} @@ -267,7 +269,7 @@ using (WordDocument document = new WordDocument(fileStreamPath, FormatType.Autom { foreach (WSection section in document.Sections) { - //Accesses the Body of section where all the contents in document are apart + //Accesses the Body of section where all the contents in document reside WTextBody sectionBody = section.Body; IterateTextBody(sectionBody); WHeadersFooters headersFooters = section.HeadersFooters; @@ -280,6 +282,8 @@ using (WordDocument document = new WordDocument(fileStreamPath, FormatType.Autom document.Save(stream, FormatType.Docx); //Closes the Word document document.Close(); + //Saves the MemoryStream to a file + File.WriteAllBytes("Result.docx", stream.ToArray()); } {% endhighlight %} @@ -289,11 +293,11 @@ WordDocument document = new WordDocument("Template.docx"); //Processes the body contents for each section in the Word document foreach (WSection section in document.Sections) { - //Accesses the Body of section where all the contents in document are apart + //Accesses the Body of section where all the contents in document reside WTextBody sectionBody = section.Body; IterateTextBody(sectionBody); WHeadersFooters headersFooters = section.HeadersFooters; - //consider that OddHeader & OddFooter are applied to this document + //Consider that OddHeader and OddFooter are applied to this document //Iterates through the TextBody of OddHeader and OddFooter IterateTextBody(headersFooters.OddHeader); IterateTextBody(headersFooters.OddFooter); @@ -307,12 +311,13 @@ document.Close(); Dim document As New WordDocument("Template.docx") 'Processes the body contents for each section in the Word document For Each section As WSection In document.Sections - 'Accesses the Body of section where all the contents in document are apart + 'Accesses the Body of section where all the contents in document reside Dim sectionBody As WTextBody = section.Body IterateTextBody(sectionBody) Dim headersFooters As WHeadersFooters = section.HeadersFooters - 'Considers that OddHeader and OddFooter are applied to this document - 'Iterates through the TextBody of OddHeader and OddFooterIterateTextBody(headersFooters.OddHeader) + 'Assume that OddHeader and OddFooter are applied to this document + 'Iterates through the TextBody of OddHeader and OddFooter + IterateTextBody(headersFooters.OddHeader) IterateTextBody(headersFooters.OddFooter) Next 'Saves and closes the document instance @@ -352,7 +357,7 @@ private static void IterateTextBody(WTextBody textBody) break; case EntityType.BlockContentControl: BlockContentControl blockContentControl = bodyItemEntity as BlockContentControl; - //Iterates to the body items of Block Content Control. + //Iterates through the body items of Block Content Control. IterateTextBody(blockContentControl.TextBody); break; } @@ -386,7 +391,7 @@ private static void IterateTextBody(WTextBody textBody) break; case EntityType.BlockContentControl: BlockContentControl blockContentControl = bodyItemEntity as BlockContentControl; - //Iterates to the body items of Block Content Control. + //Iterates through the body items of Block Content Control. IterateTextBody(blockContentControl.TextBody); break; } @@ -417,7 +422,7 @@ For i As Integer = 0 To textBody.ChildEntities.Count - 1 Exit Select Case EntityType.BlockContentControl Dim BlockContentControl As BlockContentControl = TryCast(bodyItemEntity, BlockContentControl) - 'Iterates to the body items of Block Content Control. + 'Iterates through the body items of Block Content Control. IterateTextBody(BlockContentControl.TextBody) Exit Select End Select @@ -517,17 +522,17 @@ private static void IterateParagraph(ParagraphItemCollection paraItems) } break; case EntityType.TextBox: - //Iterates to the body items of textbox. + //Iterates through the body items of textbox. WTextBox textBox = entity as WTextBox; IterateTextBody(textBox.TextBoxBody); break; case EntityType.Shape: - //Iterates to the body items of shape. + //Iterates through the body items of shape. Shape shape = entity as Shape; IterateTextBody(shape.TextBody); break; case EntityType.InlineContentControl: - //Iterates to the paragraph items of inline content control. + //Iterates through the paragraph items of inline content control. InlineContentControl inlineContentControl = entity as InlineContentControl; IterateParagraph(inlineContentControl.ParagraphItems); break; @@ -568,17 +573,17 @@ private static void IterateParagraph(ParagraphItemCollection paraItems) } break; case EntityType.TextBox: - //Iterates to the body items of textbox. + //Iterates through the body items of textbox. WTextBox textBox = entity as WTextBox; IterateTextBody(textBox.TextBoxBody); break; case EntityType.Shape: - //Iterates to the body items of shape. + //Iterates through the body items of shape. Shape shape = entity as Shape; IterateTextBody(shape.TextBody); break; case EntityType.InlineContentControl: - //Iterates to the paragraph items of inline content control. + //Iterates through the paragraph items of inline content control. InlineContentControl inlineContentControl = entity as InlineContentControl; IterateParagraph(inlineContentControl.ParagraphItems); break; @@ -613,17 +618,17 @@ For i As Integer = 0 To paraItems.Count - 1 End If Exit Select Case EntityType.TextBox - 'Iterates to the body items of textbox. + 'Iterates through the body items of textbox. Dim textBox As WTextBox = TryCast(entity, WTextBox) IterateTextBody(textBox.TextBoxBody) Exit Select Case EntityType.Shape - 'Iterates to the body items of shape. + 'Iterates through the body items of shape. Dim shape As Shape = TryCast(entity, Shape) IterateTextBody(shape.TextBody) Exit Select Case EntityType.InlineContentControl - 'Iterates to the paragraph items of inline content control. + 'Iterates through the paragraph items of inline content control. Dim inlineContentControl As InlineContentControl = TryCast(entity, InlineContentControl) IterateParagraph(inlineContentControl.ParagraphItems) Exit Select diff --git a/Document-Processing/Word/Word-Library/NET/Word-document/Merging-Word-documents.md b/Document-Processing/Word/Word-Library/NET/Word-document/Merging-Word-documents.md index 21b8ea0ad2..1e1606f1ab 100644 --- a/Document-Processing/Word/Word-Library/NET/Word-document/Merging-Word-documents.md +++ b/Document-Processing/Word/Word-Library/NET/Word-document/Merging-Word-documents.md @@ -7,11 +7,13 @@ documentation: UG --- # Merging Word documents -You can merge multiple Word documents into single Word document by using DocIO’s capability of importing contents from one document to another. The imported contents are appended at the end of document. +You can merge multiple Word documents into a single Word document by using DocIO’s capability of importing contents from one document to another. The imported contents are appended at the end of the document. + +By default, the imported contents start on a new page. You can also merge the contents on the same page by adjusting the source document’s first section break, as shown in the following sections. ## Assemblies and NuGet packages required -Refer to the following links for assemblies and NuGet packages required based on platforms to merge Word documents using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO). +Refer to the following links for the assemblies and NuGet packages required for each platform to merge Word documents using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO). * [Merge Word documents assemblies](https://help.syncfusion.com/document-processing/word/word-library/net/assemblies-required) * [Merge Word documents NuGet packages](https://help.syncfusion.com/document-processing/word/word-library/net/nuget-packages-required) @@ -19,25 +21,25 @@ Refer to the following links for assemblies and NuGet packages required based on To quickly start merging Word documents, please check out this video: {% youtube "https://www.youtube.com/watch?v=atOSwzidmdw" %} -## Merge document in new page +## Merging documents in a new page -The following code example illustrates how to import the contents from source document into destination document where the contents are appended. +The following code example illustrates how to import the contents from a source document into a destination document where the contents are appended. N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-platform]*** for ASP.NET Core, Blazor, Xamarin, UWP, .NET MAUI, and WinUI; ***C# [Windows-specific]*** for WinForms and WPF; ***VB.NET [Windows-specific]*** for VB.NET applications. {% tabs %} -{% highlight C# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Word-document/Merge-documents-in-new-page/.NET/Merge-documents-in-new-page/Program.cs" %} +{% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Word-document/Merge-documents-in-new-page/.NET/Merge-documents-in-new-page/Program.cs" %} FileStream sourceStreamPath = new FileStream(sourceFileName, FileMode.Open, FileAccess.Read, FileShare.ReadWrite); FileStream destinationStreamPath = new FileStream(destinationFileName, FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -//Opens an source document from file system through constructor of WordDocument class +//Opens a source document from file system through constructor of WordDocument class using (WordDocument document = new WordDocument(sourceStreamPath, FormatType.Automatic)) { //Opens the destination document WordDocument destinationDocument = new WordDocument(destinationStreamPath, FormatType.Docx); //Imports the contents of source document at the end of destination document destinationDocument.ImportContent(document, ImportOptions.UseDestinationStyles); - //Saves and closes the destination document to MemoryStream + //Saves and closes the destination document to a MemoryStream MemoryStream stream = new MemoryStream(); destinationDocument.Save(stream, FormatType.Docx); destinationDocument.Close(); @@ -54,7 +56,7 @@ WordDocument destinationDocument = new WordDocument(targetFileName); destinationDocument.ImportContent(sourceDocument, ImportOptions.UseDestinationStyles); //Saves the destination document destinationDocument.Save(outputFileName, FormatType.Docx); -//closes the document instances +//Closes the document instances sourceDocument.Close(); destinationDocument.Close(); {% endhighlight %} @@ -68,7 +70,7 @@ Dim destinationDocument As New WordDocument(targetFileName) destinationDocument.ImportContent(sourceDocument, ImportOptions.UseDestinationStyles) 'Saves the destination document destinationDocument.Save(outputFileName, FormatType.Docx) -'closes the document instances +'Closes the document instances sourceDocument.Close() destinationDocument.Close() {% endhighlight %} @@ -79,25 +81,25 @@ You can download a complete working sample from [GitHub](https://github.com/Sync In the resultant document, the imported contents start from a new page followed by existing contents in a destination document. This is the default behavior. -## Merge document in same page +## Merging documents on the same page -When your requirement is to append the contents from the same page instead of starting from a new page, you need to set the break code of first section of Source document as [NoBreak](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.SectionBreakCode.html). The following code example illustrates the importing contents from the same page. +When your requirement is to append the contents on the same page instead of starting from a new page, you need to set the break code of the first section of the source document as [NoBreak](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.SectionBreakCode.html). The following code example illustrates how to import the contents on the same page. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Word-document/Merge-documents-in-same-page/.NET/Merge-documents-in-same-page/Program.cs" %} FileStream sourceStreamPath = new FileStream(sourceFileName, FileMode.Open, FileAccess.Read, FileShare.ReadWrite); FileStream destinationStreamPath = new FileStream(destinationFileName, FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -//Opens an source document from file system through constructor of WordDocument class +//Opens a source document from file system through constructor of WordDocument class using (WordDocument document = new WordDocument(sourceStreamPath, FormatType.Automatic)) { //Opens the destination document WordDocument destinationDocument = new WordDocument(destinationStreamPath, FormatType.Docx); - //Sets the break-code of First section of source document as NoBreak to avoid imported from a new page + //Sets the break code of the first section of the source document as NoBreak to avoid importing from a new page document.Sections[0].BreakCode = SectionBreakCode.NoBreak; //Imports the contents of source document at the end of destination document destinationDocument.ImportContent(document, ImportOptions.UseDestinationStyles); - //Saves and closes the destination document to MemoryStream + //Saves and closes the destination document to a MemoryStream MemoryStream stream = new MemoryStream(); destinationDocument.Save(stream, FormatType.Docx); destinationDocument.Close(); @@ -110,7 +112,7 @@ using (WordDocument document = new WordDocument(sourceStreamPath, FormatType.Aut WordDocument sourceDocument = new WordDocument(sourceFileName); //Opens the destination document WordDocument destinationDocument = new WordDocument(targetFileName); -//Sets the break-code of First section of source document as NoBreak to avoid imported from a new page +//Sets the break code of the first section of the source document as NoBreak to avoid importing from a new page sourceDocument.Sections[0].BreakCode = SectionBreakCode.NoBreak; //Imports the contents of source document at the end of destination document destinationDocument.ImportContent(sourceDocument, ImportOptions.UseDestinationStyles); @@ -126,7 +128,7 @@ destinationDocument.Close(); Dim sourceDocument As New WordDocument(sourceFileName) 'Opens the destination document Dim destinationDocument As New WordDocument(targetFileName) -'Sets the break-code of first section of source document as NoBreak to avoid imported from a new page +'Sets the break code of the first section of the source document as NoBreak to avoid importing from a new page sourceDocument.Sections(0).BreakCode = SectionBreakCode.NoBreak 'Imports the contents of source document at the end of destination document destinationDocument.ImportContent(sourceDocument, ImportOptions.UseDestinationStyles) @@ -141,7 +143,7 @@ destinationDocument.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-document/Merge-documents-in-same-page). -## Maintain Imported List style information +## Maintain imported list style information The following code example shows how to maintain information about imported list styles in a Word document while cloning and merging multiple Word documents. @@ -228,6 +230,8 @@ destinationDocument.Close() {% endtabs %} + + ## See Also * [How to merge multiple Word documents in C#, VB.NET](https://support.syncfusion.com/kb/article/11499/how-to-merge-multiple-word-documents-in-c-vb-net) diff --git a/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md b/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md index c485556971..ef4c86fd55 100644 --- a/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md +++ b/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md @@ -1,6 +1,6 @@ --- title: Print Word documents in C# | DocIO | Syncfusion -description: Learn how to print the Word documents into one using .NET Word (DocIO) library without Microsoft Word or interop dependencies. +description: Learn how to print Word documents using the .NET Word (DocIO) library without Microsoft Word or interop dependencies. platform: document-processing control: DocIO documentation: UG @@ -9,7 +9,7 @@ documentation: UG You can print a Word document by utilizing DocIO’s capability to convert the document into images and .NET framework’s [PrintDocument](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.printing.printdocument?view=dotnet-plat-ext-7.0&viewFallbackFrom=net-5.0) class -Initially you have to render the pages as images as shown below +Initially you have to render the pages of the Word document as images, as shown below. N> Refer to the appropriate tabs in the code snippets section: ***C# [Windows-specific]*** for WinForms and WPF; ***VB.NET [Windows-specific]*** for VB.NET applications. @@ -20,7 +20,7 @@ N> Refer to the appropriate tabs in the code snippets section: ***C# [Windows-sp WordDocument document = new WordDocument((string)this.textBox.Tag); //Renders the Word document as image Image[] images = document.RenderAsImages(ImageType.Metafile); -//Closes the Word Document +//Closes the Word document document.Close(); {% endhighlight %} @@ -29,15 +29,18 @@ document.Close(); Dim document As New WordDocument(DirectCast(Me.textBox.Tag, String)) 'Renders the Word document as image Dim images As Image() = document.RenderAsImages(ImageType.Metafile) -'Closes the Word Document +'Closes the Word document document.Close() {% endhighlight %} {% endtabs %} -You can specify the printer settings and page settings through the [PrintDocument](https://docs.microsoft.com/en-us/dotnet/api/system.drawing.printing.printdocument?view=net-5.0) class. The [PrintDocument.PrintPage](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.printing.printdocument?view=dotnet-plat-ext-7.0&viewFallbackFrom=net-5.0) event should be handled to layout the document for printing. +## Configuring print settings -The following code example demonstrates how to print the Word document pages that have been rendered as an image: +You can specify the printer settings and page settings through the [PrintDocument](https://learn.microsoft.com/dotnet/api/system.drawing.printing.printdocument) class. The [PrintDocument.PrintPage](https://learn.microsoft.com/dotnet/api/system.drawing.printing.printdocument.printpage) event should be handled to layout the document for printing. The following code example demonstrates how to print the Word document pages that have been rendered as an image, using the `images` array produced in the previous snippet. + + +N> `startPageIndex` must be declared as a class-level integer field (initialize it to `0`). The snippet updates it based on the page range chosen in the print dialog. {% tabs %} @@ -66,7 +69,7 @@ if (printDialog.ShowDialog() == System.Windows.Forms.DialogResult.OK) endPageIndex = printDialog.PrinterSettings.ToPage; //Hooks the PrintPage event to handle the drawing pages for printing printDialog.Document.PrintPage += new PrintPageEventHandler(PrintPageMethod); - //Print the document + //Prints the document printDialog.Document.Print(); } } @@ -87,14 +90,14 @@ printDialog.PrinterSettings.FromPage = 1 printDialog.PrinterSettings.ToPage = images.Length 'Opens the print dialog box If printDialog.ShowDialog() = System.Windows.Forms.DialogResult.OK Then - 'Checks whether the selected page range is valid or not + 'Checks whether the selected page range is valid If printDialog.PrinterSettings.FromPage > 0 AndAlso printDialog.PrinterSettings.ToPage <= images.Length Then 'Updates the start page of the document to print startPageIndex = printDialog.PrinterSettings.FromPage - 1 'Updates the end page of the document to print endPageIndex = printDialog.PrinterSettings.ToPage 'Hooks the PrintPage event to handle the drawing pages for printing - printDialog.Document.PrintPage += New PrintPageEventHandler(PrintPageMethod) + AddHandler printDialog.Document.PrintPage, AddressOf PrintPageMethod 'Prints the document printDialog.Document.Print() End If @@ -184,6 +187,8 @@ End Sub You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-document/Print-Word-document). +N> If `RenderAsImages` returns an empty array (for example, an empty document), skip printing and check the input document. Ensure the rendered array length is validated before configuring the page range. + ## See Also -* [How to do silent printing to print the Word document by rendering document pages as Image using Essential® DocIO](https://support.syncfusion.com/kb/article/4546/how-to-do-silent-printing-to-print-the-word-document-by-rendering-document-pages-as-image) \ No newline at end of file +* [How to do silent printing to print the Word document by rendering document pages as image using DocIO](https://support.syncfusion.com/kb/article/4546/how-to-do-silent-printing-to-print-the-word-document-by-rendering-document-pages-as-image) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Library/NET/Word-document/Split-Word-documents.md b/Document-Processing/Word/Word-Library/NET/Word-document/Split-Word-documents.md index 7324de4a34..2755146367 100644 --- a/Document-Processing/Word/Word-Library/NET/Word-document/Split-Word-documents.md +++ b/Document-Processing/Word/Word-Library/NET/Word-document/Split-Word-documents.md @@ -7,9 +7,9 @@ documentation: UG --- # Split Word documents -The [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) allows you to split the large Word document into number of smaller word documents by the sections, headings, bookmarks, and placeholder text in programmatically. +The [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) allows you to split a large Word document into a number of smaller Word documents by section, heading, bookmark, and placeholder text programmatically. -By using this feature, you can be able to split/extract the necessary parts from the original document for further processing. +By using this feature, you can split/extract the necessary parts from the original document for further processing. You can save the resultant document as a Word document (DOCX, WordML, DOC), PDF, image, HTML, RTF, and more. @@ -18,14 +18,16 @@ To quickly start splitting Word documents, please check out this video: ## Assemblies and NuGet packages required -Refer to the following links for assemblies and NuGet packages required based on platforms to split Word documents using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO). +Refer to the following links for the assemblies and NuGet packages required for each platform to split Word documents using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO). * [Split Word documents assemblies](https://help.syncfusion.com/document-processing/word/word-library/net/assemblies-required) * [Split Word documents NuGet packages](https://help.syncfusion.com/document-processing/word/word-library/net/nuget-packages-required) +N> The code samples use the namespaces `Syncfusion.DocIO.DLS`, `System.IO`, and `System.Text.RegularExpressions`. Add the corresponding `using`/`Imports` directives for these namespaces before running the samples. + ## Split by Section -The following code example illustrates how to split the Word document by sections. +The following code example illustrates how to split the Word document by section. N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-platform]*** for ASP.NET Core, Blazor, Xamarin, UWP, .NET MAUI, and WinUI; ***C# [Windows-specific]*** for WinForms and WPF; ***VB.NET [Windows-specific]*** for VB.NET applications. @@ -33,8 +35,8 @@ N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-plat {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Word-document/Split-by-section/.NET/Split-by-section/Program.cs" %} FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -//Load the template document as stream -using(WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx)) +//Load the template document as a stream +using (WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx)) { //Iterate each section from Word document for (int i = 0; i < document.Sections.Count; i++) @@ -43,11 +45,13 @@ using(WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx)) WordDocument newDocument = new WordDocument(); //Add cloned section into new Word document newDocument.Sections.Add(document.Sections[i].Clone()); - //Saves the Word document to MemoryStream - FileStream outputStream = new FileStream("Section" + i + ".docx", FileMode.OpenOrCreate, FileAccess.ReadWrite); - newDocument.Save(outputStream, FormatType.Docx); - //Closes the document - newDocument.Close(); + //Saves the Word document to a file stream + using (FileStream outputStream = new FileStream("Section" + i + ".docx", FileMode.OpenOrCreate, FileAccess.ReadWrite)) + { + newDocument.Save(outputStream, FormatType.Docx); + //Closes the document + newDocument.Close(); + } } } {% endhighlight %} @@ -63,7 +67,7 @@ using (WordDocument document = new WordDocument(@"Template.docx")) WordDocument newDocument = new WordDocument(); //Add cloned section into new Word document newDocument.Sections.Add(document.Sections[i].Clone()); - //Save and close the new Word documet + //Save and close the new Word document newDocument.Save("Section" + i + ".docx"); newDocument.Close(); } @@ -90,7 +94,7 @@ End Using You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-document/Split-by-section). -## Split by Headings +## Split by Heading The following code example illustrates how to split the Word document by using headings. @@ -99,13 +103,13 @@ The following code example illustrates how to split the Word document by using h {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Word-document/Split-by-heading/.NET/Split-by-heading/Program.cs" %} using (FileStream inputStream = new FileStream("Template.docx", FileMode.Open, FileAccess.Read)) { - //Load the template document as stream + //Load the template document as a stream using (WordDocument document = new WordDocument(inputStream, FormatType.Docx)) { WordDocument newDocument = null; WSection newSection = null; int headingIndex = 0; - /Iterate each section in the Word document. + //Iterate each section in the Word document. foreach (WSection section in document.Sections) { // Clone the section and add into new document. @@ -154,7 +158,7 @@ using (FileStream inputStream = new FileStream("Template.docx", FileMode.Open, F private static WSection AddSection(WordDocument newDocument, WSection section) { - //Create new session based on original document + //Create a new section based on the original document WSection newSection = section.Clone(); newSection.Body.ChildEntities.Clear(); //Remove the first page header. @@ -200,8 +204,8 @@ using (WordDocument doc = new WordDocument("Template.docx")) WordDocument newDocument = null; WSection newSection = null; int headingIndex = 0; - /Iterate each section in the Word document. - foreach (WSection section in document.Sections) + //Iterate each section in the Word document. + foreach (WSection section in doc.Sections) { // Clone the section and add into new document. if (newDocument != null) @@ -248,7 +252,7 @@ using (WordDocument doc = new WordDocument("Template.docx")) private static WSection AddSection(WordDocument newDocument, WSection section) { - //Create new session based on original document + //Create a new section based on the original document WSection newSection = section.Clone(); newSection.Body.ChildEntities.Clear(); //Remove the first page header. @@ -276,7 +280,7 @@ private static void AddEntity(WSection newSection, Entity entity) private static void SaveWordDocument(WordDocument newDocument, string fileName) { - //Save file stream as Word document + //Save the new Word document newDocument.Save(fileName, FormatType.Docx); //Closes the document newDocument.Close(); @@ -291,7 +295,7 @@ Using doc As WordDocument = New WordDocument("Template.docx") Dim newSection As WSection = Nothing Dim headingIndex = 0 'Iterate each section in the Word document. - For Each section As WSection In document.Sections + For Each section As WSection In doc.Sections ' Clone the section and add into new document. If newDocument IsNot Nothing Then newSection = AddSection(newDocument, section) 'Iterate each child entity in the Word document. @@ -302,7 +306,7 @@ Using doc As WordDocument = New WordDocument("Template.docx") Dim paragraph As WParagraph = TryCast(item, WParagraph) 'If paragraph has Heading 1 style, then save the traversed content as separate document. 'And create new document for new heading content. - If paragraph.StyleName Is "Heading 1" Then + If paragraph.StyleName = "Heading 1" Then If newDocument IsNot Nothing Then 'Saves the Word document Dim fileName As String = "Document" & (headingIndex + 1).ToString() & ".docx" @@ -359,7 +363,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Split by Bookmark -The following code example illustrates how to split the Word document using bookmarks. +The following code example illustrates how to split the Word document using bookmarks. The [`BookmarksNavigator.MoveToBookmark`](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html) API moves the virtual cursor to a bookmark, and [`GetContent`](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html) returns the bookmark range as a `WordDocumentPart`; calling `WordDocumentPart.GetAsWordDocument()` produces a standalone `WordDocument` containing the bookmark's contents. + {% tabs %} @@ -374,7 +379,7 @@ using (WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx) //Iterate each bookmark in Word document. foreach (Bookmark bookmark in bookmarkCollection) { - //Move the virtual cursor to the location before the end of the bookmark. + //Move the virtual cursor to the bookmark. bookmarksNavigator.MoveToBookmark(bookmark.Name); //Get the bookmark content as WordDocumentPart. WordDocumentPart documentPart = bookmarksNavigator.GetContent(); @@ -401,7 +406,7 @@ using (WordDocument document = new WordDocument("Template.docx", FormatType.Docx //Iterate each bookmark in Word document. foreach (Bookmark bookmark in bookmarkCollection) { - //Move the virtual cursor to the location before the end of the bookmark. + //Move the virtual cursor to the bookmark. bookmarksNavigator.MoveToBookmark(bookmark.Name); //Get the bookmark content as WordDocumentPart. WordDocumentPart documentPart = bookmarksNavigator.GetContent(); @@ -422,7 +427,7 @@ Using document As WordDocument = New WordDocument("Template.docx", FormatType.Do Dim bookmarkCollection As BookmarkCollection = document.Bookmarks 'Iterate each bookmark in Word document. For Each bookmark As Bookmark In bookmarkCollection - 'Move the virtual cursor to the location before the end of the bookmark. + 'Move the virtual cursor to the bookmark. bookmarksNavigator.MoveToBookmark(bookmark.Name) 'Get the bookmark content as WordDocumentPart. Dim documentPart As WordDocumentPart = bookmarksNavigator.GetContent() @@ -644,4 +649,4 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * Explore how to split a Word document by section using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/splitbysection#/tailwind). * See how to split a Word document by heading using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/splitbyheading#/tailwind). * See how to split a Word document by bookmark using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/splitbybookmark#/tailwind). -* See how to split a Word document by placeholder using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/splitbyplaceholder#/tailwind). \ No newline at end of file +* See how to split a Word document by placeholder text using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/splitbyplaceholder#/tailwind). diff --git a/Document-Processing/Word/Word-Library/NET/Working-With-Images.md b/Document-Processing/Word/Word-Library/NET/Working-With-Images.md index 9f92204443..8c46df8289 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-With-Images.md +++ b/Document-Processing/Word/Word-Library/NET/Working-With-Images.md @@ -5,9 +5,9 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Images in Word document +# Working with Images in a Word document -DocIO provides support for both inline and absolute positioned images. +DocIO provides support for both inline and absolute positioned images. * Inline images: The position of the image is constrained to the lines of text on the page. * Absolute positioned images: The images can be positioned anywhere irrespective of the lines of text. @@ -25,8 +25,8 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph firstParagraph = section.AddParagraph(); -//Adds image to the paragraph -FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.ReadWrite); +//Adds image to the paragraph +FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.Read); IWPicture picture = firstParagraph.AppendPicture(imageStream); //Sets height and width for the image picture.Height = 100; @@ -45,7 +45,7 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph firstParagraph = section.AddParagraph(); -//Adds image to the paragraph +//Adds image to the paragraph IWPicture picture = firstParagraph.AppendPicture(Image.FromFile("Image.png")); //Sets height and width for the image picture.Height = 100; @@ -63,7 +63,7 @@ Dim document As New WordDocument() Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim firstParagraph As IWParagraph = section.AddParagraph() -'Adds image to the paragraph +'Adds image to the paragraph Dim picture As IWPicture = firstParagraph.AppendPicture(Image.FromFile("Image.png")) 'Sets height and width for the image picture.Height = 100 @@ -82,12 +82,14 @@ You can download a complete working sample from [GitHub](https://github.com/Sync Image present in the document can be replaced with a new image. This can be achieved by iterating through the paragraph items. +N> To identify images by `Title`, the `Title` property must have been set on the picture in the source document (for example, by Microsoft Word's "Alt Text" panel, or by setting `picture.Title` when the picture was created with DocIO). + The following code example explains how to replace an existing image. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Replace-image/.NET/Replace-image/Program.cs" %} -FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.ReadWrite); +FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.Read); //Loads the template document WordDocument document = new WordDocument(fileStream, FormatType.Automatic); WTextBody textbody = document.Sections[0].Body; @@ -103,7 +105,7 @@ foreach (WParagraph paragraph in textbody.Paragraphs) //Replaces the image if (picture.Title == "Bookmark") { - FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.ReadWrite); + FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.Read); picture.LoadImage(imageStream); } } @@ -177,7 +179,7 @@ The following code example explains how to remove the image from the paragraph i {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Remove-image/.NET/Remove-image/Program.cs" %} -FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.ReadWrite); +FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.Read); //Loads the template document WordDocument document = new WordDocument(fileStream, FormatType.Automatic); WTextBody textbody = document.Sections[0].Body; @@ -267,7 +269,7 @@ IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); paragraph.AppendText("This paragraph has picture. "); -FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.ReadWrite); +FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.Read); //Appends new picture to the paragraph WPicture picture = paragraph.AppendPicture(imageStream) as WPicture; //Sets text wrapping style – When the wrapping style is inline, the images are not absolutely positioned. It is added next to the text range. @@ -275,8 +277,8 @@ picture.TextWrappingStyle = TextWrappingStyle.Square; //Sets horizontal and vertical origin picture.HorizontalOrigin = HorizontalOrigin.Page; picture.VerticalOrigin = VerticalOrigin.Paragraph; -//Sets width and height for the paragraph -picture.Width = 150; +//Sets width and height for the picture +picture.Width = 150; picture.Height = 100; //Sets horizontal and vertical position for the picture picture.HorizontalPosition = 200; @@ -313,7 +315,7 @@ picture.TextWrappingStyle = TextWrappingStyle.Square; //Sets horizontal and vertical origin picture.HorizontalOrigin = HorizontalOrigin.Page; picture.VerticalOrigin = VerticalOrigin.Paragraph; -//Sets width and height for the paragraph +//Sets width and height for the picture picture.Width = 150; picture.Height = 100; //Sets horizontal and vertical position for the picture @@ -350,7 +352,7 @@ picture.TextWrappingStyle = TextWrappingStyle.Square 'Sets horizontal and vertical origin picture.HorizontalOrigin = HorizontalOrigin.Page picture.VerticalOrigin = VerticalOrigin.Paragraph -'Sets width and height for the paragraph +'Sets width and height for the picture picture.Width = 150 picture.Height = 100 'Sets horizontal and vertical position for the picture @@ -378,14 +380,14 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Find an image by title -An Image with a specific title can be retrieved by iterating the paragraph items that can be used for further manipulations. +An image with a specific title can be retrieved by iterating the text body child entities (paragraphs, tables, etc.) and the paragraph items within them, so that it can be used for further manipulations. The following code example explains how images can be iterated from the document elements. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Find-an-image-by-title/.NET/Find-an-image-by-title/Program.cs" %} -FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.ReadWrite); +FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.Read); //Loads an existing Word document into DocIO instance WordDocument document = new WordDocument(fileStream, FormatType.Docx); //Gets textbody content @@ -419,7 +421,7 @@ document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Loads an existing Word document WordDocument document = new WordDocument("Template.docx"); //Gets textbody content WTextBody textBody = document.Sections[0].Body; @@ -451,7 +453,7 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Loads an existing Word document Dim document As New WordDocument("Template.docx") 'Gets textbody content Dim textBody As WTextBody = document.Sections(0).Body @@ -481,9 +483,15 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Find-an-image-by-title). -## Add Image caption +## Add image caption + +You can add caption to an image and update the caption numbers (Sequence fields) using [AddCaption](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WPicture.html#Syncfusion_DocIO_DLS_WPicture_AddCaption_System_String_Syncfusion_DocIO_CaptionNumberingFormat_Syncfusion_DocIO_CaptionPosition_) method. The `AddCaption` method accepts the following parameters: -You can add caption to an image and update the caption numbers (Sequence fields) using [AddCaption](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WPicture.html#Syncfusion_DocIO_DLS_WPicture_AddCaption_System_String_Syncfusion_DocIO_CaptionNumberingFormat_Syncfusion_DocIO_CaptionPosition_) method. +* `imageName`: The caption label name (e.g., "Figure", "Table"). +* `captionNumberingFormat`: A `CaptionNumberingFormat` value that controls how the caption number is formatted (e.g., `Roman`, `Number`). +* `captionPosition`: A `CaptionPosition` value that determines whether the caption appears before or after the image (e.g., `AfterImage`, `BeforeImage`). + +N> Call `UpdateDocumentFields()` after adding captions so that the sequence (caption number) fields are computed and rendered in the output. The following code example shows how to add caption to an image. @@ -499,29 +507,29 @@ section.PageSetup.Margins.All = 72; //Adds a paragraph to the section IWParagraph paragraph = section.AddParagraph(); paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; -//Adds image to the paragraph -FileStream imageStream = new FileStream(@"Google.png", FileMode.Open, FileAccess.ReadWrite); +//Adds image to the paragraph +FileStream imageStream = new FileStream(@"Google.png", FileMode.Open, FileAccess.Read); IWPicture picture = paragraph.AppendPicture(imageStream); //Adds Image caption -IWParagraph lastParagragh = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); +IWParagraph lastParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); //Aligns the caption -lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; +lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; //Sets after spacing -lastParagragh.ParagraphFormat.AfterSpacing = 12f; +lastParagraph.ParagraphFormat.AfterSpacing = 12f; //Sets before spacing -lastParagragh.ParagraphFormat.BeforeSpacing = 1.5f; +lastParagraph.ParagraphFormat.BeforeSpacing = 1.5f; //Adds a paragraph to the section paragraph = section.AddParagraph(); paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; -//Adds image to the paragraph -imageStream = new FileStream(@"Yahoo.png", FileMode.Open, FileAccess.ReadWrite); +//Adds image to the paragraph +imageStream = new FileStream(@"Yahoo.png", FileMode.Open, FileAccess.Read); picture = paragraph.AppendPicture(imageStream); //Adds Image caption -lastParagragh = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); +lastParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); //Aligns the caption -lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; +lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; //Sets before spacing -lastParagragh.ParagraphFormat.BeforeSpacing = 1.5f; +lastParagraph.ParagraphFormat.BeforeSpacing = 1.5f; //Updates the fields in Word document document.UpdateDocumentFields(); //Saves the Word document to MemoryStream. @@ -541,27 +549,27 @@ section.PageSetup.Margins.All = 72; //Adds a paragraph to the section IWParagraph paragraph = section.AddParagraph(); paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; -//Adds image to the paragraph +//Adds image to the paragraph IWPicture picture = paragraph.AppendPicture(Image.FromFile("Google.png")); //Adds Image caption -IWParagraph lastParagragh = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); +IWParagraph lastParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); //Aligns the caption -lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; +lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; //Sets after spacing -lastParagragh.ParagraphFormat.AfterSpacing = 12f; +lastParagraph.ParagraphFormat.AfterSpacing = 12f; //Sets before spacing -lastParagragh.ParagraphFormat.BeforeSpacing = 1.5f; +lastParagraph.ParagraphFormat.BeforeSpacing = 1.5f; //Adds a paragraph to the section paragraph = section.AddParagraph(); paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; -//Adds image to the paragraph +//Adds image to the paragraph picture = paragraph.AppendPicture(Image.FromFile("Yahoo.png")); //Adds Image caption -lastParagragh = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); +lastParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); //Aligns the caption -lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; +lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; //Sets before spacing -lastParagragh.ParagraphFormat.BeforeSpacing = 1.5f; +lastParagraph.ParagraphFormat.BeforeSpacing = 1.5f; //Updates the fields in Word document document.UpdateDocumentFields(); //Saves and closes the document @@ -579,27 +587,27 @@ section.PageSetup.Margins.All = 72 'Adds a paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center -'Adds image to the paragraph +'Adds image to the paragraph Dim picture As IWPicture = paragraph.AppendPicture(Image.FromFile("Google.png")) 'Adds Image caption -Dim lastParagragh As IWParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage) +Dim lastParagraph As IWParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage) 'Aligns the caption -lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center +lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center 'Sets after spacing -lastParagragh.ParagraphFormat.AfterSpacing = 12.0F +lastParagraph.ParagraphFormat.AfterSpacing = 12.0F 'Sets before spacing -lastParagragh.ParagraphFormat.BeforeSpacing = 1.5F +lastParagraph.ParagraphFormat.BeforeSpacing = 1.5F 'Adds a paragraph to the section paragraph = section.AddParagraph paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center -'Adds image to the paragraph +'Adds image to the paragraph picture = paragraph.AppendPicture(Image.FromFile("Yahoo.png")) 'Adds Image caption -lastParagragh = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage) +lastParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage) 'Aligns the caption -lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center +lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center 'Sets before spacing -lastParagragh.ParagraphFormat.BeforeSpacing = 1.5F +lastParagraph.ParagraphFormat.BeforeSpacing = 1.5F 'Updates the fields in Word document document.UpdateDocumentFields() 'Saves and closes the document @@ -619,14 +627,14 @@ By executing the above code example, it generates output Word document as follow To add an SVG image to a paragraph in a Word document using Syncfusion® DocIO, you can use the [AppendPicture](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.IWParagraph.html#Syncfusion_DocIO_DLS_IWParagraph_AppendPicture_System_Byte___System_Byte___) API. -N> To preserve the SVG image in the Word document, pass both the SVG image data and the equivalent bitmap image bytes to DocIO. +N> To preserve the SVG image in the Word document, pass both the SVG image data and a fallback raster image (e.g., PNG) as byte arrays to DocIO. The fallback image is used by viewers that do not support SVG. The following code example shows how to add an SVG image in a Word document. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-svg-image/.NET/Add-svg-image/Program.cs" %} -///Create a new Word document. +//Create a new Word document. using (WordDocument document = new WordDocument()) { //Add a new section to the document. @@ -643,8 +651,10 @@ using (WordDocument document = new WordDocument()) picture.Height = 100; picture.Width = 100; //Save the Word document to MemoryStream. - MemoryStream stream = new MemoryStream(); - document.Save(stream, FormatType.Docx); + using (MemoryStream stream = new MemoryStream()) + { + document.Save(stream, FormatType.Docx); + } } {% endhighlight %} @@ -677,12 +687,12 @@ Using document As New WordDocument() Dim section As IWSection = document.AddSection() ' Add a new paragraph to the section. Dim firstParagraph As IWParagraph = section.AddParagraph() - ' Get the PNG image as a byte array. + ' Get the fallback image (PNG) as a byte array. Dim imageBytes As Byte() = File.ReadAllBytes("Buyers.png") ' Get the SVG image as a byte array. Dim svgData As Byte() = File.ReadAllBytes("Buyers.svg") ' Add SVG image to the paragraph. - Dim picture As IWPicture = firstParagraph.AppendPicture(svgData, ImageType.Metafile, imageBytes) + Dim picture As IWPicture = firstParagraph.AppendPicture(svgData, imageBytes) ' Set height and width for the image. picture.Height = 100 picture.Width = 100 @@ -695,12 +705,9 @@ End Using You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Add-svg-image/.NET). -## Online Demo - -* Explore how to insert an image into the Word document using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/imageinsertion#/tailwind). - ## See Also +* [How to insert an image into a Word document (live demo)](https://document.syncfusion.com/demos/word/imageinsertion#/tailwind) using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO). * [How to extract Images from Word document in C# and VB?](https://support.syncfusion.com/kb/article/11829/how-to-extract-images-from-word-document-in-c-and-vb) * [How to replace an image with same size in a Word document](https://support.syncfusion.com/kb/article/17796/how-to-replace-an-image-with-same-size-in-a-word-document) * [How to find and replace an image title in a Word document?](https://support.syncfusion.com/kb/article/18808/how-to-find-and-replace-an-image-title-in-a-word-document) diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Bookmarks.md b/Document-Processing/Word/Word-Library/NET/Working-with-Bookmarks.md index 178a4f920e..89606c6967 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Bookmarks.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Bookmarks.md @@ -9,8 +9,8 @@ documentation: UG A bookmark identifies a location or a selection of text within a document that you can name and identify for future reference. -In Essential® DocIO, bookmark is represented by [Bookmark](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html) instance that is a pair of [BookmarkStart](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkStart.html) and [BookmarkEnd](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkEnd.html). -[BookmarkStart](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkStart.html) represents start point of a bookmark and [BookmarkEnd](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkEnd.html) represents end point of a bookmark. Every Word document contains a collection of bookmarks that are accessible through the [Bookmarks](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_Bookmarks) property of [WordDocument](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html) class. +In Essential® DocIO, a bookmark is represented by a [Bookmark](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html) instance that is a pair of [BookmarkStart](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkStart.html) and [BookmarkEnd](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkEnd.html). +[BookmarkStart](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkStart.html) represents the start point of a bookmark and [BookmarkEnd](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkEnd.html) represents the end point of a bookmark. Every Word document contains a collection of bookmarks that are accessible through the [Bookmarks](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_Bookmarks) property of [WordDocument](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html) class. To quickly start working with bookmarks in a Word document, please check out this video: {% youtube "https://www.youtube.com/watch?v=8C2-aS8tdLU" %} @@ -34,7 +34,7 @@ IWParagraph paragraph = document.LastParagraph; paragraph.AppendBookmarkStart("Northwind"); //Adds a text between the bookmark start and end into paragraph paragraph.AppendText("The Northwind sample database (Northwind.mdb) is included with all versions of Access. It provides data you can experiment with and database objects that demonstrate features you might want to implement in your own databases."); -//Adds a new bookmark end into paragraph with name " Northwind " +//Adds a new bookmark end into paragraph with name "Northwind" paragraph.AppendBookmarkEnd("Northwind"); //Adds a text after the bookmark end paragraph.AppendText(" Using Northwind, you can become familiar with how a relational database is structured and how the database objects work together to help you enter, store, manipulate, and print your data."); @@ -56,14 +56,14 @@ IWParagraph paragraph = document.LastParagraph; paragraph.AppendBookmarkStart("Northwind"); //Adds a text between the bookmark start and end into paragraph paragraph.AppendText("The Northwind sample database (Northwind.mdb) is included with all versions of Access. It provides data you can experiment with and database objects that demonstrate features you might want to implement in your own databases."); -//Adds a new bookmark end into paragraph with name " Northwind " +//Adds a new bookmark end into paragraph with name "Northwind" paragraph.AppendBookmarkEnd("Northwind"); //Adds a text after the bookmark end paragraph.AppendText(" Using Northwind, you can become familiar with how a relational database is structured and how the database objects work together to help you enter, store, manipulate, and print your data."); //Saves the document in the given name and format document.Save("Bookmarks.docx", FormatType.Docx); -//Releases the resources occupied by WordDocument instance -document.Close(); +//Releases the resources occupied by the WordDocument instance +document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} @@ -77,14 +77,14 @@ Dim paragraph As IWParagraph = document.LastParagraph paragraph.AppendBookmarkStart("Northwind") 'Adds a text between the bookmark start and end into paragraph paragraph.AppendText("The Northwind sample database (Northwind.mdb) is included with all versions of Access. It provides data you can experiment with and database objects that demonstrate features you might want to implement in your own databases.") -'Adds a new bookmark end into paragraph with name " Northwind " +'Adds a new bookmark end into paragraph with name "Northwind" paragraph.AppendBookmarkEnd("Northwind") 'Adds a text after the bookmark end paragraph.AppendText(" Using Northwind, you can become familiar with how a relational database is structured and how the database objects work together to help you enter, store, manipulate, and print your data.") 'Saves the document in the given name and format document.Save("Bookmarks.docx", FormatType.Docx) -'Releases the resources occupied by WordDocument instance -document.Close() +'Releases the resources occupied by the WordDocument instance +document.Close() {% endhighlight %} {% endtabs %} @@ -103,7 +103,7 @@ FileStream fileStreamPath = new FileStream(@"Bookmarks.docx", FileMode.Open, Fil WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); //Gets the bookmark instance by using FindByName method of BookmarkCollection with bookmark name Syncfusion.DocIO.DLS.Bookmark bookmark = document.Bookmarks.FindByName("Northwind"); -//Accesses the bookmark start’s owner paragraph by using bookmark and changes its back color +//Accesses the bookmark start's owner paragraph by using the bookmark and changes its back color bookmark.BookmarkStart.OwnerParagraph.ParagraphFormat.BackColor = Color.AliceBlue; //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); @@ -117,7 +117,7 @@ document.Close(); WordDocument document = new WordDocument("Bookmarks.docx", FormatType.Docx); //Gets the bookmark instance by using FindByName method of BookmarkCollection with bookmark name Syncfusion.DocIO.DLS.Bookmark bookmark = document.Bookmarks.FindByName("Northwind"); -//Accesses the bookmark start’s owner paragraph by using bookmark and changes its back color +//Accesses the bookmark start's owner paragraph by using the bookmark and changes its back color bookmark.BookmarkStart.OwnerParagraph.ParagraphFormat.BackColor = Color.AliceBlue; document.Save("Result.docx", FormatType.Docx); document.Close(); @@ -128,7 +128,7 @@ document.Close(); Dim document As New WordDocument("Bookmarks.docx", FormatType.Docx) 'Gets the bookmark instance by using FindByName method of BookmarkCollection with bookmark name Dim bookmark As Syncfusion.DocIO.DLS.Bookmark = document.Bookmarks.FindByName("Northwind") -'Accesses the bookmark start’s owner paragraph by using bookmark and changes its back color +'Accesses the bookmark start's owner paragraph by using the bookmark and changes its back color bookmark.BookmarkStart.OwnerParagraph.ParagraphFormat.BackColor = Color.AliceBlue document.Save("Result.docx", FormatType.Docx) document.Close() @@ -138,9 +138,9 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Bookmarks/Get-an-instance-of-bookmark). -## Removing a Bookmark from Word document +## Removing a bookmark from a Word document -The following code example shows how to remove a bookmark from Word document. +The following code example shows how to remove a bookmark from a Word document. {% tabs %} @@ -185,14 +185,14 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Bookmarks/Remove-bookmark-from-Word-document). -## Retrieving contents within a bookmark +## Retrieving contents within a bookmark -[BookmarkNavigator](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html) is used for navigating to a bookmark in a Word document. You can retrieve, replace and delete the content of a specified bookmark by using [BookmarkNavigator](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html). +[BookmarkNavigator](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html) is used for navigating to a bookmark in a Word document. You can retrieve, replace, and delete the content of a specified bookmark by using [BookmarkNavigator](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html). You can get the content between bookmark start and bookmark end of the specified bookmark in two ways: -1. You can use [GetBookmarkContent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html#Syncfusion_DocIO_DLS_BookmarksNavigator_GetBookmarkContent) method for retrieving content as collection of body items when the bookmark start and bookmark end are preserved in a single section. -2. You can use [GetContent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html#Syncfusion_DocIO_DLS_BookmarksNavigator_GetContent) method for retrieving content as collection of sections when the bookmark start and bookmark end are preserved in different sections. +1. You can use [GetBookmarkContent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html#Syncfusion_DocIO_DLS_BookmarksNavigator_GetBookmarkContent) method for retrieving content as a collection of body items when the bookmark start and bookmark end are preserved in a single section. +2. You can use [GetContent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html#Syncfusion_DocIO_DLS_BookmarksNavigator_GetContent) method for retrieving content as a collection of sections when the bookmark start and bookmark end are preserved in different sections. The following code example shows how to retrieve the specified bookmark content by using [GetBookmarkContent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html#Syncfusion_DocIO_DLS_BookmarksNavigator_GetBookmarkContent) method in a Word document. @@ -317,7 +317,7 @@ wordDocumentPart.Close() 'Close the template Word document document.Close() newDocument.Save("Result.docx", FormatType.Docx) -'Releases the resources hold by WordDocument instance +'Releases the resources held by the WordDocument instance newDocument.Close() {% endhighlight %} @@ -325,12 +325,12 @@ newDocument.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Bookmarks/Get-bookmark-content-as-document-part). -## Retrieving bookmark contents within a table +## Retrieving bookmark contents within a table You can select the column range for bookmarks inside the tables in Word documents by using [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) and [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) properties. -N> 1. [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) and [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) properties are valid to select table cells, only when the respective bookmark end and start is present within the same row or next rows of the same table. -N> 2. [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) property denotes the top left corner cell and [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) property denotes the bottom right corner cell of rectangular selection region since you can only select the content as a rectangular selection by using bookmarks within the table. +N> 1. [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) and [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) properties are valid to select table cells, only when the respective bookmark end and start are present within the same row or next rows of the same table. +N> 2. [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) property denotes the top left corner cell and [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) property denotes the bottom right corner cell of rectangular selection region, because bookmark selections inside a table are always rectangular. N> 3. [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) property selects from the first cell of the respective row when this property value is negative (or) greater than the cells of a row (or) greater than the [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) value. N> 4. [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) property selects till last cell of the respective row when this property value is negative (or) greater than the cells of a row (or) less than the [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) value. @@ -357,9 +357,11 @@ bookmarkNavigator.CurrentBookmark.LastColumn = 4; TextBodyPart part = bookmarkNavigator.GetBookmarkContent(); //Adds new section document.AddSection(); -for (int i = 0; i < part.BodyItems.Count; i++) //Adds the retrieved content into another new section -document.LastSection.Body.ChildEntities.Add(part.BodyItems[i]); +for (int i = 0; i < part.BodyItems.Count; i++) +{ + document.LastSection.Body.ChildEntities.Add(part.BodyItems[i]); +} //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); document.Save(stream, FormatType.Docx); @@ -388,9 +390,11 @@ TextBodyPart part = bookmarkNavigator.GetBookmarkContent(); document.AddSection(); //Adds the retrieved content into another new section for (int i = 0; i < part.BodyItems.Count; i++) -document.LastSection.Body.ChildEntities.Add(part.BodyItems[i]); +{ + document.LastSection.Body.ChildEntities.Add(part.BodyItems[i]); +} //Saves and closes the Word document -document.Save("Sample.docx", FormatType.Docx); +document.Save("Result.docx", FormatType.Docx); document.Close(); {% endhighlight %} @@ -630,6 +634,8 @@ FileStream imageStream = new FileStream("Northwind.png", FileMode.Open, FileAcce picture.LoadImage(imageStream); picture.WidthScale = 50; picture.HeightScale = 50; +//Disposes the image stream +imageStream.Dispose(); //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); document.Save(stream, FormatType.Docx); @@ -904,7 +910,7 @@ FileStream fileStreamPath = new FileStream("Bookmarks.docx", FileMode.Open, File WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); //Creates the bookmark navigator instance to access the bookmark BookmarksNavigator bookmarkNavigator = new BookmarksNavigator(document); -//Moves the virtual cursor to the location before the end of the bookmark "Northwind " +//Moves the virtual cursor to the location before the end of the bookmark "Northwind" bookmarkNavigator.MoveToBookmark("Northwind"); //Deletes bookmark content without deleting the format in the target document. bookmarkNavigator.DeleteBookmarkContent(false); @@ -920,7 +926,7 @@ document.Close(); WordDocument document = new WordDocument("Bookmarks.docx", FormatType.Docx); //Creates the bookmark navigator instance to access the bookmark BookmarksNavigator bookmarkNavigator = new BookmarksNavigator(document); -//Moves the virtual cursor to the location before the end of the bookmark "Northwind " +//Moves the virtual cursor to the location before the end of the bookmark "Northwind" bookmarkNavigator.MoveToBookmark("Northwind"); //Deletes bookmark content without deleting the format in the target document. bookmarkNavigator.DeleteBookmarkContent(false); @@ -951,13 +957,13 @@ You can replace the contents of an existing bookmark with simple text, [TextBody N> You cannot replace the multi section contents into a bookmark within table in Word documents. Use "for loop" instead of "foreach loop" to iterate through document elements when replacing the bookmark contents to avoid “collection modified exception”, as there is a chance for modification in the document elements on replacing the bookmark contents. -As per Microsoft Word behavior, you cannot replace the bookmark contents when the bookmark start and end is not in a same table as following cases: +As per Microsoft Word behavior, you cannot replace the bookmark contents when the bookmark start and end are not in the same table, as in the following cases: -Case 1 +Case 1: Bookmark start and end are present in different tables. ![Bookmark start and end present in different tables](WorkingwithBookmarks_images/WorkingwithBookmarks_img1.jpeg) -Case 2 +Case 2: Bookmark start is placed outside the table and the end is inside the table. ![Bookmark start placed outside table and end in table](WorkingwithBookmarks_images/WorkingwithBookmarks_img2.jpeg) @@ -1055,13 +1061,13 @@ bookmarkNavigator.MoveToBookmark("Northwind"); //Gets the bookmark content as WordDocumentPart WordDocumentPart wordDocumentPart = bookmarkNavigator.GetContent(); //Loads the Word document with bookmark NorthwindDB -FileStream fileStreamPath = new FileStream("Bookmarks.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); +FileStream fileStream = new FileStream("Bookmarks.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); +WordDocument document = new WordDocument(fileStream, FormatType.Docx); //Creates the bookmark navigator instance to access the bookmark bookmarkNavigator = new BookmarksNavigator(document); //Moves the virtual cursor to the location before the end of the bookmark "NorthwindDB" bookmarkNavigator.MoveToBookmark("NorthwindDB"); -//Replaces the bookmark content with word body part +//Replaces the bookmark content with WordDocumentPart bookmarkNavigator.ReplaceContent(wordDocumentPart); //Close the WordDocumentPart instance wordDocumentPart.Close(); @@ -1089,7 +1095,7 @@ WordDocument document = new WordDocument("Bookmarks.docx", FormatType.Docx); bookmarkNavigator = new BookmarksNavigator(document); //Moves the virtual cursor to the location before the end of the bookmark "NorthwindDB" bookmarkNavigator.MoveToBookmark("NorthwindDB"); -//Replaces the bookmark content with word body part +//Replaces the bookmark content with WordDocumentPart bookmarkNavigator.ReplaceContent(wordDocumentPart); //Close the WordDocumentPart instance wordDocumentPart.Close(); @@ -1114,7 +1120,7 @@ Dim document As New WordDocument("Bookmarks.docx", FormatType.Docx) bookmarkNavigator = New BookmarksNavigator(document) 'Moves the virtual cursor to the location before the end of the bookmark "NorthwindDB" bookmarkNavigator.MoveToBookmark("NorthwindDB") -'Replaces the bookmark content with word body part +'Replaces the bookmark content with WordDocumentPart bookmarkNavigator.ReplaceContent(wordDocumentPart) 'Close the WordDocumentPart instance wordDocumentPart.Close() diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md b/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md index 9fddd4cb80..0c12a2e6bb 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md @@ -9,9 +9,9 @@ documentation: UG Fields in a Word document are placeholders for data that might change on field update. Fields are represented by the [WField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WField.html) and [WFieldMark](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WFieldMark.html) instances in DocIO. A field in a Word document contains field codes, field separator, field result, and field end. -To learn various types of Microsoft Word supported fields and their syntax,refer to the [MSDN article](https://support.microsoft.com/en-us/office/list-of-field-codes-in-word-1ad6d91a-55a7-4a8d-b535-cf7888659a51?ui=en-us&rs=en-us&ad=us#) +To learn various types of Microsoft Word supported fields and their syntax, refer to the [MSDN article](https://support.microsoft.com/en-us/office/list-of-field-codes-in-word-1ad6d91a-55a7-4a8d-b535-cf7888659a51?ui=en-us&rs=en-us&ad=us#) -From v16.1.0.24, the entire field code is included in Document Object Model(DOM). Hence, adding a field will automatically include the following elements in DOM: +From v16.1.0.24, the entire field code is included in Document Object Model (DOM). Hence, adding a field will automatically include the following elements in DOM: 1. [WField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WField.html): Represents the starting of a Field. @@ -505,7 +505,7 @@ paragraph = section.AddParagraph() as WParagraph; //Gets the collection of bookmark start in the word document List items = document.GetCrossReferenceItems(ReferenceType.Bookmark); paragraph.AppendText("Bookmark Cross Reference starts here "); -//Appends the cross reference for bookmark “Title” with ContentText as reference kind +//Appends the cross reference for bookmark "Title" with ContentText as reference kind paragraph.AppendCrossReference(ReferenceType.Bookmark, ReferenceKind.ContentText, items[0], true, false, false, string.Empty); //Updates the document Fields document.UpdateDocumentFields(); @@ -533,7 +533,7 @@ paragraph = section.AddParagraph() as WParagraph; //Gets the collection of bookmark start in the word document List items = document.GetCrossReferenceItems(ReferenceType.Bookmark); paragraph.AppendText("Bookmark Cross Reference starts here "); -//Appends the cross reference for bookmark “Title” with ContentText as reference kind +//Appends the cross reference for bookmark "Title" with ContentText as reference kind paragraph.AppendCrossReference(ReferenceType.Bookmark, ReferenceKind.ContentText, items[0], true, false, false, string.Empty); //Updates the document Fields document.UpdateDocumentFields(); @@ -558,7 +558,7 @@ paragraph = TryCast(section.AddParagraph(), WParagraph) 'Gets the collection of bookmark start in the word document Dim items As List(Of Entity) = document.GetCrossReferenceItems(ReferenceType.Bookmark) paragraph.AppendText("Bookmark Cross Reference starts here ") -'Appends the cross reference for bookmark “Title” with ContentText as reference kind +'Appends the cross reference for bookmark "Title" with ContentText as reference kind paragraph.AppendCrossReference(ReferenceType.Bookmark, ReferenceKind.ContentText, items(0), True, False, False, String.Empty) 'Updates the document Fields document.UpdateDocumentFields() @@ -646,14 +646,14 @@ You can download a complete working sample from [GitHub](https://github.com/Sync N> XE (Index Entry) fields cannot be unlinked. ## Sequence Field -You can use the Sequence (SEQ) field to automatically numbers the chapters, tables, figures, and other items in a Word document. When you add, delete, or move an item in Word document (along with SEQ fields), you can update the remaining SEQ fields with a new sequence. +You can use the Sequence (SEQ) field to automatically number the chapters, tables, figures, and other items in a Word document. When you add, delete, or move an item in Word document (along with SEQ fields), you can update the remaining SEQ fields with a new sequence. You can format the SEQ field using below switches. \c -- Repeats the closest preceding sequence number. \h -- Hides the field result unless a general-formatting-switch is also present. \n -- Inserts the next sequence number for the specified items. This is the default switch. -\r -- Resets the sequence number to the number following “r”. +\r -- Resets the sequence number to the number following "r". \s -- Resets the sequence number at the heading level following the "s". ### Apply Number format @@ -841,7 +841,7 @@ seqField.BookmarkName = "BkmkPurchase"; paragraph = document.LastSection.Paragraphs[5] as WParagraph; seqField = paragraph.ChildEntities[1] as WSeqField; //Adds bookmark reference to the sequence field -seqField.BookmarkName = "BkkmUnitPrice"; +seqField.BookmarkName = "BkmkUnitPrice"; //Updates the document fields document.UpdateDocumentFields(); //Saves the Word document to MemoryStream @@ -852,7 +852,7 @@ document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Opens an exixting word document +//Opens an existing word document WordDocument document = new WordDocument("Template.docx"); //Accesses sequence field in the document WParagraph paragraph = document.LastSection.Body.ChildEntities[4] as WParagraph; @@ -863,7 +863,7 @@ seqField.BookmarkName = "BkmkPurchase"; paragraph = document.LastSection.Paragraphs[5] as WParagraph; seqField = paragraph.ChildEntities[1] as WSeqField; //Adds bookmark reference to the sequence field -seqField.BookmarkName = "BkkmUnitPrice"; +seqField.BookmarkName = "BkmkUnitPrice"; //Updates the document fields document.UpdateDocumentFields(); //Saves and closes the Word document @@ -872,7 +872,7 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Opens an exixting word document +'Opens an existing word document Dim document As WordDocument = New WordDocument("Template.docx") 'Accesses sequence field in the document Dim paragraph As WParagraph = CType(document.LastSection.Body.ChildEntities(4), WParagraph) @@ -883,7 +883,7 @@ seqField.BookmarkName = "BkmkPurchase" paragraph = CType(document.LastSection.Paragraphs(5), WParagraph) seqField = CType(paragraph.ChildEntities(1), WSeqField) 'Adds bookmark reference to the sequence field -seqField.BookmarkName = "BkkmUnitPrice" +seqField.BookmarkName = "BkmkUnitPrice" 'Updates the document fields document.UpdateDocumentFields() 'Saves and closes the Word document @@ -900,7 +900,7 @@ By executing the above code example, it generates output Word document as follow ![Output document of Bookmark referred in SEQ field](workingwithfields_images/file-formats-word-seql-field-bookmark-output.png) ### Reset numbering -You can reset the numbering for sequence field (\r) using [ResetNumber](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSeqField.html#Syncfusion_DocIO_DLS_WSeqField_ResetNumber) property and reset the numbering based on heading level (\s) in the Word document using [ResetHeadingLevel](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSeqField.html#Syncfusion_DocIO_DLS_WSeqField_ResetHeadingLevel) property. +You can reset the numbering for sequence field (\r) using [ResetNumber](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSeqField.html#Syncfusion_DocIO_DLS_WSeqField_ResetNumber) property and reset the numbering based on the heading level (\s) in the Word document using [ResetHeadingLevel](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSeqField.html#Syncfusion_DocIO_DLS_WSeqField_ResetHeadingLevel) property. The following code example shows how to reset the numbering for sequence field. @@ -1534,7 +1534,7 @@ WordDocument document = CreateDocument(); //Accesses sequence field in the document WTable table = document.LastSection.Body.ChildEntities[1] as WTable; WSeqField field = ((table[2, 1].ChildEntities[0] as WParagraph).ChildEntities[0] as WSeqField); -//Enables a flag to to hide the sequence field result +//Enables a flag to hide the sequence field result field.HideResult = true; //Accesses sequence field in the document field = ((table[4, 1].ChildEntities[0] as WParagraph).ChildEntities[0] as WSeqField); @@ -1555,7 +1555,7 @@ WordDocument document = CreateDocument(); //Accesses sequence field in the document WTable table = document.LastSection.Body.ChildEntities[1] as WTable; WSeqField field = ((table[2, 1].ChildEntities[0] as WParagraph).ChildEntities[0] as WSeqField); -//Enables a flag to to hide the sequence field result +//Enables a flag to hide the sequence field result field.HideResult = true; //Accesses sequence field in the document field = ((table[4, 1].ChildEntities[0] as WParagraph).ChildEntities[0] as WSeqField); @@ -1574,7 +1574,7 @@ Dim document As WordDocument = CreateDocument() 'Accesses sequence field in the document Dim table As WTable = CType(document.LastSection.Body.ChildEntities(1), WTable) Dim field As WSeqField = CType(CType(table(2, 1).ChildEntities(0), WParagraph).ChildEntities(0), WSeqField) -'Enables a flag to to hide the sequence field result +'Enables a flag to hide the sequence field result field.HideResult = True 'Accesses sequence field in the document field = CType(CType(table(4, 1).ChildEntities(0), WParagraph).ChildEntities(0), WSeqField) @@ -1779,7 +1779,7 @@ document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Opens an exixting word document +//Opens an existing word document WordDocument document = new WordDocument("Template.docx"); //Accesses sequence field in the document WParagraph paragraph = document.LastSection.Body.ChildEntities[4] as WParagraph; @@ -1794,7 +1794,7 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Opens an exixting word document +'Opens an existing word document Dim document As WordDocument = New WordDocument("Template.docx") 'Accesses sequence field in the document diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Hyperlinks.md b/Document-Processing/Word/Word-Library/NET/Working-with-Hyperlinks.md index 9213d5fa2b..902195a589 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Hyperlinks.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Hyperlinks.md @@ -5,45 +5,53 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Hyperlinks in Word Library +# Working with Hyperlinks in the Word Library -Hyperlinks have two parts: the address and display content. +Hyperlinks have two parts: the address and the display content. The Syncfusion® .NET Word (DocIO) library supports the following hyperlink types: + +* Web hyperlink +* Email hyperlink +* File hyperlink +* Bookmark hyperlink +* Image hyperlink ## Web hyperlink -The following code example explains how to insert a web link. +The following code example shows how to insert a web link. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-web-link/.NET/Add-web-link/Program.cs" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("Web Hyperlink: "); +paragraph.AppendText("Web hyperlink: "); paragraph = section.AddParagraph(); -//Appends web hyperlink to the paragraph -IWField field = paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink); -//Saves the Word document to MemoryStream. -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document. +//Appends a web hyperlink to the paragraph +paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink); +//Saves the Word document to a MemoryStream +using (MemoryStream stream = new MemoryStream()) +{ + document.Save(stream, FormatType.Docx); +} +//Closes the Word document document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("Web Hyperlink: "); +paragraph.AppendText("Web hyperlink: "); paragraph = section.AddParagraph(); -//Appends web hyperlink to the paragraph -IWField field = paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink); +//Appends a web hyperlink to the paragraph +paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink); //Saves the Word document document.Save("Sample.docx", FormatType.Docx); //Closes the document @@ -51,16 +59,16 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Creates a new Word document Dim document As New WordDocument() 'Adds new section to the document Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -paragraph.AppendText("Web Hyperlink: ") +paragraph.AppendText("Web hyperlink: ") paragraph = section.AddParagraph() -'Appends web hyperlink to the paragraph -Dim field As IWField = paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink) +'Appends a web hyperlink to the paragraph +paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink) 'Saves the Word document document.Save("Sample.docx", FormatType.Docx) 'Closes the document @@ -73,12 +81,12 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Email hyperlink -The following code example illustrates how to add an email link. +The following code example shows how to add an email link. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-an-email-link/.NET/Add-an-email-link/Program.cs" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); @@ -86,17 +94,19 @@ IWSection section = document.AddSection(); IWParagraph paragraph = section.AddParagraph(); paragraph.AppendText("Email hyperlink: "); paragraph = section.AddParagraph(); -//Appends Email hyperlink to the paragraph +//Appends an email hyperlink to the paragraph paragraph.AppendHyperlink("mailto:sales@syncfusion.com", "Sales", HyperlinkType.EMailLink); -//Saves the Word document to MemoryStream. -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document. +//Saves the Word document to a MemoryStream +using (MemoryStream stream = new MemoryStream()) +{ + document.Save(stream, FormatType.Docx); +} +//Closes the Word document document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); @@ -104,8 +114,8 @@ IWSection section = document.AddSection(); IWParagraph paragraph = section.AddParagraph(); paragraph.AppendText("Email hyperlink: "); paragraph = section.AddParagraph(); -//Appends Email hyperlink to the paragraph -paragraph.AppendHyperlink("mailto:sales@syncfusion.com","Sales" , HyperlinkType.EMailLink); +//Appends an email hyperlink to the paragraph +paragraph.AppendHyperlink("mailto:sales@syncfusion.com", "Sales", HyperlinkType.EMailLink); //Saves the Word document document.Save("Sample.docx", FormatType.Docx); //Closes the document @@ -113,7 +123,7 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Creates a new Word document Dim document As New WordDocument() 'Adds new section to the document Dim section As IWSection = document.AddSection() @@ -121,8 +131,8 @@ Dim section As IWSection = document.AddSection() Dim paragraph As IWParagraph = section.AddParagraph() paragraph.AppendText("Email hyperlink: ") paragraph = section.AddParagraph() -'Appends Email hyperlink to the paragraph -paragraph.AppendHyperlink("mailto:sales@syncfusion.com","Sales" , HyperlinkType.EMailLink) +'Appends an email hyperlink to the paragraph +paragraph.AppendHyperlink("mailto:sales@syncfusion.com", "Sales", HyperlinkType.EMailLink) 'Saves the Word document document.Save("Sample.docx", FormatType.Docx) 'Closes the document @@ -135,39 +145,41 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## File hyperlink -The following code example explains how to add a file hyperlink. +The following code example shows how to add a file hyperlink. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-file-hyperlink/.NET/Add-file-hyperlink/Program.cs" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("File Hyperlinks: "); +paragraph.AppendText("File hyperlink: "); paragraph = section.AddParagraph(); -//Appends hyperlink field to the paragraph +//Appends a file hyperlink to the paragraph paragraph.AppendHyperlink(@"Template.docx", "File", HyperlinkType.FileLink); -//Saves the Word document to MemoryStream. -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document. +//Saves the Word document to a MemoryStream +using (MemoryStream stream = new MemoryStream()) +{ + document.Save(stream, FormatType.Docx); +} +//Closes the Word document document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("File Hyperlinks: "); +paragraph.AppendText("File hyperlink: "); paragraph = section.AddParagraph(); -//Appends hyperlink field to the paragraph -paragraph.AppendHyperlink(@"Template.docx","File", HyperlinkType.FileLink); +//Appends a file hyperlink to the paragraph +paragraph.AppendHyperlink(@"Template.docx", "File", HyperlinkType.FileLink); //Saves the Word document document.Save("Sample.docx", FormatType.Docx); //Closes the document @@ -175,15 +187,15 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Creates a new Word document Dim document As New WordDocument() 'Adds new section to the document Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -paragraph.AppendText("File Hyperlinks: ") +paragraph.AppendText("File hyperlink: ") paragraph = section.AddParagraph() -'Appends hyperlink field to the paragraph +'Appends a file hyperlink to the paragraph paragraph.AppendHyperlink("Template.docx", "File", HyperlinkType.FileLink) 'Saves the Word document document.Save("Sample.docx", FormatType.Docx) @@ -202,45 +214,47 @@ The following code example explains how to add a bookmark hyperlink. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-bookmark-hyperlink/.NET/Add-bookmark-hyperlink/Program.cs" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Creates new Bookmark +//Creates a new bookmark paragraph.AppendBookmarkStart("Introduction"); paragraph.AppendText("Hyperlink"); paragraph.AppendBookmarkEnd("Introduction"); paragraph.AppendText("\nA hyperlink is a reference or navigation element in a document to another section of the same document or to another document that may be on or part of a (different) domain."); paragraph = section.AddParagraph(); -paragraph.AppendText("Bookmark Hyperlink: "); +paragraph.AppendText("Bookmark hyperlink: "); paragraph = section.AddParagraph(); -//Appends Bookmark hyperlink to the paragraph +//Appends a bookmark hyperlink to the paragraph paragraph.AppendHyperlink("Introduction", "Bookmark", HyperlinkType.Bookmark); -//Saves the Word document to MemoryStream. -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document. +//Saves the Word document to a MemoryStream +using (MemoryStream stream = new MemoryStream()) +{ + document.Save(stream, FormatType.Docx); +} +//Closes the Word document document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Creates new Bookmark +//Creates a new bookmark paragraph.AppendBookmarkStart("Introduction"); paragraph.AppendText("Hyperlink"); paragraph.AppendBookmarkEnd("Introduction"); paragraph.AppendText("\nA hyperlink is a reference or navigation element in a document to another section of the same document or to another document that may be on or part of a (different) domain."); paragraph = section.AddParagraph(); -paragraph.AppendText("Bookmark Hyperlink: "); +paragraph.AppendText("Bookmark hyperlink: "); paragraph = section.AddParagraph(); -//Appends Bookmark hyperlink to the paragraph +//Appends a bookmark hyperlink to the paragraph paragraph.AppendHyperlink("Introduction", "Bookmark", HyperlinkType.Bookmark); //Saves the Word document document.Save("Sample.docx", FormatType.Docx); @@ -249,21 +263,21 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Creates a new Word document Dim document As New WordDocument() 'Adds new section to the document Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -'Creates new Bookmark +'Creates a new bookmark paragraph.AppendBookmarkStart("Introduction") paragraph.AppendText("Hyperlink") paragraph.AppendBookmarkEnd("Introduction") paragraph.AppendText(vbLf & "A hyperlink is a reference or navigation element in a document to another section of the same document or to another document that may be on or part of a (different) domain.") paragraph = section.AddParagraph() -paragraph.AppendText("Bookmark Hyperlink: ") +paragraph.AppendText("Bookmark hyperlink: ") paragraph = section.AddParagraph() -'Appends Bookmark hyperlink to the paragraph +'Appends a bookmark hyperlink to the paragraph paragraph.AppendHyperlink("Introduction", "Bookmark", HyperlinkType.Bookmark) 'Saves the Word document document.Save("Sample.docx", FormatType.Docx) @@ -277,47 +291,51 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Image hyperlink -The display content for the Hyperlinks can also be an image that may redirect to some other contents. +The display content for a hyperlink can also be an image that redirects to other content. The following code example explains how to add an image hyperlink. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-image-hyperlink/.NET/Add-image-hyperlink/Program.cs" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("Image Hyperlink"); +paragraph.AppendText("Image hyperlink: "); paragraph = section.AddParagraph(); -//Creates a new image instance and load image +//Creates a new image instance and loads the image WPicture picture = new WPicture(document); -FileStream imageStream = new FileStream(@"Mountain-200.jpg", FileMode.Open, FileAccess.ReadWrite); -picture.LoadImage(imageStream); -//Appends new image hyperlink to the paragraph +using (FileStream imageStream = new FileStream(@"Mountain-200.jpg", FileMode.Open, FileAccess.ReadWrite)) +{ + picture.LoadImage(imageStream); +} +//Appends an image hyperlink to the paragraph paragraph.AppendHyperlink("http://www.syncfusion.com", picture, HyperlinkType.WebLink); -//Saves the Word document to MemoryStream. -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document. +//Saves the Word document to a MemoryStream +using (MemoryStream stream = new MemoryStream()) +{ + document.Save(stream, FormatType.Docx); +} +//Closes the Word document document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("Image Hyperlink"); +paragraph.AppendText("Image hyperlink: "); paragraph = section.AddParagraph(); -//Creates a new image instance and load image +//Creates a new image instance and loads the image WPicture picture = new WPicture(document); picture.LoadImage(Image.FromFile("Image.png")); -//Appends new image hyperlink to the paragraph +//Appends an image hyperlink to the paragraph paragraph.AppendHyperlink("http://www.syncfusion.com", picture, HyperlinkType.WebLink); //Saves the Word document document.Save("Sample.docx", FormatType.Docx); @@ -326,18 +344,18 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Creates a new Word document Dim document As New WordDocument() 'Adds new section to the document Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -paragraph.AppendText("Image Hyperlink") +paragraph.AppendText("Image hyperlink: ") paragraph = section.AddParagraph() -'Creates a new image instance and load image +'Creates a new image instance and loads the image Dim picture As New WPicture(document) picture.LoadImage(Image.FromFile("Image.png")) -'Appends new image hyperlink to the paragraph +'Appends an image hyperlink to the paragraph paragraph.AppendHyperlink("http://www.syncfusion.com", picture, HyperlinkType.WebLink) 'Saves the Word document document.Save("Sample.docx", FormatType.Docx) @@ -356,38 +374,42 @@ The following code example explains how to modify the URL of an existing hyperli {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Modify-url-of-hyperlink/.NET/Modify-url-of-hyperlink/Program.cs" %} -FileStream fileStream = new FileStream(@"Sample.docx", FileMode.Open, FileAccess.ReadWrite); -//Loads the template document -WordDocument document = new WordDocument(fileStream, FormatType.Docx); -WParagraph paragraph = document.LastParagraph; -//Iterates through the paragraph items -foreach (ParagraphItem item in paragraph.ChildEntities) +using (FileStream fileStream = new FileStream(@"Sample.docx", FileMode.Open, FileAccess.ReadWrite)) { - if (item is WField) + //Loads the template document + WordDocument document = new WordDocument(fileStream, FormatType.Docx); + WParagraph paragraph = document.LastParagraph; + //Iterates through the paragraph items + foreach (ParagraphItem item in paragraph.ChildEntities) { - if ((item as WField).FieldType == FieldType.FieldHyperlink) + if (item is WField) { - //Gets the hyperlink field - Hyperlink link = new Hyperlink(item as WField); - if (link.Type == HyperlinkType.WebLink) + if ((item as WField).FieldType == FieldType.FieldHyperlink) { - //Modifies the url of the hyperlink - link.Uri = "http://www.google.com"; - link.TextToDisplay = "Google"; - break; + //Gets the hyperlink field + Hyperlink link = new Hyperlink(item as WField); + if (link.Type == HyperlinkType.WebLink) + { + //Modifies the URL of the hyperlink + link.Uri = "http://www.google.com"; + link.TextToDisplay = "Google"; + break; + } } } } + //Saves the Word document to a MemoryStream + using (MemoryStream stream = new MemoryStream()) + { + document.Save(stream, FormatType.Docx); + } + //Closes the Word document + document.Close(); } -//Saves the Word document to MemoryStream. -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document. -document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Loads the template document +//Loads the template document WordDocument document = new WordDocument("Sample.docx", FormatType.Docx); WParagraph paragraph = document.LastParagraph; //Iterates through the paragraph items @@ -401,7 +423,7 @@ foreach (ParagraphItem item in paragraph.ChildEntities) Hyperlink link = new Hyperlink(item as WField); if (link.Type == HyperlinkType.WebLink) { - //Modifies the url of the hyperlink + //Modifies the URL of the hyperlink link.Uri = "http://www.google.com"; link.TextToDisplay = "Google"; break; @@ -415,17 +437,18 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Loads the template document +'Loads the template document Dim document As New WordDocument("Sample.docx", FormatType.Docx) Dim paragraph As WParagraph = document.LastParagraph 'Iterates through the paragraph items For Each item As ParagraphItem In paragraph.ChildEntities If TypeOf item Is WField Then - If TryCast(item, WField).FieldType = FieldType.FieldHyperlink Then + Dim field As WField = DirectCast(item, WField) + If field.FieldType = FieldType.FieldHyperlink Then 'Gets the hyperlink field - Dim link As New Hyperlink(TryCast(item, WField)) + Dim link As New Hyperlink(field) If link.Type = HyperlinkType.WebLink Then - 'Modifies the url of the hyperlink + 'Modifies the URL of the hyperlink link.Uri = "http://www.google.com" link.TextToDisplay = "Google" Exit For @@ -444,6 +467,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## See Also +The following knowledge base articles cover scenarios not discussed above — removing hyperlinks, replacing text with hyperlinks, and stripping hyperlink styling. + * [How to find and modify hyperlink address in Word document in C#, VB.NET](https://support.syncfusion.com/kb/article/12198/find-and-modify-hyperlink-address-in-word-document) * [How to replace particular text with hyperlink in the Word document](https://support.syncfusion.com/kb/article/10326/how-to-replace-the-particular-text-with-hyperlink-in-word-document) * [How to replace the URL of image hyperlink in Word document in C# and VB](https://support.syncfusion.com/kb/article/11259/how-to-replace-url-of-image-hyperlink-in-word-document) diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Paragraph.md b/Document-Processing/Word/Word-Library/NET/Working-with-Paragraph.md index 17c59714a3..2298015dc5 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Paragraph.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Paragraph.md @@ -7,7 +7,7 @@ documentation: UG --- # Working with Paragraph in Word Library -Paragraph is the basic element in a Word document that contains a textual and graphical contents. Each paragraph has its own formatting such as line spacing, alignment, indentation, and more. Within a paragraph, the contents are represented by one or more child elements such as [WTextRange](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextRange.html), [WPicture](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WPicture.html), and [Hyperlink](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Hyperlink.html) and more. The [ParagraphItem](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.ParagraphItem.html) is the base class for the child elements of paragraph. The following elements can be the child elements of a paragraph: +Paragraph is the basic element in a Word document that contains textual and graphical content. Each paragraph has its own formatting such as line spacing, alignment, indentation, and more. Within a paragraph, the contents are represented by one or more child elements such as [WTextRange](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextRange.html), [WPicture](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WPicture.html), [Hyperlink](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Hyperlink.html), and more. The [ParagraphItem](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.ParagraphItem.html) is the base class for the child elements of paragraph. The following elements can be the child elements of a paragraph: * Text: Represented by an instance of [WTextRange](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextRange.html). * Image: Represented by an instance of [WPicture](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WPicture.html). @@ -85,34 +85,37 @@ The following code example illustrates how to modify an existing paragraph. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Modify-an-existing-paragraph/.NET/Modify-an-existing-paragraph/Program.cs" %} -FileStream fileStream = new FileStream(@"Test.docx", FileMode.Open, FileAccess.ReadWrite); -//Loads the template document -WordDocument document = new WordDocument(fileStream, FormatType.Docx); -//Gets the text body of first section -WTextBody textBody = document.Sections[0].Body; -//Gets the paragraph at index 1 -WParagraph paragraph = textBody.Paragraphs[1]; -//Iterates through the child elements of paragraph -foreach (ParagraphItem item in paragraph.ChildEntities) +//Opens the file as Stream +using (FileStream fileStream = new FileStream(@"Test.docx", FileMode.Open, FileAccess.ReadWrite)) { - if (item is WTextRange) + //Loads the template document + WordDocument document = new WordDocument(fileStream, FormatType.Docx); + //Gets the text body of first section + WTextBody textBody = document.Sections[0].Body; + //Gets the paragraph at index 1 + WParagraph paragraph = textBody.Paragraphs[1]; + //Iterates through the child elements of paragraph + foreach (ParagraphItem item in paragraph.ChildEntities) { - WTextRange text = item as WTextRange; - //Modifies the character format of the text - text.CharacterFormat.Bold = true; - break; + if (item is WTextRange) + { + WTextRange text = item as WTextRange; + //Modifies the character format of the text + text.CharacterFormat.Bold = true; + break; + } } + //Saves the Word document to MemoryStream + MemoryStream stream = new MemoryStream(); + document.Save(stream, FormatType.Docx); + //Closes the Word document + document.Close(); } -///Saves the Word document to MemoryStream -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document -document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} //Loads the template document -WordDocument document = new WordDocument("Template.docx"); +WordDocument document = new WordDocument("Test.docx"); //Gets the text body of first section WTextBody textBody = document.Sections[0].Body; //Gets the paragraph at index 1 @@ -136,7 +139,7 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Loads the template document -Dim document As New WordDocument("Template.docx") +Dim document As New WordDocument("Test.docx") 'Gets the text body of first section Dim textBody As WTextBody = document.Sections(0).Body 'Gets the paragraph at index 1 @@ -423,6 +426,8 @@ A tab stop is a horizontal position that is set for aligning text of the paragra Each paragraph has its own tab stop collection where the new tab stop can be added and existing tab stop can be removed. +N> The tab position value is specified in points (1 inch = 72 points). + The following code example explains how to add tab stops to the paragraph. {% tabs %} @@ -496,6 +501,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync You can set RTL (Right-to-left) direction to the paragraph in a Word document. The following code example shows how to set RTL (Right-to-left) for a paragraph in Word document. +N> Setting RTL (Right-to-left) direction also affects the alignment of the paragraph. Set the `HorizontalAlignment` to `Right` for proper RTL alignment. + {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/RTL-paragraph/.NET/RTL-paragraph/Program.cs" %} @@ -761,6 +768,8 @@ You can remove the styles present in the existing document using the [Remove](ht The following code example explains how to remove the style from the word document. +N> Removing a style that is applied to paragraphs will revert those paragraphs to the default formatting. Built-in styles cannot be removed using this method. + {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Word-document/Remove-particular-style-from-document/.NET/Remove-particular-style-from-document/Program.cs" %} @@ -802,7 +811,7 @@ Dim styleCollection As IStyleCollection = document.Styles 'Finds the style with the name "Style1." Dim style As WParagraphStyle = CType(styleCollection.FindByName("Style1"), WParagraphStyle) 'Remove the "Style1" style from the Word document. -style.Remove +style.Remove() 'Saves and closes the document instance. document.Save("Sample.docx", FormatType.Docx) document.Close() @@ -831,7 +840,7 @@ IWParagraph firstParagraph = section.AddParagraph(); IWTextRange firstText = firstParagraph.AppendText("A new text is added to the paragraph."); firstText.CharacterFormat.FontSize = 14; firstText.CharacterFormat.Bold = true; -firstText.CharacterFormat.TextColor = Color.Green; +firstText.CharacterFormat.TextColor = Syncfusion.Drawing.Color.Green; //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); document.Save(stream, FormatType.Docx); @@ -977,11 +986,11 @@ firstText.CharacterFormat.Shadow = true; firstText.CharacterFormat.SmallCaps = true; IWTextRange secondText = firstParagraph.AppendText("This the second text range"); //Apply formatting for second text range -secondText.CharacterFormat.HighlightColor = Color.GreenYellow; +secondText.CharacterFormat.HighlightColor = Syncfusion.Drawing.Color.GreenYellow; secondText.CharacterFormat.UnderlineStyle = UnderlineStyle.DotDash; secondText.CharacterFormat.Italic = true; secondText.CharacterFormat.FontName = "Times New Roman"; -secondText.CharacterFormat.TextColor = Color.Green; +secondText.CharacterFormat.TextColor = Syncfusion.Drawing.Color.Green; //Add new paragraph to the section IWParagraph secondParagraph = section.AddParagraph(); //Add new text to the paragraph @@ -1138,7 +1147,7 @@ For further information, click [here](https://help.syncfusion.com/document-proce ## Working with symbols -Symbols are used to add contents such as currencies, numbers, punctuations, etc. DocIO represents symbols with [WSymbol](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSymbol.html) instance. Each symbol can be identified with their character codes. +Symbols are used to add contents such as currencies, numbers, punctuation, etc. DocIO represents symbols with [WSymbol](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSymbol.html) instance. Each symbol can be identified with their character codes. The following code example explains how to add new symbol to the document. @@ -1232,7 +1241,7 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Loads the template document -WordDocument document = new WordDocument("Sample.docx", FormatType.Docx); +WordDocument document = new WordDocument("Sample1.docx", FormatType.Docx); //Gets the textbody content WTextBody textbody = document.Sections[0].Body; //Iterates through the paragraphs @@ -1293,7 +1302,7 @@ Breaks allow the document contents to split into multiple parts to customize the * Page break: Starts the content on the next page. * Line break: Starts the content in a new line. * Column break: Starts the content in the next column. -* Text wrapping break: Starts the content below to the picture, table, or other items. +* Text wrapping break: Starts the content below the picture, table, or other items. The following code example explains how various types of breaks can be appended to the paragraphs. @@ -1397,7 +1406,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### Text wrapping break -When including images or other objects in a Word document, the text is wrapped around the objects as per wrapping behavior. If you wish to move the text below to the picture (as like caption), instead of adding an extra line break or empty paragraphs, you can add the text wrapping break to achieve it. +When including images or other objects in a Word document, the text is wrapped around the objects as per wrapping behavior. If you wish to move the text below the picture (as a caption), instead of adding an extra line break or empty paragraphs, you can add the text wrapping break to achieve it. The following code example illustrates how to insert a text wrapping break to move the text below to the picture. @@ -1475,7 +1484,7 @@ For further information, click [here](https://help.syncfusion.com/document-proce ## Working with Text Box -Text box contains a group of textual and graphical contents. DocIO supports to create and manipulate the text box and its formatting by using the [WTextBox](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBox.html) instance. +Text box contains a group of textual and graphical contents. DocIO supports creating and manipulating the text box and its formatting by using the [WTextBox](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBox.html) instance. The following code example explains how to add new text box to the paragraph. @@ -1495,10 +1504,12 @@ IWParagraph textboxParagraph = textbox.TextBoxBody.AddParagraph(); textboxParagraph.AppendText("Text inside text box"); textboxParagraph = textbox.TextBoxBody.AddParagraph(); //Adds new picture to textbox body -FileStream imagestream = new FileStream(@"Mountain-200.jpg", FileMode.Open, FileAccess.ReadWrite); -IWPicture picture = textboxParagraph.AppendPicture(imagestream); -picture.Height = 75; -picture.Width = 50; +using (FileStream imagestream = new FileStream(@"Mountain-200.jpg", FileMode.Open, FileAccess.ReadWrite)) +{ + IWPicture picture = textboxParagraph.AppendPicture(imagestream); + picture.Height = 75; + picture.Width = 50; +} //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); document.Save(stream, FormatType.Docx); @@ -1560,6 +1571,8 @@ Text box has its own formatting such as outline color, fill effects, text direct The following code example explains how to apply formatting and rotation for text box. +N> The valid value for `Rotation` ranges from 0 to 359 degrees. + {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Format-and-rotate-text-box/.NET/Format-and-rotate-text-box/Program.cs" %} diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md b/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md index d73f3c6d3f..181be49e75 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md @@ -8,7 +8,7 @@ documentation: UG # Working with Sections -A section contains the contents present in Headers, Footers and main document through the instances of [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html). A section also has a specific set of properties used to define the page settings, number of columns, headers and footers and so on that decide how the text appears. [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html) represents group of paragraphs and tables etc. +A section contains the contents of the headers, footers, and main document body through the instances of [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html). A section also has a specific set of properties used to define the page settings, number of columns, headers and footers and so on that decide how the text appears. [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html) represents a group of paragraphs and tables, etc. N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-platform]*** for ASP.NET Core, Blazor, Xamarin, UWP, .NET MAUI, and WinUI; ***C# [Windows-specific]*** for WinForms and WPF; ***VB.NET [Windows-specific]*** for VB.NET applications. @@ -52,7 +52,7 @@ Dim section As IWSection = document.AddSection() Dim paragraph As IWParagraph = section.AddParagraph() 'Appends the text to the created paragraph paragraph.AppendText("AdventureWorks Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company.") -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -61,9 +61,9 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Sections/Add-sections-in-Word-document). -You can add the multiple sections into the document. When you add more than one section into the word document, the section starts from the next page by default. +You can add multiple sections to the document. When you add more than one section to the Word document, the section starts on a new page by default. -You can also add a new section that starts on a same page by specifying the [BreakCode](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSection.html#Syncfusion_DocIO_DLS_WSection_BreakCode) as shown in following code example. +You can also add a new section that starts on the same page by specifying the [BreakCode](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSection.html#Syncfusion_DocIO_DLS_WSection_BreakCode) as shown in the following code example. {% tabs %} @@ -132,7 +132,7 @@ section.BreakCode = SectionBreakCode.NoBreak paragraph = section.AddParagraph() 'Appends the text to the created paragraph paragraph.AppendText(paraText) -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -209,7 +209,7 @@ section.PageSetup.OtherPagesTray = PrinterPaperTray.MiddleBin Dim paragraph As IWParagraph = section.AddParagraph() 'Appends the text to the created paragraph. paragraph.AppendText("AdventureWorks Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company.") -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -218,7 +218,7 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Sections/Page-setup-properties). -## Creating Multi-column document +## Creating a Multi-column Document You can split the contents into two or more columns by specifying the column width and spacing between columns. @@ -328,7 +328,7 @@ paragraph.AppendBreak(BreakType.ColumnBreak) paragraph = section.AddParagraph() 'Appends the text to the created paragraph paragraph.AppendText(paraText) -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -339,7 +339,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Creating document with different page settings -You can prefer to have more sections in a Word document when you need to have different page settings or headers and footers for a specific set of contents. The following code example illustrates how to create a Word document with multiple sections whose page orientation are portrait and landscape respectively. +You can prefer to have more sections in a Word document when you need to have different page settings or headers and footers for a specific set of contents. The following code example illustrates how to create a Word document with multiple sections whose page orientation is portrait and landscape, respectively. {% tabs %} @@ -430,7 +430,7 @@ section.PageSetup.PageSize = PageSize.A4; section.PageSetup.Orientation = PageOrientation.Landscape 'Appends the text to the paragraph paragraph.AppendText(paraText) -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -538,7 +538,7 @@ paragraph.AppendText("[ Default Page Header ]") 'Inserts the default Page footer paragraph = section.HeadersFooters.OddFooter.AddParagraph() paragraph.AppendText("[ Default Page Footer ]") -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -659,7 +659,7 @@ paragraph.AppendText("[ Default Page Header ]") 'Inserts the default page footer paragraph = section.HeadersFooters.OddFooter.AddParagraph() paragraph.AppendText("[ Default Page Footer ]") -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -782,7 +782,7 @@ paragraph.AppendText("[Even Page Header ]") 'Inserts the even page footer paragraph = section.HeadersFooters.EvenFooter.AddParagraph() paragraph.AppendText("[ Even Page Footer ]") -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -911,7 +911,7 @@ section.HeadersFooters.Footer.AddParagraph().AppendText("[ Third Section Footer 'Appends some text to the third page in document paragraph = section.AddParagraph() paragraph.AppendText(Convert.ToString(vbCr & vbCr & "[ Third Page ] " & vbCr & vbCr) & paraText) -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -1180,7 +1180,7 @@ paragraph.AppendField("TotalNumberOfPages", FieldType.FieldNumPages) paragraph = section.AddParagraph() 'Appends the text to the created paragraph paragraph.AppendText("AdventureWorks Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company.") -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -1287,7 +1287,7 @@ paragraph.AppendText("[ Default Page Header ]") 'Inserts the default page footer paragraph = section.HeadersFooters.OddFooter.AddParagraph() paragraph.AppendText("[ Default Page Footer ]") -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -1366,11 +1366,11 @@ Using document As WordDocument = New WordDocument() section.PageSetup.Borders.Color = Color.Blue 'Set the linewidth of the borders. section.PageSetup.Borders.LineWidth = 0.75F - //Set the page border margins. - section.PageSetup.Borders.Top.Space = 5F; - section.PageSetup.Borders.Bottom.Space = 5F; - section.PageSetup.Borders.Right.Space = 5F; - section.PageSetup.Borders.Left.Space = 5F; + 'Set the page border margins. + section.PageSetup.Borders.Top.Space = 5F + section.PageSetup.Borders.Bottom.Space = 5F + section.PageSetup.Borders.Right.Space = 5F + section.PageSetup.Borders.Left.Space = 5F 'Add a paragraph to a section. Dim paragraph As IWParagraph = section.AddParagraph() paragraph.AppendText("AdventureWorks Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company.") @@ -1504,7 +1504,7 @@ document.Close(); Dim document As New WordDocument(inputFileName) 'Removes the second section from the collection document.Sections.RemoveAt(1) -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Shapes.md b/Document-Processing/Word/Word-Library/NET/Working-with-Shapes.md index 9ff2566e65..9a08419362 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Shapes.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Shapes.md @@ -6,15 +6,13 @@ control: DocIO documentation: UG keywords: --- -# Working with Shapes for File-Formats Platform DocIO Control +# Working with Shapes in .NET Word (DocIO) Library -Shapes are drawing objects that include lines, curves, circles, rectangles, etc. It can be preset or custom geometry. You can create and manipulate the pre-defined shape in DOCX and WordML format documents. +Shapes are drawing objects that can include lines, curves, circles, rectangles, and so on. A shape can have preset or custom geometry. You can create and manipulate preset shapes in DOCX and WordML format documents. ## Adding shapes -The following code example illustrates how to add pre-defined shape to the document. - -N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-platform]*** for ASP.NET Core, Blazor, Xamarin, UWP, .NET MAUI, and WinUI; ***C# [Windows-specific]*** for WinForms and WPF; ***VB.NET [Windows-specific]*** for VB.NET applications. +The following code example illustrates how to add a preset shape to the document. {% tabs %} @@ -70,10 +68,10 @@ IWTextRange text = paragraph.AppendText("This text is in rounded rectangle shape text.CharacterFormat.TextColor = Color.Green; text.CharacterFormat.Bold = true; //Adds another shape to the document -paragraph = section.AddParagraph()as WParagraph; +paragraph = section.AddParagraph() as WParagraph; paragraph.AppendBreak(BreakType.LineBreak); Shape pentagon = paragraph.AppendShape(AutoShapeType.Pentagon, 100, 100); -paragraph = pentagon.TextBody.AddParagraph()as WParagraph; +paragraph = pentagon.TextBody.AddParagraph() as WParagraph; paragraph.AppendText("This text is in pentagon shape"); pentagon.HorizontalPosition = 72; pentagon.VerticalPosition = 200; @@ -121,7 +119,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### Format shapes -Shape can have formatting such as line color, fill color, positioning, wrap formats, etc. The following code example illustrates how to apply formatting options for shape. +A shape can have formatting such as line color, fill color, positioning, and wrap formats. The following code example illustrates how to apply formatting options to a shape. + +N> `FillFormat.Transparency` accepts a value from 0 to 100 (percentage). {% tabs %} @@ -230,7 +230,7 @@ text.CharacterFormat.Bold = True rectangle.FillFormat.Fill = True rectangle.FillFormat.Color = Color.LightGray 'Set transparency (opacity) to the shape fill color. -rectangle.FillFormat.Transparency = 75; +rectangle.FillFormat.Transparency = 75 'Apply wrap formats rectangle.WrapFormat.TextWrappingStyle = TextWrappingStyle.Square rectangle.WrapFormat.TextWrappingType = TextWrappingType.Right @@ -331,7 +331,7 @@ paragraph = TryCast(rectangle.TextBody.AddParagraph(), WParagraph) Dim text As IWTextRange = paragraph.AppendText("This text is in rounded rectangle shape") 'Saves and closes the Word document document.Save("Sample.docx", FormatType.Docx) -document.Close +document.Close() {% endhighlight %} {% endtabs %} @@ -340,20 +340,21 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Grouping shapes -Word library now allows you to create or group multiple shapes, pictures, text boxes, and charts as a group shape in Word document (DOCX) and preserve it as in DOCX and WordML format conversions. +The .NET Word (DocIO) library allows you to group multiple shapes, pictures, text boxes, and charts as a single group shape in a Word document (DOCX). These group shapes are preserved in DOCX and WordML format conversions. -You can create a document with group shapes by using Microsoft Word. It provides an option to group a set of shapes and images as a single shape and a group shape as individual item. +Microsoft Word provides an option to group a set of shapes and images as a single shape and to later ungroup it back into individual items. ![Create Group shape in Microsoft Word](Working-with-Shapes_images/Working-with-Shapes_img1.jpeg) **Key Features:** -1. You can easily manage group of shapes, pictures, text boxes, or charts as a group shape. -2. You can move several shapes or images simultaneously and apply the same formatting properties for children of group shapes. +1. You can easily manage a group of shapes, pictures, text boxes, or charts as a group shape. +2. You can move several shapes or images simultaneously and apply the same formatting properties to the children of a group shape. -N> 1. While grouping the shapes or other objects, the shapes should be positioned relative to the “Page”. -N> 2. While grouping the shapes or other objects, the wrapping style should not be "In Line with Text". +N> The following constraints apply while grouping shapes or other objects: +N> 1. The shapes should be positioned relative to the "Page". +N> 2. The wrapping style should not be "In Line with Text". -The following code example illustrates how to create group shape in Word document. +The following code example illustrates how to create a group shape in a Word document. In the sample, an `Image.png` file must be present in the working directory (replace the path as needed). {% tabs %} @@ -490,67 +491,67 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -‘Creates a new Word document +'Creates a new Word document Dim document As WordDocument = New WordDocument() -‘Adds new section to the document +'Adds new section to the document Dim section As IWSection = document.AddSection() -‘Adds new paragraph to the section +'Adds new paragraph to the section Dim paragraph As WParagraph = TryCast(section.AddParagraph(), WParagraph) -‘Creates new group shape +'Creates new group shape Dim groupShape As GroupShape = New GroupShape(document) -‘Adds group shape to the paragraph +'Adds group shape to the paragraph paragraph.ChildEntities.Add(groupShape) -‘Creates new shape +'Creates new shape Dim shape As Shape = New Shape(document, AutoShapeType.RoundedRectangle) -‘Sets height and width for shape +'Sets height and width for shape shape.Height = 100 shape.Width = 150 -‘Sets horizontal and vertical position +'Sets horizontal and vertical position shape.HorizontalPosition = 72 shape.VerticalPosition = 72 -‘Sets wrapping style for shape +'Sets wrapping style for shape shape.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText -‘Sets horizontal and vertical origin +'Sets horizontal and vertical origin shape.HorizontalOrigin = HorizontalOrigin.Page shape.VerticalOrigin = VerticalOrigin.Page -‘Adds the specified shape to group shape +'Adds the specified shape to group shape groupShape.Add(shape) -‘Creates new picture +'Creates new picture Dim picture As WPicture = New WPicture(document) picture.LoadImage(Image.FromFile("Image.png")) -‘Sets wrapping style for picture +'Sets wrapping style for picture picture.TextWrappingStyle = TextWrappingStyle.InFrontOfText -‘Sets height and width for the image +'Sets height and width for the image picture.Height = 100 picture.Width = 100 -‘Sets horizontal and vertical position +'Sets horizontal and vertical position picture.HorizontalPosition = 400 picture.VerticalPosition = 150 -‘Sets horizontal and vertical origin +'Sets horizontal and vertical origin picture.HorizontalOrigin = HorizontalOrigin.Page picture.VerticalOrigin = VerticalOrigin.Page -‘Adds the specified picture to group shape +'Adds the specified picture to group shape groupShape.Add(picture) -‘Creates new textbox +'Creates new textbox Dim textbox As WTextBox = New WTextBox(document) textbox.TextBoxFormat.Width = 150 textbox.TextBoxFormat.Height = 75 -‘Adds new text to the textbox body +'Adds new text to the textbox body Dim textboxParagraph As IWParagraph = textbox.TextBoxBody.AddParagraph() textboxParagraph.AppendText("Text inside text box") -‘Sets wrapping style for textbox +'Sets wrapping style for textbox textbox.TextBoxFormat.TextWrappingStyle = TextWrappingStyle.Behind -‘Sets horizontal and vertical position +'Sets horizontal and vertical position textbox.TextBoxFormat.HorizontalPosition = 200 textbox.TextBoxFormat.VerticalPosition = 200 -‘Sets horizontal and vertical origin +'Sets horizontal and vertical origin textbox.TextBoxFormat.VerticalOrigin = VerticalOrigin.Page textbox.TextBoxFormat.HorizontalOrigin = HorizontalOrigin.Page -‘Adds the specified textbox to group shape +'Adds the specified textbox to group shape groupShape.Add(textbox) -‘Saves the Word document +'Saves the Word document document.Save("Sample.docx", FormatType.Docx) -‘Closes the document +'Closes the document document.Close() {% endhighlight %} @@ -558,7 +559,7 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Shapes/Add-group-shape-in-Word). -The following code example illustrates how to add collection of shapes or images as a group shape in Word document. +The following code example illustrates how to add a collection of shapes, text boxes, and charts as a group shape by passing an array of paragraph items to the `GroupShape` constructor. {% tabs %} @@ -579,7 +580,7 @@ shape.Width = 150; //Sets Wrapping style for shape shape.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText; //Sets horizontal and vertical position for shape -shape.HorizontalPosition = 7; +shape.HorizontalPosition = 72; shape.VerticalPosition = 72; //Sets horizontal and vertical origin for shape shape.HorizontalOrigin = HorizontalOrigin.Page; @@ -687,7 +688,7 @@ shape.Width = 150; //Sets Wrapping style for shape shape.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText; //Sets horizontal and vertical position for shape -shape.HorizontalPosition = 7; +shape.HorizontalPosition = 72; shape.VerticalPosition = 72; //Sets horizontal and vertical origin for shape shape.HorizontalOrigin = HorizontalOrigin.Page; @@ -768,7 +769,7 @@ chart.PrimaryCategoryAxis.CategoryLabels = chart.ChartData[2, 1, 11, 1]; paragraphItems[2] = chart; //Creates new group shape GroupShape groupShape = new GroupShape(document, paragraphItems); - groupShape.HorizontalPosition = 72; +groupShape.HorizontalPosition = 72; //Adds the group shape to the paragraph paragraph.ChildEntities.Add(groupShape); //Saves the Word document @@ -778,64 +779,64 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -‘Creates a new Word document +'Creates a new Word document Dim document As WordDocument = New WordDocument() -‘Adds new section to the document +'Adds new section to the document Dim section As IWSection = document.AddSection() -‘Adds new paragraph to the section +'Adds new paragraph to the section Dim paragraph As WParagraph = TryCast(section.AddParagraph(), WParagraph) -‘Creates paragraph item collections to add child shapes +'Creates paragraph item collections to add child shapes Dim paragraphItems As ParagraphItem() = New ParagraphItem(2) {} -‘Creates new shape +'Creates new shape Dim shape As Shape = New Shape(document, AutoShapeType.RoundedRectangle) -‘Sets height and width for shape +'Sets height and width for shape shape.Height = 100 shape.Width = 150 -‘Sets Wrapping style for shape +'Sets Wrapping style for shape shape.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText -‘Sets horizontal and vertical position for shape -shape.HorizontalPosition = 7 +'Sets horizontal and vertical position for shape +shape.HorizontalPosition = 72 shape.VerticalPosition = 72 -‘Sets horizontal and vertical origin for shape +'Sets horizontal and vertical origin for shape shape.HorizontalOrigin = HorizontalOrigin.Page shape.VerticalOrigin = VerticalOrigin.Page -‘Sets the shape as paragraph item +'Sets the shape as paragraph item paragraphItems(0) = shape -‘Appends new textbox to the document +'Appends new textbox to the document Dim textbox As WTextBox = New WTextBox(document) -‘Sets height and width for textbox +'Sets height and width for textbox textbox.TextBoxFormat.Width = 150 textbox.TextBoxFormat.Height = 75 -‘Adds new text to the textbox body +'Adds new text to the textbox body Dim textboxParagraph As IWParagraph = textbox.TextBoxBody.AddParagraph() -‘Adds new text to the textbox paragraph +'Adds new text to the textbox paragraph textboxParagraph.AppendText("Text inside text box") -‘Sets wrapping style for textbox +'Sets wrapping style for textbox textbox.TextBoxFormat.TextWrappingStyle = TextWrappingStyle.Behind -‘Sets horizontal and vertical position for textbox +'Sets horizontal and vertical position for textbox textbox.TextBoxFormat.HorizontalPosition = 200 textbox.TextBoxFormat.VerticalPosition = 200 -‘Sets horizontal and vertical origin for textbox +'Sets horizontal and vertical origin for textbox textbox.TextBoxFormat.VerticalOrigin = VerticalOrigin.Page textbox.TextBoxFormat.HorizontalOrigin = HorizontalOrigin.Page -‘Sets the textbox as paragraph item +'Sets the textbox as paragraph item paragraphItems(1) = textbox -‘Appends new chart to the document +'Appends new chart to the document Dim chart As WChart = New WChart(document) -‘Sets height and width for chart +'Sets height and width for chart chart.Height = 270 chart.Width = 446 -‘Sets wrapping style for chart +'Sets wrapping style for chart chart.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText -‘Sets chart type +'Sets chart type chart.ChartType = OfficeChartType.Pie chart.VerticalPosition = 350 -‘Sets chart title -‘Sets font and size for chart title +'Sets chart title +'Sets font and size for chart title chart.ChartTitle = "Best Selling Products" chart.ChartTitleArea.FontName = "Calibri" chart.ChartTitleArea.Size = 14 -‘Sets data for chart +'Sets data for chart chart.ChartData.SetValue(1, 1, "") chart.ChartData.SetValue(1, 2, "Sales") chart.ChartData.SetValue(2, 1, "Phyllis Lapin") @@ -858,29 +859,29 @@ chart.ChartData.SetValue(10, 1, "Christina Berglund") chart.ChartData.SetValue(10, 2, 29.171) chart.ChartData.SetValue(11, 1, "Elizabeth Lincoln") chart.ChartData.SetValue(11, 2, 25.696) -‘Creates a new chart series with the name “Sales” +'Creates a new chart series with the name "Sales" Dim pieSeries As IOfficeChartSerie = chart.Series.Add("Sales") -‘Sets value for the chart series +'Sets value for the chart series pieSeries.Values = chart.ChartData(2, 2, 11, 2) -‘Sets data label +'Sets data label pieSeries.DataPoints.DefaultDataPoint.DataLabels.IsValue = True pieSeries.DataPoints.DefaultDataPoint.DataLabels.Position = OfficeDataLabelPosition.Outside -‘Sets background color +'Sets background color chart.ChartArea.Fill.ForeColor = Color.FromArgb(242, 242, 242) chart.PlotArea.Fill.ForeColor = Color.FromArgb(242, 242, 242) chart.ChartArea.Border.LinePattern = OfficeChartLinePattern.None -‘Sets category labels +'Sets category labels chart.PrimaryCategoryAxis.CategoryLabels = chart.ChartData(2, 1, 11, 1) -‘Sets the chart as paragraph item +'Sets the chart as paragraph item paragraphItems(2) = chart -‘Creates new group shape +'Creates new group shape Dim groupShape As GroupShape = New GroupShape(document, paragraphItems) groupShape.HorizontalPosition = 72 -‘Adds the group shape to the paragraph +'Adds the group shape to the paragraph paragraph.ChildEntities.Add(groupShape) -‘Saves the Word document +'Saves the Word document document.Save("Sample.docx", FormatType.Docx) -‘Closes the document +'Closes the document document.Close() {% endhighlight %} @@ -890,7 +891,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### Nested group shapes -The following code example illustrates how to group the nested group shapes as a group shape in Word document. +You can nest one group shape inside another. The following code example illustrates how to group nested group shapes as a single group shape in a Word document. {% tabs %} @@ -1073,91 +1074,91 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -‘Creates a new Word document +'Creates a new Word document Dim document As WordDocument = New WordDocument() -‘Adds new section to the document +'Adds new section to the document Dim section As IWSection = document.AddSection() -‘Adds new paragraph to the section +'Adds new paragraph to the section Dim paragraph As WParagraph = TryCast(section.AddParagraph(), WParagraph) -‘Creates new group shape +'Creates new group shape Dim groupShape As GroupShape = New GroupShape(document) -‘Adds group shape to the paragraph +'Adds group shape to the paragraph paragraph.ChildEntities.Add(groupShape) -‘Appends new shape to the document +'Appends new shape to the document Dim shape As Shape = New Shape(document, AutoShapeType.RoundedRectangle) -‘Sets height and width for shape +'Sets height and width for shape shape.Height = 100 shape.Width = 150 -‘Sets Wrapping style for shape +'Sets Wrapping style for shape shape.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText -‘Sets horizontal and vertical position for shape +'Sets horizontal and vertical position for shape shape.HorizontalPosition = 72 shape.VerticalPosition = 72 -‘Sets horizontal and vertical origin for shape +'Sets horizontal and vertical origin for shape shape.HorizontalOrigin = HorizontalOrigin.Page shape.VerticalOrigin = VerticalOrigin.Page -‘Adds the specified shape to group shape +'Adds the specified shape to group shape groupShape.Add(shape) -‘Appends new picture to the document +'Appends new picture to the document Dim picture As WPicture = New WPicture(document) -‘Loads image from the file -picture.LoadImage(Image.FromFile("Image.jpg")) -‘Sets wrapping style for picture +'Loads image from the file +picture.LoadImage(Image.FromFile("Image.png")) +'Sets wrapping style for picture picture.TextWrappingStyle = TextWrappingStyle.InFrontOfText -‘Sets height and width for the picture +'Sets height and width for the picture picture.Height = 100 picture.Width = 100 -‘Sets horizontal and vertical position for the picture +'Sets horizontal and vertical position for the picture picture.HorizontalPosition = 400 picture.VerticalPosition = 150 -‘Sets horizontal and vertical origin for the picture +'Sets horizontal and vertical origin for the picture picture.HorizontalOrigin = HorizontalOrigin.Page picture.VerticalOrigin = VerticalOrigin.Page -‘Adds specified picture to the group shape +'Adds specified picture to the group shape groupShape.Add(picture) -‘Creates new nested group shape +'Creates new nested group shape Dim nestedGroupShape As GroupShape = New GroupShape(document) -‘Appends new textbox to the document +'Appends new textbox to the document Dim textbox As WTextBox = New WTextBox(document) -‘Sets width and height for the textbox +'Sets width and height for the textbox textbox.TextBoxFormat.Width = 150 textbox.TextBoxFormat.Height = 75 -‘Adds new text to the textbox body +'Adds new text to the textbox body Dim textboxParagraph As IWParagraph = textbox.TextBoxBody.AddParagraph() -‘Adds new text to the textbox paragraph +'Adds new text to the textbox paragraph textboxParagraph.AppendText("Text inside text box") -‘Sets wrapping style for the textbox +'Sets wrapping style for the textbox textbox.TextBoxFormat.TextWrappingStyle = TextWrappingStyle.Behind -‘Sets horizontal and vertical position for the textbox +'Sets horizontal and vertical position for the textbox textbox.TextBoxFormat.HorizontalPosition = 200 textbox.TextBoxFormat.VerticalPosition = 200 -‘Sets horizontal and vertical origin for the textbox +'Sets horizontal and vertical origin for the textbox textbox.TextBoxFormat.VerticalOrigin = VerticalOrigin.Page textbox.TextBoxFormat.HorizontalOrigin = HorizontalOrigin.Page -‘Adds specified textbox to the nested group shape +'Adds specified textbox to the nested group shape nestedGroupShape.Add(textbox) -‘Appends new shape to the document +'Appends new shape to the document shape = New Shape(document, AutoShapeType.Oval) -‘Sets height and width for the new shape +'Sets height and width for the new shape shape.Height = 100 shape.Width = 150 -‘Sets horizontal and vertical position for the shape +'Sets horizontal and vertical position for the shape shape.HorizontalPosition = 200 shape.VerticalPosition = 72 -‘Sets horizontal and vertical origin for the shape +'Sets horizontal and vertical origin for the shape shape.HorizontalOrigin = HorizontalOrigin.Page shape.VerticalOrigin = VerticalOrigin.Page -‘Sets horizontal and vertical position for the nested group shape +'Sets horizontal and vertical position for the nested group shape nestedGroupShape.HorizontalPosition = 72 nestedGroupShape.VerticalPosition = 72 -‘Adds specified shape to the nested group shape +'Adds specified shape to the nested group shape nestedGroupShape.Add(shape) -‘Adds nested group shape to the group shape of the paragraph +'Adds nested group shape to the group shape of the paragraph groupShape.Add(nestedGroupShape) groupShape.HorizontalPosition = 142 -‘Saves the Word document +'Saves the Word document document.Save("Sample.docx", FormatType.Docx) -‘Closes the document +'Closes the document document.Close() {% endhighlight %} @@ -1167,10 +1168,12 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Ungrouping shapes -You can ungroup the group shapes in the Word document to preserve each shape as individual item. +You can ungroup group shapes in a Word document so that each shape is preserved as an individual item. The following code example illustrates how to ungroup the group shape in Word document. +The following code example illustrates how to ungroup a group shape in a Word document. + {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Shapes/Ungroup-shapes/.NET/Ungroup-shapes/Program.cs" %} @@ -1245,7 +1248,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Online Demo * Explore how to create a Word document with shapes using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/autoshapes#/tailwind). -* See how to create a Word document with group shapes using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/groupshapes#/tailwind). +* See how to create a Word document with group shapes using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/groupshapes#/tailwind). ## See Also diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Tables.md b/Document-Processing/Word/Word-Library/NET/Working-with-Tables.md index cb1cad82f4..01eef21a71 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Tables.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Tables.md @@ -5,14 +5,14 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Tables in Word document +# Working with Tables in a Word document A table in Word document is used to arrange document content in rows and columns. [WTable](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTable.html) instance represents a table in Word document. A table must contain at least one row. 1. A row is a collection of cells and it is represented by an instance of [WTableRow](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTableRow.html). Each row must contain at least one cell. 2. A cell can contain one or more paragraphs and tables. An instance of [WTableCell](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTableCell.html) represents a table cell. Each table cell must contain at least one paragraph. -N> Adding more than 63 columns not supported in Word document using Microsoft Word application. It shows alert when you attempt to insert table with more than 64 columns, which is a one of the behaviors of Microsoft Word and Essential® DocIO does the same. +N> Adding more than 63 columns is not supported in Word document using Microsoft Word application. It shows an alert when you attempt to insert a table with more than 64 columns, which is one of the behaviors of Microsoft Word and Essential® DocIO does the same. The following image illustrates how a table in Word document is organized in EssentialDocIO’s DOM: @@ -364,7 +364,7 @@ nestedCell.Width = 200; nestedCell.AddParagraph().AppendText("Mango"); //Accesses the instance of the cell (second row, second cell) nestedCell = table.Rows[1].Cells[1]; -table[1, 1].AddParagraph().AppendText("85"); +nestedCell.AddParagraph().AppendText("85"); table[2, 0].AddParagraph().AppendText("Pomegranate"); table[2, 1].AddParagraph().AppendText("70"); //Saves the Word document to MemoryStream @@ -408,7 +408,7 @@ nestedCell.Width = 200; nestedCell.AddParagraph().AppendText("Mango"); //Accesses the instance of the cell (second row, second cell) nestedCell = table.Rows[1].Cells[1]; -table[1, 1].AddParagraph().AppendText("85"); +nestedCell.AddParagraph().AppendText("85"); table[2, 0].AddParagraph().AppendText("Pomegranate"); table[2, 1].AddParagraph().AppendText("70"); //Saves and closes the document instance @@ -450,7 +450,7 @@ nestedCell.Width = 200 nestedCell.AddParagraph().AppendText("Mango") 'Accesses the instance of the cell (second row, second cell) nestedCell = table.Rows(1).Cells(1) -table(1, 1).AddParagraph().AppendText("85") +nestedCell.AddParagraph().AppendText("85") table(2, 0).AddParagraph().AppendText("Pomegranate") table(2, 1).AddParagraph().AppendText("70") 'Saves and closes the document instance @@ -464,7 +464,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Align text within a table -You can iterate the cells within a table and align text for each cell. Find more information about iterating the cells from [here](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-tables#iterating-through-table-elements) +You can iterate the cells within a table and align text for each cell. Find more information about iterating the cells from [here](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-tables#iterating-through-table-elements). The following code example illustrates how to align text within a table. @@ -680,7 +680,7 @@ End Using You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Tables/Insert-image-in-cell). -## Apply formatting to Table, Row and Cell +## Apply formatting to Table and Row The following code example illustrates how to load an existing document and apply table formatting options such as [Borders](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.RowFormat.html#Syncfusion_DocIO_DLS_RowFormat_Borders), [LeftIndent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.RowFormat.html#Syncfusion_DocIO_DLS_RowFormat_LeftIndent), [Paddings](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.RowFormat.html#Syncfusion_DocIO_DLS_RowFormat_Paddings), [IsAutoResized](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.RowFormat.html#Syncfusion_DocIO_DLS_RowFormat_IsAutoResized), etc. @@ -692,9 +692,8 @@ N> 4. As in the Microsoft Word, DocIO supports [RowFormat.Borders](https://help. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Tables/Apply-table-formatting/.NET/Apply-table-formatting/Program.cs" %} -//Creates an instance of WordDocument class (Empty Word Document) -FileStream fileStreamPath = new FileStream("Table.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); //Opens an existing Word document into DocIO instance +FileStream fileStreamPath = new FileStream("Table.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); //Accesses the instance of the first section in the Word document WSection section = document.Sections[0]; @@ -845,6 +844,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync Using DocIO, you can format table cells by setting text wrapping to control content flow and adjusting text direction for better readability. You can also customize cell borders, apply vertical alignment, and set a background color to enhance the table’s appearance. +N> In the following snippets, the `row` and `cell` variables are assumed to be obtained from an existing table (for example, `WTableRow row = table.Rows[0];` and `WTableCell cell = row.Cells[0];`). See the [Apply formatting to Table and Row](#apply-formatting-to-table-and-row) section for how to access a table and its rows. + #### Set cell background color The following code snippet illustrates how to specify the background color of a table cell using the [CellFormat.BackColor](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellFormat.html#Syncfusion_DocIO_DLS_CellFormat_BackColor) property. @@ -1054,15 +1055,15 @@ WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); WSection section = document.Sections[0]; //Accesses the instance of the first table in the section WTable table = section.Tables[0] as WTable; -//Resizes the table to fit the contents respect to the contents +//Resizes the table to fit its contents table.AutoFit(AutoFitType.FitToContent); //Accesses the instance of the second table in the section table = section.Tables[1] as WTable; -//Resizes the table to fit the contents respect to window/page width +//Resizes the table to fit the window/page width table.AutoFit(AutoFitType.FitToWindow); //Accesses the instance of the third table in the section table = section.Tables[2] as WTable; -//Resizes the table to fit the contents respect to fixed column width +//Resizes the table to fit the fixed column width table.AutoFit(AutoFitType.FixedColumnWidth); //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); @@ -1072,23 +1073,23 @@ document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates an instance of WordDocument class (Empty Word Document)*'| markdownify }} +//Creates an instance of WordDocument class (Empty Word Document) WordDocument document = new WordDocument(); //Opens an existing Word document into DocIO instance -document.Open("Template", FormatType.Docx); +document.Open("Template.docx", FormatType.Docx); //Accesses the instance of the first section in the Word document WSection section = document.Sections[0]; //Accesses the instance of the first table in the section WTable table = section.Tables[0] as WTable; -//Resizes the table to fit the contents respect to the contents +//Resizes the table to fit its contents table.AutoFit(AutoFitType.FitToContent); //Accesses the instance of the second table in the section table = section.Tables[1] as WTable; -//Resizes the table to fit the contents respect to window/page width +//Resizes the table to fit the window/page width table.AutoFit(AutoFitType.FitToWindow); //Accesses the instance of the third table in the section table = section.Tables[2] as WTable; -//Resizes the table to fit the contents respect to fixed column width +//Resizes the table to fit the fixed column width table.AutoFit(AutoFitType.FixedColumnWidth); //Saves and closes the document instance document.Save("Sample.docx", FormatType.Docx); @@ -1099,18 +1100,18 @@ document.Close(); 'Creates an instance of WordDocument class (Empty Word Document) Dim document As WordDocument = New WordDocument 'Opens an existing Word document into DocIO instance -document.Open("Template", FormatType.Docx) +document.Open("Template.docx", FormatType.Docx) Dim section As WSection = document.Sections(0) Dim table As WTable = CType(section.Tables(0), WTable) -'Resizes the table to fit the contents respect to the contents +'Resizes the table to fit its contents table.AutoFit(AutoFitType.FitToContent) 'Accesses the instance of the second table in the section table = CType(section.Tables(1), WTable) -'Resizes the table to fit the contents respect to window/page width +'Resizes the table to fit the window/page width table.AutoFit(AutoFitType.FitToWindow) 'Accesses the instance of the third table in the section table = CType(section.Tables(2), WTable) -'Resizes the table to fit the contents respect to fixed column width +'Resizes the table to fit the fixed column width table.AutoFit(AutoFitType.FixedColumnWidth) 'Saves and closes the document instance document.Save("Sample.docx", FormatType.Docx) @@ -1127,7 +1128,7 @@ N> In ASP.NET Core, UWP, and Xamarin platforms, to apply autofit for table in a A table style defines a set of table, row, cell and paragraph level formatting that can be applied to a table. [WTableStyle](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTableStyle.html) instance represents table style in a Word document. -N> Essential® DocIO currently provides support for table styles in DOCX and WordML formats alone. The visual appearance is also preserved in Word to PDF, Word to Image, and Word to HTML conversions. +N> Essential® DocIO currently provides support for table styles in DOCX and WordML formats only. The visual appearance is also preserved in Word to PDF, Word to Image, and Word to HTML conversions. The following code example illustrates how to apply the built-in table styles to the table. @@ -1180,7 +1181,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync Once you have applied a table style, you can enable or disable the special formatting of the table. There are six options: first column, last column, banded rows, banded columns, header row and last row. -The following code example illustrates how to enable and disable the special table formatting options of the table styles +The following code example illustrates how to enable and disable the special table formatting options of the table styles. {% tabs %} @@ -1372,11 +1373,11 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Tables/Apply-custom-table-style). -### Apply Base Style +### Apply base style Table styles can be based on other table styles also. When applying a base style, the new style will inherit the values of the base style that are not explicitly redefined in the new style. You can apply a custom table style or a built-in table style as a base for the table style. -The following code example illustrates how to apply built-in and custom table styles as base styles for another custom table. +The following code example illustrates how to apply built-in and custom table styles as base styles for another custom table style. {% tabs %} @@ -1662,7 +1663,7 @@ IWSection section = document.AddSection(); section.AddParagraph().AppendText("Vertical merging of Table cells"); IWTable table = section.AddTable(); table.ResetCells(5, 5); -// Specifies the vertical merge to the third cell, from second row to fifth row +// Specifies the vertical merge to the third column, from second row to fifth row table.ApplyVerticalMerge(2, 1, 4); //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); @@ -1678,7 +1679,7 @@ IWSection section = document.AddSection(); section.AddParagraph().AppendText("Vertical merging of Table cells"); IWTable table = section.AddTable(); table.ResetCells(5, 5); -//Specifies the vertical merge to the third cell, from second row to fifth row +//Specifies the vertical merge to the third column, from second row to fifth row table.ApplyVerticalMerge(2, 1, 4); //Saves and closes the document instance document.Save("VerticalMerge.docx", FormatType.Docx); @@ -1692,7 +1693,7 @@ Dim section As IWSection = document.AddSection() section.AddParagraph().AppendText("Vertical merging of Table cells") Dim table As IWTable = section.AddTable() table.ResetCells(5, 5) -'Specifies the vertical merge to the third cell, from second row to fifth row +'Specifies the vertical merge to the third column, from second row to fifth row table.ApplyVerticalMerge(2, 1, 4) 'Saves and closes the document instance document.Save("VerticalMerge.docx", FormatType.Docx) @@ -1703,7 +1704,9 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Tables/Apply-vertical-merge-to-cells). -The following code example illustrate how to create a table that contains horizontal merged cells. +To merge cells manually, set the [HorizontalMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellFormat.html#Syncfusion_DocIO_DLS_CellFormat_HorizontalMerge) or [VerticalMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellFormat.html#Syncfusion_DocIO_DLS_CellFormat_VerticalMerge) property of [CellFormat](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellFormat.html) to [CellMerge.Start](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellMerge.html) for the first cell of the merge range and to [CellMerge.Continue](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellMerge.html) for the cells being merged into it. + +The following code example illustrates how to create a table that contains horizontal merged cells. {% tabs %} @@ -1868,7 +1871,7 @@ You can specify one or more rows in a table to be repeated as header row at the * In the case of a single header row, it must be the first row in the table. * In the case of multiple header rows, then header rows must be consecutive from the first row of the table. -N> Heading rows do not have any effect with nested tables in Microsoft Word as well as DocIO +N> Header rows have no effect on nested tables in Microsoft Word or DocIO. The following code example illustrates how to create a table with a single header row. @@ -1962,7 +1965,7 @@ The following code example illustrates how to disable all the table rows from sp {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Tables/Disable-row-to-break-across-pages/.NET/Disable-row-to-break-across-pages/Program.cs" %} //Creates an instance of WordDocument class FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -WordDocument document = new WordDocument(fileStreamPath); +WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); WSection section = document.Sections[0]; WTable table = section.Tables[0] as WTable; //Disables breaking across pages for all rows in the table. @@ -2027,7 +2030,7 @@ foreach (WTableRow row in table.Rows) //Iterates through the paragraphs of the cell foreach (WParagraph paragraph in cell.Paragraphs) { - //When the paragraph contains text Panda then apply green as back color to cell + //When the paragraph contains the text 'panda', apply green as the back color to the cell if (paragraph.Text.Contains("panda")) cell.CellFormat.BackColor = Color.Green; } @@ -2054,7 +2057,7 @@ foreach (WTableRow row in table.Rows) //Iterates through the paragraphs of the cell foreach (WParagraph paragraph in cell.Paragraphs) { - //When the paragraph contains text Panda then apply green as back color to cell + //When the paragraph contains the text 'panda', apply green as the back color to the cell if (paragraph.Text.Contains("panda")) cell.CellFormat.BackColor = Color.Green; } @@ -2076,7 +2079,7 @@ For Each row As WTableRow In table.Rows For Each cell As WTableCell In row.Cells 'Iterates through the paragraphs of the cell For Each paragraph As WParagraph In cell.Paragraphs - 'When the paragraph contains text Panda then apply green as back color to cell + 'When the paragraph contains the text 'panda', apply green as the back color to the cell If paragraph.Text.Contains("panda") Then cell.CellFormat.BackColor = Color.Green End If diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md b/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md index 4a61ec8ea8..b299893f74 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md @@ -32,6 +32,7 @@ using (WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx) {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} +string fileName = "Template.docx"; //Opens an existing document WordDocument inputTemplateDoc = new WordDocument(fileName); //Creates a clone of Input Template @@ -40,10 +41,11 @@ WordDocument clonedDocument = inputTemplateDoc.Clone(); clonedDocument.Save("ClonedDocument.docx"); clonedDocument.Close(); //Closes the input template document instance -sourceDocument.Close(); +inputTemplateDoc.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} +Dim fileName As String = "Template.docx" 'Opens an existing document Dim inputTemplateDoc As New WordDocument(fileName) 'Creates a clone of Input Template @@ -52,14 +54,14 @@ Dim clonedDocument As WordDocument = inputTemplateDoc.Clone() clonedDocument.Save("ClonedDocument.docx") clonedDocument.Close() 'Closes the input template document instance -sourceDocument.Close() +inputTemplateDoc.Close() {% endhighlight %} {% endtabs %} You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-document/Clone-whole-Word-document). -You can also create a deep copy of document elements such as sections, paragraphs, Tables, Text, Image, OleObject, Shapes, TextBoxes and etc., The following code example illustrates how to clone the section and save each cloned section as a Word document. +You can also create a deep copy of document elements such as sections, paragraphs, Tables, Text, Image, OleObject, Shapes, TextBoxes, etc. The following code example illustrates how to clone the section and save each cloned section as a Word document. {% tabs %} @@ -67,7 +69,7 @@ You can also create a deep copy of document elements such as sections, paragraph //Creates an instance of WordDocument class FileStream fileStreamPath = new FileStream("SourceDocument.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument sourceDocument = new WordDocument(fileStreamPath); -//Processes the each section in the Word document +//Processes each section in the Word document for (int i = 0; i < sourceDocument.Sections.Count;i++) { //Creates new WordDocument instance to add cloned section @@ -86,7 +88,7 @@ sourceDocument.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens a source document WordDocument sourceDocument = new WordDocument("SourceDocument.docx"); -//Processes the each section in the Word document +//Processes each section in the Word document for (int i = 0; i < sourceDocument.Sections.Count;i++) { //Creates new WordDocument instance to add cloned section @@ -104,7 +106,7 @@ sourceDocument.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens a source document Dim sourceDocument As New WordDocument("SourceDocument.docx") -'Processes the each section in the Word document +'Processes each section in the Word document For i As Integer = 0 To sourceDocument.Sections.Count - 1 'Creates new WordDocument instance to add cloned section Dim destinationDocument As New WordDocument() @@ -122,9 +124,9 @@ sourceDocument.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-document/Split-by-section). -### Link Paragraph and Character Style +## Link Paragraph and Character Style -You can link character styles with paragraph and vice versa in a Word document using [LinkedStyleName](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Style.html#Syncfusion_DocIO_DLS_Style_LinkedStyleName) property. +You can link character styles with paragraph styles, and vice versa in a Word document using [LinkedStyleName](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Style.html#Syncfusion_DocIO_DLS_Style_LinkedStyleName) property. The following code example explains how to link character and paragraph style. @@ -145,7 +147,7 @@ using (WordDocument document = new WordDocument()) //Sets the formatting of the style charStyle.CharacterFormat.Bold = true; charStyle.CharacterFormat.Italic = true; - //Link both paragraph and character style + //Links both paragraph and character style paraStyle.LinkedStyleName = "CharacterStyle"; //Appends the contents into the paragraph document.LastParagraph.AppendText("AdventureWorks Cycles"); @@ -178,8 +180,8 @@ using (WordDocument document = new WordDocument()) //Sets the formatting of the style charStyle.CharacterFormat.Bold = true; charStyle.CharacterFormat.Italic = true; - //Link both paragraph and character style - paraStyle.LinkedStyleName = "CharacterStyle"; + //Links both paragraph and character style + paraStyle.LinkedStyleName = "CharacterStyle"; //Appends the contents into the paragraph document.LastParagraph.AppendText("AdventureWorks Cycles"); //Applies the style to paragraph @@ -196,7 +198,7 @@ using (WordDocument document = new WordDocument()) {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Opens an input Word template +'Creates a new Word document Using document As WordDocument = New WordDocument() 'This method adds a section and a paragraph in the document document.EnsureMinimal() @@ -209,7 +211,7 @@ Using document As WordDocument = New WordDocument() 'Sets the formatting of the style charStyle.CharacterFormat.Bold = True charStyle.CharacterFormat.Italic = True - 'Link both paragraph and character style + 'Links both paragraph and character style paraStyle.LinkedStyleName = "CharacterStyle" 'Appends the content into the paragraph document.LastParagraph.AppendText("AdventureWorks Cycles") @@ -231,7 +233,7 @@ End Using ## Working with Word document properties -Document properties, also known as metadata, are details about a file that describe or identify it. You can also define the additional custom document properties for the documents by using DocIO Document properties that are classified as two categories. +Document properties, also known as metadata, are details about a file that describe or identify it. You can also define additional custom document properties by using DocIO document properties, which are classified into two categories: * Built-in document properties - includes details such as title, author name, subject, and keywords that identify the document's topic or contents. * Custom document properties - defines the user-defined document properties. @@ -250,7 +252,7 @@ using (WordDocument document = new WordDocument(sourceStreamPath, FormatType.Aut //Accesses the built-in document properties Console.WriteLine("Title - {0}",document.BuiltinDocumentProperties.Title); Console.WriteLine("Author - {0}", document.BuiltinDocumentProperties.Author); - //Modifies or sets the Built-in document properties. + //Modifies or sets the built-in document properties. document.BuiltinDocumentProperties.Author = "Andrew"; document.BuiltinDocumentProperties.LastAuthor = "Steven"; document.BuiltinDocumentProperties.CreateDate = new DateTime(1900, 12, 31, 12, 0, 0); @@ -275,7 +277,7 @@ WordDocument document = new WordDocument(inputFileName); //Accesses the built-in document properties Console.WriteLine("Title - {0}",document.BuiltinDocumentProperties.Title); Console.WriteLine("Author - {0}", document.BuiltinDocumentProperties.Author); -//Modifies or sets the Built-in document properties. +//Modifies or sets the built-in document properties. document.BuiltinDocumentProperties.Author = "Andrew"; document.BuiltinDocumentProperties.LastAuthor = "Steven"; document.BuiltinDocumentProperties.CreateDate = new DateTime(1900, 12, 31, 12, 0, 0); @@ -437,7 +439,7 @@ N> 2. In ASP.NET Core and Xamarin platforms, to update page count in a Word doc N> 3. DocIO uses the Word-to-PDF layout engine to update page count. If the required fonts are missing in the environment, alternate fonts are used, which may affect accuracy. [Ensure](https://support.syncfusion.com/kb/article/6821/check-whether-fonts-in-word-document-are-available-in-machine-for-pdf-or-image-conversion) all fonts used in the input document are available for a correct page count. N> 4. In UWP platform, to updates paragraph, word, and character counts in the document using the [UpdateWordCount()](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_UpdateWordCount) API. -### Adding Custom Document properties +### Adding custom document properties You add a new custom document properties through [Add](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CustomDocumentProperties.html#Syncfusion_DocIO_DLS_CustomDocumentProperties_Add_System_String_System_Object_) method of [CustomProperties](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_CustomDocumentProperties) class. The following code example illustrates how to add a new custom document properties. @@ -899,22 +901,22 @@ using (FileStream docStream = new FileStream("Input.docx", FileMode.Open, FileAc {% highlight c# tabtitle="C# [Windows-specific]" %} //Load Word document. -using (WordDocument document = new WordDocument(“Input.docx” FormatType.Docx)) +using (WordDocument document = new WordDocument("Input.docx", FormatType.Docx)) { //Disable a flag to hide the background in print layout view. document.Settings.DisplayBackgrounds = false; //Save the Word document. - document.Save(“Sample.docx”), FormatType.Docx); + document.Save("Sample.docx", FormatType.Docx); } {% endhighlight %} -{% highlight vb.net tabtitle="VB.NET [Windows-specific] " %} +{% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Load Word document. -Using document As WordDocument = New WordDocument(“Input.docx"), FormatType.Docx) +Using document As WordDocument = New WordDocument("Input.docx", FormatType.Docx) 'Disable a flag to hide the background in the print layout view. document.Settings.DisplayBackgrounds = False 'Save the Word document. - document.Save(“Sample.docx"), FormatType.Docx) + document.Save("Sample.docx", FormatType.Docx) End Using {% endhighlight %} @@ -922,6 +924,8 @@ End Using You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-document/Hide-backgrounds-in-print-layout-view). +N> This setting affects only the Word client's print-layout view; it does not alter the background stored in the document. + ## Remove background in a Word document You can remove background colors and images in an existing Word document by setting [NoBackground](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BackgroundType.html) as the background type. @@ -948,23 +952,23 @@ using (FileStream docStream = new FileStream("Input.docx", FileMode.Open, FileAc {% highlight c# tabtitle="C# [Windows-specific]" %} //Load Word document. -using (WordDocument document = new WordDocument(“Input.docx” FormatType.Docx)) +using (WordDocument document = new WordDocument("Input.docx", FormatType.Docx)) { //Remove the existing background in the Word document. document.Background.Type = BackgroundType.NoBackground; //Save the Word document. - document.Save(“Sample.docx”), FormatType.Docx); + document.Save("Sample.docx", FormatType.Docx); } {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Load Word document. -Using document As WordDocument = New WordDocument(“Input.docx"), FormatType.Docx) +Using document As WordDocument = New WordDocument("Input.docx", FormatType.Docx) 'Remove the existing background in the Word document. - document.Background.Type = BackgroundType.NoBackground; + document.Background.Type = BackgroundType.NoBackground 'Save the Word document. - document.Save(“Sample.docx"), FormatType.Docx) + document.Save("Sample.docx", FormatType.Docx) End Using {% endhighlight %} diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md index dd4639a7d6..5043f13d8c 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md @@ -8,15 +8,15 @@ documentation: UG # Event support for Mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO during Mail merge process: +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merge image data during the Mail merge process. The following events are supported by Syncfusion® DocIO during Mail merge process: -* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html)- occurs when a **Mail merge field** except image Mail merge field is encountered. +* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) — occurs when a **Mail merge field** except image Mail merge field is encountered. -* [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html)- occurs when an **image Mail merge field** is encountered. +* [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) — occurs when an **image Mail merge field** is encountered. -* [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html)- occurs when an **unmerged field** is encountered. +* [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) — occurs when an **unmerged field** is encountered. -* [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html)- occurs when an **unmerged group field** is encountered. +* [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) — occurs when an **unmerged group field** is encountered. ## MergeField Event @@ -106,8 +106,8 @@ End Sub {% endtabs %} -N> 1. While executing mail merge, DocIO internally uses a copy of a particular region for populating the contents. Sometimes, unexpected problems may arise due to inserting multiple body items into the region through the mail merge process. So, to insert multiple body items using the merge field event handler, you are recommended to use this [approach](https://www.syncfusion.com/kb/11701/how-to-replace-merge-field-with-html-string-using-mail-merge) at your side. -N> 2. The [ExecuteGroup(DataTable)](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteGroup_System_Data_DataTable_) method is not supported on the UWP platform. +N> 1. While executing mail merge, DocIO internally uses a copy of a particular region for populating the contents. Sometimes, unexpected problems may arise due to inserting multiple body items into the region through the mail merge process. So, to insert multiple body items using the merge field event handler, we recommend using this [approach](https://www.syncfusion.com/kb/11701/how-to-replace-merge-field-with-html-string-using-mail-merge). +N> 2. The [ExecuteGroup(DataTable)](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteGroup_System_Data_DataTable_) method is not supported on the UWP platform. The cross-platform sample above is not valid for UWP; use an alternative data-binding approach on UWP. The following code example shows GetDataTable method which is used to get data for mail merge. @@ -170,7 +170,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync You can format the merged image like resizing the image and more during mail merge process using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) Event. -N> The [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event triggers only for image merge fields. Ensure you have a valid image merge field in the template document, following the syntax: **{ MERGEFIELD Image:logo }**. +N> The [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event triggers only for image merge fields. Ensure you have a valid image merge field in the template document, following the syntax: **{ MERGEFIELD Image:Logo }**. The following code example shows how to use the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event during Mail merge process. @@ -183,9 +183,9 @@ WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); //Uses the mail merge events handler for image fields document.MailMerge.MergeImageField += new MergeImageFieldEventHandler(MergeField_ProductImage); //Specifies the field names and field values -string[] fieldNames = new string[] { "Logo"}; -string[] fieldValues = new string[] { "Logo.png"}; -//Executes the mail merge with groups +string[] fieldNames = new string[] { "Logo" }; +string[] fieldValues = new string[] { "Logo.png" }; +//Executes the mail merge document.MailMerge.Execute(fieldNames, fieldValues); //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); @@ -200,9 +200,9 @@ WordDocument document = new WordDocument("Template.docx"); //Uses the mail merge events handler for image fields document.MailMerge.MergeImageField += new MergeImageFieldEventHandler(MergeField_ProductImage); //Specifies the field names and field values -string[] fieldNames = new string[] { "Logo"}; -string[] fieldValues = new string[] { "Logo.png"}; -//Executes the mail merge with groups +string[] fieldNames = new string[] { "Logo" }; +string[] fieldValues = new string[] { "Logo.png" }; +//Executes the mail merge document.MailMerge.Execute(fieldNames, fieldValues); //Saves and closes WordDocument instance document.Save("Sample.docx"); @@ -217,7 +217,7 @@ AddHandler document.MailMerge.MergeImageField, AddressOf MergeField_ProductImage 'Specifies the field names and field values Dim fieldNames As String() = New String() {"Logo"} Dim fieldValues As String() = New String() {"Logo.png"} -'Executes the mail merge with groups +'Executes the mail merge document.MailMerge.Execute(fieldNames, fieldValues) 'Saves and closes WordDocument instance document.Save("Sample.docx") @@ -298,10 +298,10 @@ The following code example shows how to use the [BeforeClearField](https://help. {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Event-to-bind-data-for-unmerged-fields/.NET/Event-to-bind-data-for-unmerged-fields/Program.cs" %} //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -WordDocument document = new WordDocument(fileStreamPath); -//Sets “ClearFields” to true to remove empty mail merge fields from document +WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); +//Sets “ClearFields” to false to keep empty mail merge fields in the document document.MailMerge.ClearFields = false; -//Uses the mail merge event to clear the unmerged field while perform mail merge execution +//Uses the mail merge event to clear the unmerged field while performing mail merge execution document.MailMerge.BeforeClearField += new BeforeClearFieldEventHandler(BeforeClearFieldEvent); //Execute mail merge document.MailMerge.ExecuteGroup(GetDataTable()); @@ -315,9 +315,9 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Sets “ClearFields” to true to remove empty mail merge fields from document +//Sets “ClearFields” to false to keep empty mail merge fields in the document document.MailMerge.ClearFields = false; -//Uses the mail merge event to clear the unmerged field while perform mail merge execution +//Uses the mail merge event to clear the unmerged field while performing mail merge execution document.MailMerge.BeforeClearField += new BeforeClearFieldEventHandler(BeforeClearFieldEvent); //Execute mail merge document.MailMerge.ExecuteGroup(GetDataTable()); @@ -329,10 +329,10 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As WordDocument = New WordDocument("Template.docx") -'Sets “ClearFields” to true to remove empty mail merge fields from document +'Sets “ClearFields” to false to keep empty mail merge fields in the document document.MailMerge.ClearFields = False -'Uses the mail merge event to clear the unmerged field while perform mail merge execution -document.MailMerge.BeforeClearField += New BeforeClearFieldEventHandler(AddressOf BeforeClearField) +'Uses the mail merge event to clear the unmerged field while performing mail merge execution +AddHandler document.MailMerge.BeforeClearField, AddressOf BeforeClearFieldEvent 'Execute mail merge document.MailMerge.ExecuteGroup(GetDataTable()) 'Saves and closes the WordDocument instance @@ -559,13 +559,13 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As WordDocument = New WordDocument("Template.docx") -'Sets “ClearFields” to true to remove empty mail merge fields from document +'Sets “ClearFields” to false to keep empty mail merge fields in the document document.MailMerge.ClearFields = False -'Uses the mail merge event to clear the unmerged field while perform mail merge execution +'Uses the mail merge event to clear the unmerged field while performing mail merge execution AddHandler document.MailMerge.BeforeClearGroupField, AddressOf BeforeClearFields 'Gets the employee details as “IEnumerable” collection Dim employeeList As List(Of Employees) = GetEmployees() -'Creates an instance of MailMergeDataTableby specifying mail merge group name and “IEnumerable” collection +'Creates an instance of MailMergeDataTable by specifying mail merge group name and “IEnumerable” collection Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Employees", employeeList) 'Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable) @@ -589,6 +589,7 @@ private static void BeforeClearFields(object sender, BeforeClearGroupFieldEventA string[] groupName = args.GroupName.Split(':'); if (groupName[groupName.Length - 1] == "Orders") { + //Gets the field names in the group string[] fields = args.FieldNames; List orderList = GetOrders(); //Binds the data to the unmerged fields in group as alternative values @@ -626,16 +627,16 @@ private static void BeforeClearFields(object sender, BeforeClearGroupFieldEventA {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} Private Sub BeforeClearFields(ByVal sender As Object, ByVal args As BeforeClearGroupFieldEventArgs) If Not args.HasMappedGroupInDataSource Then - ‘Gets the Current unmerged group name from the event argument + 'Gets the Current unmerged group name from the event argument Dim groupName As String() = args.GroupName.Split(":"c) If groupName(groupName.Length - 1) = "Orders" Then 'Gets the field names in the group Dim fields As String() = args.FieldNames Dim orderList As List(Of OrderDetails) = GetOrders() - ‘Binds the data to the unmerged fields in group as alternative values + 'Binds the data to the unmerged fields in group as alternative values args.AlternateValues = orderList Else - ‘If group value is empty, you can set whether the unmerged merge group field can be clear or not + 'If group value is empty, you can set whether the unmerged merge group field can be clear or not args.ClearGroup = True End If End If @@ -698,7 +699,7 @@ public static List GetEmployees() 'Gets orders list Private Shared Function GetOrders() As List(Of OrderDetails) Dim orders As List(Of OrderDetails) = New List(Of OrderDetails)() - orders.Add(New OrderDetails("10835", New DateTime(2015, 1, 5), New DateTime(2015, 1, 12), New DateTime(2015, 1, 21))) + orders.Add(New OrderDetails("10952", New DateTime(2015, 2, 5), New DateTime(2015, 2, 12), New DateTime(2015, 2, 21))) Return orders End Function diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md index 220a6074e9..1c19ce5156 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md @@ -8,7 +8,7 @@ documentation: UG # Mail merge for a group -You can perform Mail merge and append multiple records from data source within a specified region to a template document. The region between start and end groups merge fields. It gets repeated for every record from the data source. +You can perform Mail merge and append multiple records from data source within a specified region to a template document. The region is bounded by start and end group merge fields. The region gets repeated for every record from the data source. The following table illustrates the supported mail merge overloads for ExecuteGroup method. @@ -38,11 +38,10 @@ The following table illustrates the supported mail merge overloads for ExecuteGr The region where the Mail merge operations are to be performed must be marked by two merge fields with the following names. * «TableStart:TableName» and «BeginGroup:GroupName» - For the entry point of the region. - * «TableEnd:TableName» and «EndGroup:GroupName» - For the end point of the region. - 1. *TableStart* and *TableEnd* region is preferred for performing Mail merge inside the table cell. - 2. *BeginGroup* and *EndGroup* region is preferred for performing Mail merge inside the document body contents. + * *TableStart* and *TableEnd* regions are preferred for performing Mail merge inside the table cell. + * *BeginGroup* and *EndGroup* regions are preferred for performing Mail merge inside the document body contents. For example, consider that you have a template document as shown. @@ -54,7 +53,7 @@ In this template, Employees is the group name and the same name should be used w The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for [ExecuteGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteGroup_System_Data_DataTable_) method to perform Mail merge within a group from various data sources. -N> For group mail merge, declare a class with the field names, create a list, and pass it to [MailMergeDataTable](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteGroup_Syncfusion_DocIO_DLS_MailMergeDataTable_). Ensure that the property and field names in the input document match when creating the data table. +N> For group mail merge, declare a class with the field names, create a list, and pass it to [MailMergeDataTable](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMergeDataTable.html). Ensure that the property and field names in the input document match when creating the data table. The following code example shows how to perform Mail merge in the specific region with **data source retrieved from SQL connection**. @@ -108,8 +107,8 @@ private DataTable GetDataTable() adapter.Fill(dataset); adapter.Dispose(); conn.Close(); - System.Data.DataTable table = dataset.Tables[0]; - //Sets table name as Employees for template merge field reference. + DataTable table = dataset.Tables[0]; + //Sets the table name to "Employees" to match the template merge field. table.TableName = "Employees"; return table; } @@ -125,7 +124,7 @@ Private Function GetDataTable() As DataTable adapter.Dispose() conn.Close() Dim table As System.Data.DataTable = DataSet.Tables(0) - 'Sets table name as Employees for template merge field reference. + 'Sets the table name to "Employees" to match the template merge field. table.TableName = "Employees" Return table End Function @@ -149,9 +148,9 @@ You can perform Mail merge with .NET objects in a template document. The followi //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -//Gets the employee details as “IEnumerable” collection +//Gets the employee details as IEnumerable collection List employeeList = GetEmployees(); -//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection MailMergeDataTable dataTable = new MailMergeDataTable("Employees", employeeList); //Uses the mail merge events handler for image fields. document.MailMerge.MergeImageField += new MergeImageFieldEventHandler(MergeField_EmployeeImage); @@ -179,9 +178,9 @@ private void MergeField_EmployeeImage(object sender, MergeImageFieldEventArgs ar {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Gets the employee details as “IEnumerable” collection +//Gets the employee details as IEnumerable collection List employeeList = GetEmployees(); -//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection MailMergeDataTable dataTable = new MailMergeDataTable("Employees", employeeList); //Uses the mail merge events handler for image fields. document.MailMerge.MergeImageField += new MergeImageFieldEventHandler(MergeField_EmployeeImage); @@ -207,9 +206,9 @@ private void MergeField_EmployeeImage(object sender, MergeImageFieldEventArgs ar {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As New WordDocument("Template.docx") -'Gets the employee details as “IEnumerable” collection +'Gets the employee details as IEnumerable collection Dim employeeList As List(Of Employee) = GetEmployees() -'Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +'Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection Dim dataTable As New MailMergeDataTable("Employees", employeeList) 'Uses the mail merge events handler for image fields. AddHandler document.MailMerge.MergeImageField, AddressOf MergeField_EmployeeImage diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md index 1d35ce169b..40a48c955c 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md @@ -6,9 +6,9 @@ control: DocIO documentation: UG --- -# Nested Mail merge for group +# Mail merge for nested groups -You can perform nested Mail merge with relational or hierarchical data source and independent data tables in a template document. +You can perform nested mail merge with relational or hierarchical data source and independent data tables in a template document. The following table illustrates the supported mail merge overloads for ExecuteNestedGroup method. @@ -43,9 +43,9 @@ The following table illustrates the supported mail merge overloads for ExecuteNe ## Create template for nested group mail merge -Nested Mail merge operation automatically replaces the merge field with immediate group data. You can also predefine the group data that is populated to a merge field. - -To execute nested mail merge, design your Word document template as follow. +Nested mail merge operation automatically replaces the merge field with immediate group data. You can also predefine the group data that is populated in a merge field. + +To execute nested mail merge, design your Word document template as follows. ![Word document template for nested groups](../MailMerge_images/file-formats-word-nested-group-mail-merge-template.png) @@ -53,7 +53,7 @@ In this template, Employees is the owner group and it has two child groups Custo ## Execute nested group mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_System_Data_Common_DbConnection_System_Collections_ArrayList_) method to perform Mail merge for nested groups or regions in the Word document. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_System_Data_Common_DbConnection_System_Collections_ArrayList_) method to perform mail merge for nested groups or regions in the Word document. You need to define commands with the table name and expression for linking the multiple data tables **(explicit relation data)** during nested Mail merge process. You can use the “%TableName.ColumnName%” expression for getting the current value of specified column or field from the table. @@ -154,7 +154,7 @@ The resultant document looks as follows. Essential® DocIO allows you to perform Mail merge with the dynamic objects. The [ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0) is like a collection of key and value pairs, which means IDictionary. So, you can also use IDictionary collection instead of [ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0) to execute mail merge. -The following code snippet shows how to perform the Mail merge with dynamic objects ([ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0)). +The following code snippet shows how to perform the mail merge with dynamic objects ([ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject)). {% tabs %} @@ -170,7 +170,7 @@ dataSet.Add(dataTable); dataTable = new MailMergeDataTable("Orders", GetOrders()); dataSet.Add(dataTable); List commands = new List(); -//DictionaryEntry contain "Source table" (key) and "Command" (value) +//DictionaryEntry contains "Source table" (key) and "Command" (value) DictionaryEntry entry = new DictionaryEntry("Customers", string.Empty); commands.Add(entry); //Retrieves the customer details @@ -196,7 +196,7 @@ dataSet.Add(dataTable); dataTable = new MailMergeDataTable("Orders", GetOrders()); dataSet.Add(dataTable); List commands = new List(); -//DictionaryEntry contain "Source table" (key) and "Command" (value) +//DictionaryEntry contains "Source table" (key) and "Command" (value) DictionaryEntry entry = new DictionaryEntry("Customers", string.Empty); commands.Add(entry); //Retrieves the customer details @@ -220,7 +220,7 @@ dataSet.Add(dataTable) dataTable = New MailMergeDataTable("Orders", GetOrders()) dataSet.Add(dataTable) Dim commands As New List(Of DictionaryEntry)() -'DictionaryEntry contain "Source table" (key) and "Command" (value) +'DictionaryEntry contains "Source table" (key) and "Command" (value) Dim entry As New DictionaryEntry("Customers", String.Empty) commands.Add(entry) 'Retrieves the customer details @@ -361,23 +361,28 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Mail merge with implicit relational data -You can perform **nested Mail merge with implicit relational data** objects without any explicit relational commands by using the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_Syncfusion_DocIO_DLS_MailMergeDataTable_) overload method. +You can perform **nested mail merge with implicit relational data** objects without any explicit relational commands by using the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_Syncfusion_DocIO_DLS_MailMergeDataTable_) overload method. + +DocIO automatically maps child collections to nested groups by matching the property name on the data object to the group name declared in the template (for example, a property named `Departments` on the `Organization` class maps to the `Departments` group region). Ensure property names match the group names used in the template. -### Map the field of ancestor group +### Map fields of ancestor groups -You can also merge any field in the nested group by **mapping the field or column of its ancestor group or table** in the data source. To achieve this, you need to add a corresponding group name or table name as a prefix to the merge field name along with “:” separator. +You can also merge any field in the nested group by **mapping the field or column of its ancestor group or table** in the data source. To achieve this, add the corresponding group name or table name as a prefix to the merge field name along with the `:` separator. For example: - * The merge field name should be like “TableName:Id” (<>) - * The merge field name should be like “Image:TableName:Photo” (<>) - -For example, consider that you have a template document as follow. + * The merge field name should be like `TableName:Id` (<>) + * The merge field name should be like `Image:TableName:Photo` (<>) + +> **NOTE** +> Image merge fields require the merge field to be configured with the `Image:` prefix in the template and the data value to be a byte array or `Image` instance. + +For example, consider that you have a template document as follows. ![Word document template to map the fields of ancestor group](../MailMerge_images/file-formats-word-mapping-template.png) -In the above template, Organizations is the owner group and it has two child groups Departments and Employees. The Supervisor merge field of Departments group is used in Employees group. +In the above template, Organizations is the owner group and it has two child groups Departments and Employees. The `Supervisor` merge field of the Departments group is used in the Employees group. -The following code example shows how to perform nested Mail merge with the implicit relational data objects. +The following code example shows how to perform nested mail merge with the implicit relational data objects. {% tabs %} @@ -385,9 +390,9 @@ The following code example shows how to perform nested Mail merge with the impli //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -//Gets the organization details as “IEnumerable” collection +//Gets the organization details as IEnumerable collection List organizationList = GetOrganizations(); -//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection MailMergeDataTable dataTable = new MailMergeDataTable("Organizations", organizationList); //Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable); @@ -401,9 +406,9 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Gets the organization details as “IEnumerable” collection +//Gets the organization details as IEnumerable collection List organizationList = GetOrganizations(); -//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection MailMergeDataTable dataTable = new MailMergeDataTable("Organizations", organizationList); //Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable); @@ -415,9 +420,9 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As WordDocument = New WordDocument("Template.docx") -'Gets the organization details as “IEnumerable” collection +'Gets the organization details as IEnumerable collection Dim organizationList As List(Of Organization) = GetOrganizations() -'Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +'Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Organizations", organizationList) 'Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable) @@ -477,7 +482,7 @@ public static List GetOrganizations() {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -Public Function GetOrganizations() As List(Of Organization) +Public Shared Function GetOrganizations() As List(Of Organization) 'Creates Employee details Dim employees As List(Of EmployeeDetails) = New List(Of EmployeeDetails) employees.Add(New EmployeeDetails("Thomas Hardy", "1001", "05/27/1996")) diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md index 3336f510f3..697b56134d 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md @@ -8,11 +8,11 @@ documentation: UG # Mail merge options in Word Library -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class allows you to customize the Mail merge process with the following options. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class allows you to customize the mail merge process with the following options. ## Field Mapping -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class can automatically **maps the merge field names with data source column names** during Mail merge process. You can also customize the field mapping when the merge field names in the template document varies with the column names in the data source by using [MappedFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_MappedFields) collection. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class can automatically **map the merge field names with data source column names** during mail merge process. You can also customize the field mapping when the merge field names in the template document vary with the column names in the data source by using [MappedFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_MappedFields) collection. The following code example shows how to add mapping when a merge field name in a document and column name in data source have different names. @@ -132,29 +132,29 @@ The following code example shows how to retrieve the merge field names for a spe {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Retrieve-merge-field-names/.NET/Retrieve-merge-field-names/Program.cs" %} -//Gets the fields from the specified groups. +//Gets the fields from the specified group. string[] fieldNames = document.MailMerge.GetMergeFieldNames(groupName); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Gets the fields from the specified groups +//Gets the fields from the specified group string[] fieldNames = document.MailMerge.GetMergeFieldNames(groupName); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Gets the fields from the specified groups +'Gets the fields from the specified group Dim fieldNames As String() = document.MailMerge.GetMergeFieldNames(groupName) {% endhighlight %} {% endtabs %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Mail-Merge/Retrieve-merge-field-names). +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Mail-Merge/Retrieve-merge-field-names). This sample demonstrates all three methods shown above (`GetMergeFieldNames`, `GetMergeGroupNames`, and `GetMergeFieldNames(groupName)`). ## Remove empty paragraphs -You can remove the empty paragraphs when the paragraph has only a merge field item, without any data during Mail merge process. +You can remove the empty paragraphs when the paragraph has only a merge field item, without any data during mail merge process. -The following code example shows how to remove the empty paragraphs during Mail merge process. +The following code example shows how to remove the empty paragraphs during mail merge process. {% tabs %} @@ -215,15 +215,15 @@ Essential® DocIO removes or keeps the unmerged merge fields in th When a merge field is considered as unmerged during mail merge process? -1. The merge field doesn't have mapping field in data source. +1. The merge field doesn't have a mapping field in data source. -2. The merge field has mapping field in data source, but the data is null or string.Empty. +2. The merge field has a mapping field in data source, but the data is null or string.Empty. -Mail merge operation automatically removes the unmerged merge fields since the default value of [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property is true. +The mail merge operation automatically removes the unmerged merge fields since the default value of the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property is true. T> 1. Set [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property to false before the mail merge execution statement if your requirement is to keep the unmerged merge fields in the output document. T> 2. Modify the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property before each mail merge execution statement while performing multiple mail merge executions if your requirement is to remove the unmerged merge fields in one mail merge execution and keep the unmerged merge fields in another mail merge execution. -T> 3. Order the mail merge executions with the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property false as first to avoid removal merge fields that are required for next mail merge execution in the same document. +T> 3. Order the mail merge executions with the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property false as first to avoid removal of merge fields that are required for next mail merge execution in the same document. T> 4. You can get the unmerged fields in your document, customize the mail merge process using the BeforeClearField Event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). The following code example shows how to keep the unmerged merge fields in the generated Word document. @@ -234,7 +234,7 @@ The following code example shows how to keep the unmerged merge fields in the ge //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -//Sets “ClearFields” to true to remove empty mail merge fields from document +//Sets “ClearFields” to false to keep the unmerged mail merge fields in document document.MailMerge.ClearFields = false; string[] fieldNames = new string[] { "EmployeeId", "Phone", "City" }; string[] fieldValues = new string[] { "1001", "+91-9999999999", "London" }; @@ -250,7 +250,7 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Sets “ClearFields” to true to remove empty mail merge fields from document +//Sets “ClearFields” to false to keep the unmerged mail merge fields in document document.MailMerge.ClearFields = false; string[] fieldNames = new string[] { "EmployeeId", "Phone", "City" }; string[] fieldValues = new string[] { "1001", "+91-9999999999", "London" }; @@ -264,7 +264,7 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As New WordDocument("Template.docx") -'Sets “ClearFields” to true to remove empty mail merge fields from document +'Sets “ClearFields” to false to keep the unmerged mail merge fields in document document.MailMerge.ClearFields = False Dim fieldNames As String() = New String() {"EmployeeId", "Phone", "City"} Dim fieldValues As String() = New String() {"1001", "+91-9999999999", "London"} @@ -281,7 +281,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Remove empty group -You can remove the empty merge field groups which contains unmerged merge fields after executing mail merge for a group in a Word document. +You can remove the empty merge field groups which contain unmerged merge fields after executing mail merge for a group in a Word document. The following code example shows how to remove empty merge field group during mail merge process in a Word document. @@ -544,15 +544,15 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Restart numbering in lists -You can restart the list numbering for each records while performing mail merge for a group in Word document. +You can restart the list numbering for each record while performing mail merge for a group in Word document (https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.ImportOptions.html). -The following code example shows how to restart the list numbering in a Word documents while performing mail merge. +The following code example shows how to restart the list numbering in a Word document while performing mail merge. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Restart-list-numbering-in-mail-merge/.NET/Restart-list-numbering-in-mail-merge/Program.cs" %} //Loads an existing Word document -FileStream fileStream = new FileStream("Template.docx", FileMode.Open); +FileStream fileStream = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStream, FormatType.Docx); //Sets ImportOptions to restart the list numbering document.ImportOptions = ImportOptions.ListRestartNumbering; @@ -583,7 +583,7 @@ employeeList.Add(new Employee("101", "Nancy Davolio", "Seattle, WA, USA")); employeeList.Add(new Employee("102", "Andrew Fuller", "Tacoma, WA, USA")); employeeList.Add(new Employee("103", "Janet Leverling", "Kirkland, WA, USA")); //Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection -MailMergeDataTable dataTable = new MailMergeDataTable("Employee", employeeList); +MailMergeDataTable dataTable = new MailMergeDataTable("Employees", employeeList); //Performs mail merge document.MailMerge.ExecuteGroup(dataTable); //Saves the Word document @@ -603,7 +603,7 @@ employeeList.Add(New Employee("101", "Nancy Davolio", "Seattle, WA, USA")) employeeList.Add(New Employee("102", "Andrew Fuller", "Tacoma, WA, USA")) employeeList.Add(New Employee("103", "Janet Leverling", "Kirkland, WA, USA")) 'Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection -Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Employee", employeeList) +Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Employees", employeeList) 'Performs mail merge document.MailMerge.ExecuteGroup(dataTable) 'Saves the Word document @@ -774,7 +774,7 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document -Dim document As WordDocument = New WordDocument("Data/Template.docx") +Dim document As WordDocument = New WordDocument("Template.docx") 'Creates a data table Dim table As DataTable = New DataTable("CompatibleVersions") table.Columns.Add("WordVersion") @@ -867,7 +867,7 @@ document.Close() {% endtabs %} -The following code example shows how to skip merging particular image during mail merge process using MergeImageFieldEventHandler. +The following code example shows how to skip merging particular image during mail merge process using [MergeImageFieldEventHandler](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html). For details on the event arguments, see [MergeImageFieldEventArgs](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventArgs.html) (members: `Skip`, `FieldName`, `FieldValue`, `ImageStream`, `ImageFileName`, `Picture`). {% tabs %} @@ -876,7 +876,10 @@ private void MergeEmployeePhoto(object sender, MergeImageFieldEventArgs args) { //Skip to merge particular image if (args.FieldName == "Andrew") + { args.Skip = true; + return; + } //Sets image string ProductFileName = args.FieldValue.ToString(); FileStream imageStream = new FileStream(ProductFileName, FileMode.Open, FileAccess.Read); @@ -892,7 +895,10 @@ private void MergeEmployeePhoto(object sender, MergeImageFieldEventArgs args) { //Skip to merge particular image if (args.FieldName == "Andrew") + { args.Skip = true; + return; + } //Sets image args.ImageFileName = args.FieldValue.ToString(); } @@ -903,6 +909,7 @@ Private Sub MergeEmployeePhoto(ByVal sender As Object, ByVal args As MergeImageF 'Skip to merge particular image If args.FieldName = "Andrew" Then args.Skip = True + Return End If 'Sets image Dim ProductFileName As String = args.FieldValue.ToString() @@ -920,6 +927,8 @@ You can start a new page for each group of records while performing a mail merge The following code example illustrates how to start a new page for each group of records during the mail merge process. +N> The `GetInvoice` helper method and the `Invoice`, `Orders`, `Order`, and `OrderTotals` classes used by this snippet are shown below the tabs. + {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Start-at-new-page/.NET/Start-at-new-page/Program.cs" %} @@ -1105,7 +1114,7 @@ Public Function GetInvoice() As List(Of Invoice) invoices.Add(New Invoice(orders, order, orderTotals)) orders = New List(Of Orders)() - orders.Add(New Orders("10250", "Hanari Carnes", "Rua do Paço, 67", "Rio de Janeiro", "05454-876", "Brazil", "VINET", "Rua do Paço, "1996-07-04T00:00:00-04:00", "1996-08-01T00:00:00-04:00", "1996-07-16T00:00:00-04:00", "United Package")) + orders.Add(New Orders("10250", "Hanari Carnes", "Rua do Paço, 67", "Rio de Janeiro", "05454-876", "Brazil", "VINET", "Rua do Paço, 67", "51100", "Rio de Janeiro", "Brazil", "Margaret Peacock", "Hanari Carnes", "1996-07-04T00:00:00-04:00", "1996-08-01T00:00:00-04:00", "1996-07-16T00:00:00-04:00", "United Package")) order = New List(Of Order)() order.Add(New Order("65", "Louisiana Fiery Hot Pepper Sauce", "16.8", "15", "0.15", "214.2")) @@ -2020,7 +2029,7 @@ By executing the above code example, it generates the resultant Word document as ![Output Word document of start at new page](../mailmerge_images/generated-word-document-in-file-formats.png) -N> This [StartAtNewPage](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_StartAtNewPage) property is valid for group mail merge and also that the corresponding group start and group end should be present in the text body of the Word document. This [StartAtNewPage](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_StartAtNewPage) property is not valid when the group start and group end are present in the table, headers, and footers. +N> The [StartAtNewPage](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_StartAtNewPage) property is valid only for group mail merge where the group start and group end are present in the text body of the Word document. It is not valid when the group start and group end are present inside a table, header, or footer. ## Remove mail merge settings @@ -2066,7 +2075,7 @@ Dim document As New WordDocument("Template.docx", FormatType.Docx) If document.MailMerge.Settings.HasData Then document.MailMerge.Settings.RemoveData() End If -Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -2081,6 +2090,8 @@ You can change the linked **data source file path from a Word mail merge main do The following code example shows how to change the data source file path in the template Word document. +N> The path can be relative or absolute and should point to a file format supported by Microsoft Word for mail merge (for example, `.txt`, `.csv`, `.xls`/`.xlsx`, or `.mdb`). + {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Change-mail-merge-data-source-path/.NET/Change-mail-merge-data-source-path/Program.cs" %} diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md index 3598869836..efe6ee1049 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md @@ -1,25 +1,26 @@ --- -title: Troubleshooting tips for Mail merge | DocIO | Syncfusion +title: Troubleshooting tips for Mail Merge | DocIO | Syncfusion description: Learn how to troubleshoot Mail Merge issues in the .NET Word (DocIO) library, including common errors. platform: document-processing control: DocIO documentation: UG --- -# Troubleshooting Mail merge Issues in .NET Word Library +# Troubleshooting Mail Merge Issues in .NET Word Library ## Why is mail merge not working correctly in DocIO? Mail merge issues can arise due to incorrect merge fields, mismatched data sources, or missing fields in the template. Ensure the following: * Merge fields (<>) are used instead of plain text. -* **Data Source Check:** Ensure the required fields exist in the data source. -* **Match Field Names:** Sometimes, the field names in the Word document are different from the property names in your data source class. For example, if your document has "FirstName" and "LastName", but your Employee class uses different names, mail merge will not work correctly. +* **Data Source Check:** Ensure the required fields exist in the data source. Verify the data source column/property names against the merge field names in the Word template. +* **Match Field Names:** Sometimes, the field names in the Word document are different from the property names in your data source class. For example, if your document has "FirstName" and "LastName", but your Employee class uses different names, Mail Merge will not work correctly. **How to fix this:** - * The property names in your MergeField class should be exactly the same as the merge field names in your Word document. + * The property names in your data source class should be exactly the same as the merge field names in your Word document. * Field names are case-sensitive, so make sure they match exactly. - * You can press **Alt + F9** in Microsoft Word to see the actual field codes and check if they are correct. + +**How to verify the merge fields:** Press **Alt + F9** in Microsoft Word to reveal the actual field codes and confirm the merge field names are correct. **Example:** @@ -70,8 +71,11 @@ Mail merge only works with merge fields, not manually typed placeholders. If tex Refer to [Syncfusion® Documentation](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-find-and-replace#find-and-replace-a-pattern-of-text-with-a-merge-field) for detailed implementation. -## Why is nested group mail merge not functioning correctly? +## Why is nested group Mail Merge not functioning correctly? + +Nested Mail Merge requires proper execution using the correct method and structure. +* Use the appropriate overload of the [`ExecuteNestedGroup`](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) method to handle nested groups effectively. Supported overloads include: + * `ExecuteNestedGroup(MailMergeDataTable)` — for implicit relational data, where the child groups are nested within the parent table's data. + * `ExecuteNestedGroup(MailMergeDataSet, List)` — for explicit relational data, where the relations between parent and child groups are defined using command entries. +* Ensure the data structure follows the correct hierarchy for nested groups to maintain implicit relational data. Each child group must be represented as a relation between the parent table and the child table in the data source. -Nested mail merge requires proper execution using the correct method and structure. -* Use the appropriate overload of the ExecuteNestedGroup method to handle nested groups effectively. Refer to the Syncfusion documentation for supported overloads. -* Ensure the data structure follows the correct hierarchy for nested groups to maintain implicit relational data. diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/simple-mail-merge.md b/Document-Processing/Word/Word-Library/NET/mail-merge/simple-mail-merge.md index b0e6fec7af..dfaf164f25 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/simple-mail-merge.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/simple-mail-merge.md @@ -1,12 +1,12 @@ --- -title: Simple Mail merge in C# | DocIO | Syncfusion -description: Learn how to Mail merge - replace all merge fields with data, by repeating whole document for each record in data source using the .NET Word (DocIO) library. +title: Simple mail merge in C# | DocIO | Syncfusion +description: Learn how to mail merge - replace all merge fields with data, by repeating whole document for each record in data source using the .NET Word (DocIO) library. platform: document-processing control: DocIO documentation: UG --- -# Simple Mail merge in Word document +# Simple mail merge in a Word document You can create a Word document template using Microsoft Word application or by adding merge fields in the Word document programmatically. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-mail-merge#create-word-document-template). @@ -51,9 +51,9 @@ The following table illustrates the supported mail merge overloads for Execute m ## Mail merge with string arrays -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for [Execute](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_Execute_System_String___System_String___) method to perform Mail merge from various data sources. The Mail merge operation replaces the matching merge fields with the respective data. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for the [Execute](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_Execute_System_String___System_String___) method to perform a mail merge from various data sources. The mail merge operation replaces the matching merge fields with the respective data. Unmatched merge fields are left unchanged in the output document by default. -### Create Word document template +### Create a Word document template The following code example shows how to create a Word template document with merge fields. @@ -78,9 +78,10 @@ document.LastParagraph.AppendText("\nPhone: "); document.LastParagraph.AppendField("Phone", FieldType.FieldMergeField); document.LastParagraph.AppendText("\nCity: "); document.LastParagraph.AppendField("City", FieldType.FieldMergeField); -//Saves the Word document to MemoryStream -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); +//Saves the Word document to a file +FileStream fileStream = new FileStream("Template.docx", FileMode.Create, FileAccess.ReadWrite); +document.Save(fileStream, FormatType.Docx); +fileStream.Dispose(); //Closes the Word document document.Close(); {% endhighlight %} @@ -139,8 +140,7 @@ The generated template document looks as follows. ### Execute mail merge -The following code example shows how to perform a simple Mail merge in the generated template document with string array as data source. - +The following code example shows how to perform a simple mail merge in the generated template document with a string array as the data source. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Mail-merge-with-string-arrays/.NET/Mail-merge-with-string-arrays/Program.cs" %} @@ -191,4 +191,4 @@ You can download a complete working sample from [GitHub](https://github.com/Sync The resultant document looks as follows. -![Mail merged Word document](../MailMerge_images/file-formats-word-simple-mail-merge-output.png) \ No newline at end of file +![Mail merged Word document](../MailMerge_images/file-formats-word-simple-mail-merge-output.png) diff --git a/Document-Processing/Word/Word-Library/NET/working-with-lists.md b/Document-Processing/Word/Word-Library/NET/working-with-lists.md index fde55427a9..234d131615 100644 --- a/Document-Processing/Word/Word-Library/NET/working-with-lists.md +++ b/Document-Processing/Word/Word-Library/NET/working-with-lists.md @@ -6,7 +6,7 @@ control: DocIO documentation: UG --- -# Working with Lists +# Working with Lists in the Word Library Lists can organize and format the contents of a document in hierarchical way. There are nine levels in the list, starting from level 0 to level 8. DocIO supports both built-in list styles and custom list styles. The following are the types of list supported in DocIO: @@ -26,7 +26,7 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Applies default numbered list style +//Applies default bulleted list style paragraph.ListFormat.ApplyDefBulletStyle(); //Adds text to the paragraph paragraph.AppendText("List item 1"); @@ -56,7 +56,7 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Applies default numbered list style +//Applies default bulleted list style paragraph.ListFormat.ApplyDefBulletStyle(); //Adds text to the paragraph paragraph.AppendText("List item 1"); @@ -85,7 +85,7 @@ Dim document As New WordDocument() Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -'Applies default numbered list style +'Applies default bulleted list style paragraph.ListFormat.ApplyDefBulletStyle() 'Adds text to the paragraph paragraph.AppendText("List item 1") @@ -109,7 +109,7 @@ document.Close() {% endtabs %} -By running the above code, you will generate a **Bullet List** as shown below. +By running the above code, you will generate a **Bulleted List** as shown below. ![List](Lists_images/CreateBulletedList.png) You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Simple-bulleted-list). @@ -228,7 +228,7 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Applies default numbered list style +//Applies default bulleted list style paragraph.ListFormat.ApplyDefBulletStyle(); //Adds text to the paragraph paragraph.AppendText("List item 1 - Level 0"); @@ -262,7 +262,7 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Applies default numbered list style +//Applies default bulleted list style paragraph.ListFormat.ApplyDefBulletStyle(); //Adds text to the paragraph paragraph.AppendText("List item 1 - Level 0"); @@ -295,7 +295,7 @@ Dim document As New WordDocument() Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -'Applies default numbered list style +'Applies default bulleted list style paragraph.ListFormat.ApplyDefBulletStyle() 'Adds text to the paragraph paragraph.AppendText("List item 1 - Level 0") @@ -323,14 +323,14 @@ document.Close() {% endtabs %} -By running the above code, you will generate a **Multilevel Bullet List** as shown below. +By running the above code, you will generate a **Multilevel Bulleted List** as shown below. ![List](Lists_images/MultilevelBulletList.png) You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Multilevel-bulleted-list). ## Create Multilevel Numbered List -The following code example explains how to create multilevel numbered list. +The following code example explains how to create a multilevel numbered list. {% tabs %} @@ -441,7 +441,7 @@ By running the above code, you will generate a **Multilevel Numbered List** as s You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Multilevel-numbered-list). -## List number format +## List Number Format The ListPatternType enum in DocIO lets you customize how list numbers appear in Word documents. It supports 61 styles, including Arabic, Hebrew, and more. This is useful for creating region-specific documents or applying culturally appropriate numbering formats. @@ -515,7 +515,7 @@ levelOne.PatternType = ListPatternType.Hebrew1; levelOne.StartAt = 1; // Adds a heading paragraph for the Hebrew1 list. paragraph = section.AddParagraph(); -paragraph.AppendText("List pattern Herbrew"); +paragraph.AppendText("List pattern Hebrew"); // Adds first list item using Hebrew1 style. paragraph = section.AddParagraph(); paragraph.AppendText("List item 1"); @@ -604,7 +604,7 @@ levelOne.PatternType = ListPatternType.Hebrew1; levelOne.StartAt = 1; // Adds a heading paragraph for the Hebrew1 list. paragraph = section.AddParagraph(); -paragraph.AppendText("List pattern Herbrew"); +paragraph.AppendText("List pattern Hebrew"); // Adds first list item using Hebrew1 style. paragraph = section.AddParagraph(); paragraph.AppendText("List item 1"); @@ -716,7 +716,7 @@ document.Close() {% endtabs %} -By running the above code, you will generate a **List Numbered Format** as shown below. +By running the above code, you will generate a **List Number Format** as shown below. ![List](Lists_images/ListNumberFormat.png) You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/List-number-format). @@ -727,7 +727,7 @@ N> Except for the following [ListPatternType](https://help.syncfusion.com/cr/doc You can customize lists in Word documents using DocIO, allowing you to define numbering styles, bullet symbols, indentation levels, and list patterns to suit your formatting needs. -The following code example explains how to create user defined list styles. +The following code example explains how to create a user-defined numbered list style. For a user-defined bulleted list style, see [Bulleted List Styles](#bulleted-list-styles). {% tabs %} @@ -890,7 +890,7 @@ paragraph = section.AddParagraph(); paragraph.AppendText("Multilevel numbered list - Level 0"); //Continues last defined list paragraph.ListFormat.ContinueListNumbering(); -//Increases the level indent +//Decreases the level indent paragraph.ListFormat.DecreaseIndentLevel(); //Adds new paragraph paragraph = section.AddParagraph(); @@ -931,7 +931,7 @@ paragraph = section.AddParagraph(); paragraph.AppendText("Multilevel numbered list - Level 0"); //Continues last defined list paragraph.ListFormat.ContinueListNumbering(); -//Increases the level indent +//Decreases the level indent paragraph.ListFormat.DecreaseIndentLevel(); //Adds new paragraph paragraph = section.AddParagraph(); @@ -971,7 +971,7 @@ paragraph = section.AddParagraph() paragraph.AppendText("Multilevel numbered list - Level 0") 'Continues last defined list paragraph.ListFormat.ContinueListNumbering() -'Increases the level indent +'Decreases the level indent paragraph.ListFormat.DecreaseIndentLevel() 'Adds new paragraph paragraph = section.AddParagraph() @@ -988,7 +988,7 @@ document.Close() {% endtabs %} -By running the above code, you will generate a **Increase or Decrease List indent** as shown below. +By running the above code, you will generate the **Increase or Decrease List Indent** output as shown below. ![List](Lists_images/ChangeListLevels.png) You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Increase-or-decrease-list-indent). @@ -1007,18 +1007,18 @@ IWSection section = document.AddSection(); //Add a new list style to the document. ListStyle listStyle = document.AddListStyle(ListType.Bulleted, "UserDefinedList"); WListLevel levelOne = listStyle.Levels[0]; -//Define the following character, pattern and start index for level 0. +//Define the pattern, bullet character, and start index for level 0. levelOne.PatternType = ListPatternType.Bullet; levelOne.BulletCharacter = "*"; levelOne.StartAt = 1; WListLevel levelTwo = listStyle.Levels[1]; -//Define the following character, pattern and start index for level 1. +//Define the pattern, bullet character, and start index for level 1. levelTwo.PatternType = ListPatternType.Bullet; levelTwo.BulletCharacter = "\u00A9"; levelTwo.CharacterFormat.FontName = "Wingdings"; levelTwo.StartAt = 1; WListLevel levelThree = listStyle.Levels[2]; -//Define the following character, pattern and start index for level 2. +//Define the pattern, bullet character, and start index for level 2. levelThree.PatternType = ListPatternType.Bullet; levelThree.BulletCharacter = "\u0076"; levelThree.CharacterFormat.FontName = "Wingdings"; @@ -1058,18 +1058,18 @@ IWSection section = document.AddSection(); //Add a new list style to the document. ListStyle listStyle = document.AddListStyle(ListType.Bulleted, "UserDefinedList"); WListLevel levelOne = listStyle.Levels[0]; -//Define the following character, pattern and start index for level 0. +//Define the pattern, bullet character, and start index for level 0. levelOne.PatternType = ListPatternType.Bullet; levelOne.BulletCharacter = "*"; levelOne.StartAt = 1; WListLevel levelTwo = listStyle.Levels[1]; -//Define the following character, pattern and start index for level 1. +//Define the pattern, bullet character, and start index for level 1. levelTwo.PatternType = ListPatternType.Bullet; levelTwo.BulletCharacter = "\u00A9"; levelTwo.CharacterFormat.FontName = "Wingdings"; levelTwo.StartAt = 1; WListLevel levelThree = listStyle.Levels[2]; -//Define the following character, pattern and start index for level 2. +//Define the pattern, bullet character, and start index for level 2. levelThree.PatternType = ListPatternType.Bullet; levelThree.BulletCharacter = "\u0076"; levelThree.CharacterFormat.FontName = "Wingdings"; @@ -1108,18 +1108,18 @@ Dim section As IWSection = document.AddSection() 'Add a new list style to the document. Dim listStyle As ListStyle = document.AddListStyle(ListType.Bulleted, "UserDefinedList") Dim levelOne As WListLevel = listStyle.Levels(0) -'Define the following character, pattern and start index for level 0. +'Define the pattern, bullet character, and start index for level 0. levelOne.PatternType = ListPatternType.Bullet levelOne.BulletCharacter = "*" levelOne.StartAt = 1 Dim levelTwo As WListLevel = listStyle.Levels(1) -'Define the following character, pattern and start index for level 1. +'Define the pattern, bullet character, and start index for level 1. levelTwo.PatternType = ListPatternType.Bullet levelTwo.BulletCharacter = ChrW(169) levelTwo.CharacterFormat.FontName = "Wingdings" levelTwo.StartAt = 1 Dim levelThree As WListLevel = listStyle.Levels(2) -'Define the following character, pattern and start index for level 2. +'Define the pattern, bullet character, and start index for level 2. levelThree.PatternType = ListPatternType.Bullet levelThree.BulletCharacter = ChrW(118) levelThree.CharacterFormat.FontName = "Wingdings" @@ -1159,7 +1159,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Numbered List with Prefix -The following code example explains how to create numbered list with prefix from previous level. +The following code example explains how to create a numbered list with prefix from previous level. N> The [NumberPrefix](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WListLevel.html#Syncfusion_DocIO_DLS_WListLevel_NumberPrefix) value for the numbered list should meet the syntax "\u000N" to update the previous list level value as prefix to the current list level. For example, it should be represented as (“\u0000.” or “\u0000.\u0001.”). @@ -1184,7 +1184,7 @@ levelTwo.NumberPrefix = "\u0000."; levelTwo.PatternType = ListPatternType.Arabic; levelTwo.StartAt = 1; WListLevel levelThree = listStyle.Levels[2]; -//Defines the follow character, prefix from previous level, pattern, start index for level 1 +//Defines the follow character, prefix from previous level, pattern, start index for level 2 levelThree.FollowCharacter = FollowCharacterType.Nothing; levelThree.NumberPrefix = "\u0000.\u0001."; levelThree.PatternType = ListPatternType.Arabic; @@ -1235,7 +1235,7 @@ levelTwo.NumberPrefix = "\u0000."; levelTwo.PatternType = ListPatternType.Arabic; levelTwo.StartAt = 1; WListLevel levelThree = listStyle.Levels[2]; -//Defines the follow character, prefix from previous level, pattern, start index for level 1 +//Defines the follow character, prefix from previous level, pattern, start index for level 2 levelThree.FollowCharacter = FollowCharacterType.Nothing; levelThree.NumberPrefix = "\u0000.\u0001."; levelThree.PatternType = ListPatternType.Arabic; @@ -1285,7 +1285,7 @@ levelTwo.NumberPrefix = vbNullChar & "." levelTwo.PatternType = ListPatternType.Arabic levelTwo.StartAt = 1 Dim levelThree As WListLevel = listStyle.Levels(2) -'Defines the follow character, prefix from previous level, pattern, start index for level 1 +'Defines the follow character, prefix from previous level, pattern, start index for level 2 levelThree.FollowCharacter = FollowCharacterType.[Nothing] levelThree.NumberPrefix = vbNullChar & "." & ChrW(1) & "." levelThree.PatternType = ListPatternType.Arabic diff --git a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md index a756e7dde0..65e0245968 100644 --- a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md +++ b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md @@ -7,7 +7,7 @@ documentation: UG --- # Working with Mail merge -Mail merge is a process of merging data from data source to a Word template document. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) class provides support to bind template document and data source. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) instance is replaced with the actual data retrieved from data source for the given merge field name in a template document. +Mail merge is a process of merging data from a data source into a Word template document. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) class provides support to bind template document and data source. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) instance is replaced with the actual data retrieved from the data source for the given merge field name in a template document. ## Supported data sources @@ -16,7 +16,7 @@ The following data sources are supported by Essential® DocIO for - + @@ -98,12 +98,12 @@ The mail merge process involves three documents: 3. **Final merged document**: This resultant document is a combination of the template Word document and the data from data source. -T> 1. You can use conditional fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, when you require intelligent decisions in addition to simple mail merge (replace merge fields with result text). To use conditional fields, execute mail merge and then update fields in the Word document using [UpdateDocumentFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_UpdateDocumentFields) API. -T> 2. You can replace the fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, with its most recent result and **generates the plain Word document** by unlinking the fields. Refer to this [link](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-fields#unlink-fields) for more information. +T> 1. You can use conditional fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, when you require intelligent decisions in addition to simple mail merge (i.e., replacing merge fields with result text). To use conditional fields, execute mail merge and then update fields in the Word document using [UpdateDocumentFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_UpdateDocumentFields) API. +T> 2. You can replace the fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, with its most recent result and convert the field results to static text by unlinking the fields. Refer to this [link](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-fields#unlink-fields) for more information. ### Create Word document template -You can create a template document with merge fields by using any Word editor application, like Microsoft Word. By using Word editor application, you can take the advantage of the visual interface to design unique layout, formatting, and more for your Word document template interactively. +You can create a template document with merge fields by using any Word editor application, like Microsoft Word. By using a Word editor application, you can take the advantage of the visual interface to design unique layout, formatting, and more for your Word document template interactively. The following screenshot shows how to insert a merge field in the Word document by **using the Microsoft Word.** @@ -111,7 +111,7 @@ The following screenshot shows how to insert a merge field in the Word document You need to add a prefix (“Image:”) to the merge field name for merging an image in the place of a merge field. -**For example:** The merge field name should be like “Image:Photo” (<>) +**For example:** The merge field name should be like "Image:Photo" (<>) You can **create Word document template programmatically** by adding merge fields to the Word document using Essential® DocIO. @@ -123,16 +123,20 @@ N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-plat {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Create-merge-field/.NET/Create-merge-field/Program.cs" %} //Creates an instance of a WordDocument -WordDocument document = new WordDocument(); -//Adds a section and a paragraph in the document -document.EnsureMinimal(); -//Appends merge field to the last paragraph. -document.LastParagraph.AppendField("FullName", FieldType.FieldMergeField); -//Saves the Word document to MemoryStream -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document -document.Close(); +using (WordDocument document = new WordDocument()) +{ + //Adds a section and a paragraph in the document + document.EnsureMinimal(); + //Appends merge field to the last paragraph. + document.LastParagraph.AppendField("FullName", FieldType.FieldMergeField); + //Saves the Word document to MemoryStream + using (MemoryStream stream = new MemoryStream()) + { + document.Save(stream, FormatType.Docx); + //Writes the Word document to a file + File.WriteAllBytes("Template.docx", stream.ToArray()); + } +} {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} @@ -171,17 +175,21 @@ The following code example shows how to perform mail merge in above Word documen {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Getting-started-mail-merge/.NET/Getting-started-mail-merge/Program.cs" %} //Opens the template document -FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -string[] fieldNames = new string[] { "FullName" }; -string[] fieldValues = new string[] { "Nancy Davolio" }; -//Performs the mail merge -document.MailMerge.Execute(fieldNames, fieldValues); -//Saves the Word document to MemoryStream -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document -document.Close(); +using (FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite)) +{ + WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); + string[] fieldNames = new string[] { "FullName" }; + string[] fieldValues = new string[] { "Nancy Davolio" }; + //Performs the mail merge + document.MailMerge.Execute(fieldNames, fieldValues); + //Saves the Word document to MemoryStream + using (MemoryStream stream = new MemoryStream()) + { + document.Save(stream, FormatType.Docx); + //Writes the Word document to a file + File.WriteAllBytes("Sample.docx", stream.ToArray()); + } +} {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} @@ -222,15 +230,15 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ## Performing Mail merge for a group -You can perform Mail merge and append multiple records from data source within a specified region to a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-group). +You can perform Mail merge and append multiple records from the data source within a specified region to a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-group). -## Performing Nested Mail merge for group +## Performing Nested Mail merge for a group -You can perform nested Mail merge with relational or hierarchical data source and independent data tables in a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups). +You can perform nested Mail merge with a relational or hierarchical data source and independent data tables in a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups). ## Performing Mail merge with dynamic objects -Essential® DocIO allows you to perform Mail merge with the dynamic objects. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups#mail-merge-with-dynamic-objects). +Essential® DocIO allows you to perform Mail merge with dynamic objects. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups#mail-merge-with-dynamic-objects). ## Performing Mail merge with business objects @@ -242,9 +250,9 @@ Essential® DocIO supports performing nested Mail merge with impli ## Event support for mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO in Mail merge process: +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO in the Mail merge process: -* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html): Occurs when a **Mail merge field** except image Mail merge field is encountered. +* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html): Occurs when a **Mail merge field** except an image Mail merge field is encountered. * [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html): Occurs when an **image Mail merge field** is encountered. @@ -254,19 +262,19 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ### MergeField event -You can customize the merging text during Mail merge process by using the [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergefield-event). +You can customize the merging text during the Mail merge process by using the [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergefield-event). ### MergeImageField event -You can customize the merging image during Mail merge process by using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergeimagefield-event). +You can customize the merging image during the Mail merge process by using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergeimagefield-event). ### BeforeClearField event -You can get the unmerged fields during Mail merge process by using the [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). +You can get the unmerged fields during the Mail merge process by using the [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). ### BeforeClearGroupField event -You can get the unmerged groups during Mail merge process by using the [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforecleargroupfield-event). +You can get the unmerged groups during the Mail merge process by using the [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforecleargroupfield-event). ## Mail merge options @@ -274,7 +282,7 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ### Field mapping -You can automatically map the merge field names with data source column names during Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#field-mapping). +You can automatically map the merge field names with the data source column names during the Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#field-mapping). ### Retrieving the merge field names @@ -282,11 +290,11 @@ You can retrieve the merge field names and also merge field group names in the W ### Removing empty paragraphs -You can remove the empty paragraphs when the paragraph has a merge field item without any data during Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-paragraphs). +You can remove the empty paragraphs when the paragraph has a merge field item without any data during the Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-paragraphs). ### Removing empty merge fields -You can remove or keep the unmerged merge fields in the output document based on the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property on each mail merge execution. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-merge-fields). +You can remove or keep the unmerged merge fields in the output document based on the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property on each mail merge execution. The default value of `ClearFields` is `true`, which removes unmerged merge fields. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-merge-fields). ### Restart numbering in lists From 93a3734c17434a656a1874c0db9ad978b684bd3b Mon Sep 17 00:00:00 2001 From: Dharanya Sakthivel Date: Fri, 7 Aug 2026 15:22:10 +0530 Subject: [PATCH 32/70] ES-1042923-Revamp-UG --- .../NET/Word-document/Print-Word-documents.md | 2 +- .../Word/Word-Library/NET/Working-with-Fields.md | 2 +- .../Word/Word-Library/NET/Working-with-Sections.md | 2 +- .../Word/Word-Library/NET/Working-with-Word-document.md | 2 +- .../Word/Word-Library/NET/mail-merge/mail-merge-events.md | 2 +- .../Word-Library/NET/mail-merge/mail-merge-for-group.md | 2 +- .../NET/mail-merge/mail-merge-troubleshooting-tips.md | 8 ++++---- .../Word/Word-Library/NET/working-with-mail-merge.md | 2 +- 8 files changed, 11 insertions(+), 11 deletions(-) diff --git a/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md b/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md index ef4c86fd55..1793fa3273 100644 --- a/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md +++ b/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md @@ -37,7 +37,7 @@ document.Close() ## Configuring print settings -You can specify the printer settings and page settings through the [PrintDocument](https://learn.microsoft.com/dotnet/api/system.drawing.printing.printdocument) class. The [PrintDocument.PrintPage](https://learn.microsoft.com/dotnet/api/system.drawing.printing.printdocument.printpage) event should be handled to layout the document for printing. The following code example demonstrates how to print the Word document pages that have been rendered as an image, using the `images` array produced in the previous snippet. +You can specify the printer settings and page settings through the [PrintDocument](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.printing.printdocument?view=net-11.0-pp) class. The [PrintDocument.PrintPage](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.printing.printdocument.printpage?view=net-11.0-pp) event should be handled to layout the document for printing. The following code example demonstrates how to print the Word document pages that have been rendered as an image, using the `images` array produced in the previous snippet. N> `startPageIndex` must be declared as a class-level integer field (initialize it to `0`). The snippet updates it based on the page range chosen in the print dialog. diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md b/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md index 0c12a2e6bb..7aa8c336cf 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md @@ -5,7 +5,7 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with document Fields +# Working with document Fields in a Word Library Fields in a Word document are placeholders for data that might change on field update. Fields are represented by the [WField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WField.html) and [WFieldMark](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WFieldMark.html) instances in DocIO. A field in a Word document contains field codes, field separator, field result, and field end. diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md b/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md index 181be49e75..ad49e7ac13 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md @@ -6,7 +6,7 @@ control: DocIO documentation: UG --- -# Working with Sections +# Working with Sections in a Word Library A section contains the contents of the headers, footers, and main document body through the instances of [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html). A section also has a specific set of properties used to define the page settings, number of columns, headers and footers and so on that decide how the text appears. [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html) represents a group of paragraphs and tables, etc. diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md b/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md index b299893f74..2f75c64ec9 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md @@ -5,7 +5,7 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Word document +# Working with Word document in a Word Library ## Cloning a Word document diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md index 5043f13d8c..6268a86a38 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md @@ -6,7 +6,7 @@ control: DocIO documentation: UG --- -# Event support for Mail merge +# Event support for Mail merge in Word Library The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merge image data during the Mail merge process. The following events are supported by Syncfusion® DocIO during Mail merge process: diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md index 1c19ce5156..94aa99e128 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md @@ -6,7 +6,7 @@ control: DocIO documentation: UG --- -# Mail merge for a group +# Mail merge for a group in Word Library You can perform Mail merge and append multiple records from data source within a specified region to a template document. The region is bounded by start and end group merge fields. The region gets repeated for every record from the data source. diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md index efe6ee1049..bc8b3c7e94 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md @@ -6,7 +6,7 @@ control: DocIO documentation: UG --- -# Troubleshooting Mail Merge Issues in .NET Word Library +# Troubleshooting Mail merge Issues in .NET Word Library ## Why is mail merge not working correctly in DocIO? @@ -14,7 +14,7 @@ Mail merge issues can arise due to incorrect merge fields, mismatched data sourc * Merge fields (<>) are used instead of plain text. * **Data Source Check:** Ensure the required fields exist in the data source. Verify the data source column/property names against the merge field names in the Word template. -* **Match Field Names:** Sometimes, the field names in the Word document are different from the property names in your data source class. For example, if your document has "FirstName" and "LastName", but your Employee class uses different names, Mail Merge will not work correctly. +* **Match Field Names:** Sometimes, the field names in the Word document are different from the property names in your data source class. For example, if your document has "FirstName" and "LastName", but your Employee class uses different names, Mail merge will not work correctly. **How to fix this:** * The property names in your data source class should be exactly the same as the merge field names in your Word document. @@ -71,9 +71,9 @@ Mail merge only works with merge fields, not manually typed placeholders. If tex Refer to [Syncfusion® Documentation](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-find-and-replace#find-and-replace-a-pattern-of-text-with-a-merge-field) for detailed implementation. -## Why is nested group Mail Merge not functioning correctly? +## Why is nested group Mail merge not functioning correctly? -Nested Mail Merge requires proper execution using the correct method and structure. +Nested Mail merge requires proper execution using the correct method and structure. * Use the appropriate overload of the [`ExecuteNestedGroup`](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) method to handle nested groups effectively. Supported overloads include: * `ExecuteNestedGroup(MailMergeDataTable)` — for implicit relational data, where the child groups are nested within the parent table's data. * `ExecuteNestedGroup(MailMergeDataSet, List)` — for explicit relational data, where the relations between parent and child groups are defined using command entries. diff --git a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md index 65e0245968..6bc6d876f9 100644 --- a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md +++ b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md @@ -5,7 +5,7 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Mail merge +# Working with Mail merge in Word Library Mail merge is a process of merging data from a data source into a Word template document. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) class provides support to bind template document and data source. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) instance is replaced with the actual data retrieved from the data source for the given merge field name in a template document. From 158e422589a840438ba1b8071aa75ea39bf9550a Mon Sep 17 00:00:00 2001 From: Dharanya Sakthivel Date: Fri, 7 Aug 2026 14:27:18 +0530 Subject: [PATCH 33/70] ES-1042923-Revamp-UG --- .../Word-document/Compare-Word-documents.md | 159 ++++++----- .../Iterating-Word-document-elements.md | 59 +++-- .../Word-document/Merging-Word-documents.md | 38 +-- .../NET/Word-document/Print-Word-documents.md | 25 +- .../NET/Word-document/Split-Word-documents.md | 59 +++-- .../Word-Library/NET/Working-With-Images.md | 125 ++++----- .../NET/Working-with-Bookmarks.md | 78 +++--- .../Word-Library/NET/Working-with-Fields.md | 36 +-- .../NET/Working-with-Hyperlinks.md | 241 +++++++++-------- .../NET/Working-with-Paragraph.md | 83 +++--- .../Word-Library/NET/Working-with-Sections.md | 44 ++-- .../Word-Library/NET/Working-with-Shapes.md | 247 +++++++++--------- .../Word-Library/NET/Working-with-Tables.md | 71 ++--- .../NET/Working-with-Word-document.md | 58 ++-- .../NET/mail-merge/mail-merge-events.md | 61 ++--- .../NET/mail-merge/mail-merge-for-group.md | 27 +- .../mail-merge-for-nested-groups.md | 57 ++-- .../NET/mail-merge/mail-merge-options.md | 63 +++-- .../mail-merge-troubleshooting-tips.md | 24 +- .../NET/mail-merge/simple-mail-merge.md | 22 +- .../Word-Library/NET/working-with-lists.md | 64 ++--- .../NET/working-with-mail-merge.md | 88 ++++--- 22 files changed, 937 insertions(+), 792 deletions(-) diff --git a/Document-Processing/Word/Word-Library/NET/Word-document/Compare-Word-documents.md b/Document-Processing/Word/Word-Library/NET/Word-document/Compare-Word-documents.md index ea797ad22a..f2ef60b190 100644 --- a/Document-Processing/Word/Word-Library/NET/Word-document/Compare-Word-documents.md +++ b/Document-Processing/Word/Word-Library/NET/Word-document/Compare-Word-documents.md @@ -37,12 +37,15 @@ N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-plat {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Compare-Word-documents/Compare-two-Word-documents/.NET/Compare-Word-documents/Program.cs" %} -//Load the original document. +using Syncfusion.DocIO; +using Syncfusion.DocIO.DLS; + +// Load the original document. using (FileStream originalDocumentStreamPath = new FileStream("Data/OriginalDocument.docx", FileMode.Open, FileAccess.Read)) { using (WordDocument originalDocument = new WordDocument(originalDocumentStreamPath, FormatType.Docx)) { - //Load the revised document. + // Load the revised document. using (FileStream revisedDocumentStreamPath = new FileStream("Data/RevisedDocument.docx", FileMode.Open, FileAccess.Read)) { using (WordDocument revisedDocument = new WordDocument(revisedDocumentStreamPath, FormatType.Docx)) @@ -50,38 +53,48 @@ using (FileStream originalDocumentStreamPath = new FileStream("Data/OriginalDocu // Compare the original and revised Word documents. originalDocument.Compare(revisedDocument); - //Save the Word document to MemoryStream - MemoryStream stream = new MemoryStream(); - originalDocument.Save(stream, FormatType.Docx); + // Save the Word document to MemoryStream. + using (MemoryStream stream = new MemoryStream()) + { + originalDocument.Save(stream, FormatType.Docx); + // Save the stream to a file. + File.WriteAllBytes("Result.docx", stream.ToArray()); + } } - } - } + } + } } {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Load the original document. +using Syncfusion.DocIO; +using Syncfusion.DocIO.DLS; + +// Load the original document. using (WordDocument originalDocument = new WordDocument("Data/OriginalDocument.docx", FormatType.Docx)) { - //Load the revised document. + // Load the revised document. using (WordDocument revisedDocument = new WordDocument("Data/RevisedDocument.docx", FormatType.Docx)) - { + { // Compare the original and revised Word documents. originalDocument.Compare(revisedDocument); - //Save the Word document. - originalDocument.Save("Result.docx"); + // Save the Word document. + originalDocument.Save("Result.docx"); } } {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} +Imports Syncfusion.DocIO +Imports Syncfusion.DocIO.DLS + ' Load the original document. Using originalDocument As New WordDocument("Data/OriginalDocument.docx", FormatType.Docx) ' Load the revised document. Using revisedDocument As New WordDocument("Data/RevisedDocument.docx", FormatType.Docx) - ' Compare the original document and revised documents. + ' Compare the original and revised Word documents. originalDocument.Compare(revisedDocument) ' Save the Word document. originalDocument.Save("Result.docx") @@ -97,61 +110,74 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Set Author and Date -Compare the two Word documents by setting the author and date for revisions to identify the changes. In DocIO, the default setting for the "author" field is "Author", and the default setting for the "dateTime" field is the current time. +Compare the two Word documents by setting the author and date for revisions to identify the changes. In DocIO, the default author is "Author" and the default date/time is the current time. The following sample uses an overload of the [`Compare`](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html) method that accepts an author and date. The following code example shows how to set the author and date for revision while comparing two Word documents. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Compare-Word-documents/Set-author-and-date/.NET/Program.cs" %} -//Load the original document. +using Syncfusion.DocIO; +using Syncfusion.DocIO.DLS; + +// Load the original document. using (FileStream originalDocumentStreamPath = new FileStream("Data/OriginalDocument.docx", FileMode.Open, FileAccess.Read)) { using (WordDocument originalDocument = new WordDocument(originalDocumentStreamPath, FormatType.Docx)) { - //Load the revised document. + // Load the revised document. using (FileStream revisedDocumentStreamPath = new FileStream("Data/RevisedDocument.docx", FileMode.Open, FileAccess.Read)) { using (WordDocument revisedDocument = new WordDocument(revisedDocumentStreamPath, FormatType.Docx)) { // Compare the original and revised Word documents. - originalDocument.Compare(revisedDocument,"Nancy Davolio", DateTime.Now.AddDays(-1)); + originalDocument.Compare(revisedDocument, "Nancy Davolio", DateTime.Now.AddDays(-1)); - //Save the Word document to MemoryStream - MemoryStream stream = new MemoryStream(); - originalDocument.Save(stream, FormatType.Docx); + // Save the Word document to MemoryStream. + using (MemoryStream stream = new MemoryStream()) + { + originalDocument.Save(stream, FormatType.Docx); + // Save the stream to a file. + File.WriteAllBytes("Result.docx", stream.ToArray()); + } } - } - } + } + } } {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Load the original document. +using Syncfusion.DocIO; +using Syncfusion.DocIO.DLS; + +// Load the original document. using (WordDocument originalDocument = new WordDocument("Data/OriginalDocument.docx", FormatType.Docx)) { - //Load the revised document. + // Load the revised document. using (WordDocument revisedDocument = new WordDocument("Data/RevisedDocument.docx", FormatType.Docx)) - { - // Compare the original document and revised documents. - originalDocument.Compare(revisedDocument,"Nancy Davolio", DateTime.Now.AddDays(-1)); - //Save the Word document. - originalDocument.Save("Result.docx"); + { + // Compare the original and revised Word documents. + originalDocument.Compare(revisedDocument, "Nancy Davolio", DateTime.Now.AddDays(-1)); + // Save the Word document. + originalDocument.Save("Result.docx"); } } {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -' Open the original Word document. -Using originalDocument As New WordDocument(originalFilePath, FormatType.Docx) - ' Open the revised Word document. - Using revisedDocument As New WordDocument(revisedFilePath, FormatType.Docx) - ' Compare the original document with the revised document. +Imports Syncfusion.DocIO +Imports Syncfusion.DocIO.DLS + +' Load the original document. +Using originalDocument As New WordDocument("Data/OriginalDocument.docx", FormatType.Docx) + ' Load the revised document. + Using revisedDocument As New WordDocument("Data/RevisedDocument.docx", FormatType.Docx) + ' Compare the original and revised Word documents. originalDocument.Compare(revisedDocument, "Nancy Davolio", DateTime.Now.AddDays(-1)) ' Save the Word document. - originalDocument.Save(resultFilePath) + originalDocument.Save("Result.docx") End Using End Using @@ -176,25 +202,30 @@ The following code example illustrates how to compare two Word documents by igno {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Compare-Word-documents/Ignore-format-changes/.NET/Ignore-format-changes/Program.cs" %} -//Load the original document -using (FileStream originalDocumentStreamPath = new FileStream("OriginalDocument.docx", FileMode.Open, FileAccess.Read)) +using Syncfusion.DocIO; +using Syncfusion.DocIO.DLS; + +// Load the original document. +using (FileStream originalDocumentStreamPath = new FileStream("Data/OriginalDocument.docx", FileMode.Open, FileAccess.Read)) { using (WordDocument originalDocument = new WordDocument(originalDocumentStreamPath, FormatType.Docx)) { - //Load the revised document - using (FileStream revisedDocumentStreamPath = new FileStream("RevisedDocument.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite)) + // Load the revised document. + using (FileStream revisedDocumentStreamPath = new FileStream("Data/RevisedDocument.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite)) { - using (WordDocument revisedDocument = new WordDocument(revisedDocumentStreamPath, FormatType.Automatic)) + using (WordDocument revisedDocument = new WordDocument(revisedDocumentStreamPath, FormatType.Docx)) { - //Set the Comparison option to detect format changes, whether to detect format changes while comparing two Word documents. + // Set whether to detect format changes while comparing two Word documents. ComparisonOptions compareOptions = new ComparisonOptions(); compareOptions.DetectFormatChanges = false; - //Compare the original document with the revised document + // Compare the original and revised Word documents. originalDocument.Compare(revisedDocument, "Syncfusion", DateTime.Now, compareOptions); - //Save the Word document to MemoryStream + // Save the Word document to MemoryStream. using (MemoryStream stream = new MemoryStream()) { originalDocument.Save(stream, FormatType.Docx); + // Save the stream to a file. + File.WriteAllBytes("Result.docx", stream.ToArray()); } } } @@ -204,36 +235,42 @@ using (FileStream originalDocumentStreamPath = new FileStream("OriginalDocument. {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Load the original document -using (WordDocument originalDocument = new WordDocument("OriginalDocument.docx")) +using Syncfusion.DocIO; +using Syncfusion.DocIO.DLS; + +// Load the original document. +using (WordDocument originalDocument = new WordDocument("Data/OriginalDocument.docx", FormatType.Docx)) { - //Load the revised document - using (WordDocument revisedDocument = new WordDocument("RevisedDocument.docx")) + // Load the revised document. + using (WordDocument revisedDocument = new WordDocument("Data/RevisedDocument.docx", FormatType.Docx)) { - //Set the Comparison option detect format changes, whether to detect format changes while comparing two Word documents. + // Set whether to detect format changes while comparing two Word documents. ComparisonOptions compareOptions = new ComparisonOptions(); compareOptions.DetectFormatChanges = false; - //Compare the original document with the revised document + // Compare the original and revised Word documents. originalDocument.Compare(revisedDocument, "Syncfusion", DateTime.Now, compareOptions); - //Save the Word document. - originalDocument.Save(output); - } -} + // Save the Word document. + originalDocument.Save("Result.docx"); + } +} {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Load the original document -Using originalDocument As New WordDocument("OriginalDocument.docx") - 'Load the revised document - Using revisedDocument As New WordDocument("RevisedDocument.docx") - 'Set the Comparison option to detect format changes +Imports Syncfusion.DocIO +Imports Syncfusion.DocIO.DLS + +' Load the original document. +Using originalDocument As New WordDocument("Data/OriginalDocument.docx", FormatType.Docx) + ' Load the revised document. + Using revisedDocument As New WordDocument("Data/RevisedDocument.docx", FormatType.Docx) + ' Set whether to detect format changes while comparing two Word documents. Dim compareOptions As New ComparisonOptions() compareOptions.DetectFormatChanges = False - 'Compare the original document with the revised document + ' Compare the original and revised Word documents. originalDocument.Compare(revisedDocument, "Syncfusion", DateTime.Now, compareOptions) - 'Save the Word document - originalDocument.Save(output) + ' Save the Word document. + originalDocument.Save("Result.docx") End Using End Using diff --git a/Document-Processing/Word/Word-Library/NET/Word-document/Iterating-Word-document-elements.md b/Document-Processing/Word/Word-Library/NET/Word-document/Iterating-Word-document-elements.md index c3f21a3288..2671a6625c 100644 --- a/Document-Processing/Word/Word-Library/NET/Word-document/Iterating-Word-document-elements.md +++ b/Document-Processing/Word/Word-Library/NET/Word-document/Iterating-Word-document-elements.md @@ -7,7 +7,7 @@ documentation: UG --- # Iterating Word document elements -The following are the important points to be remembered while iterating the document elements +The following are the important points to be remembered while iterating the document elements. * Document consists of one or more sections. * Section contains the contents present in Headers, Footers and main document through the instances of [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html). @@ -28,7 +28,7 @@ using (WordDocument document = new WordDocument(fileStreamPath, FormatType.Autom { foreach (WSection section in document.Sections) { - //Accesses the Body of section where all the contents in document are apart + //Accesses the Body of section where all the contents in document reside WTextBody sectionBody = section.Body; IterateTextBody(sectionBody); WHeadersFooters headersFooters = section.HeadersFooters; @@ -41,6 +41,8 @@ using (WordDocument document = new WordDocument(fileStreamPath, FormatType.Autom document.Save(stream, FormatType.Docx); //Closes the Word document document.Close(); + //Saves the MemoryStream to a file + File.WriteAllBytes("Result.docx", stream.ToArray()); } {% endhighlight %} @@ -50,7 +52,7 @@ WordDocument document = new WordDocument("Template.docx"); //Processes the body contents for each section in the Word document foreach (WSection section in document.Sections) { - //Accesses the Body of section where all the contents in document are apart + //Accesses the Body of section where all the contents in document reside WTextBody sectionBody = section.Body; IterateTextBody(sectionBody); WHeadersFooters headersFooters = section.HeadersFooters; @@ -69,7 +71,7 @@ document.Close(); Dim document As New WordDocument("Template.docx") 'Processes the body contents for each section in the Word document For Each section As WSection In document.Sections - 'Accesses the Body of section where all the contents in document are apart + 'Accesses the Body of section where all the contents in document reside Dim sectionBody As WTextBody = section.Body IterateTextBody(sectionBody) Dim headersFooters As WHeadersFooters = section.HeadersFooters @@ -118,7 +120,7 @@ private static void IterateTextBody(WTextBody textBody) break; case EntityType.BlockContentControl: BlockContentControl blockContentControl = bodyItemEntity as BlockContentControl; - //Iterates to the body items of Block Content Control. + //Iterates through the body items of Block Content Control. IterateTextBody(blockContentControl.TextBody); break; } @@ -155,7 +157,7 @@ private static void IterateTextBody(WTextBody textBody) break; case EntityType.BlockContentControl: BlockContentControl blockContentControl = bodyItemEntity as BlockContentControl; - //Iterates to the body items of Block Content Control. + //Iterates through the body items of Block Content Control. IterateTextBody(blockContentControl.TextBody); break; } @@ -171,7 +173,7 @@ For i As Integer = 0 To textBody.ChildEntities.Count - 1 'Accesses the body items (should be either paragraph, table or block content control) as IEntity Dim bodyItemEntity As IEntity = textBody.ChildEntities(i) 'A Text body has 3 types of elements - Paragraph, Table and Block Content Control - 'decide the element type using EntityType + 'Determines the element type using EntityType Select Case bodyItemEntity.EntityType Case EntityType.Paragraph Dim paragraph As WParagraph = TryCast(bodyItemEntity, WParagraph) @@ -188,7 +190,7 @@ For i As Integer = 0 To textBody.ChildEntities.Count - 1 Exit Select Case EntityType.BlockContentControl Dim BlockContentControl As BlockContentControl = TryCast(bodyItemEntity, BlockContentControl) - 'Iterates to the body items of Block Content Control. + 'Iterates through the body items of Block Content Control. IterateTextBody(BlockContentControl.TextBody) Exit Select End Select @@ -256,7 +258,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Modify Hyperlink Uri -The following code example shows how to iterate throughout the paragraph and modify the hyperlink ([Hyperlink](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Hyperlink.html)) Uri and specific text ([WTextRange](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Hyperlink.html)) with another. +The following code example shows how to iterate throughout the paragraph and modify the hyperlink ([Hyperlink](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Hyperlink.html)) Uri and specific text ([WTextRange](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextRange.html)) with another. The sample also replaces the text "Andrew" with "Fuller" and updates any hyperlink whose display text is "HTML" to point to `http://www.w3schools.com/`. These values are sample-specific; update them to suit your document. {% tabs %} @@ -267,7 +269,7 @@ using (WordDocument document = new WordDocument(fileStreamPath, FormatType.Autom { foreach (WSection section in document.Sections) { - //Accesses the Body of section where all the contents in document are apart + //Accesses the Body of section where all the contents in document reside WTextBody sectionBody = section.Body; IterateTextBody(sectionBody); WHeadersFooters headersFooters = section.HeadersFooters; @@ -280,6 +282,8 @@ using (WordDocument document = new WordDocument(fileStreamPath, FormatType.Autom document.Save(stream, FormatType.Docx); //Closes the Word document document.Close(); + //Saves the MemoryStream to a file + File.WriteAllBytes("Result.docx", stream.ToArray()); } {% endhighlight %} @@ -289,11 +293,11 @@ WordDocument document = new WordDocument("Template.docx"); //Processes the body contents for each section in the Word document foreach (WSection section in document.Sections) { - //Accesses the Body of section where all the contents in document are apart + //Accesses the Body of section where all the contents in document reside WTextBody sectionBody = section.Body; IterateTextBody(sectionBody); WHeadersFooters headersFooters = section.HeadersFooters; - //consider that OddHeader & OddFooter are applied to this document + //Consider that OddHeader and OddFooter are applied to this document //Iterates through the TextBody of OddHeader and OddFooter IterateTextBody(headersFooters.OddHeader); IterateTextBody(headersFooters.OddFooter); @@ -307,12 +311,13 @@ document.Close(); Dim document As New WordDocument("Template.docx") 'Processes the body contents for each section in the Word document For Each section As WSection In document.Sections - 'Accesses the Body of section where all the contents in document are apart + 'Accesses the Body of section where all the contents in document reside Dim sectionBody As WTextBody = section.Body IterateTextBody(sectionBody) Dim headersFooters As WHeadersFooters = section.HeadersFooters - 'Considers that OddHeader and OddFooter are applied to this document - 'Iterates through the TextBody of OddHeader and OddFooterIterateTextBody(headersFooters.OddHeader) + 'Assume that OddHeader and OddFooter are applied to this document + 'Iterates through the TextBody of OddHeader and OddFooter + IterateTextBody(headersFooters.OddHeader) IterateTextBody(headersFooters.OddFooter) Next 'Saves and closes the document instance @@ -352,7 +357,7 @@ private static void IterateTextBody(WTextBody textBody) break; case EntityType.BlockContentControl: BlockContentControl blockContentControl = bodyItemEntity as BlockContentControl; - //Iterates to the body items of Block Content Control. + //Iterates through the body items of Block Content Control. IterateTextBody(blockContentControl.TextBody); break; } @@ -386,7 +391,7 @@ private static void IterateTextBody(WTextBody textBody) break; case EntityType.BlockContentControl: BlockContentControl blockContentControl = bodyItemEntity as BlockContentControl; - //Iterates to the body items of Block Content Control. + //Iterates through the body items of Block Content Control. IterateTextBody(blockContentControl.TextBody); break; } @@ -417,7 +422,7 @@ For i As Integer = 0 To textBody.ChildEntities.Count - 1 Exit Select Case EntityType.BlockContentControl Dim BlockContentControl As BlockContentControl = TryCast(bodyItemEntity, BlockContentControl) - 'Iterates to the body items of Block Content Control. + 'Iterates through the body items of Block Content Control. IterateTextBody(BlockContentControl.TextBody) Exit Select End Select @@ -517,17 +522,17 @@ private static void IterateParagraph(ParagraphItemCollection paraItems) } break; case EntityType.TextBox: - //Iterates to the body items of textbox. + //Iterates through the body items of textbox. WTextBox textBox = entity as WTextBox; IterateTextBody(textBox.TextBoxBody); break; case EntityType.Shape: - //Iterates to the body items of shape. + //Iterates through the body items of shape. Shape shape = entity as Shape; IterateTextBody(shape.TextBody); break; case EntityType.InlineContentControl: - //Iterates to the paragraph items of inline content control. + //Iterates through the paragraph items of inline content control. InlineContentControl inlineContentControl = entity as InlineContentControl; IterateParagraph(inlineContentControl.ParagraphItems); break; @@ -568,17 +573,17 @@ private static void IterateParagraph(ParagraphItemCollection paraItems) } break; case EntityType.TextBox: - //Iterates to the body items of textbox. + //Iterates through the body items of textbox. WTextBox textBox = entity as WTextBox; IterateTextBody(textBox.TextBoxBody); break; case EntityType.Shape: - //Iterates to the body items of shape. + //Iterates through the body items of shape. Shape shape = entity as Shape; IterateTextBody(shape.TextBody); break; case EntityType.InlineContentControl: - //Iterates to the paragraph items of inline content control. + //Iterates through the paragraph items of inline content control. InlineContentControl inlineContentControl = entity as InlineContentControl; IterateParagraph(inlineContentControl.ParagraphItems); break; @@ -613,17 +618,17 @@ For i As Integer = 0 To paraItems.Count - 1 End If Exit Select Case EntityType.TextBox - 'Iterates to the body items of textbox. + 'Iterates through the body items of textbox. Dim textBox As WTextBox = TryCast(entity, WTextBox) IterateTextBody(textBox.TextBoxBody) Exit Select Case EntityType.Shape - 'Iterates to the body items of shape. + 'Iterates through the body items of shape. Dim shape As Shape = TryCast(entity, Shape) IterateTextBody(shape.TextBody) Exit Select Case EntityType.InlineContentControl - 'Iterates to the paragraph items of inline content control. + 'Iterates through the paragraph items of inline content control. Dim inlineContentControl As InlineContentControl = TryCast(entity, InlineContentControl) IterateParagraph(inlineContentControl.ParagraphItems) Exit Select diff --git a/Document-Processing/Word/Word-Library/NET/Word-document/Merging-Word-documents.md b/Document-Processing/Word/Word-Library/NET/Word-document/Merging-Word-documents.md index 21b8ea0ad2..1e1606f1ab 100644 --- a/Document-Processing/Word/Word-Library/NET/Word-document/Merging-Word-documents.md +++ b/Document-Processing/Word/Word-Library/NET/Word-document/Merging-Word-documents.md @@ -7,11 +7,13 @@ documentation: UG --- # Merging Word documents -You can merge multiple Word documents into single Word document by using DocIO’s capability of importing contents from one document to another. The imported contents are appended at the end of document. +You can merge multiple Word documents into a single Word document by using DocIO’s capability of importing contents from one document to another. The imported contents are appended at the end of the document. + +By default, the imported contents start on a new page. You can also merge the contents on the same page by adjusting the source document’s first section break, as shown in the following sections. ## Assemblies and NuGet packages required -Refer to the following links for assemblies and NuGet packages required based on platforms to merge Word documents using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO). +Refer to the following links for the assemblies and NuGet packages required for each platform to merge Word documents using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO). * [Merge Word documents assemblies](https://help.syncfusion.com/document-processing/word/word-library/net/assemblies-required) * [Merge Word documents NuGet packages](https://help.syncfusion.com/document-processing/word/word-library/net/nuget-packages-required) @@ -19,25 +21,25 @@ Refer to the following links for assemblies and NuGet packages required based on To quickly start merging Word documents, please check out this video: {% youtube "https://www.youtube.com/watch?v=atOSwzidmdw" %} -## Merge document in new page +## Merging documents in a new page -The following code example illustrates how to import the contents from source document into destination document where the contents are appended. +The following code example illustrates how to import the contents from a source document into a destination document where the contents are appended. N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-platform]*** for ASP.NET Core, Blazor, Xamarin, UWP, .NET MAUI, and WinUI; ***C# [Windows-specific]*** for WinForms and WPF; ***VB.NET [Windows-specific]*** for VB.NET applications. {% tabs %} -{% highlight C# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Word-document/Merge-documents-in-new-page/.NET/Merge-documents-in-new-page/Program.cs" %} +{% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Word-document/Merge-documents-in-new-page/.NET/Merge-documents-in-new-page/Program.cs" %} FileStream sourceStreamPath = new FileStream(sourceFileName, FileMode.Open, FileAccess.Read, FileShare.ReadWrite); FileStream destinationStreamPath = new FileStream(destinationFileName, FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -//Opens an source document from file system through constructor of WordDocument class +//Opens a source document from file system through constructor of WordDocument class using (WordDocument document = new WordDocument(sourceStreamPath, FormatType.Automatic)) { //Opens the destination document WordDocument destinationDocument = new WordDocument(destinationStreamPath, FormatType.Docx); //Imports the contents of source document at the end of destination document destinationDocument.ImportContent(document, ImportOptions.UseDestinationStyles); - //Saves and closes the destination document to MemoryStream + //Saves and closes the destination document to a MemoryStream MemoryStream stream = new MemoryStream(); destinationDocument.Save(stream, FormatType.Docx); destinationDocument.Close(); @@ -54,7 +56,7 @@ WordDocument destinationDocument = new WordDocument(targetFileName); destinationDocument.ImportContent(sourceDocument, ImportOptions.UseDestinationStyles); //Saves the destination document destinationDocument.Save(outputFileName, FormatType.Docx); -//closes the document instances +//Closes the document instances sourceDocument.Close(); destinationDocument.Close(); {% endhighlight %} @@ -68,7 +70,7 @@ Dim destinationDocument As New WordDocument(targetFileName) destinationDocument.ImportContent(sourceDocument, ImportOptions.UseDestinationStyles) 'Saves the destination document destinationDocument.Save(outputFileName, FormatType.Docx) -'closes the document instances +'Closes the document instances sourceDocument.Close() destinationDocument.Close() {% endhighlight %} @@ -79,25 +81,25 @@ You can download a complete working sample from [GitHub](https://github.com/Sync In the resultant document, the imported contents start from a new page followed by existing contents in a destination document. This is the default behavior. -## Merge document in same page +## Merging documents on the same page -When your requirement is to append the contents from the same page instead of starting from a new page, you need to set the break code of first section of Source document as [NoBreak](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.SectionBreakCode.html). The following code example illustrates the importing contents from the same page. +When your requirement is to append the contents on the same page instead of starting from a new page, you need to set the break code of the first section of the source document as [NoBreak](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.SectionBreakCode.html). The following code example illustrates how to import the contents on the same page. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Word-document/Merge-documents-in-same-page/.NET/Merge-documents-in-same-page/Program.cs" %} FileStream sourceStreamPath = new FileStream(sourceFileName, FileMode.Open, FileAccess.Read, FileShare.ReadWrite); FileStream destinationStreamPath = new FileStream(destinationFileName, FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -//Opens an source document from file system through constructor of WordDocument class +//Opens a source document from file system through constructor of WordDocument class using (WordDocument document = new WordDocument(sourceStreamPath, FormatType.Automatic)) { //Opens the destination document WordDocument destinationDocument = new WordDocument(destinationStreamPath, FormatType.Docx); - //Sets the break-code of First section of source document as NoBreak to avoid imported from a new page + //Sets the break code of the first section of the source document as NoBreak to avoid importing from a new page document.Sections[0].BreakCode = SectionBreakCode.NoBreak; //Imports the contents of source document at the end of destination document destinationDocument.ImportContent(document, ImportOptions.UseDestinationStyles); - //Saves and closes the destination document to MemoryStream + //Saves and closes the destination document to a MemoryStream MemoryStream stream = new MemoryStream(); destinationDocument.Save(stream, FormatType.Docx); destinationDocument.Close(); @@ -110,7 +112,7 @@ using (WordDocument document = new WordDocument(sourceStreamPath, FormatType.Aut WordDocument sourceDocument = new WordDocument(sourceFileName); //Opens the destination document WordDocument destinationDocument = new WordDocument(targetFileName); -//Sets the break-code of First section of source document as NoBreak to avoid imported from a new page +//Sets the break code of the first section of the source document as NoBreak to avoid importing from a new page sourceDocument.Sections[0].BreakCode = SectionBreakCode.NoBreak; //Imports the contents of source document at the end of destination document destinationDocument.ImportContent(sourceDocument, ImportOptions.UseDestinationStyles); @@ -126,7 +128,7 @@ destinationDocument.Close(); Dim sourceDocument As New WordDocument(sourceFileName) 'Opens the destination document Dim destinationDocument As New WordDocument(targetFileName) -'Sets the break-code of first section of source document as NoBreak to avoid imported from a new page +'Sets the break code of the first section of the source document as NoBreak to avoid importing from a new page sourceDocument.Sections(0).BreakCode = SectionBreakCode.NoBreak 'Imports the contents of source document at the end of destination document destinationDocument.ImportContent(sourceDocument, ImportOptions.UseDestinationStyles) @@ -141,7 +143,7 @@ destinationDocument.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-document/Merge-documents-in-same-page). -## Maintain Imported List style information +## Maintain imported list style information The following code example shows how to maintain information about imported list styles in a Word document while cloning and merging multiple Word documents. @@ -228,6 +230,8 @@ destinationDocument.Close() {% endtabs %} + + ## See Also * [How to merge multiple Word documents in C#, VB.NET](https://support.syncfusion.com/kb/article/11499/how-to-merge-multiple-word-documents-in-c-vb-net) diff --git a/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md b/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md index c485556971..ef4c86fd55 100644 --- a/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md +++ b/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md @@ -1,6 +1,6 @@ --- title: Print Word documents in C# | DocIO | Syncfusion -description: Learn how to print the Word documents into one using .NET Word (DocIO) library without Microsoft Word or interop dependencies. +description: Learn how to print Word documents using the .NET Word (DocIO) library without Microsoft Word or interop dependencies. platform: document-processing control: DocIO documentation: UG @@ -9,7 +9,7 @@ documentation: UG You can print a Word document by utilizing DocIO’s capability to convert the document into images and .NET framework’s [PrintDocument](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.printing.printdocument?view=dotnet-plat-ext-7.0&viewFallbackFrom=net-5.0) class -Initially you have to render the pages as images as shown below +Initially you have to render the pages of the Word document as images, as shown below. N> Refer to the appropriate tabs in the code snippets section: ***C# [Windows-specific]*** for WinForms and WPF; ***VB.NET [Windows-specific]*** for VB.NET applications. @@ -20,7 +20,7 @@ N> Refer to the appropriate tabs in the code snippets section: ***C# [Windows-sp WordDocument document = new WordDocument((string)this.textBox.Tag); //Renders the Word document as image Image[] images = document.RenderAsImages(ImageType.Metafile); -//Closes the Word Document +//Closes the Word document document.Close(); {% endhighlight %} @@ -29,15 +29,18 @@ document.Close(); Dim document As New WordDocument(DirectCast(Me.textBox.Tag, String)) 'Renders the Word document as image Dim images As Image() = document.RenderAsImages(ImageType.Metafile) -'Closes the Word Document +'Closes the Word document document.Close() {% endhighlight %} {% endtabs %} -You can specify the printer settings and page settings through the [PrintDocument](https://docs.microsoft.com/en-us/dotnet/api/system.drawing.printing.printdocument?view=net-5.0) class. The [PrintDocument.PrintPage](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.printing.printdocument?view=dotnet-plat-ext-7.0&viewFallbackFrom=net-5.0) event should be handled to layout the document for printing. +## Configuring print settings -The following code example demonstrates how to print the Word document pages that have been rendered as an image: +You can specify the printer settings and page settings through the [PrintDocument](https://learn.microsoft.com/dotnet/api/system.drawing.printing.printdocument) class. The [PrintDocument.PrintPage](https://learn.microsoft.com/dotnet/api/system.drawing.printing.printdocument.printpage) event should be handled to layout the document for printing. The following code example demonstrates how to print the Word document pages that have been rendered as an image, using the `images` array produced in the previous snippet. + + +N> `startPageIndex` must be declared as a class-level integer field (initialize it to `0`). The snippet updates it based on the page range chosen in the print dialog. {% tabs %} @@ -66,7 +69,7 @@ if (printDialog.ShowDialog() == System.Windows.Forms.DialogResult.OK) endPageIndex = printDialog.PrinterSettings.ToPage; //Hooks the PrintPage event to handle the drawing pages for printing printDialog.Document.PrintPage += new PrintPageEventHandler(PrintPageMethod); - //Print the document + //Prints the document printDialog.Document.Print(); } } @@ -87,14 +90,14 @@ printDialog.PrinterSettings.FromPage = 1 printDialog.PrinterSettings.ToPage = images.Length 'Opens the print dialog box If printDialog.ShowDialog() = System.Windows.Forms.DialogResult.OK Then - 'Checks whether the selected page range is valid or not + 'Checks whether the selected page range is valid If printDialog.PrinterSettings.FromPage > 0 AndAlso printDialog.PrinterSettings.ToPage <= images.Length Then 'Updates the start page of the document to print startPageIndex = printDialog.PrinterSettings.FromPage - 1 'Updates the end page of the document to print endPageIndex = printDialog.PrinterSettings.ToPage 'Hooks the PrintPage event to handle the drawing pages for printing - printDialog.Document.PrintPage += New PrintPageEventHandler(PrintPageMethod) + AddHandler printDialog.Document.PrintPage, AddressOf PrintPageMethod 'Prints the document printDialog.Document.Print() End If @@ -184,6 +187,8 @@ End Sub You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-document/Print-Word-document). +N> If `RenderAsImages` returns an empty array (for example, an empty document), skip printing and check the input document. Ensure the rendered array length is validated before configuring the page range. + ## See Also -* [How to do silent printing to print the Word document by rendering document pages as Image using Essential® DocIO](https://support.syncfusion.com/kb/article/4546/how-to-do-silent-printing-to-print-the-word-document-by-rendering-document-pages-as-image) \ No newline at end of file +* [How to do silent printing to print the Word document by rendering document pages as image using DocIO](https://support.syncfusion.com/kb/article/4546/how-to-do-silent-printing-to-print-the-word-document-by-rendering-document-pages-as-image) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Library/NET/Word-document/Split-Word-documents.md b/Document-Processing/Word/Word-Library/NET/Word-document/Split-Word-documents.md index 7324de4a34..2755146367 100644 --- a/Document-Processing/Word/Word-Library/NET/Word-document/Split-Word-documents.md +++ b/Document-Processing/Word/Word-Library/NET/Word-document/Split-Word-documents.md @@ -7,9 +7,9 @@ documentation: UG --- # Split Word documents -The [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) allows you to split the large Word document into number of smaller word documents by the sections, headings, bookmarks, and placeholder text in programmatically. +The [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) allows you to split a large Word document into a number of smaller Word documents by section, heading, bookmark, and placeholder text programmatically. -By using this feature, you can be able to split/extract the necessary parts from the original document for further processing. +By using this feature, you can split/extract the necessary parts from the original document for further processing. You can save the resultant document as a Word document (DOCX, WordML, DOC), PDF, image, HTML, RTF, and more. @@ -18,14 +18,16 @@ To quickly start splitting Word documents, please check out this video: ## Assemblies and NuGet packages required -Refer to the following links for assemblies and NuGet packages required based on platforms to split Word documents using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO). +Refer to the following links for the assemblies and NuGet packages required for each platform to split Word documents using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO). * [Split Word documents assemblies](https://help.syncfusion.com/document-processing/word/word-library/net/assemblies-required) * [Split Word documents NuGet packages](https://help.syncfusion.com/document-processing/word/word-library/net/nuget-packages-required) +N> The code samples use the namespaces `Syncfusion.DocIO.DLS`, `System.IO`, and `System.Text.RegularExpressions`. Add the corresponding `using`/`Imports` directives for these namespaces before running the samples. + ## Split by Section -The following code example illustrates how to split the Word document by sections. +The following code example illustrates how to split the Word document by section. N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-platform]*** for ASP.NET Core, Blazor, Xamarin, UWP, .NET MAUI, and WinUI; ***C# [Windows-specific]*** for WinForms and WPF; ***VB.NET [Windows-specific]*** for VB.NET applications. @@ -33,8 +35,8 @@ N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-plat {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Word-document/Split-by-section/.NET/Split-by-section/Program.cs" %} FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -//Load the template document as stream -using(WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx)) +//Load the template document as a stream +using (WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx)) { //Iterate each section from Word document for (int i = 0; i < document.Sections.Count; i++) @@ -43,11 +45,13 @@ using(WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx)) WordDocument newDocument = new WordDocument(); //Add cloned section into new Word document newDocument.Sections.Add(document.Sections[i].Clone()); - //Saves the Word document to MemoryStream - FileStream outputStream = new FileStream("Section" + i + ".docx", FileMode.OpenOrCreate, FileAccess.ReadWrite); - newDocument.Save(outputStream, FormatType.Docx); - //Closes the document - newDocument.Close(); + //Saves the Word document to a file stream + using (FileStream outputStream = new FileStream("Section" + i + ".docx", FileMode.OpenOrCreate, FileAccess.ReadWrite)) + { + newDocument.Save(outputStream, FormatType.Docx); + //Closes the document + newDocument.Close(); + } } } {% endhighlight %} @@ -63,7 +67,7 @@ using (WordDocument document = new WordDocument(@"Template.docx")) WordDocument newDocument = new WordDocument(); //Add cloned section into new Word document newDocument.Sections.Add(document.Sections[i].Clone()); - //Save and close the new Word documet + //Save and close the new Word document newDocument.Save("Section" + i + ".docx"); newDocument.Close(); } @@ -90,7 +94,7 @@ End Using You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-document/Split-by-section). -## Split by Headings +## Split by Heading The following code example illustrates how to split the Word document by using headings. @@ -99,13 +103,13 @@ The following code example illustrates how to split the Word document by using h {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Word-document/Split-by-heading/.NET/Split-by-heading/Program.cs" %} using (FileStream inputStream = new FileStream("Template.docx", FileMode.Open, FileAccess.Read)) { - //Load the template document as stream + //Load the template document as a stream using (WordDocument document = new WordDocument(inputStream, FormatType.Docx)) { WordDocument newDocument = null; WSection newSection = null; int headingIndex = 0; - /Iterate each section in the Word document. + //Iterate each section in the Word document. foreach (WSection section in document.Sections) { // Clone the section and add into new document. @@ -154,7 +158,7 @@ using (FileStream inputStream = new FileStream("Template.docx", FileMode.Open, F private static WSection AddSection(WordDocument newDocument, WSection section) { - //Create new session based on original document + //Create a new section based on the original document WSection newSection = section.Clone(); newSection.Body.ChildEntities.Clear(); //Remove the first page header. @@ -200,8 +204,8 @@ using (WordDocument doc = new WordDocument("Template.docx")) WordDocument newDocument = null; WSection newSection = null; int headingIndex = 0; - /Iterate each section in the Word document. - foreach (WSection section in document.Sections) + //Iterate each section in the Word document. + foreach (WSection section in doc.Sections) { // Clone the section and add into new document. if (newDocument != null) @@ -248,7 +252,7 @@ using (WordDocument doc = new WordDocument("Template.docx")) private static WSection AddSection(WordDocument newDocument, WSection section) { - //Create new session based on original document + //Create a new section based on the original document WSection newSection = section.Clone(); newSection.Body.ChildEntities.Clear(); //Remove the first page header. @@ -276,7 +280,7 @@ private static void AddEntity(WSection newSection, Entity entity) private static void SaveWordDocument(WordDocument newDocument, string fileName) { - //Save file stream as Word document + //Save the new Word document newDocument.Save(fileName, FormatType.Docx); //Closes the document newDocument.Close(); @@ -291,7 +295,7 @@ Using doc As WordDocument = New WordDocument("Template.docx") Dim newSection As WSection = Nothing Dim headingIndex = 0 'Iterate each section in the Word document. - For Each section As WSection In document.Sections + For Each section As WSection In doc.Sections ' Clone the section and add into new document. If newDocument IsNot Nothing Then newSection = AddSection(newDocument, section) 'Iterate each child entity in the Word document. @@ -302,7 +306,7 @@ Using doc As WordDocument = New WordDocument("Template.docx") Dim paragraph As WParagraph = TryCast(item, WParagraph) 'If paragraph has Heading 1 style, then save the traversed content as separate document. 'And create new document for new heading content. - If paragraph.StyleName Is "Heading 1" Then + If paragraph.StyleName = "Heading 1" Then If newDocument IsNot Nothing Then 'Saves the Word document Dim fileName As String = "Document" & (headingIndex + 1).ToString() & ".docx" @@ -359,7 +363,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Split by Bookmark -The following code example illustrates how to split the Word document using bookmarks. +The following code example illustrates how to split the Word document using bookmarks. The [`BookmarksNavigator.MoveToBookmark`](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html) API moves the virtual cursor to a bookmark, and [`GetContent`](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html) returns the bookmark range as a `WordDocumentPart`; calling `WordDocumentPart.GetAsWordDocument()` produces a standalone `WordDocument` containing the bookmark's contents. + {% tabs %} @@ -374,7 +379,7 @@ using (WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx) //Iterate each bookmark in Word document. foreach (Bookmark bookmark in bookmarkCollection) { - //Move the virtual cursor to the location before the end of the bookmark. + //Move the virtual cursor to the bookmark. bookmarksNavigator.MoveToBookmark(bookmark.Name); //Get the bookmark content as WordDocumentPart. WordDocumentPart documentPart = bookmarksNavigator.GetContent(); @@ -401,7 +406,7 @@ using (WordDocument document = new WordDocument("Template.docx", FormatType.Docx //Iterate each bookmark in Word document. foreach (Bookmark bookmark in bookmarkCollection) { - //Move the virtual cursor to the location before the end of the bookmark. + //Move the virtual cursor to the bookmark. bookmarksNavigator.MoveToBookmark(bookmark.Name); //Get the bookmark content as WordDocumentPart. WordDocumentPart documentPart = bookmarksNavigator.GetContent(); @@ -422,7 +427,7 @@ Using document As WordDocument = New WordDocument("Template.docx", FormatType.Do Dim bookmarkCollection As BookmarkCollection = document.Bookmarks 'Iterate each bookmark in Word document. For Each bookmark As Bookmark In bookmarkCollection - 'Move the virtual cursor to the location before the end of the bookmark. + 'Move the virtual cursor to the bookmark. bookmarksNavigator.MoveToBookmark(bookmark.Name) 'Get the bookmark content as WordDocumentPart. Dim documentPart As WordDocumentPart = bookmarksNavigator.GetContent() @@ -644,4 +649,4 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * Explore how to split a Word document by section using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/splitbysection#/tailwind). * See how to split a Word document by heading using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/splitbyheading#/tailwind). * See how to split a Word document by bookmark using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/splitbybookmark#/tailwind). -* See how to split a Word document by placeholder using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/splitbyplaceholder#/tailwind). \ No newline at end of file +* See how to split a Word document by placeholder text using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/splitbyplaceholder#/tailwind). diff --git a/Document-Processing/Word/Word-Library/NET/Working-With-Images.md b/Document-Processing/Word/Word-Library/NET/Working-With-Images.md index 9f92204443..8c46df8289 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-With-Images.md +++ b/Document-Processing/Word/Word-Library/NET/Working-With-Images.md @@ -5,9 +5,9 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Images in Word document +# Working with Images in a Word document -DocIO provides support for both inline and absolute positioned images. +DocIO provides support for both inline and absolute positioned images. * Inline images: The position of the image is constrained to the lines of text on the page. * Absolute positioned images: The images can be positioned anywhere irrespective of the lines of text. @@ -25,8 +25,8 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph firstParagraph = section.AddParagraph(); -//Adds image to the paragraph -FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.ReadWrite); +//Adds image to the paragraph +FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.Read); IWPicture picture = firstParagraph.AppendPicture(imageStream); //Sets height and width for the image picture.Height = 100; @@ -45,7 +45,7 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph firstParagraph = section.AddParagraph(); -//Adds image to the paragraph +//Adds image to the paragraph IWPicture picture = firstParagraph.AppendPicture(Image.FromFile("Image.png")); //Sets height and width for the image picture.Height = 100; @@ -63,7 +63,7 @@ Dim document As New WordDocument() Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim firstParagraph As IWParagraph = section.AddParagraph() -'Adds image to the paragraph +'Adds image to the paragraph Dim picture As IWPicture = firstParagraph.AppendPicture(Image.FromFile("Image.png")) 'Sets height and width for the image picture.Height = 100 @@ -82,12 +82,14 @@ You can download a complete working sample from [GitHub](https://github.com/Sync Image present in the document can be replaced with a new image. This can be achieved by iterating through the paragraph items. +N> To identify images by `Title`, the `Title` property must have been set on the picture in the source document (for example, by Microsoft Word's "Alt Text" panel, or by setting `picture.Title` when the picture was created with DocIO). + The following code example explains how to replace an existing image. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Replace-image/.NET/Replace-image/Program.cs" %} -FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.ReadWrite); +FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.Read); //Loads the template document WordDocument document = new WordDocument(fileStream, FormatType.Automatic); WTextBody textbody = document.Sections[0].Body; @@ -103,7 +105,7 @@ foreach (WParagraph paragraph in textbody.Paragraphs) //Replaces the image if (picture.Title == "Bookmark") { - FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.ReadWrite); + FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.Read); picture.LoadImage(imageStream); } } @@ -177,7 +179,7 @@ The following code example explains how to remove the image from the paragraph i {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Remove-image/.NET/Remove-image/Program.cs" %} -FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.ReadWrite); +FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.Read); //Loads the template document WordDocument document = new WordDocument(fileStream, FormatType.Automatic); WTextBody textbody = document.Sections[0].Body; @@ -267,7 +269,7 @@ IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); paragraph.AppendText("This paragraph has picture. "); -FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.ReadWrite); +FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.Read); //Appends new picture to the paragraph WPicture picture = paragraph.AppendPicture(imageStream) as WPicture; //Sets text wrapping style – When the wrapping style is inline, the images are not absolutely positioned. It is added next to the text range. @@ -275,8 +277,8 @@ picture.TextWrappingStyle = TextWrappingStyle.Square; //Sets horizontal and vertical origin picture.HorizontalOrigin = HorizontalOrigin.Page; picture.VerticalOrigin = VerticalOrigin.Paragraph; -//Sets width and height for the paragraph -picture.Width = 150; +//Sets width and height for the picture +picture.Width = 150; picture.Height = 100; //Sets horizontal and vertical position for the picture picture.HorizontalPosition = 200; @@ -313,7 +315,7 @@ picture.TextWrappingStyle = TextWrappingStyle.Square; //Sets horizontal and vertical origin picture.HorizontalOrigin = HorizontalOrigin.Page; picture.VerticalOrigin = VerticalOrigin.Paragraph; -//Sets width and height for the paragraph +//Sets width and height for the picture picture.Width = 150; picture.Height = 100; //Sets horizontal and vertical position for the picture @@ -350,7 +352,7 @@ picture.TextWrappingStyle = TextWrappingStyle.Square 'Sets horizontal and vertical origin picture.HorizontalOrigin = HorizontalOrigin.Page picture.VerticalOrigin = VerticalOrigin.Paragraph -'Sets width and height for the paragraph +'Sets width and height for the picture picture.Width = 150 picture.Height = 100 'Sets horizontal and vertical position for the picture @@ -378,14 +380,14 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Find an image by title -An Image with a specific title can be retrieved by iterating the paragraph items that can be used for further manipulations. +An image with a specific title can be retrieved by iterating the text body child entities (paragraphs, tables, etc.) and the paragraph items within them, so that it can be used for further manipulations. The following code example explains how images can be iterated from the document elements. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Find-an-image-by-title/.NET/Find-an-image-by-title/Program.cs" %} -FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.ReadWrite); +FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.Read); //Loads an existing Word document into DocIO instance WordDocument document = new WordDocument(fileStream, FormatType.Docx); //Gets textbody content @@ -419,7 +421,7 @@ document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Loads an existing Word document WordDocument document = new WordDocument("Template.docx"); //Gets textbody content WTextBody textBody = document.Sections[0].Body; @@ -451,7 +453,7 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Loads an existing Word document Dim document As New WordDocument("Template.docx") 'Gets textbody content Dim textBody As WTextBody = document.Sections(0).Body @@ -481,9 +483,15 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Find-an-image-by-title). -## Add Image caption +## Add image caption + +You can add caption to an image and update the caption numbers (Sequence fields) using [AddCaption](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WPicture.html#Syncfusion_DocIO_DLS_WPicture_AddCaption_System_String_Syncfusion_DocIO_CaptionNumberingFormat_Syncfusion_DocIO_CaptionPosition_) method. The `AddCaption` method accepts the following parameters: -You can add caption to an image and update the caption numbers (Sequence fields) using [AddCaption](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WPicture.html#Syncfusion_DocIO_DLS_WPicture_AddCaption_System_String_Syncfusion_DocIO_CaptionNumberingFormat_Syncfusion_DocIO_CaptionPosition_) method. +* `imageName`: The caption label name (e.g., "Figure", "Table"). +* `captionNumberingFormat`: A `CaptionNumberingFormat` value that controls how the caption number is formatted (e.g., `Roman`, `Number`). +* `captionPosition`: A `CaptionPosition` value that determines whether the caption appears before or after the image (e.g., `AfterImage`, `BeforeImage`). + +N> Call `UpdateDocumentFields()` after adding captions so that the sequence (caption number) fields are computed and rendered in the output. The following code example shows how to add caption to an image. @@ -499,29 +507,29 @@ section.PageSetup.Margins.All = 72; //Adds a paragraph to the section IWParagraph paragraph = section.AddParagraph(); paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; -//Adds image to the paragraph -FileStream imageStream = new FileStream(@"Google.png", FileMode.Open, FileAccess.ReadWrite); +//Adds image to the paragraph +FileStream imageStream = new FileStream(@"Google.png", FileMode.Open, FileAccess.Read); IWPicture picture = paragraph.AppendPicture(imageStream); //Adds Image caption -IWParagraph lastParagragh = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); +IWParagraph lastParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); //Aligns the caption -lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; +lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; //Sets after spacing -lastParagragh.ParagraphFormat.AfterSpacing = 12f; +lastParagraph.ParagraphFormat.AfterSpacing = 12f; //Sets before spacing -lastParagragh.ParagraphFormat.BeforeSpacing = 1.5f; +lastParagraph.ParagraphFormat.BeforeSpacing = 1.5f; //Adds a paragraph to the section paragraph = section.AddParagraph(); paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; -//Adds image to the paragraph -imageStream = new FileStream(@"Yahoo.png", FileMode.Open, FileAccess.ReadWrite); +//Adds image to the paragraph +imageStream = new FileStream(@"Yahoo.png", FileMode.Open, FileAccess.Read); picture = paragraph.AppendPicture(imageStream); //Adds Image caption -lastParagragh = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); +lastParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); //Aligns the caption -lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; +lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; //Sets before spacing -lastParagragh.ParagraphFormat.BeforeSpacing = 1.5f; +lastParagraph.ParagraphFormat.BeforeSpacing = 1.5f; //Updates the fields in Word document document.UpdateDocumentFields(); //Saves the Word document to MemoryStream. @@ -541,27 +549,27 @@ section.PageSetup.Margins.All = 72; //Adds a paragraph to the section IWParagraph paragraph = section.AddParagraph(); paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; -//Adds image to the paragraph +//Adds image to the paragraph IWPicture picture = paragraph.AppendPicture(Image.FromFile("Google.png")); //Adds Image caption -IWParagraph lastParagragh = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); +IWParagraph lastParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); //Aligns the caption -lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; +lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; //Sets after spacing -lastParagragh.ParagraphFormat.AfterSpacing = 12f; +lastParagraph.ParagraphFormat.AfterSpacing = 12f; //Sets before spacing -lastParagragh.ParagraphFormat.BeforeSpacing = 1.5f; +lastParagraph.ParagraphFormat.BeforeSpacing = 1.5f; //Adds a paragraph to the section paragraph = section.AddParagraph(); paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; -//Adds image to the paragraph +//Adds image to the paragraph picture = paragraph.AppendPicture(Image.FromFile("Yahoo.png")); //Adds Image caption -lastParagragh = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); +lastParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); //Aligns the caption -lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; +lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; //Sets before spacing -lastParagragh.ParagraphFormat.BeforeSpacing = 1.5f; +lastParagraph.ParagraphFormat.BeforeSpacing = 1.5f; //Updates the fields in Word document document.UpdateDocumentFields(); //Saves and closes the document @@ -579,27 +587,27 @@ section.PageSetup.Margins.All = 72 'Adds a paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center -'Adds image to the paragraph +'Adds image to the paragraph Dim picture As IWPicture = paragraph.AppendPicture(Image.FromFile("Google.png")) 'Adds Image caption -Dim lastParagragh As IWParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage) +Dim lastParagraph As IWParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage) 'Aligns the caption -lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center +lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center 'Sets after spacing -lastParagragh.ParagraphFormat.AfterSpacing = 12.0F +lastParagraph.ParagraphFormat.AfterSpacing = 12.0F 'Sets before spacing -lastParagragh.ParagraphFormat.BeforeSpacing = 1.5F +lastParagraph.ParagraphFormat.BeforeSpacing = 1.5F 'Adds a paragraph to the section paragraph = section.AddParagraph paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center -'Adds image to the paragraph +'Adds image to the paragraph picture = paragraph.AppendPicture(Image.FromFile("Yahoo.png")) 'Adds Image caption -lastParagragh = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage) +lastParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage) 'Aligns the caption -lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center +lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center 'Sets before spacing -lastParagragh.ParagraphFormat.BeforeSpacing = 1.5F +lastParagraph.ParagraphFormat.BeforeSpacing = 1.5F 'Updates the fields in Word document document.UpdateDocumentFields() 'Saves and closes the document @@ -619,14 +627,14 @@ By executing the above code example, it generates output Word document as follow To add an SVG image to a paragraph in a Word document using Syncfusion® DocIO, you can use the [AppendPicture](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.IWParagraph.html#Syncfusion_DocIO_DLS_IWParagraph_AppendPicture_System_Byte___System_Byte___) API. -N> To preserve the SVG image in the Word document, pass both the SVG image data and the equivalent bitmap image bytes to DocIO. +N> To preserve the SVG image in the Word document, pass both the SVG image data and a fallback raster image (e.g., PNG) as byte arrays to DocIO. The fallback image is used by viewers that do not support SVG. The following code example shows how to add an SVG image in a Word document. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-svg-image/.NET/Add-svg-image/Program.cs" %} -///Create a new Word document. +//Create a new Word document. using (WordDocument document = new WordDocument()) { //Add a new section to the document. @@ -643,8 +651,10 @@ using (WordDocument document = new WordDocument()) picture.Height = 100; picture.Width = 100; //Save the Word document to MemoryStream. - MemoryStream stream = new MemoryStream(); - document.Save(stream, FormatType.Docx); + using (MemoryStream stream = new MemoryStream()) + { + document.Save(stream, FormatType.Docx); + } } {% endhighlight %} @@ -677,12 +687,12 @@ Using document As New WordDocument() Dim section As IWSection = document.AddSection() ' Add a new paragraph to the section. Dim firstParagraph As IWParagraph = section.AddParagraph() - ' Get the PNG image as a byte array. + ' Get the fallback image (PNG) as a byte array. Dim imageBytes As Byte() = File.ReadAllBytes("Buyers.png") ' Get the SVG image as a byte array. Dim svgData As Byte() = File.ReadAllBytes("Buyers.svg") ' Add SVG image to the paragraph. - Dim picture As IWPicture = firstParagraph.AppendPicture(svgData, ImageType.Metafile, imageBytes) + Dim picture As IWPicture = firstParagraph.AppendPicture(svgData, imageBytes) ' Set height and width for the image. picture.Height = 100 picture.Width = 100 @@ -695,12 +705,9 @@ End Using You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Add-svg-image/.NET). -## Online Demo - -* Explore how to insert an image into the Word document using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/imageinsertion#/tailwind). - ## See Also +* [How to insert an image into a Word document (live demo)](https://document.syncfusion.com/demos/word/imageinsertion#/tailwind) using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO). * [How to extract Images from Word document in C# and VB?](https://support.syncfusion.com/kb/article/11829/how-to-extract-images-from-word-document-in-c-and-vb) * [How to replace an image with same size in a Word document](https://support.syncfusion.com/kb/article/17796/how-to-replace-an-image-with-same-size-in-a-word-document) * [How to find and replace an image title in a Word document?](https://support.syncfusion.com/kb/article/18808/how-to-find-and-replace-an-image-title-in-a-word-document) diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Bookmarks.md b/Document-Processing/Word/Word-Library/NET/Working-with-Bookmarks.md index 178a4f920e..89606c6967 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Bookmarks.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Bookmarks.md @@ -9,8 +9,8 @@ documentation: UG A bookmark identifies a location or a selection of text within a document that you can name and identify for future reference. -In Essential® DocIO, bookmark is represented by [Bookmark](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html) instance that is a pair of [BookmarkStart](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkStart.html) and [BookmarkEnd](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkEnd.html). -[BookmarkStart](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkStart.html) represents start point of a bookmark and [BookmarkEnd](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkEnd.html) represents end point of a bookmark. Every Word document contains a collection of bookmarks that are accessible through the [Bookmarks](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_Bookmarks) property of [WordDocument](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html) class. +In Essential® DocIO, a bookmark is represented by a [Bookmark](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html) instance that is a pair of [BookmarkStart](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkStart.html) and [BookmarkEnd](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkEnd.html). +[BookmarkStart](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkStart.html) represents the start point of a bookmark and [BookmarkEnd](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkEnd.html) represents the end point of a bookmark. Every Word document contains a collection of bookmarks that are accessible through the [Bookmarks](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_Bookmarks) property of [WordDocument](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html) class. To quickly start working with bookmarks in a Word document, please check out this video: {% youtube "https://www.youtube.com/watch?v=8C2-aS8tdLU" %} @@ -34,7 +34,7 @@ IWParagraph paragraph = document.LastParagraph; paragraph.AppendBookmarkStart("Northwind"); //Adds a text between the bookmark start and end into paragraph paragraph.AppendText("The Northwind sample database (Northwind.mdb) is included with all versions of Access. It provides data you can experiment with and database objects that demonstrate features you might want to implement in your own databases."); -//Adds a new bookmark end into paragraph with name " Northwind " +//Adds a new bookmark end into paragraph with name "Northwind" paragraph.AppendBookmarkEnd("Northwind"); //Adds a text after the bookmark end paragraph.AppendText(" Using Northwind, you can become familiar with how a relational database is structured and how the database objects work together to help you enter, store, manipulate, and print your data."); @@ -56,14 +56,14 @@ IWParagraph paragraph = document.LastParagraph; paragraph.AppendBookmarkStart("Northwind"); //Adds a text between the bookmark start and end into paragraph paragraph.AppendText("The Northwind sample database (Northwind.mdb) is included with all versions of Access. It provides data you can experiment with and database objects that demonstrate features you might want to implement in your own databases."); -//Adds a new bookmark end into paragraph with name " Northwind " +//Adds a new bookmark end into paragraph with name "Northwind" paragraph.AppendBookmarkEnd("Northwind"); //Adds a text after the bookmark end paragraph.AppendText(" Using Northwind, you can become familiar with how a relational database is structured and how the database objects work together to help you enter, store, manipulate, and print your data."); //Saves the document in the given name and format document.Save("Bookmarks.docx", FormatType.Docx); -//Releases the resources occupied by WordDocument instance -document.Close(); +//Releases the resources occupied by the WordDocument instance +document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} @@ -77,14 +77,14 @@ Dim paragraph As IWParagraph = document.LastParagraph paragraph.AppendBookmarkStart("Northwind") 'Adds a text between the bookmark start and end into paragraph paragraph.AppendText("The Northwind sample database (Northwind.mdb) is included with all versions of Access. It provides data you can experiment with and database objects that demonstrate features you might want to implement in your own databases.") -'Adds a new bookmark end into paragraph with name " Northwind " +'Adds a new bookmark end into paragraph with name "Northwind" paragraph.AppendBookmarkEnd("Northwind") 'Adds a text after the bookmark end paragraph.AppendText(" Using Northwind, you can become familiar with how a relational database is structured and how the database objects work together to help you enter, store, manipulate, and print your data.") 'Saves the document in the given name and format document.Save("Bookmarks.docx", FormatType.Docx) -'Releases the resources occupied by WordDocument instance -document.Close() +'Releases the resources occupied by the WordDocument instance +document.Close() {% endhighlight %} {% endtabs %} @@ -103,7 +103,7 @@ FileStream fileStreamPath = new FileStream(@"Bookmarks.docx", FileMode.Open, Fil WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); //Gets the bookmark instance by using FindByName method of BookmarkCollection with bookmark name Syncfusion.DocIO.DLS.Bookmark bookmark = document.Bookmarks.FindByName("Northwind"); -//Accesses the bookmark start’s owner paragraph by using bookmark and changes its back color +//Accesses the bookmark start's owner paragraph by using the bookmark and changes its back color bookmark.BookmarkStart.OwnerParagraph.ParagraphFormat.BackColor = Color.AliceBlue; //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); @@ -117,7 +117,7 @@ document.Close(); WordDocument document = new WordDocument("Bookmarks.docx", FormatType.Docx); //Gets the bookmark instance by using FindByName method of BookmarkCollection with bookmark name Syncfusion.DocIO.DLS.Bookmark bookmark = document.Bookmarks.FindByName("Northwind"); -//Accesses the bookmark start’s owner paragraph by using bookmark and changes its back color +//Accesses the bookmark start's owner paragraph by using the bookmark and changes its back color bookmark.BookmarkStart.OwnerParagraph.ParagraphFormat.BackColor = Color.AliceBlue; document.Save("Result.docx", FormatType.Docx); document.Close(); @@ -128,7 +128,7 @@ document.Close(); Dim document As New WordDocument("Bookmarks.docx", FormatType.Docx) 'Gets the bookmark instance by using FindByName method of BookmarkCollection with bookmark name Dim bookmark As Syncfusion.DocIO.DLS.Bookmark = document.Bookmarks.FindByName("Northwind") -'Accesses the bookmark start’s owner paragraph by using bookmark and changes its back color +'Accesses the bookmark start's owner paragraph by using the bookmark and changes its back color bookmark.BookmarkStart.OwnerParagraph.ParagraphFormat.BackColor = Color.AliceBlue document.Save("Result.docx", FormatType.Docx) document.Close() @@ -138,9 +138,9 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Bookmarks/Get-an-instance-of-bookmark). -## Removing a Bookmark from Word document +## Removing a bookmark from a Word document -The following code example shows how to remove a bookmark from Word document. +The following code example shows how to remove a bookmark from a Word document. {% tabs %} @@ -185,14 +185,14 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Bookmarks/Remove-bookmark-from-Word-document). -## Retrieving contents within a bookmark +## Retrieving contents within a bookmark -[BookmarkNavigator](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html) is used for navigating to a bookmark in a Word document. You can retrieve, replace and delete the content of a specified bookmark by using [BookmarkNavigator](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html). +[BookmarkNavigator](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html) is used for navigating to a bookmark in a Word document. You can retrieve, replace, and delete the content of a specified bookmark by using [BookmarkNavigator](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html). You can get the content between bookmark start and bookmark end of the specified bookmark in two ways: -1. You can use [GetBookmarkContent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html#Syncfusion_DocIO_DLS_BookmarksNavigator_GetBookmarkContent) method for retrieving content as collection of body items when the bookmark start and bookmark end are preserved in a single section. -2. You can use [GetContent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html#Syncfusion_DocIO_DLS_BookmarksNavigator_GetContent) method for retrieving content as collection of sections when the bookmark start and bookmark end are preserved in different sections. +1. You can use [GetBookmarkContent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html#Syncfusion_DocIO_DLS_BookmarksNavigator_GetBookmarkContent) method for retrieving content as a collection of body items when the bookmark start and bookmark end are preserved in a single section. +2. You can use [GetContent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html#Syncfusion_DocIO_DLS_BookmarksNavigator_GetContent) method for retrieving content as a collection of sections when the bookmark start and bookmark end are preserved in different sections. The following code example shows how to retrieve the specified bookmark content by using [GetBookmarkContent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html#Syncfusion_DocIO_DLS_BookmarksNavigator_GetBookmarkContent) method in a Word document. @@ -317,7 +317,7 @@ wordDocumentPart.Close() 'Close the template Word document document.Close() newDocument.Save("Result.docx", FormatType.Docx) -'Releases the resources hold by WordDocument instance +'Releases the resources held by the WordDocument instance newDocument.Close() {% endhighlight %} @@ -325,12 +325,12 @@ newDocument.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Bookmarks/Get-bookmark-content-as-document-part). -## Retrieving bookmark contents within a table +## Retrieving bookmark contents within a table You can select the column range for bookmarks inside the tables in Word documents by using [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) and [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) properties. -N> 1. [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) and [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) properties are valid to select table cells, only when the respective bookmark end and start is present within the same row or next rows of the same table. -N> 2. [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) property denotes the top left corner cell and [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) property denotes the bottom right corner cell of rectangular selection region since you can only select the content as a rectangular selection by using bookmarks within the table. +N> 1. [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) and [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) properties are valid to select table cells, only when the respective bookmark end and start are present within the same row or next rows of the same table. +N> 2. [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) property denotes the top left corner cell and [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) property denotes the bottom right corner cell of rectangular selection region, because bookmark selections inside a table are always rectangular. N> 3. [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) property selects from the first cell of the respective row when this property value is negative (or) greater than the cells of a row (or) greater than the [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) value. N> 4. [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) property selects till last cell of the respective row when this property value is negative (or) greater than the cells of a row (or) less than the [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) value. @@ -357,9 +357,11 @@ bookmarkNavigator.CurrentBookmark.LastColumn = 4; TextBodyPart part = bookmarkNavigator.GetBookmarkContent(); //Adds new section document.AddSection(); -for (int i = 0; i < part.BodyItems.Count; i++) //Adds the retrieved content into another new section -document.LastSection.Body.ChildEntities.Add(part.BodyItems[i]); +for (int i = 0; i < part.BodyItems.Count; i++) +{ + document.LastSection.Body.ChildEntities.Add(part.BodyItems[i]); +} //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); document.Save(stream, FormatType.Docx); @@ -388,9 +390,11 @@ TextBodyPart part = bookmarkNavigator.GetBookmarkContent(); document.AddSection(); //Adds the retrieved content into another new section for (int i = 0; i < part.BodyItems.Count; i++) -document.LastSection.Body.ChildEntities.Add(part.BodyItems[i]); +{ + document.LastSection.Body.ChildEntities.Add(part.BodyItems[i]); +} //Saves and closes the Word document -document.Save("Sample.docx", FormatType.Docx); +document.Save("Result.docx", FormatType.Docx); document.Close(); {% endhighlight %} @@ -630,6 +634,8 @@ FileStream imageStream = new FileStream("Northwind.png", FileMode.Open, FileAcce picture.LoadImage(imageStream); picture.WidthScale = 50; picture.HeightScale = 50; +//Disposes the image stream +imageStream.Dispose(); //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); document.Save(stream, FormatType.Docx); @@ -904,7 +910,7 @@ FileStream fileStreamPath = new FileStream("Bookmarks.docx", FileMode.Open, File WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); //Creates the bookmark navigator instance to access the bookmark BookmarksNavigator bookmarkNavigator = new BookmarksNavigator(document); -//Moves the virtual cursor to the location before the end of the bookmark "Northwind " +//Moves the virtual cursor to the location before the end of the bookmark "Northwind" bookmarkNavigator.MoveToBookmark("Northwind"); //Deletes bookmark content without deleting the format in the target document. bookmarkNavigator.DeleteBookmarkContent(false); @@ -920,7 +926,7 @@ document.Close(); WordDocument document = new WordDocument("Bookmarks.docx", FormatType.Docx); //Creates the bookmark navigator instance to access the bookmark BookmarksNavigator bookmarkNavigator = new BookmarksNavigator(document); -//Moves the virtual cursor to the location before the end of the bookmark "Northwind " +//Moves the virtual cursor to the location before the end of the bookmark "Northwind" bookmarkNavigator.MoveToBookmark("Northwind"); //Deletes bookmark content without deleting the format in the target document. bookmarkNavigator.DeleteBookmarkContent(false); @@ -951,13 +957,13 @@ You can replace the contents of an existing bookmark with simple text, [TextBody N> You cannot replace the multi section contents into a bookmark within table in Word documents. Use "for loop" instead of "foreach loop" to iterate through document elements when replacing the bookmark contents to avoid “collection modified exception”, as there is a chance for modification in the document elements on replacing the bookmark contents. -As per Microsoft Word behavior, you cannot replace the bookmark contents when the bookmark start and end is not in a same table as following cases: +As per Microsoft Word behavior, you cannot replace the bookmark contents when the bookmark start and end are not in the same table, as in the following cases: -Case 1 +Case 1: Bookmark start and end are present in different tables. ![Bookmark start and end present in different tables](WorkingwithBookmarks_images/WorkingwithBookmarks_img1.jpeg) -Case 2 +Case 2: Bookmark start is placed outside the table and the end is inside the table. ![Bookmark start placed outside table and end in table](WorkingwithBookmarks_images/WorkingwithBookmarks_img2.jpeg) @@ -1055,13 +1061,13 @@ bookmarkNavigator.MoveToBookmark("Northwind"); //Gets the bookmark content as WordDocumentPart WordDocumentPart wordDocumentPart = bookmarkNavigator.GetContent(); //Loads the Word document with bookmark NorthwindDB -FileStream fileStreamPath = new FileStream("Bookmarks.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); +FileStream fileStream = new FileStream("Bookmarks.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); +WordDocument document = new WordDocument(fileStream, FormatType.Docx); //Creates the bookmark navigator instance to access the bookmark bookmarkNavigator = new BookmarksNavigator(document); //Moves the virtual cursor to the location before the end of the bookmark "NorthwindDB" bookmarkNavigator.MoveToBookmark("NorthwindDB"); -//Replaces the bookmark content with word body part +//Replaces the bookmark content with WordDocumentPart bookmarkNavigator.ReplaceContent(wordDocumentPart); //Close the WordDocumentPart instance wordDocumentPart.Close(); @@ -1089,7 +1095,7 @@ WordDocument document = new WordDocument("Bookmarks.docx", FormatType.Docx); bookmarkNavigator = new BookmarksNavigator(document); //Moves the virtual cursor to the location before the end of the bookmark "NorthwindDB" bookmarkNavigator.MoveToBookmark("NorthwindDB"); -//Replaces the bookmark content with word body part +//Replaces the bookmark content with WordDocumentPart bookmarkNavigator.ReplaceContent(wordDocumentPart); //Close the WordDocumentPart instance wordDocumentPart.Close(); @@ -1114,7 +1120,7 @@ Dim document As New WordDocument("Bookmarks.docx", FormatType.Docx) bookmarkNavigator = New BookmarksNavigator(document) 'Moves the virtual cursor to the location before the end of the bookmark "NorthwindDB" bookmarkNavigator.MoveToBookmark("NorthwindDB") -'Replaces the bookmark content with word body part +'Replaces the bookmark content with WordDocumentPart bookmarkNavigator.ReplaceContent(wordDocumentPart) 'Close the WordDocumentPart instance wordDocumentPart.Close() diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md b/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md index 9fddd4cb80..0c12a2e6bb 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md @@ -9,9 +9,9 @@ documentation: UG Fields in a Word document are placeholders for data that might change on field update. Fields are represented by the [WField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WField.html) and [WFieldMark](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WFieldMark.html) instances in DocIO. A field in a Word document contains field codes, field separator, field result, and field end. -To learn various types of Microsoft Word supported fields and their syntax,refer to the [MSDN article](https://support.microsoft.com/en-us/office/list-of-field-codes-in-word-1ad6d91a-55a7-4a8d-b535-cf7888659a51?ui=en-us&rs=en-us&ad=us#) +To learn various types of Microsoft Word supported fields and their syntax, refer to the [MSDN article](https://support.microsoft.com/en-us/office/list-of-field-codes-in-word-1ad6d91a-55a7-4a8d-b535-cf7888659a51?ui=en-us&rs=en-us&ad=us#) -From v16.1.0.24, the entire field code is included in Document Object Model(DOM). Hence, adding a field will automatically include the following elements in DOM: +From v16.1.0.24, the entire field code is included in Document Object Model (DOM). Hence, adding a field will automatically include the following elements in DOM: 1. [WField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WField.html): Represents the starting of a Field. @@ -505,7 +505,7 @@ paragraph = section.AddParagraph() as WParagraph; //Gets the collection of bookmark start in the word document List items = document.GetCrossReferenceItems(ReferenceType.Bookmark); paragraph.AppendText("Bookmark Cross Reference starts here "); -//Appends the cross reference for bookmark “Title” with ContentText as reference kind +//Appends the cross reference for bookmark "Title" with ContentText as reference kind paragraph.AppendCrossReference(ReferenceType.Bookmark, ReferenceKind.ContentText, items[0], true, false, false, string.Empty); //Updates the document Fields document.UpdateDocumentFields(); @@ -533,7 +533,7 @@ paragraph = section.AddParagraph() as WParagraph; //Gets the collection of bookmark start in the word document List items = document.GetCrossReferenceItems(ReferenceType.Bookmark); paragraph.AppendText("Bookmark Cross Reference starts here "); -//Appends the cross reference for bookmark “Title” with ContentText as reference kind +//Appends the cross reference for bookmark "Title" with ContentText as reference kind paragraph.AppendCrossReference(ReferenceType.Bookmark, ReferenceKind.ContentText, items[0], true, false, false, string.Empty); //Updates the document Fields document.UpdateDocumentFields(); @@ -558,7 +558,7 @@ paragraph = TryCast(section.AddParagraph(), WParagraph) 'Gets the collection of bookmark start in the word document Dim items As List(Of Entity) = document.GetCrossReferenceItems(ReferenceType.Bookmark) paragraph.AppendText("Bookmark Cross Reference starts here ") -'Appends the cross reference for bookmark “Title” with ContentText as reference kind +'Appends the cross reference for bookmark "Title" with ContentText as reference kind paragraph.AppendCrossReference(ReferenceType.Bookmark, ReferenceKind.ContentText, items(0), True, False, False, String.Empty) 'Updates the document Fields document.UpdateDocumentFields() @@ -646,14 +646,14 @@ You can download a complete working sample from [GitHub](https://github.com/Sync N> XE (Index Entry) fields cannot be unlinked. ## Sequence Field -You can use the Sequence (SEQ) field to automatically numbers the chapters, tables, figures, and other items in a Word document. When you add, delete, or move an item in Word document (along with SEQ fields), you can update the remaining SEQ fields with a new sequence. +You can use the Sequence (SEQ) field to automatically number the chapters, tables, figures, and other items in a Word document. When you add, delete, or move an item in Word document (along with SEQ fields), you can update the remaining SEQ fields with a new sequence. You can format the SEQ field using below switches. \c -- Repeats the closest preceding sequence number. \h -- Hides the field result unless a general-formatting-switch is also present. \n -- Inserts the next sequence number for the specified items. This is the default switch. -\r -- Resets the sequence number to the number following “r”. +\r -- Resets the sequence number to the number following "r". \s -- Resets the sequence number at the heading level following the "s". ### Apply Number format @@ -841,7 +841,7 @@ seqField.BookmarkName = "BkmkPurchase"; paragraph = document.LastSection.Paragraphs[5] as WParagraph; seqField = paragraph.ChildEntities[1] as WSeqField; //Adds bookmark reference to the sequence field -seqField.BookmarkName = "BkkmUnitPrice"; +seqField.BookmarkName = "BkmkUnitPrice"; //Updates the document fields document.UpdateDocumentFields(); //Saves the Word document to MemoryStream @@ -852,7 +852,7 @@ document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Opens an exixting word document +//Opens an existing word document WordDocument document = new WordDocument("Template.docx"); //Accesses sequence field in the document WParagraph paragraph = document.LastSection.Body.ChildEntities[4] as WParagraph; @@ -863,7 +863,7 @@ seqField.BookmarkName = "BkmkPurchase"; paragraph = document.LastSection.Paragraphs[5] as WParagraph; seqField = paragraph.ChildEntities[1] as WSeqField; //Adds bookmark reference to the sequence field -seqField.BookmarkName = "BkkmUnitPrice"; +seqField.BookmarkName = "BkmkUnitPrice"; //Updates the document fields document.UpdateDocumentFields(); //Saves and closes the Word document @@ -872,7 +872,7 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Opens an exixting word document +'Opens an existing word document Dim document As WordDocument = New WordDocument("Template.docx") 'Accesses sequence field in the document Dim paragraph As WParagraph = CType(document.LastSection.Body.ChildEntities(4), WParagraph) @@ -883,7 +883,7 @@ seqField.BookmarkName = "BkmkPurchase" paragraph = CType(document.LastSection.Paragraphs(5), WParagraph) seqField = CType(paragraph.ChildEntities(1), WSeqField) 'Adds bookmark reference to the sequence field -seqField.BookmarkName = "BkkmUnitPrice" +seqField.BookmarkName = "BkmkUnitPrice" 'Updates the document fields document.UpdateDocumentFields() 'Saves and closes the Word document @@ -900,7 +900,7 @@ By executing the above code example, it generates output Word document as follow ![Output document of Bookmark referred in SEQ field](workingwithfields_images/file-formats-word-seql-field-bookmark-output.png) ### Reset numbering -You can reset the numbering for sequence field (\r) using [ResetNumber](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSeqField.html#Syncfusion_DocIO_DLS_WSeqField_ResetNumber) property and reset the numbering based on heading level (\s) in the Word document using [ResetHeadingLevel](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSeqField.html#Syncfusion_DocIO_DLS_WSeqField_ResetHeadingLevel) property. +You can reset the numbering for sequence field (\r) using [ResetNumber](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSeqField.html#Syncfusion_DocIO_DLS_WSeqField_ResetNumber) property and reset the numbering based on the heading level (\s) in the Word document using [ResetHeadingLevel](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSeqField.html#Syncfusion_DocIO_DLS_WSeqField_ResetHeadingLevel) property. The following code example shows how to reset the numbering for sequence field. @@ -1534,7 +1534,7 @@ WordDocument document = CreateDocument(); //Accesses sequence field in the document WTable table = document.LastSection.Body.ChildEntities[1] as WTable; WSeqField field = ((table[2, 1].ChildEntities[0] as WParagraph).ChildEntities[0] as WSeqField); -//Enables a flag to to hide the sequence field result +//Enables a flag to hide the sequence field result field.HideResult = true; //Accesses sequence field in the document field = ((table[4, 1].ChildEntities[0] as WParagraph).ChildEntities[0] as WSeqField); @@ -1555,7 +1555,7 @@ WordDocument document = CreateDocument(); //Accesses sequence field in the document WTable table = document.LastSection.Body.ChildEntities[1] as WTable; WSeqField field = ((table[2, 1].ChildEntities[0] as WParagraph).ChildEntities[0] as WSeqField); -//Enables a flag to to hide the sequence field result +//Enables a flag to hide the sequence field result field.HideResult = true; //Accesses sequence field in the document field = ((table[4, 1].ChildEntities[0] as WParagraph).ChildEntities[0] as WSeqField); @@ -1574,7 +1574,7 @@ Dim document As WordDocument = CreateDocument() 'Accesses sequence field in the document Dim table As WTable = CType(document.LastSection.Body.ChildEntities(1), WTable) Dim field As WSeqField = CType(CType(table(2, 1).ChildEntities(0), WParagraph).ChildEntities(0), WSeqField) -'Enables a flag to to hide the sequence field result +'Enables a flag to hide the sequence field result field.HideResult = True 'Accesses sequence field in the document field = CType(CType(table(4, 1).ChildEntities(0), WParagraph).ChildEntities(0), WSeqField) @@ -1779,7 +1779,7 @@ document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Opens an exixting word document +//Opens an existing word document WordDocument document = new WordDocument("Template.docx"); //Accesses sequence field in the document WParagraph paragraph = document.LastSection.Body.ChildEntities[4] as WParagraph; @@ -1794,7 +1794,7 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Opens an exixting word document +'Opens an existing word document Dim document As WordDocument = New WordDocument("Template.docx") 'Accesses sequence field in the document diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Hyperlinks.md b/Document-Processing/Word/Word-Library/NET/Working-with-Hyperlinks.md index 9213d5fa2b..902195a589 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Hyperlinks.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Hyperlinks.md @@ -5,45 +5,53 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Hyperlinks in Word Library +# Working with Hyperlinks in the Word Library -Hyperlinks have two parts: the address and display content. +Hyperlinks have two parts: the address and the display content. The Syncfusion® .NET Word (DocIO) library supports the following hyperlink types: + +* Web hyperlink +* Email hyperlink +* File hyperlink +* Bookmark hyperlink +* Image hyperlink ## Web hyperlink -The following code example explains how to insert a web link. +The following code example shows how to insert a web link. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-web-link/.NET/Add-web-link/Program.cs" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("Web Hyperlink: "); +paragraph.AppendText("Web hyperlink: "); paragraph = section.AddParagraph(); -//Appends web hyperlink to the paragraph -IWField field = paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink); -//Saves the Word document to MemoryStream. -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document. +//Appends a web hyperlink to the paragraph +paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink); +//Saves the Word document to a MemoryStream +using (MemoryStream stream = new MemoryStream()) +{ + document.Save(stream, FormatType.Docx); +} +//Closes the Word document document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("Web Hyperlink: "); +paragraph.AppendText("Web hyperlink: "); paragraph = section.AddParagraph(); -//Appends web hyperlink to the paragraph -IWField field = paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink); +//Appends a web hyperlink to the paragraph +paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink); //Saves the Word document document.Save("Sample.docx", FormatType.Docx); //Closes the document @@ -51,16 +59,16 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Creates a new Word document Dim document As New WordDocument() 'Adds new section to the document Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -paragraph.AppendText("Web Hyperlink: ") +paragraph.AppendText("Web hyperlink: ") paragraph = section.AddParagraph() -'Appends web hyperlink to the paragraph -Dim field As IWField = paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink) +'Appends a web hyperlink to the paragraph +paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink) 'Saves the Word document document.Save("Sample.docx", FormatType.Docx) 'Closes the document @@ -73,12 +81,12 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Email hyperlink -The following code example illustrates how to add an email link. +The following code example shows how to add an email link. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-an-email-link/.NET/Add-an-email-link/Program.cs" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); @@ -86,17 +94,19 @@ IWSection section = document.AddSection(); IWParagraph paragraph = section.AddParagraph(); paragraph.AppendText("Email hyperlink: "); paragraph = section.AddParagraph(); -//Appends Email hyperlink to the paragraph +//Appends an email hyperlink to the paragraph paragraph.AppendHyperlink("mailto:sales@syncfusion.com", "Sales", HyperlinkType.EMailLink); -//Saves the Word document to MemoryStream. -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document. +//Saves the Word document to a MemoryStream +using (MemoryStream stream = new MemoryStream()) +{ + document.Save(stream, FormatType.Docx); +} +//Closes the Word document document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); @@ -104,8 +114,8 @@ IWSection section = document.AddSection(); IWParagraph paragraph = section.AddParagraph(); paragraph.AppendText("Email hyperlink: "); paragraph = section.AddParagraph(); -//Appends Email hyperlink to the paragraph -paragraph.AppendHyperlink("mailto:sales@syncfusion.com","Sales" , HyperlinkType.EMailLink); +//Appends an email hyperlink to the paragraph +paragraph.AppendHyperlink("mailto:sales@syncfusion.com", "Sales", HyperlinkType.EMailLink); //Saves the Word document document.Save("Sample.docx", FormatType.Docx); //Closes the document @@ -113,7 +123,7 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Creates a new Word document Dim document As New WordDocument() 'Adds new section to the document Dim section As IWSection = document.AddSection() @@ -121,8 +131,8 @@ Dim section As IWSection = document.AddSection() Dim paragraph As IWParagraph = section.AddParagraph() paragraph.AppendText("Email hyperlink: ") paragraph = section.AddParagraph() -'Appends Email hyperlink to the paragraph -paragraph.AppendHyperlink("mailto:sales@syncfusion.com","Sales" , HyperlinkType.EMailLink) +'Appends an email hyperlink to the paragraph +paragraph.AppendHyperlink("mailto:sales@syncfusion.com", "Sales", HyperlinkType.EMailLink) 'Saves the Word document document.Save("Sample.docx", FormatType.Docx) 'Closes the document @@ -135,39 +145,41 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## File hyperlink -The following code example explains how to add a file hyperlink. +The following code example shows how to add a file hyperlink. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-file-hyperlink/.NET/Add-file-hyperlink/Program.cs" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("File Hyperlinks: "); +paragraph.AppendText("File hyperlink: "); paragraph = section.AddParagraph(); -//Appends hyperlink field to the paragraph +//Appends a file hyperlink to the paragraph paragraph.AppendHyperlink(@"Template.docx", "File", HyperlinkType.FileLink); -//Saves the Word document to MemoryStream. -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document. +//Saves the Word document to a MemoryStream +using (MemoryStream stream = new MemoryStream()) +{ + document.Save(stream, FormatType.Docx); +} +//Closes the Word document document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("File Hyperlinks: "); +paragraph.AppendText("File hyperlink: "); paragraph = section.AddParagraph(); -//Appends hyperlink field to the paragraph -paragraph.AppendHyperlink(@"Template.docx","File", HyperlinkType.FileLink); +//Appends a file hyperlink to the paragraph +paragraph.AppendHyperlink(@"Template.docx", "File", HyperlinkType.FileLink); //Saves the Word document document.Save("Sample.docx", FormatType.Docx); //Closes the document @@ -175,15 +187,15 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Creates a new Word document Dim document As New WordDocument() 'Adds new section to the document Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -paragraph.AppendText("File Hyperlinks: ") +paragraph.AppendText("File hyperlink: ") paragraph = section.AddParagraph() -'Appends hyperlink field to the paragraph +'Appends a file hyperlink to the paragraph paragraph.AppendHyperlink("Template.docx", "File", HyperlinkType.FileLink) 'Saves the Word document document.Save("Sample.docx", FormatType.Docx) @@ -202,45 +214,47 @@ The following code example explains how to add a bookmark hyperlink. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-bookmark-hyperlink/.NET/Add-bookmark-hyperlink/Program.cs" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Creates new Bookmark +//Creates a new bookmark paragraph.AppendBookmarkStart("Introduction"); paragraph.AppendText("Hyperlink"); paragraph.AppendBookmarkEnd("Introduction"); paragraph.AppendText("\nA hyperlink is a reference or navigation element in a document to another section of the same document or to another document that may be on or part of a (different) domain."); paragraph = section.AddParagraph(); -paragraph.AppendText("Bookmark Hyperlink: "); +paragraph.AppendText("Bookmark hyperlink: "); paragraph = section.AddParagraph(); -//Appends Bookmark hyperlink to the paragraph +//Appends a bookmark hyperlink to the paragraph paragraph.AppendHyperlink("Introduction", "Bookmark", HyperlinkType.Bookmark); -//Saves the Word document to MemoryStream. -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document. +//Saves the Word document to a MemoryStream +using (MemoryStream stream = new MemoryStream()) +{ + document.Save(stream, FormatType.Docx); +} +//Closes the Word document document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Creates new Bookmark +//Creates a new bookmark paragraph.AppendBookmarkStart("Introduction"); paragraph.AppendText("Hyperlink"); paragraph.AppendBookmarkEnd("Introduction"); paragraph.AppendText("\nA hyperlink is a reference or navigation element in a document to another section of the same document or to another document that may be on or part of a (different) domain."); paragraph = section.AddParagraph(); -paragraph.AppendText("Bookmark Hyperlink: "); +paragraph.AppendText("Bookmark hyperlink: "); paragraph = section.AddParagraph(); -//Appends Bookmark hyperlink to the paragraph +//Appends a bookmark hyperlink to the paragraph paragraph.AppendHyperlink("Introduction", "Bookmark", HyperlinkType.Bookmark); //Saves the Word document document.Save("Sample.docx", FormatType.Docx); @@ -249,21 +263,21 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Creates a new Word document Dim document As New WordDocument() 'Adds new section to the document Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -'Creates new Bookmark +'Creates a new bookmark paragraph.AppendBookmarkStart("Introduction") paragraph.AppendText("Hyperlink") paragraph.AppendBookmarkEnd("Introduction") paragraph.AppendText(vbLf & "A hyperlink is a reference or navigation element in a document to another section of the same document or to another document that may be on or part of a (different) domain.") paragraph = section.AddParagraph() -paragraph.AppendText("Bookmark Hyperlink: ") +paragraph.AppendText("Bookmark hyperlink: ") paragraph = section.AddParagraph() -'Appends Bookmark hyperlink to the paragraph +'Appends a bookmark hyperlink to the paragraph paragraph.AppendHyperlink("Introduction", "Bookmark", HyperlinkType.Bookmark) 'Saves the Word document document.Save("Sample.docx", FormatType.Docx) @@ -277,47 +291,51 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Image hyperlink -The display content for the Hyperlinks can also be an image that may redirect to some other contents. +The display content for a hyperlink can also be an image that redirects to other content. The following code example explains how to add an image hyperlink. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-image-hyperlink/.NET/Add-image-hyperlink/Program.cs" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("Image Hyperlink"); +paragraph.AppendText("Image hyperlink: "); paragraph = section.AddParagraph(); -//Creates a new image instance and load image +//Creates a new image instance and loads the image WPicture picture = new WPicture(document); -FileStream imageStream = new FileStream(@"Mountain-200.jpg", FileMode.Open, FileAccess.ReadWrite); -picture.LoadImage(imageStream); -//Appends new image hyperlink to the paragraph +using (FileStream imageStream = new FileStream(@"Mountain-200.jpg", FileMode.Open, FileAccess.ReadWrite)) +{ + picture.LoadImage(imageStream); +} +//Appends an image hyperlink to the paragraph paragraph.AppendHyperlink("http://www.syncfusion.com", picture, HyperlinkType.WebLink); -//Saves the Word document to MemoryStream. -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document. +//Saves the Word document to a MemoryStream +using (MemoryStream stream = new MemoryStream()) +{ + document.Save(stream, FormatType.Docx); +} +//Closes the Word document document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("Image Hyperlink"); +paragraph.AppendText("Image hyperlink: "); paragraph = section.AddParagraph(); -//Creates a new image instance and load image +//Creates a new image instance and loads the image WPicture picture = new WPicture(document); picture.LoadImage(Image.FromFile("Image.png")); -//Appends new image hyperlink to the paragraph +//Appends an image hyperlink to the paragraph paragraph.AppendHyperlink("http://www.syncfusion.com", picture, HyperlinkType.WebLink); //Saves the Word document document.Save("Sample.docx", FormatType.Docx); @@ -326,18 +344,18 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Creates a new Word document Dim document As New WordDocument() 'Adds new section to the document Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -paragraph.AppendText("Image Hyperlink") +paragraph.AppendText("Image hyperlink: ") paragraph = section.AddParagraph() -'Creates a new image instance and load image +'Creates a new image instance and loads the image Dim picture As New WPicture(document) picture.LoadImage(Image.FromFile("Image.png")) -'Appends new image hyperlink to the paragraph +'Appends an image hyperlink to the paragraph paragraph.AppendHyperlink("http://www.syncfusion.com", picture, HyperlinkType.WebLink) 'Saves the Word document document.Save("Sample.docx", FormatType.Docx) @@ -356,38 +374,42 @@ The following code example explains how to modify the URL of an existing hyperli {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Modify-url-of-hyperlink/.NET/Modify-url-of-hyperlink/Program.cs" %} -FileStream fileStream = new FileStream(@"Sample.docx", FileMode.Open, FileAccess.ReadWrite); -//Loads the template document -WordDocument document = new WordDocument(fileStream, FormatType.Docx); -WParagraph paragraph = document.LastParagraph; -//Iterates through the paragraph items -foreach (ParagraphItem item in paragraph.ChildEntities) +using (FileStream fileStream = new FileStream(@"Sample.docx", FileMode.Open, FileAccess.ReadWrite)) { - if (item is WField) + //Loads the template document + WordDocument document = new WordDocument(fileStream, FormatType.Docx); + WParagraph paragraph = document.LastParagraph; + //Iterates through the paragraph items + foreach (ParagraphItem item in paragraph.ChildEntities) { - if ((item as WField).FieldType == FieldType.FieldHyperlink) + if (item is WField) { - //Gets the hyperlink field - Hyperlink link = new Hyperlink(item as WField); - if (link.Type == HyperlinkType.WebLink) + if ((item as WField).FieldType == FieldType.FieldHyperlink) { - //Modifies the url of the hyperlink - link.Uri = "http://www.google.com"; - link.TextToDisplay = "Google"; - break; + //Gets the hyperlink field + Hyperlink link = new Hyperlink(item as WField); + if (link.Type == HyperlinkType.WebLink) + { + //Modifies the URL of the hyperlink + link.Uri = "http://www.google.com"; + link.TextToDisplay = "Google"; + break; + } } } } + //Saves the Word document to a MemoryStream + using (MemoryStream stream = new MemoryStream()) + { + document.Save(stream, FormatType.Docx); + } + //Closes the Word document + document.Close(); } -//Saves the Word document to MemoryStream. -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document. -document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Loads the template document +//Loads the template document WordDocument document = new WordDocument("Sample.docx", FormatType.Docx); WParagraph paragraph = document.LastParagraph; //Iterates through the paragraph items @@ -401,7 +423,7 @@ foreach (ParagraphItem item in paragraph.ChildEntities) Hyperlink link = new Hyperlink(item as WField); if (link.Type == HyperlinkType.WebLink) { - //Modifies the url of the hyperlink + //Modifies the URL of the hyperlink link.Uri = "http://www.google.com"; link.TextToDisplay = "Google"; break; @@ -415,17 +437,18 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Loads the template document +'Loads the template document Dim document As New WordDocument("Sample.docx", FormatType.Docx) Dim paragraph As WParagraph = document.LastParagraph 'Iterates through the paragraph items For Each item As ParagraphItem In paragraph.ChildEntities If TypeOf item Is WField Then - If TryCast(item, WField).FieldType = FieldType.FieldHyperlink Then + Dim field As WField = DirectCast(item, WField) + If field.FieldType = FieldType.FieldHyperlink Then 'Gets the hyperlink field - Dim link As New Hyperlink(TryCast(item, WField)) + Dim link As New Hyperlink(field) If link.Type = HyperlinkType.WebLink Then - 'Modifies the url of the hyperlink + 'Modifies the URL of the hyperlink link.Uri = "http://www.google.com" link.TextToDisplay = "Google" Exit For @@ -444,6 +467,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## See Also +The following knowledge base articles cover scenarios not discussed above — removing hyperlinks, replacing text with hyperlinks, and stripping hyperlink styling. + * [How to find and modify hyperlink address in Word document in C#, VB.NET](https://support.syncfusion.com/kb/article/12198/find-and-modify-hyperlink-address-in-word-document) * [How to replace particular text with hyperlink in the Word document](https://support.syncfusion.com/kb/article/10326/how-to-replace-the-particular-text-with-hyperlink-in-word-document) * [How to replace the URL of image hyperlink in Word document in C# and VB](https://support.syncfusion.com/kb/article/11259/how-to-replace-url-of-image-hyperlink-in-word-document) diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Paragraph.md b/Document-Processing/Word/Word-Library/NET/Working-with-Paragraph.md index 17c59714a3..2298015dc5 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Paragraph.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Paragraph.md @@ -7,7 +7,7 @@ documentation: UG --- # Working with Paragraph in Word Library -Paragraph is the basic element in a Word document that contains a textual and graphical contents. Each paragraph has its own formatting such as line spacing, alignment, indentation, and more. Within a paragraph, the contents are represented by one or more child elements such as [WTextRange](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextRange.html), [WPicture](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WPicture.html), and [Hyperlink](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Hyperlink.html) and more. The [ParagraphItem](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.ParagraphItem.html) is the base class for the child elements of paragraph. The following elements can be the child elements of a paragraph: +Paragraph is the basic element in a Word document that contains textual and graphical content. Each paragraph has its own formatting such as line spacing, alignment, indentation, and more. Within a paragraph, the contents are represented by one or more child elements such as [WTextRange](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextRange.html), [WPicture](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WPicture.html), [Hyperlink](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Hyperlink.html), and more. The [ParagraphItem](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.ParagraphItem.html) is the base class for the child elements of paragraph. The following elements can be the child elements of a paragraph: * Text: Represented by an instance of [WTextRange](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextRange.html). * Image: Represented by an instance of [WPicture](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WPicture.html). @@ -85,34 +85,37 @@ The following code example illustrates how to modify an existing paragraph. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Modify-an-existing-paragraph/.NET/Modify-an-existing-paragraph/Program.cs" %} -FileStream fileStream = new FileStream(@"Test.docx", FileMode.Open, FileAccess.ReadWrite); -//Loads the template document -WordDocument document = new WordDocument(fileStream, FormatType.Docx); -//Gets the text body of first section -WTextBody textBody = document.Sections[0].Body; -//Gets the paragraph at index 1 -WParagraph paragraph = textBody.Paragraphs[1]; -//Iterates through the child elements of paragraph -foreach (ParagraphItem item in paragraph.ChildEntities) +//Opens the file as Stream +using (FileStream fileStream = new FileStream(@"Test.docx", FileMode.Open, FileAccess.ReadWrite)) { - if (item is WTextRange) + //Loads the template document + WordDocument document = new WordDocument(fileStream, FormatType.Docx); + //Gets the text body of first section + WTextBody textBody = document.Sections[0].Body; + //Gets the paragraph at index 1 + WParagraph paragraph = textBody.Paragraphs[1]; + //Iterates through the child elements of paragraph + foreach (ParagraphItem item in paragraph.ChildEntities) { - WTextRange text = item as WTextRange; - //Modifies the character format of the text - text.CharacterFormat.Bold = true; - break; + if (item is WTextRange) + { + WTextRange text = item as WTextRange; + //Modifies the character format of the text + text.CharacterFormat.Bold = true; + break; + } } + //Saves the Word document to MemoryStream + MemoryStream stream = new MemoryStream(); + document.Save(stream, FormatType.Docx); + //Closes the Word document + document.Close(); } -///Saves the Word document to MemoryStream -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document -document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} //Loads the template document -WordDocument document = new WordDocument("Template.docx"); +WordDocument document = new WordDocument("Test.docx"); //Gets the text body of first section WTextBody textBody = document.Sections[0].Body; //Gets the paragraph at index 1 @@ -136,7 +139,7 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Loads the template document -Dim document As New WordDocument("Template.docx") +Dim document As New WordDocument("Test.docx") 'Gets the text body of first section Dim textBody As WTextBody = document.Sections(0).Body 'Gets the paragraph at index 1 @@ -423,6 +426,8 @@ A tab stop is a horizontal position that is set for aligning text of the paragra Each paragraph has its own tab stop collection where the new tab stop can be added and existing tab stop can be removed. +N> The tab position value is specified in points (1 inch = 72 points). + The following code example explains how to add tab stops to the paragraph. {% tabs %} @@ -496,6 +501,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync You can set RTL (Right-to-left) direction to the paragraph in a Word document. The following code example shows how to set RTL (Right-to-left) for a paragraph in Word document. +N> Setting RTL (Right-to-left) direction also affects the alignment of the paragraph. Set the `HorizontalAlignment` to `Right` for proper RTL alignment. + {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/RTL-paragraph/.NET/RTL-paragraph/Program.cs" %} @@ -761,6 +768,8 @@ You can remove the styles present in the existing document using the [Remove](ht The following code example explains how to remove the style from the word document. +N> Removing a style that is applied to paragraphs will revert those paragraphs to the default formatting. Built-in styles cannot be removed using this method. + {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Word-document/Remove-particular-style-from-document/.NET/Remove-particular-style-from-document/Program.cs" %} @@ -802,7 +811,7 @@ Dim styleCollection As IStyleCollection = document.Styles 'Finds the style with the name "Style1." Dim style As WParagraphStyle = CType(styleCollection.FindByName("Style1"), WParagraphStyle) 'Remove the "Style1" style from the Word document. -style.Remove +style.Remove() 'Saves and closes the document instance. document.Save("Sample.docx", FormatType.Docx) document.Close() @@ -831,7 +840,7 @@ IWParagraph firstParagraph = section.AddParagraph(); IWTextRange firstText = firstParagraph.AppendText("A new text is added to the paragraph."); firstText.CharacterFormat.FontSize = 14; firstText.CharacterFormat.Bold = true; -firstText.CharacterFormat.TextColor = Color.Green; +firstText.CharacterFormat.TextColor = Syncfusion.Drawing.Color.Green; //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); document.Save(stream, FormatType.Docx); @@ -977,11 +986,11 @@ firstText.CharacterFormat.Shadow = true; firstText.CharacterFormat.SmallCaps = true; IWTextRange secondText = firstParagraph.AppendText("This the second text range"); //Apply formatting for second text range -secondText.CharacterFormat.HighlightColor = Color.GreenYellow; +secondText.CharacterFormat.HighlightColor = Syncfusion.Drawing.Color.GreenYellow; secondText.CharacterFormat.UnderlineStyle = UnderlineStyle.DotDash; secondText.CharacterFormat.Italic = true; secondText.CharacterFormat.FontName = "Times New Roman"; -secondText.CharacterFormat.TextColor = Color.Green; +secondText.CharacterFormat.TextColor = Syncfusion.Drawing.Color.Green; //Add new paragraph to the section IWParagraph secondParagraph = section.AddParagraph(); //Add new text to the paragraph @@ -1138,7 +1147,7 @@ For further information, click [here](https://help.syncfusion.com/document-proce ## Working with symbols -Symbols are used to add contents such as currencies, numbers, punctuations, etc. DocIO represents symbols with [WSymbol](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSymbol.html) instance. Each symbol can be identified with their character codes. +Symbols are used to add contents such as currencies, numbers, punctuation, etc. DocIO represents symbols with [WSymbol](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSymbol.html) instance. Each symbol can be identified with their character codes. The following code example explains how to add new symbol to the document. @@ -1232,7 +1241,7 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Loads the template document -WordDocument document = new WordDocument("Sample.docx", FormatType.Docx); +WordDocument document = new WordDocument("Sample1.docx", FormatType.Docx); //Gets the textbody content WTextBody textbody = document.Sections[0].Body; //Iterates through the paragraphs @@ -1293,7 +1302,7 @@ Breaks allow the document contents to split into multiple parts to customize the * Page break: Starts the content on the next page. * Line break: Starts the content in a new line. * Column break: Starts the content in the next column. -* Text wrapping break: Starts the content below to the picture, table, or other items. +* Text wrapping break: Starts the content below the picture, table, or other items. The following code example explains how various types of breaks can be appended to the paragraphs. @@ -1397,7 +1406,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### Text wrapping break -When including images or other objects in a Word document, the text is wrapped around the objects as per wrapping behavior. If you wish to move the text below to the picture (as like caption), instead of adding an extra line break or empty paragraphs, you can add the text wrapping break to achieve it. +When including images or other objects in a Word document, the text is wrapped around the objects as per wrapping behavior. If you wish to move the text below the picture (as a caption), instead of adding an extra line break or empty paragraphs, you can add the text wrapping break to achieve it. The following code example illustrates how to insert a text wrapping break to move the text below to the picture. @@ -1475,7 +1484,7 @@ For further information, click [here](https://help.syncfusion.com/document-proce ## Working with Text Box -Text box contains a group of textual and graphical contents. DocIO supports to create and manipulate the text box and its formatting by using the [WTextBox](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBox.html) instance. +Text box contains a group of textual and graphical contents. DocIO supports creating and manipulating the text box and its formatting by using the [WTextBox](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBox.html) instance. The following code example explains how to add new text box to the paragraph. @@ -1495,10 +1504,12 @@ IWParagraph textboxParagraph = textbox.TextBoxBody.AddParagraph(); textboxParagraph.AppendText("Text inside text box"); textboxParagraph = textbox.TextBoxBody.AddParagraph(); //Adds new picture to textbox body -FileStream imagestream = new FileStream(@"Mountain-200.jpg", FileMode.Open, FileAccess.ReadWrite); -IWPicture picture = textboxParagraph.AppendPicture(imagestream); -picture.Height = 75; -picture.Width = 50; +using (FileStream imagestream = new FileStream(@"Mountain-200.jpg", FileMode.Open, FileAccess.ReadWrite)) +{ + IWPicture picture = textboxParagraph.AppendPicture(imagestream); + picture.Height = 75; + picture.Width = 50; +} //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); document.Save(stream, FormatType.Docx); @@ -1560,6 +1571,8 @@ Text box has its own formatting such as outline color, fill effects, text direct The following code example explains how to apply formatting and rotation for text box. +N> The valid value for `Rotation` ranges from 0 to 359 degrees. + {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Format-and-rotate-text-box/.NET/Format-and-rotate-text-box/Program.cs" %} diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md b/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md index d73f3c6d3f..181be49e75 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md @@ -8,7 +8,7 @@ documentation: UG # Working with Sections -A section contains the contents present in Headers, Footers and main document through the instances of [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html). A section also has a specific set of properties used to define the page settings, number of columns, headers and footers and so on that decide how the text appears. [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html) represents group of paragraphs and tables etc. +A section contains the contents of the headers, footers, and main document body through the instances of [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html). A section also has a specific set of properties used to define the page settings, number of columns, headers and footers and so on that decide how the text appears. [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html) represents a group of paragraphs and tables, etc. N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-platform]*** for ASP.NET Core, Blazor, Xamarin, UWP, .NET MAUI, and WinUI; ***C# [Windows-specific]*** for WinForms and WPF; ***VB.NET [Windows-specific]*** for VB.NET applications. @@ -52,7 +52,7 @@ Dim section As IWSection = document.AddSection() Dim paragraph As IWParagraph = section.AddParagraph() 'Appends the text to the created paragraph paragraph.AppendText("AdventureWorks Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company.") -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -61,9 +61,9 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Sections/Add-sections-in-Word-document). -You can add the multiple sections into the document. When you add more than one section into the word document, the section starts from the next page by default. +You can add multiple sections to the document. When you add more than one section to the Word document, the section starts on a new page by default. -You can also add a new section that starts on a same page by specifying the [BreakCode](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSection.html#Syncfusion_DocIO_DLS_WSection_BreakCode) as shown in following code example. +You can also add a new section that starts on the same page by specifying the [BreakCode](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSection.html#Syncfusion_DocIO_DLS_WSection_BreakCode) as shown in the following code example. {% tabs %} @@ -132,7 +132,7 @@ section.BreakCode = SectionBreakCode.NoBreak paragraph = section.AddParagraph() 'Appends the text to the created paragraph paragraph.AppendText(paraText) -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -209,7 +209,7 @@ section.PageSetup.OtherPagesTray = PrinterPaperTray.MiddleBin Dim paragraph As IWParagraph = section.AddParagraph() 'Appends the text to the created paragraph. paragraph.AppendText("AdventureWorks Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company.") -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -218,7 +218,7 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Sections/Page-setup-properties). -## Creating Multi-column document +## Creating a Multi-column Document You can split the contents into two or more columns by specifying the column width and spacing between columns. @@ -328,7 +328,7 @@ paragraph.AppendBreak(BreakType.ColumnBreak) paragraph = section.AddParagraph() 'Appends the text to the created paragraph paragraph.AppendText(paraText) -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -339,7 +339,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Creating document with different page settings -You can prefer to have more sections in a Word document when you need to have different page settings or headers and footers for a specific set of contents. The following code example illustrates how to create a Word document with multiple sections whose page orientation are portrait and landscape respectively. +You can prefer to have more sections in a Word document when you need to have different page settings or headers and footers for a specific set of contents. The following code example illustrates how to create a Word document with multiple sections whose page orientation is portrait and landscape, respectively. {% tabs %} @@ -430,7 +430,7 @@ section.PageSetup.PageSize = PageSize.A4; section.PageSetup.Orientation = PageOrientation.Landscape 'Appends the text to the paragraph paragraph.AppendText(paraText) -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -538,7 +538,7 @@ paragraph.AppendText("[ Default Page Header ]") 'Inserts the default Page footer paragraph = section.HeadersFooters.OddFooter.AddParagraph() paragraph.AppendText("[ Default Page Footer ]") -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -659,7 +659,7 @@ paragraph.AppendText("[ Default Page Header ]") 'Inserts the default page footer paragraph = section.HeadersFooters.OddFooter.AddParagraph() paragraph.AppendText("[ Default Page Footer ]") -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -782,7 +782,7 @@ paragraph.AppendText("[Even Page Header ]") 'Inserts the even page footer paragraph = section.HeadersFooters.EvenFooter.AddParagraph() paragraph.AppendText("[ Even Page Footer ]") -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -911,7 +911,7 @@ section.HeadersFooters.Footer.AddParagraph().AppendText("[ Third Section Footer 'Appends some text to the third page in document paragraph = section.AddParagraph() paragraph.AppendText(Convert.ToString(vbCr & vbCr & "[ Third Page ] " & vbCr & vbCr) & paraText) -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -1180,7 +1180,7 @@ paragraph.AppendField("TotalNumberOfPages", FieldType.FieldNumPages) paragraph = section.AddParagraph() 'Appends the text to the created paragraph paragraph.AppendText("AdventureWorks Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company.") -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -1287,7 +1287,7 @@ paragraph.AppendText("[ Default Page Header ]") 'Inserts the default page footer paragraph = section.HeadersFooters.OddFooter.AddParagraph() paragraph.AppendText("[ Default Page Footer ]") -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -1366,11 +1366,11 @@ Using document As WordDocument = New WordDocument() section.PageSetup.Borders.Color = Color.Blue 'Set the linewidth of the borders. section.PageSetup.Borders.LineWidth = 0.75F - //Set the page border margins. - section.PageSetup.Borders.Top.Space = 5F; - section.PageSetup.Borders.Bottom.Space = 5F; - section.PageSetup.Borders.Right.Space = 5F; - section.PageSetup.Borders.Left.Space = 5F; + 'Set the page border margins. + section.PageSetup.Borders.Top.Space = 5F + section.PageSetup.Borders.Bottom.Space = 5F + section.PageSetup.Borders.Right.Space = 5F + section.PageSetup.Borders.Left.Space = 5F 'Add a paragraph to a section. Dim paragraph As IWParagraph = section.AddParagraph() paragraph.AppendText("AdventureWorks Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company.") @@ -1504,7 +1504,7 @@ document.Close(); Dim document As New WordDocument(inputFileName) 'Removes the second section from the collection document.Sections.RemoveAt(1) -‘Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Shapes.md b/Document-Processing/Word/Word-Library/NET/Working-with-Shapes.md index 9ff2566e65..9a08419362 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Shapes.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Shapes.md @@ -6,15 +6,13 @@ control: DocIO documentation: UG keywords: --- -# Working with Shapes for File-Formats Platform DocIO Control +# Working with Shapes in .NET Word (DocIO) Library -Shapes are drawing objects that include lines, curves, circles, rectangles, etc. It can be preset or custom geometry. You can create and manipulate the pre-defined shape in DOCX and WordML format documents. +Shapes are drawing objects that can include lines, curves, circles, rectangles, and so on. A shape can have preset or custom geometry. You can create and manipulate preset shapes in DOCX and WordML format documents. ## Adding shapes -The following code example illustrates how to add pre-defined shape to the document. - -N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-platform]*** for ASP.NET Core, Blazor, Xamarin, UWP, .NET MAUI, and WinUI; ***C# [Windows-specific]*** for WinForms and WPF; ***VB.NET [Windows-specific]*** for VB.NET applications. +The following code example illustrates how to add a preset shape to the document. {% tabs %} @@ -70,10 +68,10 @@ IWTextRange text = paragraph.AppendText("This text is in rounded rectangle shape text.CharacterFormat.TextColor = Color.Green; text.CharacterFormat.Bold = true; //Adds another shape to the document -paragraph = section.AddParagraph()as WParagraph; +paragraph = section.AddParagraph() as WParagraph; paragraph.AppendBreak(BreakType.LineBreak); Shape pentagon = paragraph.AppendShape(AutoShapeType.Pentagon, 100, 100); -paragraph = pentagon.TextBody.AddParagraph()as WParagraph; +paragraph = pentagon.TextBody.AddParagraph() as WParagraph; paragraph.AppendText("This text is in pentagon shape"); pentagon.HorizontalPosition = 72; pentagon.VerticalPosition = 200; @@ -121,7 +119,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### Format shapes -Shape can have formatting such as line color, fill color, positioning, wrap formats, etc. The following code example illustrates how to apply formatting options for shape. +A shape can have formatting such as line color, fill color, positioning, and wrap formats. The following code example illustrates how to apply formatting options to a shape. + +N> `FillFormat.Transparency` accepts a value from 0 to 100 (percentage). {% tabs %} @@ -230,7 +230,7 @@ text.CharacterFormat.Bold = True rectangle.FillFormat.Fill = True rectangle.FillFormat.Color = Color.LightGray 'Set transparency (opacity) to the shape fill color. -rectangle.FillFormat.Transparency = 75; +rectangle.FillFormat.Transparency = 75 'Apply wrap formats rectangle.WrapFormat.TextWrappingStyle = TextWrappingStyle.Square rectangle.WrapFormat.TextWrappingType = TextWrappingType.Right @@ -331,7 +331,7 @@ paragraph = TryCast(rectangle.TextBody.AddParagraph(), WParagraph) Dim text As IWTextRange = paragraph.AppendText("This text is in rounded rectangle shape") 'Saves and closes the Word document document.Save("Sample.docx", FormatType.Docx) -document.Close +document.Close() {% endhighlight %} {% endtabs %} @@ -340,20 +340,21 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Grouping shapes -Word library now allows you to create or group multiple shapes, pictures, text boxes, and charts as a group shape in Word document (DOCX) and preserve it as in DOCX and WordML format conversions. +The .NET Word (DocIO) library allows you to group multiple shapes, pictures, text boxes, and charts as a single group shape in a Word document (DOCX). These group shapes are preserved in DOCX and WordML format conversions. -You can create a document with group shapes by using Microsoft Word. It provides an option to group a set of shapes and images as a single shape and a group shape as individual item. +Microsoft Word provides an option to group a set of shapes and images as a single shape and to later ungroup it back into individual items. ![Create Group shape in Microsoft Word](Working-with-Shapes_images/Working-with-Shapes_img1.jpeg) **Key Features:** -1. You can easily manage group of shapes, pictures, text boxes, or charts as a group shape. -2. You can move several shapes or images simultaneously and apply the same formatting properties for children of group shapes. +1. You can easily manage a group of shapes, pictures, text boxes, or charts as a group shape. +2. You can move several shapes or images simultaneously and apply the same formatting properties to the children of a group shape. -N> 1. While grouping the shapes or other objects, the shapes should be positioned relative to the “Page”. -N> 2. While grouping the shapes or other objects, the wrapping style should not be "In Line with Text". +N> The following constraints apply while grouping shapes or other objects: +N> 1. The shapes should be positioned relative to the "Page". +N> 2. The wrapping style should not be "In Line with Text". -The following code example illustrates how to create group shape in Word document. +The following code example illustrates how to create a group shape in a Word document. In the sample, an `Image.png` file must be present in the working directory (replace the path as needed). {% tabs %} @@ -490,67 +491,67 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -‘Creates a new Word document +'Creates a new Word document Dim document As WordDocument = New WordDocument() -‘Adds new section to the document +'Adds new section to the document Dim section As IWSection = document.AddSection() -‘Adds new paragraph to the section +'Adds new paragraph to the section Dim paragraph As WParagraph = TryCast(section.AddParagraph(), WParagraph) -‘Creates new group shape +'Creates new group shape Dim groupShape As GroupShape = New GroupShape(document) -‘Adds group shape to the paragraph +'Adds group shape to the paragraph paragraph.ChildEntities.Add(groupShape) -‘Creates new shape +'Creates new shape Dim shape As Shape = New Shape(document, AutoShapeType.RoundedRectangle) -‘Sets height and width for shape +'Sets height and width for shape shape.Height = 100 shape.Width = 150 -‘Sets horizontal and vertical position +'Sets horizontal and vertical position shape.HorizontalPosition = 72 shape.VerticalPosition = 72 -‘Sets wrapping style for shape +'Sets wrapping style for shape shape.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText -‘Sets horizontal and vertical origin +'Sets horizontal and vertical origin shape.HorizontalOrigin = HorizontalOrigin.Page shape.VerticalOrigin = VerticalOrigin.Page -‘Adds the specified shape to group shape +'Adds the specified shape to group shape groupShape.Add(shape) -‘Creates new picture +'Creates new picture Dim picture As WPicture = New WPicture(document) picture.LoadImage(Image.FromFile("Image.png")) -‘Sets wrapping style for picture +'Sets wrapping style for picture picture.TextWrappingStyle = TextWrappingStyle.InFrontOfText -‘Sets height and width for the image +'Sets height and width for the image picture.Height = 100 picture.Width = 100 -‘Sets horizontal and vertical position +'Sets horizontal and vertical position picture.HorizontalPosition = 400 picture.VerticalPosition = 150 -‘Sets horizontal and vertical origin +'Sets horizontal and vertical origin picture.HorizontalOrigin = HorizontalOrigin.Page picture.VerticalOrigin = VerticalOrigin.Page -‘Adds the specified picture to group shape +'Adds the specified picture to group shape groupShape.Add(picture) -‘Creates new textbox +'Creates new textbox Dim textbox As WTextBox = New WTextBox(document) textbox.TextBoxFormat.Width = 150 textbox.TextBoxFormat.Height = 75 -‘Adds new text to the textbox body +'Adds new text to the textbox body Dim textboxParagraph As IWParagraph = textbox.TextBoxBody.AddParagraph() textboxParagraph.AppendText("Text inside text box") -‘Sets wrapping style for textbox +'Sets wrapping style for textbox textbox.TextBoxFormat.TextWrappingStyle = TextWrappingStyle.Behind -‘Sets horizontal and vertical position +'Sets horizontal and vertical position textbox.TextBoxFormat.HorizontalPosition = 200 textbox.TextBoxFormat.VerticalPosition = 200 -‘Sets horizontal and vertical origin +'Sets horizontal and vertical origin textbox.TextBoxFormat.VerticalOrigin = VerticalOrigin.Page textbox.TextBoxFormat.HorizontalOrigin = HorizontalOrigin.Page -‘Adds the specified textbox to group shape +'Adds the specified textbox to group shape groupShape.Add(textbox) -‘Saves the Word document +'Saves the Word document document.Save("Sample.docx", FormatType.Docx) -‘Closes the document +'Closes the document document.Close() {% endhighlight %} @@ -558,7 +559,7 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Shapes/Add-group-shape-in-Word). -The following code example illustrates how to add collection of shapes or images as a group shape in Word document. +The following code example illustrates how to add a collection of shapes, text boxes, and charts as a group shape by passing an array of paragraph items to the `GroupShape` constructor. {% tabs %} @@ -579,7 +580,7 @@ shape.Width = 150; //Sets Wrapping style for shape shape.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText; //Sets horizontal and vertical position for shape -shape.HorizontalPosition = 7; +shape.HorizontalPosition = 72; shape.VerticalPosition = 72; //Sets horizontal and vertical origin for shape shape.HorizontalOrigin = HorizontalOrigin.Page; @@ -687,7 +688,7 @@ shape.Width = 150; //Sets Wrapping style for shape shape.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText; //Sets horizontal and vertical position for shape -shape.HorizontalPosition = 7; +shape.HorizontalPosition = 72; shape.VerticalPosition = 72; //Sets horizontal and vertical origin for shape shape.HorizontalOrigin = HorizontalOrigin.Page; @@ -768,7 +769,7 @@ chart.PrimaryCategoryAxis.CategoryLabels = chart.ChartData[2, 1, 11, 1]; paragraphItems[2] = chart; //Creates new group shape GroupShape groupShape = new GroupShape(document, paragraphItems); - groupShape.HorizontalPosition = 72; +groupShape.HorizontalPosition = 72; //Adds the group shape to the paragraph paragraph.ChildEntities.Add(groupShape); //Saves the Word document @@ -778,64 +779,64 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -‘Creates a new Word document +'Creates a new Word document Dim document As WordDocument = New WordDocument() -‘Adds new section to the document +'Adds new section to the document Dim section As IWSection = document.AddSection() -‘Adds new paragraph to the section +'Adds new paragraph to the section Dim paragraph As WParagraph = TryCast(section.AddParagraph(), WParagraph) -‘Creates paragraph item collections to add child shapes +'Creates paragraph item collections to add child shapes Dim paragraphItems As ParagraphItem() = New ParagraphItem(2) {} -‘Creates new shape +'Creates new shape Dim shape As Shape = New Shape(document, AutoShapeType.RoundedRectangle) -‘Sets height and width for shape +'Sets height and width for shape shape.Height = 100 shape.Width = 150 -‘Sets Wrapping style for shape +'Sets Wrapping style for shape shape.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText -‘Sets horizontal and vertical position for shape -shape.HorizontalPosition = 7 +'Sets horizontal and vertical position for shape +shape.HorizontalPosition = 72 shape.VerticalPosition = 72 -‘Sets horizontal and vertical origin for shape +'Sets horizontal and vertical origin for shape shape.HorizontalOrigin = HorizontalOrigin.Page shape.VerticalOrigin = VerticalOrigin.Page -‘Sets the shape as paragraph item +'Sets the shape as paragraph item paragraphItems(0) = shape -‘Appends new textbox to the document +'Appends new textbox to the document Dim textbox As WTextBox = New WTextBox(document) -‘Sets height and width for textbox +'Sets height and width for textbox textbox.TextBoxFormat.Width = 150 textbox.TextBoxFormat.Height = 75 -‘Adds new text to the textbox body +'Adds new text to the textbox body Dim textboxParagraph As IWParagraph = textbox.TextBoxBody.AddParagraph() -‘Adds new text to the textbox paragraph +'Adds new text to the textbox paragraph textboxParagraph.AppendText("Text inside text box") -‘Sets wrapping style for textbox +'Sets wrapping style for textbox textbox.TextBoxFormat.TextWrappingStyle = TextWrappingStyle.Behind -‘Sets horizontal and vertical position for textbox +'Sets horizontal and vertical position for textbox textbox.TextBoxFormat.HorizontalPosition = 200 textbox.TextBoxFormat.VerticalPosition = 200 -‘Sets horizontal and vertical origin for textbox +'Sets horizontal and vertical origin for textbox textbox.TextBoxFormat.VerticalOrigin = VerticalOrigin.Page textbox.TextBoxFormat.HorizontalOrigin = HorizontalOrigin.Page -‘Sets the textbox as paragraph item +'Sets the textbox as paragraph item paragraphItems(1) = textbox -‘Appends new chart to the document +'Appends new chart to the document Dim chart As WChart = New WChart(document) -‘Sets height and width for chart +'Sets height and width for chart chart.Height = 270 chart.Width = 446 -‘Sets wrapping style for chart +'Sets wrapping style for chart chart.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText -‘Sets chart type +'Sets chart type chart.ChartType = OfficeChartType.Pie chart.VerticalPosition = 350 -‘Sets chart title -‘Sets font and size for chart title +'Sets chart title +'Sets font and size for chart title chart.ChartTitle = "Best Selling Products" chart.ChartTitleArea.FontName = "Calibri" chart.ChartTitleArea.Size = 14 -‘Sets data for chart +'Sets data for chart chart.ChartData.SetValue(1, 1, "") chart.ChartData.SetValue(1, 2, "Sales") chart.ChartData.SetValue(2, 1, "Phyllis Lapin") @@ -858,29 +859,29 @@ chart.ChartData.SetValue(10, 1, "Christina Berglund") chart.ChartData.SetValue(10, 2, 29.171) chart.ChartData.SetValue(11, 1, "Elizabeth Lincoln") chart.ChartData.SetValue(11, 2, 25.696) -‘Creates a new chart series with the name “Sales” +'Creates a new chart series with the name "Sales" Dim pieSeries As IOfficeChartSerie = chart.Series.Add("Sales") -‘Sets value for the chart series +'Sets value for the chart series pieSeries.Values = chart.ChartData(2, 2, 11, 2) -‘Sets data label +'Sets data label pieSeries.DataPoints.DefaultDataPoint.DataLabels.IsValue = True pieSeries.DataPoints.DefaultDataPoint.DataLabels.Position = OfficeDataLabelPosition.Outside -‘Sets background color +'Sets background color chart.ChartArea.Fill.ForeColor = Color.FromArgb(242, 242, 242) chart.PlotArea.Fill.ForeColor = Color.FromArgb(242, 242, 242) chart.ChartArea.Border.LinePattern = OfficeChartLinePattern.None -‘Sets category labels +'Sets category labels chart.PrimaryCategoryAxis.CategoryLabels = chart.ChartData(2, 1, 11, 1) -‘Sets the chart as paragraph item +'Sets the chart as paragraph item paragraphItems(2) = chart -‘Creates new group shape +'Creates new group shape Dim groupShape As GroupShape = New GroupShape(document, paragraphItems) groupShape.HorizontalPosition = 72 -‘Adds the group shape to the paragraph +'Adds the group shape to the paragraph paragraph.ChildEntities.Add(groupShape) -‘Saves the Word document +'Saves the Word document document.Save("Sample.docx", FormatType.Docx) -‘Closes the document +'Closes the document document.Close() {% endhighlight %} @@ -890,7 +891,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### Nested group shapes -The following code example illustrates how to group the nested group shapes as a group shape in Word document. +You can nest one group shape inside another. The following code example illustrates how to group nested group shapes as a single group shape in a Word document. {% tabs %} @@ -1073,91 +1074,91 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -‘Creates a new Word document +'Creates a new Word document Dim document As WordDocument = New WordDocument() -‘Adds new section to the document +'Adds new section to the document Dim section As IWSection = document.AddSection() -‘Adds new paragraph to the section +'Adds new paragraph to the section Dim paragraph As WParagraph = TryCast(section.AddParagraph(), WParagraph) -‘Creates new group shape +'Creates new group shape Dim groupShape As GroupShape = New GroupShape(document) -‘Adds group shape to the paragraph +'Adds group shape to the paragraph paragraph.ChildEntities.Add(groupShape) -‘Appends new shape to the document +'Appends new shape to the document Dim shape As Shape = New Shape(document, AutoShapeType.RoundedRectangle) -‘Sets height and width for shape +'Sets height and width for shape shape.Height = 100 shape.Width = 150 -‘Sets Wrapping style for shape +'Sets Wrapping style for shape shape.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText -‘Sets horizontal and vertical position for shape +'Sets horizontal and vertical position for shape shape.HorizontalPosition = 72 shape.VerticalPosition = 72 -‘Sets horizontal and vertical origin for shape +'Sets horizontal and vertical origin for shape shape.HorizontalOrigin = HorizontalOrigin.Page shape.VerticalOrigin = VerticalOrigin.Page -‘Adds the specified shape to group shape +'Adds the specified shape to group shape groupShape.Add(shape) -‘Appends new picture to the document +'Appends new picture to the document Dim picture As WPicture = New WPicture(document) -‘Loads image from the file -picture.LoadImage(Image.FromFile("Image.jpg")) -‘Sets wrapping style for picture +'Loads image from the file +picture.LoadImage(Image.FromFile("Image.png")) +'Sets wrapping style for picture picture.TextWrappingStyle = TextWrappingStyle.InFrontOfText -‘Sets height and width for the picture +'Sets height and width for the picture picture.Height = 100 picture.Width = 100 -‘Sets horizontal and vertical position for the picture +'Sets horizontal and vertical position for the picture picture.HorizontalPosition = 400 picture.VerticalPosition = 150 -‘Sets horizontal and vertical origin for the picture +'Sets horizontal and vertical origin for the picture picture.HorizontalOrigin = HorizontalOrigin.Page picture.VerticalOrigin = VerticalOrigin.Page -‘Adds specified picture to the group shape +'Adds specified picture to the group shape groupShape.Add(picture) -‘Creates new nested group shape +'Creates new nested group shape Dim nestedGroupShape As GroupShape = New GroupShape(document) -‘Appends new textbox to the document +'Appends new textbox to the document Dim textbox As WTextBox = New WTextBox(document) -‘Sets width and height for the textbox +'Sets width and height for the textbox textbox.TextBoxFormat.Width = 150 textbox.TextBoxFormat.Height = 75 -‘Adds new text to the textbox body +'Adds new text to the textbox body Dim textboxParagraph As IWParagraph = textbox.TextBoxBody.AddParagraph() -‘Adds new text to the textbox paragraph +'Adds new text to the textbox paragraph textboxParagraph.AppendText("Text inside text box") -‘Sets wrapping style for the textbox +'Sets wrapping style for the textbox textbox.TextBoxFormat.TextWrappingStyle = TextWrappingStyle.Behind -‘Sets horizontal and vertical position for the textbox +'Sets horizontal and vertical position for the textbox textbox.TextBoxFormat.HorizontalPosition = 200 textbox.TextBoxFormat.VerticalPosition = 200 -‘Sets horizontal and vertical origin for the textbox +'Sets horizontal and vertical origin for the textbox textbox.TextBoxFormat.VerticalOrigin = VerticalOrigin.Page textbox.TextBoxFormat.HorizontalOrigin = HorizontalOrigin.Page -‘Adds specified textbox to the nested group shape +'Adds specified textbox to the nested group shape nestedGroupShape.Add(textbox) -‘Appends new shape to the document +'Appends new shape to the document shape = New Shape(document, AutoShapeType.Oval) -‘Sets height and width for the new shape +'Sets height and width for the new shape shape.Height = 100 shape.Width = 150 -‘Sets horizontal and vertical position for the shape +'Sets horizontal and vertical position for the shape shape.HorizontalPosition = 200 shape.VerticalPosition = 72 -‘Sets horizontal and vertical origin for the shape +'Sets horizontal and vertical origin for the shape shape.HorizontalOrigin = HorizontalOrigin.Page shape.VerticalOrigin = VerticalOrigin.Page -‘Sets horizontal and vertical position for the nested group shape +'Sets horizontal and vertical position for the nested group shape nestedGroupShape.HorizontalPosition = 72 nestedGroupShape.VerticalPosition = 72 -‘Adds specified shape to the nested group shape +'Adds specified shape to the nested group shape nestedGroupShape.Add(shape) -‘Adds nested group shape to the group shape of the paragraph +'Adds nested group shape to the group shape of the paragraph groupShape.Add(nestedGroupShape) groupShape.HorizontalPosition = 142 -‘Saves the Word document +'Saves the Word document document.Save("Sample.docx", FormatType.Docx) -‘Closes the document +'Closes the document document.Close() {% endhighlight %} @@ -1167,10 +1168,12 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Ungrouping shapes -You can ungroup the group shapes in the Word document to preserve each shape as individual item. +You can ungroup group shapes in a Word document so that each shape is preserved as an individual item. The following code example illustrates how to ungroup the group shape in Word document. +The following code example illustrates how to ungroup a group shape in a Word document. + {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Shapes/Ungroup-shapes/.NET/Ungroup-shapes/Program.cs" %} @@ -1245,7 +1248,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Online Demo * Explore how to create a Word document with shapes using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/autoshapes#/tailwind). -* See how to create a Word document with group shapes using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/groupshapes#/tailwind). +* See how to create a Word document with group shapes using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/groupshapes#/tailwind). ## See Also diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Tables.md b/Document-Processing/Word/Word-Library/NET/Working-with-Tables.md index cb1cad82f4..01eef21a71 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Tables.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Tables.md @@ -5,14 +5,14 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Tables in Word document +# Working with Tables in a Word document A table in Word document is used to arrange document content in rows and columns. [WTable](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTable.html) instance represents a table in Word document. A table must contain at least one row. 1. A row is a collection of cells and it is represented by an instance of [WTableRow](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTableRow.html). Each row must contain at least one cell. 2. A cell can contain one or more paragraphs and tables. An instance of [WTableCell](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTableCell.html) represents a table cell. Each table cell must contain at least one paragraph. -N> Adding more than 63 columns not supported in Word document using Microsoft Word application. It shows alert when you attempt to insert table with more than 64 columns, which is a one of the behaviors of Microsoft Word and Essential® DocIO does the same. +N> Adding more than 63 columns is not supported in Word document using Microsoft Word application. It shows an alert when you attempt to insert a table with more than 64 columns, which is one of the behaviors of Microsoft Word and Essential® DocIO does the same. The following image illustrates how a table in Word document is organized in EssentialDocIO’s DOM: @@ -364,7 +364,7 @@ nestedCell.Width = 200; nestedCell.AddParagraph().AppendText("Mango"); //Accesses the instance of the cell (second row, second cell) nestedCell = table.Rows[1].Cells[1]; -table[1, 1].AddParagraph().AppendText("85"); +nestedCell.AddParagraph().AppendText("85"); table[2, 0].AddParagraph().AppendText("Pomegranate"); table[2, 1].AddParagraph().AppendText("70"); //Saves the Word document to MemoryStream @@ -408,7 +408,7 @@ nestedCell.Width = 200; nestedCell.AddParagraph().AppendText("Mango"); //Accesses the instance of the cell (second row, second cell) nestedCell = table.Rows[1].Cells[1]; -table[1, 1].AddParagraph().AppendText("85"); +nestedCell.AddParagraph().AppendText("85"); table[2, 0].AddParagraph().AppendText("Pomegranate"); table[2, 1].AddParagraph().AppendText("70"); //Saves and closes the document instance @@ -450,7 +450,7 @@ nestedCell.Width = 200 nestedCell.AddParagraph().AppendText("Mango") 'Accesses the instance of the cell (second row, second cell) nestedCell = table.Rows(1).Cells(1) -table(1, 1).AddParagraph().AppendText("85") +nestedCell.AddParagraph().AppendText("85") table(2, 0).AddParagraph().AppendText("Pomegranate") table(2, 1).AddParagraph().AppendText("70") 'Saves and closes the document instance @@ -464,7 +464,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Align text within a table -You can iterate the cells within a table and align text for each cell. Find more information about iterating the cells from [here](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-tables#iterating-through-table-elements) +You can iterate the cells within a table and align text for each cell. Find more information about iterating the cells from [here](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-tables#iterating-through-table-elements). The following code example illustrates how to align text within a table. @@ -680,7 +680,7 @@ End Using You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Tables/Insert-image-in-cell). -## Apply formatting to Table, Row and Cell +## Apply formatting to Table and Row The following code example illustrates how to load an existing document and apply table formatting options such as [Borders](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.RowFormat.html#Syncfusion_DocIO_DLS_RowFormat_Borders), [LeftIndent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.RowFormat.html#Syncfusion_DocIO_DLS_RowFormat_LeftIndent), [Paddings](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.RowFormat.html#Syncfusion_DocIO_DLS_RowFormat_Paddings), [IsAutoResized](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.RowFormat.html#Syncfusion_DocIO_DLS_RowFormat_IsAutoResized), etc. @@ -692,9 +692,8 @@ N> 4. As in the Microsoft Word, DocIO supports [RowFormat.Borders](https://help. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Tables/Apply-table-formatting/.NET/Apply-table-formatting/Program.cs" %} -//Creates an instance of WordDocument class (Empty Word Document) -FileStream fileStreamPath = new FileStream("Table.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); //Opens an existing Word document into DocIO instance +FileStream fileStreamPath = new FileStream("Table.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); //Accesses the instance of the first section in the Word document WSection section = document.Sections[0]; @@ -845,6 +844,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync Using DocIO, you can format table cells by setting text wrapping to control content flow and adjusting text direction for better readability. You can also customize cell borders, apply vertical alignment, and set a background color to enhance the table’s appearance. +N> In the following snippets, the `row` and `cell` variables are assumed to be obtained from an existing table (for example, `WTableRow row = table.Rows[0];` and `WTableCell cell = row.Cells[0];`). See the [Apply formatting to Table and Row](#apply-formatting-to-table-and-row) section for how to access a table and its rows. + #### Set cell background color The following code snippet illustrates how to specify the background color of a table cell using the [CellFormat.BackColor](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellFormat.html#Syncfusion_DocIO_DLS_CellFormat_BackColor) property. @@ -1054,15 +1055,15 @@ WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); WSection section = document.Sections[0]; //Accesses the instance of the first table in the section WTable table = section.Tables[0] as WTable; -//Resizes the table to fit the contents respect to the contents +//Resizes the table to fit its contents table.AutoFit(AutoFitType.FitToContent); //Accesses the instance of the second table in the section table = section.Tables[1] as WTable; -//Resizes the table to fit the contents respect to window/page width +//Resizes the table to fit the window/page width table.AutoFit(AutoFitType.FitToWindow); //Accesses the instance of the third table in the section table = section.Tables[2] as WTable; -//Resizes the table to fit the contents respect to fixed column width +//Resizes the table to fit the fixed column width table.AutoFit(AutoFitType.FixedColumnWidth); //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); @@ -1072,23 +1073,23 @@ document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates an instance of WordDocument class (Empty Word Document)*'| markdownify }} +//Creates an instance of WordDocument class (Empty Word Document) WordDocument document = new WordDocument(); //Opens an existing Word document into DocIO instance -document.Open("Template", FormatType.Docx); +document.Open("Template.docx", FormatType.Docx); //Accesses the instance of the first section in the Word document WSection section = document.Sections[0]; //Accesses the instance of the first table in the section WTable table = section.Tables[0] as WTable; -//Resizes the table to fit the contents respect to the contents +//Resizes the table to fit its contents table.AutoFit(AutoFitType.FitToContent); //Accesses the instance of the second table in the section table = section.Tables[1] as WTable; -//Resizes the table to fit the contents respect to window/page width +//Resizes the table to fit the window/page width table.AutoFit(AutoFitType.FitToWindow); //Accesses the instance of the third table in the section table = section.Tables[2] as WTable; -//Resizes the table to fit the contents respect to fixed column width +//Resizes the table to fit the fixed column width table.AutoFit(AutoFitType.FixedColumnWidth); //Saves and closes the document instance document.Save("Sample.docx", FormatType.Docx); @@ -1099,18 +1100,18 @@ document.Close(); 'Creates an instance of WordDocument class (Empty Word Document) Dim document As WordDocument = New WordDocument 'Opens an existing Word document into DocIO instance -document.Open("Template", FormatType.Docx) +document.Open("Template.docx", FormatType.Docx) Dim section As WSection = document.Sections(0) Dim table As WTable = CType(section.Tables(0), WTable) -'Resizes the table to fit the contents respect to the contents +'Resizes the table to fit its contents table.AutoFit(AutoFitType.FitToContent) 'Accesses the instance of the second table in the section table = CType(section.Tables(1), WTable) -'Resizes the table to fit the contents respect to window/page width +'Resizes the table to fit the window/page width table.AutoFit(AutoFitType.FitToWindow) 'Accesses the instance of the third table in the section table = CType(section.Tables(2), WTable) -'Resizes the table to fit the contents respect to fixed column width +'Resizes the table to fit the fixed column width table.AutoFit(AutoFitType.FixedColumnWidth) 'Saves and closes the document instance document.Save("Sample.docx", FormatType.Docx) @@ -1127,7 +1128,7 @@ N> In ASP.NET Core, UWP, and Xamarin platforms, to apply autofit for table in a A table style defines a set of table, row, cell and paragraph level formatting that can be applied to a table. [WTableStyle](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTableStyle.html) instance represents table style in a Word document. -N> Essential® DocIO currently provides support for table styles in DOCX and WordML formats alone. The visual appearance is also preserved in Word to PDF, Word to Image, and Word to HTML conversions. +N> Essential® DocIO currently provides support for table styles in DOCX and WordML formats only. The visual appearance is also preserved in Word to PDF, Word to Image, and Word to HTML conversions. The following code example illustrates how to apply the built-in table styles to the table. @@ -1180,7 +1181,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync Once you have applied a table style, you can enable or disable the special formatting of the table. There are six options: first column, last column, banded rows, banded columns, header row and last row. -The following code example illustrates how to enable and disable the special table formatting options of the table styles +The following code example illustrates how to enable and disable the special table formatting options of the table styles. {% tabs %} @@ -1372,11 +1373,11 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Tables/Apply-custom-table-style). -### Apply Base Style +### Apply base style Table styles can be based on other table styles also. When applying a base style, the new style will inherit the values of the base style that are not explicitly redefined in the new style. You can apply a custom table style or a built-in table style as a base for the table style. -The following code example illustrates how to apply built-in and custom table styles as base styles for another custom table. +The following code example illustrates how to apply built-in and custom table styles as base styles for another custom table style. {% tabs %} @@ -1662,7 +1663,7 @@ IWSection section = document.AddSection(); section.AddParagraph().AppendText("Vertical merging of Table cells"); IWTable table = section.AddTable(); table.ResetCells(5, 5); -// Specifies the vertical merge to the third cell, from second row to fifth row +// Specifies the vertical merge to the third column, from second row to fifth row table.ApplyVerticalMerge(2, 1, 4); //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); @@ -1678,7 +1679,7 @@ IWSection section = document.AddSection(); section.AddParagraph().AppendText("Vertical merging of Table cells"); IWTable table = section.AddTable(); table.ResetCells(5, 5); -//Specifies the vertical merge to the third cell, from second row to fifth row +//Specifies the vertical merge to the third column, from second row to fifth row table.ApplyVerticalMerge(2, 1, 4); //Saves and closes the document instance document.Save("VerticalMerge.docx", FormatType.Docx); @@ -1692,7 +1693,7 @@ Dim section As IWSection = document.AddSection() section.AddParagraph().AppendText("Vertical merging of Table cells") Dim table As IWTable = section.AddTable() table.ResetCells(5, 5) -'Specifies the vertical merge to the third cell, from second row to fifth row +'Specifies the vertical merge to the third column, from second row to fifth row table.ApplyVerticalMerge(2, 1, 4) 'Saves and closes the document instance document.Save("VerticalMerge.docx", FormatType.Docx) @@ -1703,7 +1704,9 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Tables/Apply-vertical-merge-to-cells). -The following code example illustrate how to create a table that contains horizontal merged cells. +To merge cells manually, set the [HorizontalMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellFormat.html#Syncfusion_DocIO_DLS_CellFormat_HorizontalMerge) or [VerticalMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellFormat.html#Syncfusion_DocIO_DLS_CellFormat_VerticalMerge) property of [CellFormat](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellFormat.html) to [CellMerge.Start](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellMerge.html) for the first cell of the merge range and to [CellMerge.Continue](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellMerge.html) for the cells being merged into it. + +The following code example illustrates how to create a table that contains horizontal merged cells. {% tabs %} @@ -1868,7 +1871,7 @@ You can specify one or more rows in a table to be repeated as header row at the * In the case of a single header row, it must be the first row in the table. * In the case of multiple header rows, then header rows must be consecutive from the first row of the table. -N> Heading rows do not have any effect with nested tables in Microsoft Word as well as DocIO +N> Header rows have no effect on nested tables in Microsoft Word or DocIO. The following code example illustrates how to create a table with a single header row. @@ -1962,7 +1965,7 @@ The following code example illustrates how to disable all the table rows from sp {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Tables/Disable-row-to-break-across-pages/.NET/Disable-row-to-break-across-pages/Program.cs" %} //Creates an instance of WordDocument class FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -WordDocument document = new WordDocument(fileStreamPath); +WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); WSection section = document.Sections[0]; WTable table = section.Tables[0] as WTable; //Disables breaking across pages for all rows in the table. @@ -2027,7 +2030,7 @@ foreach (WTableRow row in table.Rows) //Iterates through the paragraphs of the cell foreach (WParagraph paragraph in cell.Paragraphs) { - //When the paragraph contains text Panda then apply green as back color to cell + //When the paragraph contains the text 'panda', apply green as the back color to the cell if (paragraph.Text.Contains("panda")) cell.CellFormat.BackColor = Color.Green; } @@ -2054,7 +2057,7 @@ foreach (WTableRow row in table.Rows) //Iterates through the paragraphs of the cell foreach (WParagraph paragraph in cell.Paragraphs) { - //When the paragraph contains text Panda then apply green as back color to cell + //When the paragraph contains the text 'panda', apply green as the back color to the cell if (paragraph.Text.Contains("panda")) cell.CellFormat.BackColor = Color.Green; } @@ -2076,7 +2079,7 @@ For Each row As WTableRow In table.Rows For Each cell As WTableCell In row.Cells 'Iterates through the paragraphs of the cell For Each paragraph As WParagraph In cell.Paragraphs - 'When the paragraph contains text Panda then apply green as back color to cell + 'When the paragraph contains the text 'panda', apply green as the back color to the cell If paragraph.Text.Contains("panda") Then cell.CellFormat.BackColor = Color.Green End If diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md b/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md index 4a61ec8ea8..b299893f74 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md @@ -32,6 +32,7 @@ using (WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx) {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} +string fileName = "Template.docx"; //Opens an existing document WordDocument inputTemplateDoc = new WordDocument(fileName); //Creates a clone of Input Template @@ -40,10 +41,11 @@ WordDocument clonedDocument = inputTemplateDoc.Clone(); clonedDocument.Save("ClonedDocument.docx"); clonedDocument.Close(); //Closes the input template document instance -sourceDocument.Close(); +inputTemplateDoc.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} +Dim fileName As String = "Template.docx" 'Opens an existing document Dim inputTemplateDoc As New WordDocument(fileName) 'Creates a clone of Input Template @@ -52,14 +54,14 @@ Dim clonedDocument As WordDocument = inputTemplateDoc.Clone() clonedDocument.Save("ClonedDocument.docx") clonedDocument.Close() 'Closes the input template document instance -sourceDocument.Close() +inputTemplateDoc.Close() {% endhighlight %} {% endtabs %} You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-document/Clone-whole-Word-document). -You can also create a deep copy of document elements such as sections, paragraphs, Tables, Text, Image, OleObject, Shapes, TextBoxes and etc., The following code example illustrates how to clone the section and save each cloned section as a Word document. +You can also create a deep copy of document elements such as sections, paragraphs, Tables, Text, Image, OleObject, Shapes, TextBoxes, etc. The following code example illustrates how to clone the section and save each cloned section as a Word document. {% tabs %} @@ -67,7 +69,7 @@ You can also create a deep copy of document elements such as sections, paragraph //Creates an instance of WordDocument class FileStream fileStreamPath = new FileStream("SourceDocument.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument sourceDocument = new WordDocument(fileStreamPath); -//Processes the each section in the Word document +//Processes each section in the Word document for (int i = 0; i < sourceDocument.Sections.Count;i++) { //Creates new WordDocument instance to add cloned section @@ -86,7 +88,7 @@ sourceDocument.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens a source document WordDocument sourceDocument = new WordDocument("SourceDocument.docx"); -//Processes the each section in the Word document +//Processes each section in the Word document for (int i = 0; i < sourceDocument.Sections.Count;i++) { //Creates new WordDocument instance to add cloned section @@ -104,7 +106,7 @@ sourceDocument.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens a source document Dim sourceDocument As New WordDocument("SourceDocument.docx") -'Processes the each section in the Word document +'Processes each section in the Word document For i As Integer = 0 To sourceDocument.Sections.Count - 1 'Creates new WordDocument instance to add cloned section Dim destinationDocument As New WordDocument() @@ -122,9 +124,9 @@ sourceDocument.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-document/Split-by-section). -### Link Paragraph and Character Style +## Link Paragraph and Character Style -You can link character styles with paragraph and vice versa in a Word document using [LinkedStyleName](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Style.html#Syncfusion_DocIO_DLS_Style_LinkedStyleName) property. +You can link character styles with paragraph styles, and vice versa in a Word document using [LinkedStyleName](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Style.html#Syncfusion_DocIO_DLS_Style_LinkedStyleName) property. The following code example explains how to link character and paragraph style. @@ -145,7 +147,7 @@ using (WordDocument document = new WordDocument()) //Sets the formatting of the style charStyle.CharacterFormat.Bold = true; charStyle.CharacterFormat.Italic = true; - //Link both paragraph and character style + //Links both paragraph and character style paraStyle.LinkedStyleName = "CharacterStyle"; //Appends the contents into the paragraph document.LastParagraph.AppendText("AdventureWorks Cycles"); @@ -178,8 +180,8 @@ using (WordDocument document = new WordDocument()) //Sets the formatting of the style charStyle.CharacterFormat.Bold = true; charStyle.CharacterFormat.Italic = true; - //Link both paragraph and character style - paraStyle.LinkedStyleName = "CharacterStyle"; + //Links both paragraph and character style + paraStyle.LinkedStyleName = "CharacterStyle"; //Appends the contents into the paragraph document.LastParagraph.AppendText("AdventureWorks Cycles"); //Applies the style to paragraph @@ -196,7 +198,7 @@ using (WordDocument document = new WordDocument()) {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Opens an input Word template +'Creates a new Word document Using document As WordDocument = New WordDocument() 'This method adds a section and a paragraph in the document document.EnsureMinimal() @@ -209,7 +211,7 @@ Using document As WordDocument = New WordDocument() 'Sets the formatting of the style charStyle.CharacterFormat.Bold = True charStyle.CharacterFormat.Italic = True - 'Link both paragraph and character style + 'Links both paragraph and character style paraStyle.LinkedStyleName = "CharacterStyle" 'Appends the content into the paragraph document.LastParagraph.AppendText("AdventureWorks Cycles") @@ -231,7 +233,7 @@ End Using ## Working with Word document properties -Document properties, also known as metadata, are details about a file that describe or identify it. You can also define the additional custom document properties for the documents by using DocIO Document properties that are classified as two categories. +Document properties, also known as metadata, are details about a file that describe or identify it. You can also define additional custom document properties by using DocIO document properties, which are classified into two categories: * Built-in document properties - includes details such as title, author name, subject, and keywords that identify the document's topic or contents. * Custom document properties - defines the user-defined document properties. @@ -250,7 +252,7 @@ using (WordDocument document = new WordDocument(sourceStreamPath, FormatType.Aut //Accesses the built-in document properties Console.WriteLine("Title - {0}",document.BuiltinDocumentProperties.Title); Console.WriteLine("Author - {0}", document.BuiltinDocumentProperties.Author); - //Modifies or sets the Built-in document properties. + //Modifies or sets the built-in document properties. document.BuiltinDocumentProperties.Author = "Andrew"; document.BuiltinDocumentProperties.LastAuthor = "Steven"; document.BuiltinDocumentProperties.CreateDate = new DateTime(1900, 12, 31, 12, 0, 0); @@ -275,7 +277,7 @@ WordDocument document = new WordDocument(inputFileName); //Accesses the built-in document properties Console.WriteLine("Title - {0}",document.BuiltinDocumentProperties.Title); Console.WriteLine("Author - {0}", document.BuiltinDocumentProperties.Author); -//Modifies or sets the Built-in document properties. +//Modifies or sets the built-in document properties. document.BuiltinDocumentProperties.Author = "Andrew"; document.BuiltinDocumentProperties.LastAuthor = "Steven"; document.BuiltinDocumentProperties.CreateDate = new DateTime(1900, 12, 31, 12, 0, 0); @@ -437,7 +439,7 @@ N> 2. In ASP.NET Core and Xamarin platforms, to update page count in a Word doc N> 3. DocIO uses the Word-to-PDF layout engine to update page count. If the required fonts are missing in the environment, alternate fonts are used, which may affect accuracy. [Ensure](https://support.syncfusion.com/kb/article/6821/check-whether-fonts-in-word-document-are-available-in-machine-for-pdf-or-image-conversion) all fonts used in the input document are available for a correct page count. N> 4. In UWP platform, to updates paragraph, word, and character counts in the document using the [UpdateWordCount()](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_UpdateWordCount) API. -### Adding Custom Document properties +### Adding custom document properties You add a new custom document properties through [Add](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CustomDocumentProperties.html#Syncfusion_DocIO_DLS_CustomDocumentProperties_Add_System_String_System_Object_) method of [CustomProperties](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_CustomDocumentProperties) class. The following code example illustrates how to add a new custom document properties. @@ -899,22 +901,22 @@ using (FileStream docStream = new FileStream("Input.docx", FileMode.Open, FileAc {% highlight c# tabtitle="C# [Windows-specific]" %} //Load Word document. -using (WordDocument document = new WordDocument(“Input.docx” FormatType.Docx)) +using (WordDocument document = new WordDocument("Input.docx", FormatType.Docx)) { //Disable a flag to hide the background in print layout view. document.Settings.DisplayBackgrounds = false; //Save the Word document. - document.Save(“Sample.docx”), FormatType.Docx); + document.Save("Sample.docx", FormatType.Docx); } {% endhighlight %} -{% highlight vb.net tabtitle="VB.NET [Windows-specific] " %} +{% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Load Word document. -Using document As WordDocument = New WordDocument(“Input.docx"), FormatType.Docx) +Using document As WordDocument = New WordDocument("Input.docx", FormatType.Docx) 'Disable a flag to hide the background in the print layout view. document.Settings.DisplayBackgrounds = False 'Save the Word document. - document.Save(“Sample.docx"), FormatType.Docx) + document.Save("Sample.docx", FormatType.Docx) End Using {% endhighlight %} @@ -922,6 +924,8 @@ End Using You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-document/Hide-backgrounds-in-print-layout-view). +N> This setting affects only the Word client's print-layout view; it does not alter the background stored in the document. + ## Remove background in a Word document You can remove background colors and images in an existing Word document by setting [NoBackground](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BackgroundType.html) as the background type. @@ -948,23 +952,23 @@ using (FileStream docStream = new FileStream("Input.docx", FileMode.Open, FileAc {% highlight c# tabtitle="C# [Windows-specific]" %} //Load Word document. -using (WordDocument document = new WordDocument(“Input.docx” FormatType.Docx)) +using (WordDocument document = new WordDocument("Input.docx", FormatType.Docx)) { //Remove the existing background in the Word document. document.Background.Type = BackgroundType.NoBackground; //Save the Word document. - document.Save(“Sample.docx”), FormatType.Docx); + document.Save("Sample.docx", FormatType.Docx); } {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Load Word document. -Using document As WordDocument = New WordDocument(“Input.docx"), FormatType.Docx) +Using document As WordDocument = New WordDocument("Input.docx", FormatType.Docx) 'Remove the existing background in the Word document. - document.Background.Type = BackgroundType.NoBackground; + document.Background.Type = BackgroundType.NoBackground 'Save the Word document. - document.Save(“Sample.docx"), FormatType.Docx) + document.Save("Sample.docx", FormatType.Docx) End Using {% endhighlight %} diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md index dd4639a7d6..5043f13d8c 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md @@ -8,15 +8,15 @@ documentation: UG # Event support for Mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO during Mail merge process: +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merge image data during the Mail merge process. The following events are supported by Syncfusion® DocIO during Mail merge process: -* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html)- occurs when a **Mail merge field** except image Mail merge field is encountered. +* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) — occurs when a **Mail merge field** except image Mail merge field is encountered. -* [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html)- occurs when an **image Mail merge field** is encountered. +* [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) — occurs when an **image Mail merge field** is encountered. -* [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html)- occurs when an **unmerged field** is encountered. +* [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) — occurs when an **unmerged field** is encountered. -* [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html)- occurs when an **unmerged group field** is encountered. +* [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) — occurs when an **unmerged group field** is encountered. ## MergeField Event @@ -106,8 +106,8 @@ End Sub {% endtabs %} -N> 1. While executing mail merge, DocIO internally uses a copy of a particular region for populating the contents. Sometimes, unexpected problems may arise due to inserting multiple body items into the region through the mail merge process. So, to insert multiple body items using the merge field event handler, you are recommended to use this [approach](https://www.syncfusion.com/kb/11701/how-to-replace-merge-field-with-html-string-using-mail-merge) at your side. -N> 2. The [ExecuteGroup(DataTable)](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteGroup_System_Data_DataTable_) method is not supported on the UWP platform. +N> 1. While executing mail merge, DocIO internally uses a copy of a particular region for populating the contents. Sometimes, unexpected problems may arise due to inserting multiple body items into the region through the mail merge process. So, to insert multiple body items using the merge field event handler, we recommend using this [approach](https://www.syncfusion.com/kb/11701/how-to-replace-merge-field-with-html-string-using-mail-merge). +N> 2. The [ExecuteGroup(DataTable)](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteGroup_System_Data_DataTable_) method is not supported on the UWP platform. The cross-platform sample above is not valid for UWP; use an alternative data-binding approach on UWP. The following code example shows GetDataTable method which is used to get data for mail merge. @@ -170,7 +170,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync You can format the merged image like resizing the image and more during mail merge process using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) Event. -N> The [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event triggers only for image merge fields. Ensure you have a valid image merge field in the template document, following the syntax: **{ MERGEFIELD Image:logo }**. +N> The [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event triggers only for image merge fields. Ensure you have a valid image merge field in the template document, following the syntax: **{ MERGEFIELD Image:Logo }**. The following code example shows how to use the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event during Mail merge process. @@ -183,9 +183,9 @@ WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); //Uses the mail merge events handler for image fields document.MailMerge.MergeImageField += new MergeImageFieldEventHandler(MergeField_ProductImage); //Specifies the field names and field values -string[] fieldNames = new string[] { "Logo"}; -string[] fieldValues = new string[] { "Logo.png"}; -//Executes the mail merge with groups +string[] fieldNames = new string[] { "Logo" }; +string[] fieldValues = new string[] { "Logo.png" }; +//Executes the mail merge document.MailMerge.Execute(fieldNames, fieldValues); //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); @@ -200,9 +200,9 @@ WordDocument document = new WordDocument("Template.docx"); //Uses the mail merge events handler for image fields document.MailMerge.MergeImageField += new MergeImageFieldEventHandler(MergeField_ProductImage); //Specifies the field names and field values -string[] fieldNames = new string[] { "Logo"}; -string[] fieldValues = new string[] { "Logo.png"}; -//Executes the mail merge with groups +string[] fieldNames = new string[] { "Logo" }; +string[] fieldValues = new string[] { "Logo.png" }; +//Executes the mail merge document.MailMerge.Execute(fieldNames, fieldValues); //Saves and closes WordDocument instance document.Save("Sample.docx"); @@ -217,7 +217,7 @@ AddHandler document.MailMerge.MergeImageField, AddressOf MergeField_ProductImage 'Specifies the field names and field values Dim fieldNames As String() = New String() {"Logo"} Dim fieldValues As String() = New String() {"Logo.png"} -'Executes the mail merge with groups +'Executes the mail merge document.MailMerge.Execute(fieldNames, fieldValues) 'Saves and closes WordDocument instance document.Save("Sample.docx") @@ -298,10 +298,10 @@ The following code example shows how to use the [BeforeClearField](https://help. {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Event-to-bind-data-for-unmerged-fields/.NET/Event-to-bind-data-for-unmerged-fields/Program.cs" %} //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -WordDocument document = new WordDocument(fileStreamPath); -//Sets “ClearFields” to true to remove empty mail merge fields from document +WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); +//Sets “ClearFields” to false to keep empty mail merge fields in the document document.MailMerge.ClearFields = false; -//Uses the mail merge event to clear the unmerged field while perform mail merge execution +//Uses the mail merge event to clear the unmerged field while performing mail merge execution document.MailMerge.BeforeClearField += new BeforeClearFieldEventHandler(BeforeClearFieldEvent); //Execute mail merge document.MailMerge.ExecuteGroup(GetDataTable()); @@ -315,9 +315,9 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Sets “ClearFields” to true to remove empty mail merge fields from document +//Sets “ClearFields” to false to keep empty mail merge fields in the document document.MailMerge.ClearFields = false; -//Uses the mail merge event to clear the unmerged field while perform mail merge execution +//Uses the mail merge event to clear the unmerged field while performing mail merge execution document.MailMerge.BeforeClearField += new BeforeClearFieldEventHandler(BeforeClearFieldEvent); //Execute mail merge document.MailMerge.ExecuteGroup(GetDataTable()); @@ -329,10 +329,10 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As WordDocument = New WordDocument("Template.docx") -'Sets “ClearFields” to true to remove empty mail merge fields from document +'Sets “ClearFields” to false to keep empty mail merge fields in the document document.MailMerge.ClearFields = False -'Uses the mail merge event to clear the unmerged field while perform mail merge execution -document.MailMerge.BeforeClearField += New BeforeClearFieldEventHandler(AddressOf BeforeClearField) +'Uses the mail merge event to clear the unmerged field while performing mail merge execution +AddHandler document.MailMerge.BeforeClearField, AddressOf BeforeClearFieldEvent 'Execute mail merge document.MailMerge.ExecuteGroup(GetDataTable()) 'Saves and closes the WordDocument instance @@ -559,13 +559,13 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As WordDocument = New WordDocument("Template.docx") -'Sets “ClearFields” to true to remove empty mail merge fields from document +'Sets “ClearFields” to false to keep empty mail merge fields in the document document.MailMerge.ClearFields = False -'Uses the mail merge event to clear the unmerged field while perform mail merge execution +'Uses the mail merge event to clear the unmerged field while performing mail merge execution AddHandler document.MailMerge.BeforeClearGroupField, AddressOf BeforeClearFields 'Gets the employee details as “IEnumerable” collection Dim employeeList As List(Of Employees) = GetEmployees() -'Creates an instance of MailMergeDataTableby specifying mail merge group name and “IEnumerable” collection +'Creates an instance of MailMergeDataTable by specifying mail merge group name and “IEnumerable” collection Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Employees", employeeList) 'Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable) @@ -589,6 +589,7 @@ private static void BeforeClearFields(object sender, BeforeClearGroupFieldEventA string[] groupName = args.GroupName.Split(':'); if (groupName[groupName.Length - 1] == "Orders") { + //Gets the field names in the group string[] fields = args.FieldNames; List orderList = GetOrders(); //Binds the data to the unmerged fields in group as alternative values @@ -626,16 +627,16 @@ private static void BeforeClearFields(object sender, BeforeClearGroupFieldEventA {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} Private Sub BeforeClearFields(ByVal sender As Object, ByVal args As BeforeClearGroupFieldEventArgs) If Not args.HasMappedGroupInDataSource Then - ‘Gets the Current unmerged group name from the event argument + 'Gets the Current unmerged group name from the event argument Dim groupName As String() = args.GroupName.Split(":"c) If groupName(groupName.Length - 1) = "Orders" Then 'Gets the field names in the group Dim fields As String() = args.FieldNames Dim orderList As List(Of OrderDetails) = GetOrders() - ‘Binds the data to the unmerged fields in group as alternative values + 'Binds the data to the unmerged fields in group as alternative values args.AlternateValues = orderList Else - ‘If group value is empty, you can set whether the unmerged merge group field can be clear or not + 'If group value is empty, you can set whether the unmerged merge group field can be clear or not args.ClearGroup = True End If End If @@ -698,7 +699,7 @@ public static List GetEmployees() 'Gets orders list Private Shared Function GetOrders() As List(Of OrderDetails) Dim orders As List(Of OrderDetails) = New List(Of OrderDetails)() - orders.Add(New OrderDetails("10835", New DateTime(2015, 1, 5), New DateTime(2015, 1, 12), New DateTime(2015, 1, 21))) + orders.Add(New OrderDetails("10952", New DateTime(2015, 2, 5), New DateTime(2015, 2, 12), New DateTime(2015, 2, 21))) Return orders End Function diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md index 220a6074e9..1c19ce5156 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md @@ -8,7 +8,7 @@ documentation: UG # Mail merge for a group -You can perform Mail merge and append multiple records from data source within a specified region to a template document. The region between start and end groups merge fields. It gets repeated for every record from the data source. +You can perform Mail merge and append multiple records from data source within a specified region to a template document. The region is bounded by start and end group merge fields. The region gets repeated for every record from the data source. The following table illustrates the supported mail merge overloads for ExecuteGroup method. @@ -38,11 +38,10 @@ The following table illustrates the supported mail merge overloads for ExecuteGr The region where the Mail merge operations are to be performed must be marked by two merge fields with the following names. * «TableStart:TableName» and «BeginGroup:GroupName» - For the entry point of the region. - * «TableEnd:TableName» and «EndGroup:GroupName» - For the end point of the region. - 1. *TableStart* and *TableEnd* region is preferred for performing Mail merge inside the table cell. - 2. *BeginGroup* and *EndGroup* region is preferred for performing Mail merge inside the document body contents. + * *TableStart* and *TableEnd* regions are preferred for performing Mail merge inside the table cell. + * *BeginGroup* and *EndGroup* regions are preferred for performing Mail merge inside the document body contents. For example, consider that you have a template document as shown. @@ -54,7 +53,7 @@ In this template, Employees is the group name and the same name should be used w The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for [ExecuteGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteGroup_System_Data_DataTable_) method to perform Mail merge within a group from various data sources. -N> For group mail merge, declare a class with the field names, create a list, and pass it to [MailMergeDataTable](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteGroup_Syncfusion_DocIO_DLS_MailMergeDataTable_). Ensure that the property and field names in the input document match when creating the data table. +N> For group mail merge, declare a class with the field names, create a list, and pass it to [MailMergeDataTable](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMergeDataTable.html). Ensure that the property and field names in the input document match when creating the data table. The following code example shows how to perform Mail merge in the specific region with **data source retrieved from SQL connection**. @@ -108,8 +107,8 @@ private DataTable GetDataTable() adapter.Fill(dataset); adapter.Dispose(); conn.Close(); - System.Data.DataTable table = dataset.Tables[0]; - //Sets table name as Employees for template merge field reference. + DataTable table = dataset.Tables[0]; + //Sets the table name to "Employees" to match the template merge field. table.TableName = "Employees"; return table; } @@ -125,7 +124,7 @@ Private Function GetDataTable() As DataTable adapter.Dispose() conn.Close() Dim table As System.Data.DataTable = DataSet.Tables(0) - 'Sets table name as Employees for template merge field reference. + 'Sets the table name to "Employees" to match the template merge field. table.TableName = "Employees" Return table End Function @@ -149,9 +148,9 @@ You can perform Mail merge with .NET objects in a template document. The followi //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -//Gets the employee details as “IEnumerable” collection +//Gets the employee details as IEnumerable collection List employeeList = GetEmployees(); -//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection MailMergeDataTable dataTable = new MailMergeDataTable("Employees", employeeList); //Uses the mail merge events handler for image fields. document.MailMerge.MergeImageField += new MergeImageFieldEventHandler(MergeField_EmployeeImage); @@ -179,9 +178,9 @@ private void MergeField_EmployeeImage(object sender, MergeImageFieldEventArgs ar {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Gets the employee details as “IEnumerable” collection +//Gets the employee details as IEnumerable collection List employeeList = GetEmployees(); -//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection MailMergeDataTable dataTable = new MailMergeDataTable("Employees", employeeList); //Uses the mail merge events handler for image fields. document.MailMerge.MergeImageField += new MergeImageFieldEventHandler(MergeField_EmployeeImage); @@ -207,9 +206,9 @@ private void MergeField_EmployeeImage(object sender, MergeImageFieldEventArgs ar {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As New WordDocument("Template.docx") -'Gets the employee details as “IEnumerable” collection +'Gets the employee details as IEnumerable collection Dim employeeList As List(Of Employee) = GetEmployees() -'Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +'Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection Dim dataTable As New MailMergeDataTable("Employees", employeeList) 'Uses the mail merge events handler for image fields. AddHandler document.MailMerge.MergeImageField, AddressOf MergeField_EmployeeImage diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md index 1d35ce169b..40a48c955c 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md @@ -6,9 +6,9 @@ control: DocIO documentation: UG --- -# Nested Mail merge for group +# Mail merge for nested groups -You can perform nested Mail merge with relational or hierarchical data source and independent data tables in a template document. +You can perform nested mail merge with relational or hierarchical data source and independent data tables in a template document. The following table illustrates the supported mail merge overloads for ExecuteNestedGroup method. @@ -43,9 +43,9 @@ The following table illustrates the supported mail merge overloads for ExecuteNe ## Create template for nested group mail merge -Nested Mail merge operation automatically replaces the merge field with immediate group data. You can also predefine the group data that is populated to a merge field. - -To execute nested mail merge, design your Word document template as follow. +Nested mail merge operation automatically replaces the merge field with immediate group data. You can also predefine the group data that is populated in a merge field. + +To execute nested mail merge, design your Word document template as follows. ![Word document template for nested groups](../MailMerge_images/file-formats-word-nested-group-mail-merge-template.png) @@ -53,7 +53,7 @@ In this template, Employees is the owner group and it has two child groups Custo ## Execute nested group mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_System_Data_Common_DbConnection_System_Collections_ArrayList_) method to perform Mail merge for nested groups or regions in the Word document. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_System_Data_Common_DbConnection_System_Collections_ArrayList_) method to perform mail merge for nested groups or regions in the Word document. You need to define commands with the table name and expression for linking the multiple data tables **(explicit relation data)** during nested Mail merge process. You can use the “%TableName.ColumnName%” expression for getting the current value of specified column or field from the table. @@ -154,7 +154,7 @@ The resultant document looks as follows. Essential® DocIO allows you to perform Mail merge with the dynamic objects. The [ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0) is like a collection of key and value pairs, which means IDictionary. So, you can also use IDictionary collection instead of [ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0) to execute mail merge. -The following code snippet shows how to perform the Mail merge with dynamic objects ([ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0)). +The following code snippet shows how to perform the mail merge with dynamic objects ([ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject)). {% tabs %} @@ -170,7 +170,7 @@ dataSet.Add(dataTable); dataTable = new MailMergeDataTable("Orders", GetOrders()); dataSet.Add(dataTable); List commands = new List(); -//DictionaryEntry contain "Source table" (key) and "Command" (value) +//DictionaryEntry contains "Source table" (key) and "Command" (value) DictionaryEntry entry = new DictionaryEntry("Customers", string.Empty); commands.Add(entry); //Retrieves the customer details @@ -196,7 +196,7 @@ dataSet.Add(dataTable); dataTable = new MailMergeDataTable("Orders", GetOrders()); dataSet.Add(dataTable); List commands = new List(); -//DictionaryEntry contain "Source table" (key) and "Command" (value) +//DictionaryEntry contains "Source table" (key) and "Command" (value) DictionaryEntry entry = new DictionaryEntry("Customers", string.Empty); commands.Add(entry); //Retrieves the customer details @@ -220,7 +220,7 @@ dataSet.Add(dataTable) dataTable = New MailMergeDataTable("Orders", GetOrders()) dataSet.Add(dataTable) Dim commands As New List(Of DictionaryEntry)() -'DictionaryEntry contain "Source table" (key) and "Command" (value) +'DictionaryEntry contains "Source table" (key) and "Command" (value) Dim entry As New DictionaryEntry("Customers", String.Empty) commands.Add(entry) 'Retrieves the customer details @@ -361,23 +361,28 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Mail merge with implicit relational data -You can perform **nested Mail merge with implicit relational data** objects without any explicit relational commands by using the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_Syncfusion_DocIO_DLS_MailMergeDataTable_) overload method. +You can perform **nested mail merge with implicit relational data** objects without any explicit relational commands by using the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_Syncfusion_DocIO_DLS_MailMergeDataTable_) overload method. + +DocIO automatically maps child collections to nested groups by matching the property name on the data object to the group name declared in the template (for example, a property named `Departments` on the `Organization` class maps to the `Departments` group region). Ensure property names match the group names used in the template. -### Map the field of ancestor group +### Map fields of ancestor groups -You can also merge any field in the nested group by **mapping the field or column of its ancestor group or table** in the data source. To achieve this, you need to add a corresponding group name or table name as a prefix to the merge field name along with “:” separator. +You can also merge any field in the nested group by **mapping the field or column of its ancestor group or table** in the data source. To achieve this, add the corresponding group name or table name as a prefix to the merge field name along with the `:` separator. For example: - * The merge field name should be like “TableName:Id” (<>) - * The merge field name should be like “Image:TableName:Photo” (<>) - -For example, consider that you have a template document as follow. + * The merge field name should be like `TableName:Id` (<>) + * The merge field name should be like `Image:TableName:Photo` (<>) + +> **NOTE** +> Image merge fields require the merge field to be configured with the `Image:` prefix in the template and the data value to be a byte array or `Image` instance. + +For example, consider that you have a template document as follows. ![Word document template to map the fields of ancestor group](../MailMerge_images/file-formats-word-mapping-template.png) -In the above template, Organizations is the owner group and it has two child groups Departments and Employees. The Supervisor merge field of Departments group is used in Employees group. +In the above template, Organizations is the owner group and it has two child groups Departments and Employees. The `Supervisor` merge field of the Departments group is used in the Employees group. -The following code example shows how to perform nested Mail merge with the implicit relational data objects. +The following code example shows how to perform nested mail merge with the implicit relational data objects. {% tabs %} @@ -385,9 +390,9 @@ The following code example shows how to perform nested Mail merge with the impli //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -//Gets the organization details as “IEnumerable” collection +//Gets the organization details as IEnumerable collection List organizationList = GetOrganizations(); -//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection MailMergeDataTable dataTable = new MailMergeDataTable("Organizations", organizationList); //Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable); @@ -401,9 +406,9 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Gets the organization details as “IEnumerable” collection +//Gets the organization details as IEnumerable collection List organizationList = GetOrganizations(); -//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection MailMergeDataTable dataTable = new MailMergeDataTable("Organizations", organizationList); //Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable); @@ -415,9 +420,9 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As WordDocument = New WordDocument("Template.docx") -'Gets the organization details as “IEnumerable” collection +'Gets the organization details as IEnumerable collection Dim organizationList As List(Of Organization) = GetOrganizations() -'Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +'Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Organizations", organizationList) 'Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable) @@ -477,7 +482,7 @@ public static List GetOrganizations() {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -Public Function GetOrganizations() As List(Of Organization) +Public Shared Function GetOrganizations() As List(Of Organization) 'Creates Employee details Dim employees As List(Of EmployeeDetails) = New List(Of EmployeeDetails) employees.Add(New EmployeeDetails("Thomas Hardy", "1001", "05/27/1996")) diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md index 3336f510f3..697b56134d 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md @@ -8,11 +8,11 @@ documentation: UG # Mail merge options in Word Library -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class allows you to customize the Mail merge process with the following options. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class allows you to customize the mail merge process with the following options. ## Field Mapping -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class can automatically **maps the merge field names with data source column names** during Mail merge process. You can also customize the field mapping when the merge field names in the template document varies with the column names in the data source by using [MappedFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_MappedFields) collection. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class can automatically **map the merge field names with data source column names** during mail merge process. You can also customize the field mapping when the merge field names in the template document vary with the column names in the data source by using [MappedFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_MappedFields) collection. The following code example shows how to add mapping when a merge field name in a document and column name in data source have different names. @@ -132,29 +132,29 @@ The following code example shows how to retrieve the merge field names for a spe {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Retrieve-merge-field-names/.NET/Retrieve-merge-field-names/Program.cs" %} -//Gets the fields from the specified groups. +//Gets the fields from the specified group. string[] fieldNames = document.MailMerge.GetMergeFieldNames(groupName); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Gets the fields from the specified groups +//Gets the fields from the specified group string[] fieldNames = document.MailMerge.GetMergeFieldNames(groupName); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Gets the fields from the specified groups +'Gets the fields from the specified group Dim fieldNames As String() = document.MailMerge.GetMergeFieldNames(groupName) {% endhighlight %} {% endtabs %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Mail-Merge/Retrieve-merge-field-names). +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Mail-Merge/Retrieve-merge-field-names). This sample demonstrates all three methods shown above (`GetMergeFieldNames`, `GetMergeGroupNames`, and `GetMergeFieldNames(groupName)`). ## Remove empty paragraphs -You can remove the empty paragraphs when the paragraph has only a merge field item, without any data during Mail merge process. +You can remove the empty paragraphs when the paragraph has only a merge field item, without any data during mail merge process. -The following code example shows how to remove the empty paragraphs during Mail merge process. +The following code example shows how to remove the empty paragraphs during mail merge process. {% tabs %} @@ -215,15 +215,15 @@ Essential® DocIO removes or keeps the unmerged merge fields in th When a merge field is considered as unmerged during mail merge process? -1. The merge field doesn't have mapping field in data source. +1. The merge field doesn't have a mapping field in data source. -2. The merge field has mapping field in data source, but the data is null or string.Empty. +2. The merge field has a mapping field in data source, but the data is null or string.Empty. -Mail merge operation automatically removes the unmerged merge fields since the default value of [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property is true. +The mail merge operation automatically removes the unmerged merge fields since the default value of the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property is true. T> 1. Set [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property to false before the mail merge execution statement if your requirement is to keep the unmerged merge fields in the output document. T> 2. Modify the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property before each mail merge execution statement while performing multiple mail merge executions if your requirement is to remove the unmerged merge fields in one mail merge execution and keep the unmerged merge fields in another mail merge execution. -T> 3. Order the mail merge executions with the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property false as first to avoid removal merge fields that are required for next mail merge execution in the same document. +T> 3. Order the mail merge executions with the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property false as first to avoid removal of merge fields that are required for next mail merge execution in the same document. T> 4. You can get the unmerged fields in your document, customize the mail merge process using the BeforeClearField Event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). The following code example shows how to keep the unmerged merge fields in the generated Word document. @@ -234,7 +234,7 @@ The following code example shows how to keep the unmerged merge fields in the ge //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -//Sets “ClearFields” to true to remove empty mail merge fields from document +//Sets “ClearFields” to false to keep the unmerged mail merge fields in document document.MailMerge.ClearFields = false; string[] fieldNames = new string[] { "EmployeeId", "Phone", "City" }; string[] fieldValues = new string[] { "1001", "+91-9999999999", "London" }; @@ -250,7 +250,7 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Sets “ClearFields” to true to remove empty mail merge fields from document +//Sets “ClearFields” to false to keep the unmerged mail merge fields in document document.MailMerge.ClearFields = false; string[] fieldNames = new string[] { "EmployeeId", "Phone", "City" }; string[] fieldValues = new string[] { "1001", "+91-9999999999", "London" }; @@ -264,7 +264,7 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As New WordDocument("Template.docx") -'Sets “ClearFields” to true to remove empty mail merge fields from document +'Sets “ClearFields” to false to keep the unmerged mail merge fields in document document.MailMerge.ClearFields = False Dim fieldNames As String() = New String() {"EmployeeId", "Phone", "City"} Dim fieldValues As String() = New String() {"1001", "+91-9999999999", "London"} @@ -281,7 +281,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Remove empty group -You can remove the empty merge field groups which contains unmerged merge fields after executing mail merge for a group in a Word document. +You can remove the empty merge field groups which contain unmerged merge fields after executing mail merge for a group in a Word document. The following code example shows how to remove empty merge field group during mail merge process in a Word document. @@ -544,15 +544,15 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Restart numbering in lists -You can restart the list numbering for each records while performing mail merge for a group in Word document. +You can restart the list numbering for each record while performing mail merge for a group in Word document (https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.ImportOptions.html). -The following code example shows how to restart the list numbering in a Word documents while performing mail merge. +The following code example shows how to restart the list numbering in a Word document while performing mail merge. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Restart-list-numbering-in-mail-merge/.NET/Restart-list-numbering-in-mail-merge/Program.cs" %} //Loads an existing Word document -FileStream fileStream = new FileStream("Template.docx", FileMode.Open); +FileStream fileStream = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStream, FormatType.Docx); //Sets ImportOptions to restart the list numbering document.ImportOptions = ImportOptions.ListRestartNumbering; @@ -583,7 +583,7 @@ employeeList.Add(new Employee("101", "Nancy Davolio", "Seattle, WA, USA")); employeeList.Add(new Employee("102", "Andrew Fuller", "Tacoma, WA, USA")); employeeList.Add(new Employee("103", "Janet Leverling", "Kirkland, WA, USA")); //Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection -MailMergeDataTable dataTable = new MailMergeDataTable("Employee", employeeList); +MailMergeDataTable dataTable = new MailMergeDataTable("Employees", employeeList); //Performs mail merge document.MailMerge.ExecuteGroup(dataTable); //Saves the Word document @@ -603,7 +603,7 @@ employeeList.Add(New Employee("101", "Nancy Davolio", "Seattle, WA, USA")) employeeList.Add(New Employee("102", "Andrew Fuller", "Tacoma, WA, USA")) employeeList.Add(New Employee("103", "Janet Leverling", "Kirkland, WA, USA")) 'Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection -Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Employee", employeeList) +Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Employees", employeeList) 'Performs mail merge document.MailMerge.ExecuteGroup(dataTable) 'Saves the Word document @@ -774,7 +774,7 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document -Dim document As WordDocument = New WordDocument("Data/Template.docx") +Dim document As WordDocument = New WordDocument("Template.docx") 'Creates a data table Dim table As DataTable = New DataTable("CompatibleVersions") table.Columns.Add("WordVersion") @@ -867,7 +867,7 @@ document.Close() {% endtabs %} -The following code example shows how to skip merging particular image during mail merge process using MergeImageFieldEventHandler. +The following code example shows how to skip merging particular image during mail merge process using [MergeImageFieldEventHandler](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html). For details on the event arguments, see [MergeImageFieldEventArgs](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventArgs.html) (members: `Skip`, `FieldName`, `FieldValue`, `ImageStream`, `ImageFileName`, `Picture`). {% tabs %} @@ -876,7 +876,10 @@ private void MergeEmployeePhoto(object sender, MergeImageFieldEventArgs args) { //Skip to merge particular image if (args.FieldName == "Andrew") + { args.Skip = true; + return; + } //Sets image string ProductFileName = args.FieldValue.ToString(); FileStream imageStream = new FileStream(ProductFileName, FileMode.Open, FileAccess.Read); @@ -892,7 +895,10 @@ private void MergeEmployeePhoto(object sender, MergeImageFieldEventArgs args) { //Skip to merge particular image if (args.FieldName == "Andrew") + { args.Skip = true; + return; + } //Sets image args.ImageFileName = args.FieldValue.ToString(); } @@ -903,6 +909,7 @@ Private Sub MergeEmployeePhoto(ByVal sender As Object, ByVal args As MergeImageF 'Skip to merge particular image If args.FieldName = "Andrew" Then args.Skip = True + Return End If 'Sets image Dim ProductFileName As String = args.FieldValue.ToString() @@ -920,6 +927,8 @@ You can start a new page for each group of records while performing a mail merge The following code example illustrates how to start a new page for each group of records during the mail merge process. +N> The `GetInvoice` helper method and the `Invoice`, `Orders`, `Order`, and `OrderTotals` classes used by this snippet are shown below the tabs. + {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Start-at-new-page/.NET/Start-at-new-page/Program.cs" %} @@ -1105,7 +1114,7 @@ Public Function GetInvoice() As List(Of Invoice) invoices.Add(New Invoice(orders, order, orderTotals)) orders = New List(Of Orders)() - orders.Add(New Orders("10250", "Hanari Carnes", "Rua do Paço, 67", "Rio de Janeiro", "05454-876", "Brazil", "VINET", "Rua do Paço, "1996-07-04T00:00:00-04:00", "1996-08-01T00:00:00-04:00", "1996-07-16T00:00:00-04:00", "United Package")) + orders.Add(New Orders("10250", "Hanari Carnes", "Rua do Paço, 67", "Rio de Janeiro", "05454-876", "Brazil", "VINET", "Rua do Paço, 67", "51100", "Rio de Janeiro", "Brazil", "Margaret Peacock", "Hanari Carnes", "1996-07-04T00:00:00-04:00", "1996-08-01T00:00:00-04:00", "1996-07-16T00:00:00-04:00", "United Package")) order = New List(Of Order)() order.Add(New Order("65", "Louisiana Fiery Hot Pepper Sauce", "16.8", "15", "0.15", "214.2")) @@ -2020,7 +2029,7 @@ By executing the above code example, it generates the resultant Word document as ![Output Word document of start at new page](../mailmerge_images/generated-word-document-in-file-formats.png) -N> This [StartAtNewPage](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_StartAtNewPage) property is valid for group mail merge and also that the corresponding group start and group end should be present in the text body of the Word document. This [StartAtNewPage](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_StartAtNewPage) property is not valid when the group start and group end are present in the table, headers, and footers. +N> The [StartAtNewPage](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_StartAtNewPage) property is valid only for group mail merge where the group start and group end are present in the text body of the Word document. It is not valid when the group start and group end are present inside a table, header, or footer. ## Remove mail merge settings @@ -2066,7 +2075,7 @@ Dim document As New WordDocument("Template.docx", FormatType.Docx) If document.MailMerge.Settings.HasData Then document.MailMerge.Settings.RemoveData() End If -Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -2081,6 +2090,8 @@ You can change the linked **data source file path from a Word mail merge main do The following code example shows how to change the data source file path in the template Word document. +N> The path can be relative or absolute and should point to a file format supported by Microsoft Word for mail merge (for example, `.txt`, `.csv`, `.xls`/`.xlsx`, or `.mdb`). + {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Change-mail-merge-data-source-path/.NET/Change-mail-merge-data-source-path/Program.cs" %} diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md index 3598869836..efe6ee1049 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md @@ -1,25 +1,26 @@ --- -title: Troubleshooting tips for Mail merge | DocIO | Syncfusion +title: Troubleshooting tips for Mail Merge | DocIO | Syncfusion description: Learn how to troubleshoot Mail Merge issues in the .NET Word (DocIO) library, including common errors. platform: document-processing control: DocIO documentation: UG --- -# Troubleshooting Mail merge Issues in .NET Word Library +# Troubleshooting Mail Merge Issues in .NET Word Library ## Why is mail merge not working correctly in DocIO? Mail merge issues can arise due to incorrect merge fields, mismatched data sources, or missing fields in the template. Ensure the following: * Merge fields (<>) are used instead of plain text. -* **Data Source Check:** Ensure the required fields exist in the data source. -* **Match Field Names:** Sometimes, the field names in the Word document are different from the property names in your data source class. For example, if your document has "FirstName" and "LastName", but your Employee class uses different names, mail merge will not work correctly. +* **Data Source Check:** Ensure the required fields exist in the data source. Verify the data source column/property names against the merge field names in the Word template. +* **Match Field Names:** Sometimes, the field names in the Word document are different from the property names in your data source class. For example, if your document has "FirstName" and "LastName", but your Employee class uses different names, Mail Merge will not work correctly. **How to fix this:** - * The property names in your MergeField class should be exactly the same as the merge field names in your Word document. + * The property names in your data source class should be exactly the same as the merge field names in your Word document. * Field names are case-sensitive, so make sure they match exactly. - * You can press **Alt + F9** in Microsoft Word to see the actual field codes and check if they are correct. + +**How to verify the merge fields:** Press **Alt + F9** in Microsoft Word to reveal the actual field codes and confirm the merge field names are correct. **Example:** @@ -70,8 +71,11 @@ Mail merge only works with merge fields, not manually typed placeholders. If tex Refer to [Syncfusion® Documentation](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-find-and-replace#find-and-replace-a-pattern-of-text-with-a-merge-field) for detailed implementation. -## Why is nested group mail merge not functioning correctly? +## Why is nested group Mail Merge not functioning correctly? + +Nested Mail Merge requires proper execution using the correct method and structure. +* Use the appropriate overload of the [`ExecuteNestedGroup`](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) method to handle nested groups effectively. Supported overloads include: + * `ExecuteNestedGroup(MailMergeDataTable)` — for implicit relational data, where the child groups are nested within the parent table's data. + * `ExecuteNestedGroup(MailMergeDataSet, List)` — for explicit relational data, where the relations between parent and child groups are defined using command entries. +* Ensure the data structure follows the correct hierarchy for nested groups to maintain implicit relational data. Each child group must be represented as a relation between the parent table and the child table in the data source. -Nested mail merge requires proper execution using the correct method and structure. -* Use the appropriate overload of the ExecuteNestedGroup method to handle nested groups effectively. Refer to the Syncfusion documentation for supported overloads. -* Ensure the data structure follows the correct hierarchy for nested groups to maintain implicit relational data. diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/simple-mail-merge.md b/Document-Processing/Word/Word-Library/NET/mail-merge/simple-mail-merge.md index b0e6fec7af..dfaf164f25 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/simple-mail-merge.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/simple-mail-merge.md @@ -1,12 +1,12 @@ --- -title: Simple Mail merge in C# | DocIO | Syncfusion -description: Learn how to Mail merge - replace all merge fields with data, by repeating whole document for each record in data source using the .NET Word (DocIO) library. +title: Simple mail merge in C# | DocIO | Syncfusion +description: Learn how to mail merge - replace all merge fields with data, by repeating whole document for each record in data source using the .NET Word (DocIO) library. platform: document-processing control: DocIO documentation: UG --- -# Simple Mail merge in Word document +# Simple mail merge in a Word document You can create a Word document template using Microsoft Word application or by adding merge fields in the Word document programmatically. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-mail-merge#create-word-document-template). @@ -51,9 +51,9 @@ The following table illustrates the supported mail merge overloads for Execute m ## Mail merge with string arrays -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for [Execute](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_Execute_System_String___System_String___) method to perform Mail merge from various data sources. The Mail merge operation replaces the matching merge fields with the respective data. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for the [Execute](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_Execute_System_String___System_String___) method to perform a mail merge from various data sources. The mail merge operation replaces the matching merge fields with the respective data. Unmatched merge fields are left unchanged in the output document by default. -### Create Word document template +### Create a Word document template The following code example shows how to create a Word template document with merge fields. @@ -78,9 +78,10 @@ document.LastParagraph.AppendText("\nPhone: "); document.LastParagraph.AppendField("Phone", FieldType.FieldMergeField); document.LastParagraph.AppendText("\nCity: "); document.LastParagraph.AppendField("City", FieldType.FieldMergeField); -//Saves the Word document to MemoryStream -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); +//Saves the Word document to a file +FileStream fileStream = new FileStream("Template.docx", FileMode.Create, FileAccess.ReadWrite); +document.Save(fileStream, FormatType.Docx); +fileStream.Dispose(); //Closes the Word document document.Close(); {% endhighlight %} @@ -139,8 +140,7 @@ The generated template document looks as follows. ### Execute mail merge -The following code example shows how to perform a simple Mail merge in the generated template document with string array as data source. - +The following code example shows how to perform a simple mail merge in the generated template document with a string array as the data source. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Mail-merge-with-string-arrays/.NET/Mail-merge-with-string-arrays/Program.cs" %} @@ -191,4 +191,4 @@ You can download a complete working sample from [GitHub](https://github.com/Sync The resultant document looks as follows. -![Mail merged Word document](../MailMerge_images/file-formats-word-simple-mail-merge-output.png) \ No newline at end of file +![Mail merged Word document](../MailMerge_images/file-formats-word-simple-mail-merge-output.png) diff --git a/Document-Processing/Word/Word-Library/NET/working-with-lists.md b/Document-Processing/Word/Word-Library/NET/working-with-lists.md index fde55427a9..234d131615 100644 --- a/Document-Processing/Word/Word-Library/NET/working-with-lists.md +++ b/Document-Processing/Word/Word-Library/NET/working-with-lists.md @@ -6,7 +6,7 @@ control: DocIO documentation: UG --- -# Working with Lists +# Working with Lists in the Word Library Lists can organize and format the contents of a document in hierarchical way. There are nine levels in the list, starting from level 0 to level 8. DocIO supports both built-in list styles and custom list styles. The following are the types of list supported in DocIO: @@ -26,7 +26,7 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Applies default numbered list style +//Applies default bulleted list style paragraph.ListFormat.ApplyDefBulletStyle(); //Adds text to the paragraph paragraph.AppendText("List item 1"); @@ -56,7 +56,7 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Applies default numbered list style +//Applies default bulleted list style paragraph.ListFormat.ApplyDefBulletStyle(); //Adds text to the paragraph paragraph.AppendText("List item 1"); @@ -85,7 +85,7 @@ Dim document As New WordDocument() Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -'Applies default numbered list style +'Applies default bulleted list style paragraph.ListFormat.ApplyDefBulletStyle() 'Adds text to the paragraph paragraph.AppendText("List item 1") @@ -109,7 +109,7 @@ document.Close() {% endtabs %} -By running the above code, you will generate a **Bullet List** as shown below. +By running the above code, you will generate a **Bulleted List** as shown below. ![List](Lists_images/CreateBulletedList.png) You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Simple-bulleted-list). @@ -228,7 +228,7 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Applies default numbered list style +//Applies default bulleted list style paragraph.ListFormat.ApplyDefBulletStyle(); //Adds text to the paragraph paragraph.AppendText("List item 1 - Level 0"); @@ -262,7 +262,7 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Applies default numbered list style +//Applies default bulleted list style paragraph.ListFormat.ApplyDefBulletStyle(); //Adds text to the paragraph paragraph.AppendText("List item 1 - Level 0"); @@ -295,7 +295,7 @@ Dim document As New WordDocument() Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -'Applies default numbered list style +'Applies default bulleted list style paragraph.ListFormat.ApplyDefBulletStyle() 'Adds text to the paragraph paragraph.AppendText("List item 1 - Level 0") @@ -323,14 +323,14 @@ document.Close() {% endtabs %} -By running the above code, you will generate a **Multilevel Bullet List** as shown below. +By running the above code, you will generate a **Multilevel Bulleted List** as shown below. ![List](Lists_images/MultilevelBulletList.png) You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Multilevel-bulleted-list). ## Create Multilevel Numbered List -The following code example explains how to create multilevel numbered list. +The following code example explains how to create a multilevel numbered list. {% tabs %} @@ -441,7 +441,7 @@ By running the above code, you will generate a **Multilevel Numbered List** as s You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Multilevel-numbered-list). -## List number format +## List Number Format The ListPatternType enum in DocIO lets you customize how list numbers appear in Word documents. It supports 61 styles, including Arabic, Hebrew, and more. This is useful for creating region-specific documents or applying culturally appropriate numbering formats. @@ -515,7 +515,7 @@ levelOne.PatternType = ListPatternType.Hebrew1; levelOne.StartAt = 1; // Adds a heading paragraph for the Hebrew1 list. paragraph = section.AddParagraph(); -paragraph.AppendText("List pattern Herbrew"); +paragraph.AppendText("List pattern Hebrew"); // Adds first list item using Hebrew1 style. paragraph = section.AddParagraph(); paragraph.AppendText("List item 1"); @@ -604,7 +604,7 @@ levelOne.PatternType = ListPatternType.Hebrew1; levelOne.StartAt = 1; // Adds a heading paragraph for the Hebrew1 list. paragraph = section.AddParagraph(); -paragraph.AppendText("List pattern Herbrew"); +paragraph.AppendText("List pattern Hebrew"); // Adds first list item using Hebrew1 style. paragraph = section.AddParagraph(); paragraph.AppendText("List item 1"); @@ -716,7 +716,7 @@ document.Close() {% endtabs %} -By running the above code, you will generate a **List Numbered Format** as shown below. +By running the above code, you will generate a **List Number Format** as shown below. ![List](Lists_images/ListNumberFormat.png) You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/List-number-format). @@ -727,7 +727,7 @@ N> Except for the following [ListPatternType](https://help.syncfusion.com/cr/doc You can customize lists in Word documents using DocIO, allowing you to define numbering styles, bullet symbols, indentation levels, and list patterns to suit your formatting needs. -The following code example explains how to create user defined list styles. +The following code example explains how to create a user-defined numbered list style. For a user-defined bulleted list style, see [Bulleted List Styles](#bulleted-list-styles). {% tabs %} @@ -890,7 +890,7 @@ paragraph = section.AddParagraph(); paragraph.AppendText("Multilevel numbered list - Level 0"); //Continues last defined list paragraph.ListFormat.ContinueListNumbering(); -//Increases the level indent +//Decreases the level indent paragraph.ListFormat.DecreaseIndentLevel(); //Adds new paragraph paragraph = section.AddParagraph(); @@ -931,7 +931,7 @@ paragraph = section.AddParagraph(); paragraph.AppendText("Multilevel numbered list - Level 0"); //Continues last defined list paragraph.ListFormat.ContinueListNumbering(); -//Increases the level indent +//Decreases the level indent paragraph.ListFormat.DecreaseIndentLevel(); //Adds new paragraph paragraph = section.AddParagraph(); @@ -971,7 +971,7 @@ paragraph = section.AddParagraph() paragraph.AppendText("Multilevel numbered list - Level 0") 'Continues last defined list paragraph.ListFormat.ContinueListNumbering() -'Increases the level indent +'Decreases the level indent paragraph.ListFormat.DecreaseIndentLevel() 'Adds new paragraph paragraph = section.AddParagraph() @@ -988,7 +988,7 @@ document.Close() {% endtabs %} -By running the above code, you will generate a **Increase or Decrease List indent** as shown below. +By running the above code, you will generate the **Increase or Decrease List Indent** output as shown below. ![List](Lists_images/ChangeListLevels.png) You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Increase-or-decrease-list-indent). @@ -1007,18 +1007,18 @@ IWSection section = document.AddSection(); //Add a new list style to the document. ListStyle listStyle = document.AddListStyle(ListType.Bulleted, "UserDefinedList"); WListLevel levelOne = listStyle.Levels[0]; -//Define the following character, pattern and start index for level 0. +//Define the pattern, bullet character, and start index for level 0. levelOne.PatternType = ListPatternType.Bullet; levelOne.BulletCharacter = "*"; levelOne.StartAt = 1; WListLevel levelTwo = listStyle.Levels[1]; -//Define the following character, pattern and start index for level 1. +//Define the pattern, bullet character, and start index for level 1. levelTwo.PatternType = ListPatternType.Bullet; levelTwo.BulletCharacter = "\u00A9"; levelTwo.CharacterFormat.FontName = "Wingdings"; levelTwo.StartAt = 1; WListLevel levelThree = listStyle.Levels[2]; -//Define the following character, pattern and start index for level 2. +//Define the pattern, bullet character, and start index for level 2. levelThree.PatternType = ListPatternType.Bullet; levelThree.BulletCharacter = "\u0076"; levelThree.CharacterFormat.FontName = "Wingdings"; @@ -1058,18 +1058,18 @@ IWSection section = document.AddSection(); //Add a new list style to the document. ListStyle listStyle = document.AddListStyle(ListType.Bulleted, "UserDefinedList"); WListLevel levelOne = listStyle.Levels[0]; -//Define the following character, pattern and start index for level 0. +//Define the pattern, bullet character, and start index for level 0. levelOne.PatternType = ListPatternType.Bullet; levelOne.BulletCharacter = "*"; levelOne.StartAt = 1; WListLevel levelTwo = listStyle.Levels[1]; -//Define the following character, pattern and start index for level 1. +//Define the pattern, bullet character, and start index for level 1. levelTwo.PatternType = ListPatternType.Bullet; levelTwo.BulletCharacter = "\u00A9"; levelTwo.CharacterFormat.FontName = "Wingdings"; levelTwo.StartAt = 1; WListLevel levelThree = listStyle.Levels[2]; -//Define the following character, pattern and start index for level 2. +//Define the pattern, bullet character, and start index for level 2. levelThree.PatternType = ListPatternType.Bullet; levelThree.BulletCharacter = "\u0076"; levelThree.CharacterFormat.FontName = "Wingdings"; @@ -1108,18 +1108,18 @@ Dim section As IWSection = document.AddSection() 'Add a new list style to the document. Dim listStyle As ListStyle = document.AddListStyle(ListType.Bulleted, "UserDefinedList") Dim levelOne As WListLevel = listStyle.Levels(0) -'Define the following character, pattern and start index for level 0. +'Define the pattern, bullet character, and start index for level 0. levelOne.PatternType = ListPatternType.Bullet levelOne.BulletCharacter = "*" levelOne.StartAt = 1 Dim levelTwo As WListLevel = listStyle.Levels(1) -'Define the following character, pattern and start index for level 1. +'Define the pattern, bullet character, and start index for level 1. levelTwo.PatternType = ListPatternType.Bullet levelTwo.BulletCharacter = ChrW(169) levelTwo.CharacterFormat.FontName = "Wingdings" levelTwo.StartAt = 1 Dim levelThree As WListLevel = listStyle.Levels(2) -'Define the following character, pattern and start index for level 2. +'Define the pattern, bullet character, and start index for level 2. levelThree.PatternType = ListPatternType.Bullet levelThree.BulletCharacter = ChrW(118) levelThree.CharacterFormat.FontName = "Wingdings" @@ -1159,7 +1159,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Numbered List with Prefix -The following code example explains how to create numbered list with prefix from previous level. +The following code example explains how to create a numbered list with prefix from previous level. N> The [NumberPrefix](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WListLevel.html#Syncfusion_DocIO_DLS_WListLevel_NumberPrefix) value for the numbered list should meet the syntax "\u000N" to update the previous list level value as prefix to the current list level. For example, it should be represented as (“\u0000.” or “\u0000.\u0001.”). @@ -1184,7 +1184,7 @@ levelTwo.NumberPrefix = "\u0000."; levelTwo.PatternType = ListPatternType.Arabic; levelTwo.StartAt = 1; WListLevel levelThree = listStyle.Levels[2]; -//Defines the follow character, prefix from previous level, pattern, start index for level 1 +//Defines the follow character, prefix from previous level, pattern, start index for level 2 levelThree.FollowCharacter = FollowCharacterType.Nothing; levelThree.NumberPrefix = "\u0000.\u0001."; levelThree.PatternType = ListPatternType.Arabic; @@ -1235,7 +1235,7 @@ levelTwo.NumberPrefix = "\u0000."; levelTwo.PatternType = ListPatternType.Arabic; levelTwo.StartAt = 1; WListLevel levelThree = listStyle.Levels[2]; -//Defines the follow character, prefix from previous level, pattern, start index for level 1 +//Defines the follow character, prefix from previous level, pattern, start index for level 2 levelThree.FollowCharacter = FollowCharacterType.Nothing; levelThree.NumberPrefix = "\u0000.\u0001."; levelThree.PatternType = ListPatternType.Arabic; @@ -1285,7 +1285,7 @@ levelTwo.NumberPrefix = vbNullChar & "." levelTwo.PatternType = ListPatternType.Arabic levelTwo.StartAt = 1 Dim levelThree As WListLevel = listStyle.Levels(2) -'Defines the follow character, prefix from previous level, pattern, start index for level 1 +'Defines the follow character, prefix from previous level, pattern, start index for level 2 levelThree.FollowCharacter = FollowCharacterType.[Nothing] levelThree.NumberPrefix = vbNullChar & "." & ChrW(1) & "." levelThree.PatternType = ListPatternType.Arabic diff --git a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md index a756e7dde0..65e0245968 100644 --- a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md +++ b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md @@ -7,7 +7,7 @@ documentation: UG --- # Working with Mail merge -Mail merge is a process of merging data from data source to a Word template document. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) class provides support to bind template document and data source. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) instance is replaced with the actual data retrieved from data source for the given merge field name in a template document. +Mail merge is a process of merging data from a data source into a Word template document. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) class provides support to bind template document and data source. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) instance is replaced with the actual data retrieved from the data source for the given merge field name in a template document. ## Supported data sources @@ -16,7 +16,7 @@ The following data sources are supported by Essential® DocIO for
      Data Source

      		Examples

      		Sample
      - + @@ -98,12 +98,12 @@ The mail merge process involves three documents: 3. **Final merged document**: This resultant document is a combination of the template Word document and the data from data source. -T> 1. You can use conditional fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, when you require intelligent decisions in addition to simple mail merge (replace merge fields with result text). To use conditional fields, execute mail merge and then update fields in the Word document using [UpdateDocumentFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_UpdateDocumentFields) API. -T> 2. You can replace the fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, with its most recent result and **generates the plain Word document** by unlinking the fields. Refer to this [link](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-fields#unlink-fields) for more information. +T> 1. You can use conditional fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, when you require intelligent decisions in addition to simple mail merge (i.e., replacing merge fields with result text). To use conditional fields, execute mail merge and then update fields in the Word document using [UpdateDocumentFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_UpdateDocumentFields) API. +T> 2. You can replace the fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, with its most recent result and convert the field results to static text by unlinking the fields. Refer to this [link](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-fields#unlink-fields) for more information. ### Create Word document template -You can create a template document with merge fields by using any Word editor application, like Microsoft Word. By using Word editor application, you can take the advantage of the visual interface to design unique layout, formatting, and more for your Word document template interactively. +You can create a template document with merge fields by using any Word editor application, like Microsoft Word. By using a Word editor application, you can take the advantage of the visual interface to design unique layout, formatting, and more for your Word document template interactively. The following screenshot shows how to insert a merge field in the Word document by **using the Microsoft Word.** @@ -111,7 +111,7 @@ The following screenshot shows how to insert a merge field in the Word document You need to add a prefix (“Image:”) to the merge field name for merging an image in the place of a merge field. -**For example:** The merge field name should be like “Image:Photo” (<>) +**For example:** The merge field name should be like "Image:Photo" (<>) You can **create Word document template programmatically** by adding merge fields to the Word document using Essential® DocIO. @@ -123,16 +123,20 @@ N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-plat {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Create-merge-field/.NET/Create-merge-field/Program.cs" %} //Creates an instance of a WordDocument -WordDocument document = new WordDocument(); -//Adds a section and a paragraph in the document -document.EnsureMinimal(); -//Appends merge field to the last paragraph. -document.LastParagraph.AppendField("FullName", FieldType.FieldMergeField); -//Saves the Word document to MemoryStream -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document -document.Close(); +using (WordDocument document = new WordDocument()) +{ + //Adds a section and a paragraph in the document + document.EnsureMinimal(); + //Appends merge field to the last paragraph. + document.LastParagraph.AppendField("FullName", FieldType.FieldMergeField); + //Saves the Word document to MemoryStream + using (MemoryStream stream = new MemoryStream()) + { + document.Save(stream, FormatType.Docx); + //Writes the Word document to a file + File.WriteAllBytes("Template.docx", stream.ToArray()); + } +} {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} @@ -171,17 +175,21 @@ The following code example shows how to perform mail merge in above Word documen {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Getting-started-mail-merge/.NET/Getting-started-mail-merge/Program.cs" %} //Opens the template document -FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -string[] fieldNames = new string[] { "FullName" }; -string[] fieldValues = new string[] { "Nancy Davolio" }; -//Performs the mail merge -document.MailMerge.Execute(fieldNames, fieldValues); -//Saves the Word document to MemoryStream -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document -document.Close(); +using (FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite)) +{ + WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); + string[] fieldNames = new string[] { "FullName" }; + string[] fieldValues = new string[] { "Nancy Davolio" }; + //Performs the mail merge + document.MailMerge.Execute(fieldNames, fieldValues); + //Saves the Word document to MemoryStream + using (MemoryStream stream = new MemoryStream()) + { + document.Save(stream, FormatType.Docx); + //Writes the Word document to a file + File.WriteAllBytes("Sample.docx", stream.ToArray()); + } +} {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} @@ -222,15 +230,15 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ## Performing Mail merge for a group -You can perform Mail merge and append multiple records from data source within a specified region to a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-group). +You can perform Mail merge and append multiple records from the data source within a specified region to a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-group). -## Performing Nested Mail merge for group +## Performing Nested Mail merge for a group -You can perform nested Mail merge with relational or hierarchical data source and independent data tables in a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups). +You can perform nested Mail merge with a relational or hierarchical data source and independent data tables in a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups). ## Performing Mail merge with dynamic objects -Essential® DocIO allows you to perform Mail merge with the dynamic objects. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups#mail-merge-with-dynamic-objects). +Essential® DocIO allows you to perform Mail merge with dynamic objects. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups#mail-merge-with-dynamic-objects). ## Performing Mail merge with business objects @@ -242,9 +250,9 @@ Essential® DocIO supports performing nested Mail merge with impli ## Event support for mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO in Mail merge process: +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO in the Mail merge process: -* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html): Occurs when a **Mail merge field** except image Mail merge field is encountered. +* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html): Occurs when a **Mail merge field** except an image Mail merge field is encountered. * [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html): Occurs when an **image Mail merge field** is encountered. @@ -254,19 +262,19 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ### MergeField event -You can customize the merging text during Mail merge process by using the [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergefield-event). +You can customize the merging text during the Mail merge process by using the [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergefield-event). ### MergeImageField event -You can customize the merging image during Mail merge process by using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergeimagefield-event). +You can customize the merging image during the Mail merge process by using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergeimagefield-event). ### BeforeClearField event -You can get the unmerged fields during Mail merge process by using the [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). +You can get the unmerged fields during the Mail merge process by using the [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). ### BeforeClearGroupField event -You can get the unmerged groups during Mail merge process by using the [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforecleargroupfield-event). +You can get the unmerged groups during the Mail merge process by using the [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforecleargroupfield-event). ## Mail merge options @@ -274,7 +282,7 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ### Field mapping -You can automatically map the merge field names with data source column names during Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#field-mapping). +You can automatically map the merge field names with the data source column names during the Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#field-mapping). ### Retrieving the merge field names @@ -282,11 +290,11 @@ You can retrieve the merge field names and also merge field group names in the W ### Removing empty paragraphs -You can remove the empty paragraphs when the paragraph has a merge field item without any data during Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-paragraphs). +You can remove the empty paragraphs when the paragraph has a merge field item without any data during the Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-paragraphs). ### Removing empty merge fields -You can remove or keep the unmerged merge fields in the output document based on the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property on each mail merge execution. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-merge-fields). +You can remove or keep the unmerged merge fields in the output document based on the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property on each mail merge execution. The default value of `ClearFields` is `true`, which removes unmerged merge fields. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-merge-fields). ### Restart numbering in lists From 306f4923a5b823011179534bc480e5627e993ad6 Mon Sep 17 00:00:00 2001 From: Dharanya Sakthivel Date: Fri, 7 Aug 2026 15:22:10 +0530 Subject: [PATCH 34/70] ES-1042923-Revamp-UG --- .../NET/Word-document/Print-Word-documents.md | 2 +- .../Word/Word-Library/NET/Working-with-Fields.md | 2 +- .../Word/Word-Library/NET/Working-with-Sections.md | 2 +- .../Word/Word-Library/NET/Working-with-Word-document.md | 2 +- .../Word/Word-Library/NET/mail-merge/mail-merge-events.md | 2 +- .../Word-Library/NET/mail-merge/mail-merge-for-group.md | 2 +- .../NET/mail-merge/mail-merge-troubleshooting-tips.md | 8 ++++---- .../Word/Word-Library/NET/working-with-mail-merge.md | 2 +- 8 files changed, 11 insertions(+), 11 deletions(-) diff --git a/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md b/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md index ef4c86fd55..1793fa3273 100644 --- a/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md +++ b/Document-Processing/Word/Word-Library/NET/Word-document/Print-Word-documents.md @@ -37,7 +37,7 @@ document.Close() ## Configuring print settings -You can specify the printer settings and page settings through the [PrintDocument](https://learn.microsoft.com/dotnet/api/system.drawing.printing.printdocument) class. The [PrintDocument.PrintPage](https://learn.microsoft.com/dotnet/api/system.drawing.printing.printdocument.printpage) event should be handled to layout the document for printing. The following code example demonstrates how to print the Word document pages that have been rendered as an image, using the `images` array produced in the previous snippet. +You can specify the printer settings and page settings through the [PrintDocument](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.printing.printdocument?view=net-11.0-pp) class. The [PrintDocument.PrintPage](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.printing.printdocument.printpage?view=net-11.0-pp) event should be handled to layout the document for printing. The following code example demonstrates how to print the Word document pages that have been rendered as an image, using the `images` array produced in the previous snippet. N> `startPageIndex` must be declared as a class-level integer field (initialize it to `0`). The snippet updates it based on the page range chosen in the print dialog. diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md b/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md index 0c12a2e6bb..7aa8c336cf 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md @@ -5,7 +5,7 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with document Fields +# Working with document Fields in a Word Library Fields in a Word document are placeholders for data that might change on field update. Fields are represented by the [WField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WField.html) and [WFieldMark](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WFieldMark.html) instances in DocIO. A field in a Word document contains field codes, field separator, field result, and field end. diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md b/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md index 181be49e75..ad49e7ac13 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md @@ -6,7 +6,7 @@ control: DocIO documentation: UG --- -# Working with Sections +# Working with Sections in a Word Library A section contains the contents of the headers, footers, and main document body through the instances of [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html). A section also has a specific set of properties used to define the page settings, number of columns, headers and footers and so on that decide how the text appears. [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html) represents a group of paragraphs and tables, etc. diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md b/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md index b299893f74..2f75c64ec9 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md @@ -5,7 +5,7 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Word document +# Working with Word document in a Word Library ## Cloning a Word document diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md index 5043f13d8c..6268a86a38 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md @@ -6,7 +6,7 @@ control: DocIO documentation: UG --- -# Event support for Mail merge +# Event support for Mail merge in Word Library The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merge image data during the Mail merge process. The following events are supported by Syncfusion® DocIO during Mail merge process: diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md index 1c19ce5156..94aa99e128 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md @@ -6,7 +6,7 @@ control: DocIO documentation: UG --- -# Mail merge for a group +# Mail merge for a group in Word Library You can perform Mail merge and append multiple records from data source within a specified region to a template document. The region is bounded by start and end group merge fields. The region gets repeated for every record from the data source. diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md index efe6ee1049..bc8b3c7e94 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md @@ -6,7 +6,7 @@ control: DocIO documentation: UG --- -# Troubleshooting Mail Merge Issues in .NET Word Library +# Troubleshooting Mail merge Issues in .NET Word Library ## Why is mail merge not working correctly in DocIO? @@ -14,7 +14,7 @@ Mail merge issues can arise due to incorrect merge fields, mismatched data sourc * Merge fields (<>) are used instead of plain text. * **Data Source Check:** Ensure the required fields exist in the data source. Verify the data source column/property names against the merge field names in the Word template. -* **Match Field Names:** Sometimes, the field names in the Word document are different from the property names in your data source class. For example, if your document has "FirstName" and "LastName", but your Employee class uses different names, Mail Merge will not work correctly. +* **Match Field Names:** Sometimes, the field names in the Word document are different from the property names in your data source class. For example, if your document has "FirstName" and "LastName", but your Employee class uses different names, Mail merge will not work correctly. **How to fix this:** * The property names in your data source class should be exactly the same as the merge field names in your Word document. @@ -71,9 +71,9 @@ Mail merge only works with merge fields, not manually typed placeholders. If tex Refer to [Syncfusion® Documentation](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-find-and-replace#find-and-replace-a-pattern-of-text-with-a-merge-field) for detailed implementation. -## Why is nested group Mail Merge not functioning correctly? +## Why is nested group Mail merge not functioning correctly? -Nested Mail Merge requires proper execution using the correct method and structure. +Nested Mail merge requires proper execution using the correct method and structure. * Use the appropriate overload of the [`ExecuteNestedGroup`](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) method to handle nested groups effectively. Supported overloads include: * `ExecuteNestedGroup(MailMergeDataTable)` — for implicit relational data, where the child groups are nested within the parent table's data. * `ExecuteNestedGroup(MailMergeDataSet, List)` — for explicit relational data, where the relations between parent and child groups are defined using command entries. diff --git a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md index 65e0245968..6bc6d876f9 100644 --- a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md +++ b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md @@ -5,7 +5,7 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Mail merge +# Working with Mail merge in Word Library Mail merge is a process of merging data from a data source into a Word template document. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) class provides support to bind template document and data source. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) instance is replaced with the actual data retrieved from the data source for the given merge field name in a template document. From 5d1b0321b0ad53ee6f887bbb6b54ed2222c70d64 Mon Sep 17 00:00:00 2001 From: Dharanya Sakthivel Date: Mon, 10 Aug 2026 13:51:26 +0530 Subject: [PATCH 35/70] ES-1042923-Revamp-UG --- .../Word-Library/NET/Working-With-Images.md | 125 +++++---- .../NET/Working-with-Bookmarks.md | 78 +++--- .../Word-Library/NET/Working-with-Fields.md | 38 +-- .../NET/Working-with-Hyperlinks.md | 241 ++++++++--------- .../NET/Working-with-Paragraph.md | 83 +++--- .../Word-Library/NET/Working-with-Sections.md | 46 ++-- .../Word-Library/NET/Working-with-Shapes.md | 247 +++++++++--------- .../Word-Library/NET/Working-with-Tables.md | 71 +++-- .../NET/Working-with-Word-document.md | 60 ++--- .../Word-Library/NET/working-with-lists.md | 64 ++--- .../NET/working-with-mail-merge.md | 90 +++---- 11 files changed, 537 insertions(+), 606 deletions(-) diff --git a/Document-Processing/Word/Word-Library/NET/Working-With-Images.md b/Document-Processing/Word/Word-Library/NET/Working-With-Images.md index 8c46df8289..9f92204443 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-With-Images.md +++ b/Document-Processing/Word/Word-Library/NET/Working-With-Images.md @@ -5,9 +5,9 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Images in a Word document +# Working with Images in Word document -DocIO provides support for both inline and absolute positioned images. +DocIO provides support for both inline and absolute positioned images. * Inline images: The position of the image is constrained to the lines of text on the page. * Absolute positioned images: The images can be positioned anywhere irrespective of the lines of text. @@ -25,8 +25,8 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph firstParagraph = section.AddParagraph(); -//Adds image to the paragraph -FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.Read); +//Adds image to the paragraph +FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.ReadWrite); IWPicture picture = firstParagraph.AppendPicture(imageStream); //Sets height and width for the image picture.Height = 100; @@ -45,7 +45,7 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph firstParagraph = section.AddParagraph(); -//Adds image to the paragraph +//Adds image to the paragraph IWPicture picture = firstParagraph.AppendPicture(Image.FromFile("Image.png")); //Sets height and width for the image picture.Height = 100; @@ -63,7 +63,7 @@ Dim document As New WordDocument() Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim firstParagraph As IWParagraph = section.AddParagraph() -'Adds image to the paragraph +'Adds image to the paragraph Dim picture As IWPicture = firstParagraph.AppendPicture(Image.FromFile("Image.png")) 'Sets height and width for the image picture.Height = 100 @@ -82,14 +82,12 @@ You can download a complete working sample from [GitHub](https://github.com/Sync Image present in the document can be replaced with a new image. This can be achieved by iterating through the paragraph items. -N> To identify images by `Title`, the `Title` property must have been set on the picture in the source document (for example, by Microsoft Word's "Alt Text" panel, or by setting `picture.Title` when the picture was created with DocIO). - The following code example explains how to replace an existing image. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Replace-image/.NET/Replace-image/Program.cs" %} -FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.Read); +FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.ReadWrite); //Loads the template document WordDocument document = new WordDocument(fileStream, FormatType.Automatic); WTextBody textbody = document.Sections[0].Body; @@ -105,7 +103,7 @@ foreach (WParagraph paragraph in textbody.Paragraphs) //Replaces the image if (picture.Title == "Bookmark") { - FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.Read); + FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.ReadWrite); picture.LoadImage(imageStream); } } @@ -179,7 +177,7 @@ The following code example explains how to remove the image from the paragraph i {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Remove-image/.NET/Remove-image/Program.cs" %} -FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.Read); +FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.ReadWrite); //Loads the template document WordDocument document = new WordDocument(fileStream, FormatType.Automatic); WTextBody textbody = document.Sections[0].Body; @@ -269,7 +267,7 @@ IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); paragraph.AppendText("This paragraph has picture. "); -FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.Read); +FileStream imageStream = new FileStream(@"Image.png", FileMode.Open, FileAccess.ReadWrite); //Appends new picture to the paragraph WPicture picture = paragraph.AppendPicture(imageStream) as WPicture; //Sets text wrapping style – When the wrapping style is inline, the images are not absolutely positioned. It is added next to the text range. @@ -277,8 +275,8 @@ picture.TextWrappingStyle = TextWrappingStyle.Square; //Sets horizontal and vertical origin picture.HorizontalOrigin = HorizontalOrigin.Page; picture.VerticalOrigin = VerticalOrigin.Paragraph; -//Sets width and height for the picture -picture.Width = 150; +//Sets width and height for the paragraph +picture.Width = 150; picture.Height = 100; //Sets horizontal and vertical position for the picture picture.HorizontalPosition = 200; @@ -315,7 +313,7 @@ picture.TextWrappingStyle = TextWrappingStyle.Square; //Sets horizontal and vertical origin picture.HorizontalOrigin = HorizontalOrigin.Page; picture.VerticalOrigin = VerticalOrigin.Paragraph; -//Sets width and height for the picture +//Sets width and height for the paragraph picture.Width = 150; picture.Height = 100; //Sets horizontal and vertical position for the picture @@ -352,7 +350,7 @@ picture.TextWrappingStyle = TextWrappingStyle.Square 'Sets horizontal and vertical origin picture.HorizontalOrigin = HorizontalOrigin.Page picture.VerticalOrigin = VerticalOrigin.Paragraph -'Sets width and height for the picture +'Sets width and height for the paragraph picture.Width = 150 picture.Height = 100 'Sets horizontal and vertical position for the picture @@ -380,14 +378,14 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Find an image by title -An image with a specific title can be retrieved by iterating the text body child entities (paragraphs, tables, etc.) and the paragraph items within them, so that it can be used for further manipulations. +An Image with a specific title can be retrieved by iterating the paragraph items that can be used for further manipulations. The following code example explains how images can be iterated from the document elements. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Find-an-image-by-title/.NET/Find-an-image-by-title/Program.cs" %} -FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.Read); +FileStream fileStream = new FileStream(@"Template.docx", FileMode.Open, FileAccess.ReadWrite); //Loads an existing Word document into DocIO instance WordDocument document = new WordDocument(fileStream, FormatType.Docx); //Gets textbody content @@ -421,7 +419,7 @@ document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Loads an existing Word document +//Creates a new Word document WordDocument document = new WordDocument("Template.docx"); //Gets textbody content WTextBody textBody = document.Sections[0].Body; @@ -453,7 +451,7 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Loads an existing Word document +'Creates a new Word document Dim document As New WordDocument("Template.docx") 'Gets textbody content Dim textBody As WTextBody = document.Sections(0).Body @@ -483,15 +481,9 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Find-an-image-by-title). -## Add image caption - -You can add caption to an image and update the caption numbers (Sequence fields) using [AddCaption](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WPicture.html#Syncfusion_DocIO_DLS_WPicture_AddCaption_System_String_Syncfusion_DocIO_CaptionNumberingFormat_Syncfusion_DocIO_CaptionPosition_) method. The `AddCaption` method accepts the following parameters: +## Add Image caption -* `imageName`: The caption label name (e.g., "Figure", "Table"). -* `captionNumberingFormat`: A `CaptionNumberingFormat` value that controls how the caption number is formatted (e.g., `Roman`, `Number`). -* `captionPosition`: A `CaptionPosition` value that determines whether the caption appears before or after the image (e.g., `AfterImage`, `BeforeImage`). - -N> Call `UpdateDocumentFields()` after adding captions so that the sequence (caption number) fields are computed and rendered in the output. +You can add caption to an image and update the caption numbers (Sequence fields) using [AddCaption](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WPicture.html#Syncfusion_DocIO_DLS_WPicture_AddCaption_System_String_Syncfusion_DocIO_CaptionNumberingFormat_Syncfusion_DocIO_CaptionPosition_) method. The following code example shows how to add caption to an image. @@ -507,29 +499,29 @@ section.PageSetup.Margins.All = 72; //Adds a paragraph to the section IWParagraph paragraph = section.AddParagraph(); paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; -//Adds image to the paragraph -FileStream imageStream = new FileStream(@"Google.png", FileMode.Open, FileAccess.Read); +//Adds image to the paragraph +FileStream imageStream = new FileStream(@"Google.png", FileMode.Open, FileAccess.ReadWrite); IWPicture picture = paragraph.AppendPicture(imageStream); //Adds Image caption -IWParagraph lastParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); +IWParagraph lastParagragh = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); //Aligns the caption -lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; +lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; //Sets after spacing -lastParagraph.ParagraphFormat.AfterSpacing = 12f; +lastParagragh.ParagraphFormat.AfterSpacing = 12f; //Sets before spacing -lastParagraph.ParagraphFormat.BeforeSpacing = 1.5f; +lastParagragh.ParagraphFormat.BeforeSpacing = 1.5f; //Adds a paragraph to the section paragraph = section.AddParagraph(); paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; -//Adds image to the paragraph -imageStream = new FileStream(@"Yahoo.png", FileMode.Open, FileAccess.Read); +//Adds image to the paragraph +imageStream = new FileStream(@"Yahoo.png", FileMode.Open, FileAccess.ReadWrite); picture = paragraph.AppendPicture(imageStream); //Adds Image caption -lastParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); +lastParagragh = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); //Aligns the caption -lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; +lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; //Sets before spacing -lastParagraph.ParagraphFormat.BeforeSpacing = 1.5f; +lastParagragh.ParagraphFormat.BeforeSpacing = 1.5f; //Updates the fields in Word document document.UpdateDocumentFields(); //Saves the Word document to MemoryStream. @@ -549,27 +541,27 @@ section.PageSetup.Margins.All = 72; //Adds a paragraph to the section IWParagraph paragraph = section.AddParagraph(); paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; -//Adds image to the paragraph +//Adds image to the paragraph IWPicture picture = paragraph.AppendPicture(Image.FromFile("Google.png")); //Adds Image caption -IWParagraph lastParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); +IWParagraph lastParagragh = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); //Aligns the caption -lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; +lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; //Sets after spacing -lastParagraph.ParagraphFormat.AfterSpacing = 12f; +lastParagragh.ParagraphFormat.AfterSpacing = 12f; //Sets before spacing -lastParagraph.ParagraphFormat.BeforeSpacing = 1.5f; +lastParagragh.ParagraphFormat.BeforeSpacing = 1.5f; //Adds a paragraph to the section paragraph = section.AddParagraph(); paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; -//Adds image to the paragraph +//Adds image to the paragraph picture = paragraph.AppendPicture(Image.FromFile("Yahoo.png")); //Adds Image caption -lastParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); +lastParagragh = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage); //Aligns the caption -lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; +lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; //Sets before spacing -lastParagraph.ParagraphFormat.BeforeSpacing = 1.5f; +lastParagragh.ParagraphFormat.BeforeSpacing = 1.5f; //Updates the fields in Word document document.UpdateDocumentFields(); //Saves and closes the document @@ -587,27 +579,27 @@ section.PageSetup.Margins.All = 72 'Adds a paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center -'Adds image to the paragraph +'Adds image to the paragraph Dim picture As IWPicture = paragraph.AppendPicture(Image.FromFile("Google.png")) 'Adds Image caption -Dim lastParagraph As IWParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage) +Dim lastParagragh As IWParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage) 'Aligns the caption -lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center +lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center 'Sets after spacing -lastParagraph.ParagraphFormat.AfterSpacing = 12.0F +lastParagragh.ParagraphFormat.AfterSpacing = 12.0F 'Sets before spacing -lastParagraph.ParagraphFormat.BeforeSpacing = 1.5F +lastParagragh.ParagraphFormat.BeforeSpacing = 1.5F 'Adds a paragraph to the section paragraph = section.AddParagraph paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center -'Adds image to the paragraph +'Adds image to the paragraph picture = paragraph.AppendPicture(Image.FromFile("Yahoo.png")) 'Adds Image caption -lastParagraph = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage) +lastParagragh = picture.AddCaption("Figure", CaptionNumberingFormat.Roman, CaptionPosition.AfterImage) 'Aligns the caption -lastParagraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center +lastParagragh.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center 'Sets before spacing -lastParagraph.ParagraphFormat.BeforeSpacing = 1.5F +lastParagragh.ParagraphFormat.BeforeSpacing = 1.5F 'Updates the fields in Word document document.UpdateDocumentFields() 'Saves and closes the document @@ -627,14 +619,14 @@ By executing the above code example, it generates output Word document as follow To add an SVG image to a paragraph in a Word document using Syncfusion® DocIO, you can use the [AppendPicture](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.IWParagraph.html#Syncfusion_DocIO_DLS_IWParagraph_AppendPicture_System_Byte___System_Byte___) API. -N> To preserve the SVG image in the Word document, pass both the SVG image data and a fallback raster image (e.g., PNG) as byte arrays to DocIO. The fallback image is used by viewers that do not support SVG. +N> To preserve the SVG image in the Word document, pass both the SVG image data and the equivalent bitmap image bytes to DocIO. The following code example shows how to add an SVG image in a Word document. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-svg-image/.NET/Add-svg-image/Program.cs" %} -//Create a new Word document. +///Create a new Word document. using (WordDocument document = new WordDocument()) { //Add a new section to the document. @@ -651,10 +643,8 @@ using (WordDocument document = new WordDocument()) picture.Height = 100; picture.Width = 100; //Save the Word document to MemoryStream. - using (MemoryStream stream = new MemoryStream()) - { - document.Save(stream, FormatType.Docx); - } + MemoryStream stream = new MemoryStream(); + document.Save(stream, FormatType.Docx); } {% endhighlight %} @@ -687,12 +677,12 @@ Using document As New WordDocument() Dim section As IWSection = document.AddSection() ' Add a new paragraph to the section. Dim firstParagraph As IWParagraph = section.AddParagraph() - ' Get the fallback image (PNG) as a byte array. + ' Get the PNG image as a byte array. Dim imageBytes As Byte() = File.ReadAllBytes("Buyers.png") ' Get the SVG image as a byte array. Dim svgData As Byte() = File.ReadAllBytes("Buyers.svg") ' Add SVG image to the paragraph. - Dim picture As IWPicture = firstParagraph.AppendPicture(svgData, imageBytes) + Dim picture As IWPicture = firstParagraph.AppendPicture(svgData, ImageType.Metafile, imageBytes) ' Set height and width for the image. picture.Height = 100 picture.Width = 100 @@ -705,9 +695,12 @@ End Using You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Add-svg-image/.NET). +## Online Demo + +* Explore how to insert an image into the Word document using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/imageinsertion#/tailwind). + ## See Also -* [How to insert an image into a Word document (live demo)](https://document.syncfusion.com/demos/word/imageinsertion#/tailwind) using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO). * [How to extract Images from Word document in C# and VB?](https://support.syncfusion.com/kb/article/11829/how-to-extract-images-from-word-document-in-c-and-vb) * [How to replace an image with same size in a Word document](https://support.syncfusion.com/kb/article/17796/how-to-replace-an-image-with-same-size-in-a-word-document) * [How to find and replace an image title in a Word document?](https://support.syncfusion.com/kb/article/18808/how-to-find-and-replace-an-image-title-in-a-word-document) diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Bookmarks.md b/Document-Processing/Word/Word-Library/NET/Working-with-Bookmarks.md index 89606c6967..178a4f920e 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Bookmarks.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Bookmarks.md @@ -9,8 +9,8 @@ documentation: UG A bookmark identifies a location or a selection of text within a document that you can name and identify for future reference. -In Essential® DocIO, a bookmark is represented by a [Bookmark](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html) instance that is a pair of [BookmarkStart](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkStart.html) and [BookmarkEnd](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkEnd.html). -[BookmarkStart](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkStart.html) represents the start point of a bookmark and [BookmarkEnd](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkEnd.html) represents the end point of a bookmark. Every Word document contains a collection of bookmarks that are accessible through the [Bookmarks](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_Bookmarks) property of [WordDocument](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html) class. +In Essential® DocIO, bookmark is represented by [Bookmark](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html) instance that is a pair of [BookmarkStart](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkStart.html) and [BookmarkEnd](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkEnd.html). +[BookmarkStart](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkStart.html) represents start point of a bookmark and [BookmarkEnd](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarkEnd.html) represents end point of a bookmark. Every Word document contains a collection of bookmarks that are accessible through the [Bookmarks](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_Bookmarks) property of [WordDocument](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html) class. To quickly start working with bookmarks in a Word document, please check out this video: {% youtube "https://www.youtube.com/watch?v=8C2-aS8tdLU" %} @@ -34,7 +34,7 @@ IWParagraph paragraph = document.LastParagraph; paragraph.AppendBookmarkStart("Northwind"); //Adds a text between the bookmark start and end into paragraph paragraph.AppendText("The Northwind sample database (Northwind.mdb) is included with all versions of Access. It provides data you can experiment with and database objects that demonstrate features you might want to implement in your own databases."); -//Adds a new bookmark end into paragraph with name "Northwind" +//Adds a new bookmark end into paragraph with name " Northwind " paragraph.AppendBookmarkEnd("Northwind"); //Adds a text after the bookmark end paragraph.AppendText(" Using Northwind, you can become familiar with how a relational database is structured and how the database objects work together to help you enter, store, manipulate, and print your data."); @@ -56,14 +56,14 @@ IWParagraph paragraph = document.LastParagraph; paragraph.AppendBookmarkStart("Northwind"); //Adds a text between the bookmark start and end into paragraph paragraph.AppendText("The Northwind sample database (Northwind.mdb) is included with all versions of Access. It provides data you can experiment with and database objects that demonstrate features you might want to implement in your own databases."); -//Adds a new bookmark end into paragraph with name "Northwind" +//Adds a new bookmark end into paragraph with name " Northwind " paragraph.AppendBookmarkEnd("Northwind"); //Adds a text after the bookmark end paragraph.AppendText(" Using Northwind, you can become familiar with how a relational database is structured and how the database objects work together to help you enter, store, manipulate, and print your data."); //Saves the document in the given name and format document.Save("Bookmarks.docx", FormatType.Docx); -//Releases the resources occupied by the WordDocument instance -document.Close(); +//Releases the resources occupied by WordDocument instance +document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} @@ -77,14 +77,14 @@ Dim paragraph As IWParagraph = document.LastParagraph paragraph.AppendBookmarkStart("Northwind") 'Adds a text between the bookmark start and end into paragraph paragraph.AppendText("The Northwind sample database (Northwind.mdb) is included with all versions of Access. It provides data you can experiment with and database objects that demonstrate features you might want to implement in your own databases.") -'Adds a new bookmark end into paragraph with name "Northwind" +'Adds a new bookmark end into paragraph with name " Northwind " paragraph.AppendBookmarkEnd("Northwind") 'Adds a text after the bookmark end paragraph.AppendText(" Using Northwind, you can become familiar with how a relational database is structured and how the database objects work together to help you enter, store, manipulate, and print your data.") 'Saves the document in the given name and format document.Save("Bookmarks.docx", FormatType.Docx) -'Releases the resources occupied by the WordDocument instance -document.Close() +'Releases the resources occupied by WordDocument instance +document.Close() {% endhighlight %} {% endtabs %} @@ -103,7 +103,7 @@ FileStream fileStreamPath = new FileStream(@"Bookmarks.docx", FileMode.Open, Fil WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); //Gets the bookmark instance by using FindByName method of BookmarkCollection with bookmark name Syncfusion.DocIO.DLS.Bookmark bookmark = document.Bookmarks.FindByName("Northwind"); -//Accesses the bookmark start's owner paragraph by using the bookmark and changes its back color +//Accesses the bookmark start’s owner paragraph by using bookmark and changes its back color bookmark.BookmarkStart.OwnerParagraph.ParagraphFormat.BackColor = Color.AliceBlue; //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); @@ -117,7 +117,7 @@ document.Close(); WordDocument document = new WordDocument("Bookmarks.docx", FormatType.Docx); //Gets the bookmark instance by using FindByName method of BookmarkCollection with bookmark name Syncfusion.DocIO.DLS.Bookmark bookmark = document.Bookmarks.FindByName("Northwind"); -//Accesses the bookmark start's owner paragraph by using the bookmark and changes its back color +//Accesses the bookmark start’s owner paragraph by using bookmark and changes its back color bookmark.BookmarkStart.OwnerParagraph.ParagraphFormat.BackColor = Color.AliceBlue; document.Save("Result.docx", FormatType.Docx); document.Close(); @@ -128,7 +128,7 @@ document.Close(); Dim document As New WordDocument("Bookmarks.docx", FormatType.Docx) 'Gets the bookmark instance by using FindByName method of BookmarkCollection with bookmark name Dim bookmark As Syncfusion.DocIO.DLS.Bookmark = document.Bookmarks.FindByName("Northwind") -'Accesses the bookmark start's owner paragraph by using the bookmark and changes its back color +'Accesses the bookmark start’s owner paragraph by using bookmark and changes its back color bookmark.BookmarkStart.OwnerParagraph.ParagraphFormat.BackColor = Color.AliceBlue document.Save("Result.docx", FormatType.Docx) document.Close() @@ -138,9 +138,9 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Bookmarks/Get-an-instance-of-bookmark). -## Removing a bookmark from a Word document +## Removing a Bookmark from Word document -The following code example shows how to remove a bookmark from a Word document. +The following code example shows how to remove a bookmark from Word document. {% tabs %} @@ -185,14 +185,14 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Bookmarks/Remove-bookmark-from-Word-document). -## Retrieving contents within a bookmark +## Retrieving contents within a bookmark -[BookmarkNavigator](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html) is used for navigating to a bookmark in a Word document. You can retrieve, replace, and delete the content of a specified bookmark by using [BookmarkNavigator](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html). +[BookmarkNavigator](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html) is used for navigating to a bookmark in a Word document. You can retrieve, replace and delete the content of a specified bookmark by using [BookmarkNavigator](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html). You can get the content between bookmark start and bookmark end of the specified bookmark in two ways: -1. You can use [GetBookmarkContent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html#Syncfusion_DocIO_DLS_BookmarksNavigator_GetBookmarkContent) method for retrieving content as a collection of body items when the bookmark start and bookmark end are preserved in a single section. -2. You can use [GetContent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html#Syncfusion_DocIO_DLS_BookmarksNavigator_GetContent) method for retrieving content as a collection of sections when the bookmark start and bookmark end are preserved in different sections. +1. You can use [GetBookmarkContent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html#Syncfusion_DocIO_DLS_BookmarksNavigator_GetBookmarkContent) method for retrieving content as collection of body items when the bookmark start and bookmark end are preserved in a single section. +2. You can use [GetContent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html#Syncfusion_DocIO_DLS_BookmarksNavigator_GetContent) method for retrieving content as collection of sections when the bookmark start and bookmark end are preserved in different sections. The following code example shows how to retrieve the specified bookmark content by using [GetBookmarkContent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BookmarksNavigator.html#Syncfusion_DocIO_DLS_BookmarksNavigator_GetBookmarkContent) method in a Word document. @@ -317,7 +317,7 @@ wordDocumentPart.Close() 'Close the template Word document document.Close() newDocument.Save("Result.docx", FormatType.Docx) -'Releases the resources held by the WordDocument instance +'Releases the resources hold by WordDocument instance newDocument.Close() {% endhighlight %} @@ -325,12 +325,12 @@ newDocument.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Bookmarks/Get-bookmark-content-as-document-part). -## Retrieving bookmark contents within a table +## Retrieving bookmark contents within a table You can select the column range for bookmarks inside the tables in Word documents by using [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) and [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) properties. -N> 1. [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) and [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) properties are valid to select table cells, only when the respective bookmark end and start are present within the same row or next rows of the same table. -N> 2. [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) property denotes the top left corner cell and [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) property denotes the bottom right corner cell of rectangular selection region, because bookmark selections inside a table are always rectangular. +N> 1. [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) and [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) properties are valid to select table cells, only when the respective bookmark end and start is present within the same row or next rows of the same table. +N> 2. [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) property denotes the top left corner cell and [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) property denotes the bottom right corner cell of rectangular selection region since you can only select the content as a rectangular selection by using bookmarks within the table. N> 3. [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) property selects from the first cell of the respective row when this property value is negative (or) greater than the cells of a row (or) greater than the [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) value. N> 4. [LastColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_LastColumn) property selects till last cell of the respective row when this property value is negative (or) greater than the cells of a row (or) less than the [FirstColumn](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Bookmark.html#Syncfusion_DocIO_DLS_Bookmark_FirstColumn) value. @@ -357,11 +357,9 @@ bookmarkNavigator.CurrentBookmark.LastColumn = 4; TextBodyPart part = bookmarkNavigator.GetBookmarkContent(); //Adds new section document.AddSection(); -//Adds the retrieved content into another new section for (int i = 0; i < part.BodyItems.Count; i++) -{ - document.LastSection.Body.ChildEntities.Add(part.BodyItems[i]); -} +//Adds the retrieved content into another new section +document.LastSection.Body.ChildEntities.Add(part.BodyItems[i]); //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); document.Save(stream, FormatType.Docx); @@ -390,11 +388,9 @@ TextBodyPart part = bookmarkNavigator.GetBookmarkContent(); document.AddSection(); //Adds the retrieved content into another new section for (int i = 0; i < part.BodyItems.Count; i++) -{ - document.LastSection.Body.ChildEntities.Add(part.BodyItems[i]); -} +document.LastSection.Body.ChildEntities.Add(part.BodyItems[i]); //Saves and closes the Word document -document.Save("Result.docx", FormatType.Docx); +document.Save("Sample.docx", FormatType.Docx); document.Close(); {% endhighlight %} @@ -634,8 +630,6 @@ FileStream imageStream = new FileStream("Northwind.png", FileMode.Open, FileAcce picture.LoadImage(imageStream); picture.WidthScale = 50; picture.HeightScale = 50; -//Disposes the image stream -imageStream.Dispose(); //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); document.Save(stream, FormatType.Docx); @@ -910,7 +904,7 @@ FileStream fileStreamPath = new FileStream("Bookmarks.docx", FileMode.Open, File WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); //Creates the bookmark navigator instance to access the bookmark BookmarksNavigator bookmarkNavigator = new BookmarksNavigator(document); -//Moves the virtual cursor to the location before the end of the bookmark "Northwind" +//Moves the virtual cursor to the location before the end of the bookmark "Northwind " bookmarkNavigator.MoveToBookmark("Northwind"); //Deletes bookmark content without deleting the format in the target document. bookmarkNavigator.DeleteBookmarkContent(false); @@ -926,7 +920,7 @@ document.Close(); WordDocument document = new WordDocument("Bookmarks.docx", FormatType.Docx); //Creates the bookmark navigator instance to access the bookmark BookmarksNavigator bookmarkNavigator = new BookmarksNavigator(document); -//Moves the virtual cursor to the location before the end of the bookmark "Northwind" +//Moves the virtual cursor to the location before the end of the bookmark "Northwind " bookmarkNavigator.MoveToBookmark("Northwind"); //Deletes bookmark content without deleting the format in the target document. bookmarkNavigator.DeleteBookmarkContent(false); @@ -957,13 +951,13 @@ You can replace the contents of an existing bookmark with simple text, [TextBody N> You cannot replace the multi section contents into a bookmark within table in Word documents. Use "for loop" instead of "foreach loop" to iterate through document elements when replacing the bookmark contents to avoid “collection modified exception”, as there is a chance for modification in the document elements on replacing the bookmark contents. -As per Microsoft Word behavior, you cannot replace the bookmark contents when the bookmark start and end are not in the same table, as in the following cases: +As per Microsoft Word behavior, you cannot replace the bookmark contents when the bookmark start and end is not in a same table as following cases: -Case 1: Bookmark start and end are present in different tables. +Case 1 ![Bookmark start and end present in different tables](WorkingwithBookmarks_images/WorkingwithBookmarks_img1.jpeg) -Case 2: Bookmark start is placed outside the table and the end is inside the table. +Case 2 ![Bookmark start placed outside table and end in table](WorkingwithBookmarks_images/WorkingwithBookmarks_img2.jpeg) @@ -1061,13 +1055,13 @@ bookmarkNavigator.MoveToBookmark("Northwind"); //Gets the bookmark content as WordDocumentPart WordDocumentPart wordDocumentPart = bookmarkNavigator.GetContent(); //Loads the Word document with bookmark NorthwindDB -FileStream fileStream = new FileStream("Bookmarks.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -WordDocument document = new WordDocument(fileStream, FormatType.Docx); +FileStream fileStreamPath = new FileStream("Bookmarks.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); +WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); //Creates the bookmark navigator instance to access the bookmark bookmarkNavigator = new BookmarksNavigator(document); //Moves the virtual cursor to the location before the end of the bookmark "NorthwindDB" bookmarkNavigator.MoveToBookmark("NorthwindDB"); -//Replaces the bookmark content with WordDocumentPart +//Replaces the bookmark content with word body part bookmarkNavigator.ReplaceContent(wordDocumentPart); //Close the WordDocumentPart instance wordDocumentPart.Close(); @@ -1095,7 +1089,7 @@ WordDocument document = new WordDocument("Bookmarks.docx", FormatType.Docx); bookmarkNavigator = new BookmarksNavigator(document); //Moves the virtual cursor to the location before the end of the bookmark "NorthwindDB" bookmarkNavigator.MoveToBookmark("NorthwindDB"); -//Replaces the bookmark content with WordDocumentPart +//Replaces the bookmark content with word body part bookmarkNavigator.ReplaceContent(wordDocumentPart); //Close the WordDocumentPart instance wordDocumentPart.Close(); @@ -1120,7 +1114,7 @@ Dim document As New WordDocument("Bookmarks.docx", FormatType.Docx) bookmarkNavigator = New BookmarksNavigator(document) 'Moves the virtual cursor to the location before the end of the bookmark "NorthwindDB" bookmarkNavigator.MoveToBookmark("NorthwindDB") -'Replaces the bookmark content with WordDocumentPart +'Replaces the bookmark content with word body part bookmarkNavigator.ReplaceContent(wordDocumentPart) 'Close the WordDocumentPart instance wordDocumentPart.Close() diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md b/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md index 7aa8c336cf..9fddd4cb80 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Fields.md @@ -5,13 +5,13 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with document Fields in a Word Library +# Working with document Fields Fields in a Word document are placeholders for data that might change on field update. Fields are represented by the [WField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WField.html) and [WFieldMark](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WFieldMark.html) instances in DocIO. A field in a Word document contains field codes, field separator, field result, and field end. -To learn various types of Microsoft Word supported fields and their syntax, refer to the [MSDN article](https://support.microsoft.com/en-us/office/list-of-field-codes-in-word-1ad6d91a-55a7-4a8d-b535-cf7888659a51?ui=en-us&rs=en-us&ad=us#) +To learn various types of Microsoft Word supported fields and their syntax,refer to the [MSDN article](https://support.microsoft.com/en-us/office/list-of-field-codes-in-word-1ad6d91a-55a7-4a8d-b535-cf7888659a51?ui=en-us&rs=en-us&ad=us#) -From v16.1.0.24, the entire field code is included in Document Object Model (DOM). Hence, adding a field will automatically include the following elements in DOM: +From v16.1.0.24, the entire field code is included in Document Object Model(DOM). Hence, adding a field will automatically include the following elements in DOM: 1. [WField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WField.html): Represents the starting of a Field. @@ -505,7 +505,7 @@ paragraph = section.AddParagraph() as WParagraph; //Gets the collection of bookmark start in the word document List items = document.GetCrossReferenceItems(ReferenceType.Bookmark); paragraph.AppendText("Bookmark Cross Reference starts here "); -//Appends the cross reference for bookmark "Title" with ContentText as reference kind +//Appends the cross reference for bookmark “Title” with ContentText as reference kind paragraph.AppendCrossReference(ReferenceType.Bookmark, ReferenceKind.ContentText, items[0], true, false, false, string.Empty); //Updates the document Fields document.UpdateDocumentFields(); @@ -533,7 +533,7 @@ paragraph = section.AddParagraph() as WParagraph; //Gets the collection of bookmark start in the word document List items = document.GetCrossReferenceItems(ReferenceType.Bookmark); paragraph.AppendText("Bookmark Cross Reference starts here "); -//Appends the cross reference for bookmark "Title" with ContentText as reference kind +//Appends the cross reference for bookmark “Title” with ContentText as reference kind paragraph.AppendCrossReference(ReferenceType.Bookmark, ReferenceKind.ContentText, items[0], true, false, false, string.Empty); //Updates the document Fields document.UpdateDocumentFields(); @@ -558,7 +558,7 @@ paragraph = TryCast(section.AddParagraph(), WParagraph) 'Gets the collection of bookmark start in the word document Dim items As List(Of Entity) = document.GetCrossReferenceItems(ReferenceType.Bookmark) paragraph.AppendText("Bookmark Cross Reference starts here ") -'Appends the cross reference for bookmark "Title" with ContentText as reference kind +'Appends the cross reference for bookmark “Title” with ContentText as reference kind paragraph.AppendCrossReference(ReferenceType.Bookmark, ReferenceKind.ContentText, items(0), True, False, False, String.Empty) 'Updates the document Fields document.UpdateDocumentFields() @@ -646,14 +646,14 @@ You can download a complete working sample from [GitHub](https://github.com/Sync N> XE (Index Entry) fields cannot be unlinked. ## Sequence Field -You can use the Sequence (SEQ) field to automatically number the chapters, tables, figures, and other items in a Word document. When you add, delete, or move an item in Word document (along with SEQ fields), you can update the remaining SEQ fields with a new sequence. +You can use the Sequence (SEQ) field to automatically numbers the chapters, tables, figures, and other items in a Word document. When you add, delete, or move an item in Word document (along with SEQ fields), you can update the remaining SEQ fields with a new sequence. You can format the SEQ field using below switches. \c -- Repeats the closest preceding sequence number. \h -- Hides the field result unless a general-formatting-switch is also present. \n -- Inserts the next sequence number for the specified items. This is the default switch. -\r -- Resets the sequence number to the number following "r". +\r -- Resets the sequence number to the number following “r”. \s -- Resets the sequence number at the heading level following the "s". ### Apply Number format @@ -841,7 +841,7 @@ seqField.BookmarkName = "BkmkPurchase"; paragraph = document.LastSection.Paragraphs[5] as WParagraph; seqField = paragraph.ChildEntities[1] as WSeqField; //Adds bookmark reference to the sequence field -seqField.BookmarkName = "BkmkUnitPrice"; +seqField.BookmarkName = "BkkmUnitPrice"; //Updates the document fields document.UpdateDocumentFields(); //Saves the Word document to MemoryStream @@ -852,7 +852,7 @@ document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Opens an existing word document +//Opens an exixting word document WordDocument document = new WordDocument("Template.docx"); //Accesses sequence field in the document WParagraph paragraph = document.LastSection.Body.ChildEntities[4] as WParagraph; @@ -863,7 +863,7 @@ seqField.BookmarkName = "BkmkPurchase"; paragraph = document.LastSection.Paragraphs[5] as WParagraph; seqField = paragraph.ChildEntities[1] as WSeqField; //Adds bookmark reference to the sequence field -seqField.BookmarkName = "BkmkUnitPrice"; +seqField.BookmarkName = "BkkmUnitPrice"; //Updates the document fields document.UpdateDocumentFields(); //Saves and closes the Word document @@ -872,7 +872,7 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Opens an existing word document +'Opens an exixting word document Dim document As WordDocument = New WordDocument("Template.docx") 'Accesses sequence field in the document Dim paragraph As WParagraph = CType(document.LastSection.Body.ChildEntities(4), WParagraph) @@ -883,7 +883,7 @@ seqField.BookmarkName = "BkmkPurchase" paragraph = CType(document.LastSection.Paragraphs(5), WParagraph) seqField = CType(paragraph.ChildEntities(1), WSeqField) 'Adds bookmark reference to the sequence field -seqField.BookmarkName = "BkmkUnitPrice" +seqField.BookmarkName = "BkkmUnitPrice" 'Updates the document fields document.UpdateDocumentFields() 'Saves and closes the Word document @@ -900,7 +900,7 @@ By executing the above code example, it generates output Word document as follow ![Output document of Bookmark referred in SEQ field](workingwithfields_images/file-formats-word-seql-field-bookmark-output.png) ### Reset numbering -You can reset the numbering for sequence field (\r) using [ResetNumber](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSeqField.html#Syncfusion_DocIO_DLS_WSeqField_ResetNumber) property and reset the numbering based on the heading level (\s) in the Word document using [ResetHeadingLevel](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSeqField.html#Syncfusion_DocIO_DLS_WSeqField_ResetHeadingLevel) property. +You can reset the numbering for sequence field (\r) using [ResetNumber](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSeqField.html#Syncfusion_DocIO_DLS_WSeqField_ResetNumber) property and reset the numbering based on heading level (\s) in the Word document using [ResetHeadingLevel](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSeqField.html#Syncfusion_DocIO_DLS_WSeqField_ResetHeadingLevel) property. The following code example shows how to reset the numbering for sequence field. @@ -1534,7 +1534,7 @@ WordDocument document = CreateDocument(); //Accesses sequence field in the document WTable table = document.LastSection.Body.ChildEntities[1] as WTable; WSeqField field = ((table[2, 1].ChildEntities[0] as WParagraph).ChildEntities[0] as WSeqField); -//Enables a flag to hide the sequence field result +//Enables a flag to to hide the sequence field result field.HideResult = true; //Accesses sequence field in the document field = ((table[4, 1].ChildEntities[0] as WParagraph).ChildEntities[0] as WSeqField); @@ -1555,7 +1555,7 @@ WordDocument document = CreateDocument(); //Accesses sequence field in the document WTable table = document.LastSection.Body.ChildEntities[1] as WTable; WSeqField field = ((table[2, 1].ChildEntities[0] as WParagraph).ChildEntities[0] as WSeqField); -//Enables a flag to hide the sequence field result +//Enables a flag to to hide the sequence field result field.HideResult = true; //Accesses sequence field in the document field = ((table[4, 1].ChildEntities[0] as WParagraph).ChildEntities[0] as WSeqField); @@ -1574,7 +1574,7 @@ Dim document As WordDocument = CreateDocument() 'Accesses sequence field in the document Dim table As WTable = CType(document.LastSection.Body.ChildEntities(1), WTable) Dim field As WSeqField = CType(CType(table(2, 1).ChildEntities(0), WParagraph).ChildEntities(0), WSeqField) -'Enables a flag to hide the sequence field result +'Enables a flag to to hide the sequence field result field.HideResult = True 'Accesses sequence field in the document field = CType(CType(table(4, 1).ChildEntities(0), WParagraph).ChildEntities(0), WSeqField) @@ -1779,7 +1779,7 @@ document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Opens an existing word document +//Opens an exixting word document WordDocument document = new WordDocument("Template.docx"); //Accesses sequence field in the document WParagraph paragraph = document.LastSection.Body.ChildEntities[4] as WParagraph; @@ -1794,7 +1794,7 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Opens an existing word document +'Opens an exixting word document Dim document As WordDocument = New WordDocument("Template.docx") 'Accesses sequence field in the document diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Hyperlinks.md b/Document-Processing/Word/Word-Library/NET/Working-with-Hyperlinks.md index 902195a589..9213d5fa2b 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Hyperlinks.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Hyperlinks.md @@ -5,53 +5,45 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Hyperlinks in the Word Library +# Working with Hyperlinks in Word Library -Hyperlinks have two parts: the address and the display content. The Syncfusion® .NET Word (DocIO) library supports the following hyperlink types: - -* Web hyperlink -* Email hyperlink -* File hyperlink -* Bookmark hyperlink -* Image hyperlink +Hyperlinks have two parts: the address and display content. ## Web hyperlink -The following code example shows how to insert a web link. +The following code example explains how to insert a web link. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-web-link/.NET/Add-web-link/Program.cs" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("Web hyperlink: "); +paragraph.AppendText("Web Hyperlink: "); paragraph = section.AddParagraph(); -//Appends a web hyperlink to the paragraph -paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink); -//Saves the Word document to a MemoryStream -using (MemoryStream stream = new MemoryStream()) -{ - document.Save(stream, FormatType.Docx); -} -//Closes the Word document +//Appends web hyperlink to the paragraph +IWField field = paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink); +//Saves the Word document to MemoryStream. +MemoryStream stream = new MemoryStream(); +document.Save(stream, FormatType.Docx); +//Closes the Word document. document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("Web hyperlink: "); +paragraph.AppendText("Web Hyperlink: "); paragraph = section.AddParagraph(); -//Appends a web hyperlink to the paragraph -paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink); +//Appends web hyperlink to the paragraph +IWField field = paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink); //Saves the Word document document.Save("Sample.docx", FormatType.Docx); //Closes the document @@ -59,16 +51,16 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Creates a new Word document Dim document As New WordDocument() 'Adds new section to the document Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -paragraph.AppendText("Web hyperlink: ") +paragraph.AppendText("Web Hyperlink: ") paragraph = section.AddParagraph() -'Appends a web hyperlink to the paragraph -paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink) +'Appends web hyperlink to the paragraph +Dim field As IWField = paragraph.AppendHyperlink("http://www.syncfusion.com", "Syncfusion", HyperlinkType.WebLink) 'Saves the Word document document.Save("Sample.docx", FormatType.Docx) 'Closes the document @@ -81,12 +73,12 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Email hyperlink -The following code example shows how to add an email link. +The following code example illustrates how to add an email link. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-an-email-link/.NET/Add-an-email-link/Program.cs" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); @@ -94,19 +86,17 @@ IWSection section = document.AddSection(); IWParagraph paragraph = section.AddParagraph(); paragraph.AppendText("Email hyperlink: "); paragraph = section.AddParagraph(); -//Appends an email hyperlink to the paragraph +//Appends Email hyperlink to the paragraph paragraph.AppendHyperlink("mailto:sales@syncfusion.com", "Sales", HyperlinkType.EMailLink); -//Saves the Word document to a MemoryStream -using (MemoryStream stream = new MemoryStream()) -{ - document.Save(stream, FormatType.Docx); -} -//Closes the Word document +//Saves the Word document to MemoryStream. +MemoryStream stream = new MemoryStream(); +document.Save(stream, FormatType.Docx); +//Closes the Word document. document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); @@ -114,8 +104,8 @@ IWSection section = document.AddSection(); IWParagraph paragraph = section.AddParagraph(); paragraph.AppendText("Email hyperlink: "); paragraph = section.AddParagraph(); -//Appends an email hyperlink to the paragraph -paragraph.AppendHyperlink("mailto:sales@syncfusion.com", "Sales", HyperlinkType.EMailLink); +//Appends Email hyperlink to the paragraph +paragraph.AppendHyperlink("mailto:sales@syncfusion.com","Sales" , HyperlinkType.EMailLink); //Saves the Word document document.Save("Sample.docx", FormatType.Docx); //Closes the document @@ -123,7 +113,7 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Creates a new Word document Dim document As New WordDocument() 'Adds new section to the document Dim section As IWSection = document.AddSection() @@ -131,8 +121,8 @@ Dim section As IWSection = document.AddSection() Dim paragraph As IWParagraph = section.AddParagraph() paragraph.AppendText("Email hyperlink: ") paragraph = section.AddParagraph() -'Appends an email hyperlink to the paragraph -paragraph.AppendHyperlink("mailto:sales@syncfusion.com", "Sales", HyperlinkType.EMailLink) +'Appends Email hyperlink to the paragraph +paragraph.AppendHyperlink("mailto:sales@syncfusion.com","Sales" , HyperlinkType.EMailLink) 'Saves the Word document document.Save("Sample.docx", FormatType.Docx) 'Closes the document @@ -145,41 +135,39 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## File hyperlink -The following code example shows how to add a file hyperlink. +The following code example explains how to add a file hyperlink. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-file-hyperlink/.NET/Add-file-hyperlink/Program.cs" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("File hyperlink: "); +paragraph.AppendText("File Hyperlinks: "); paragraph = section.AddParagraph(); -//Appends a file hyperlink to the paragraph +//Appends hyperlink field to the paragraph paragraph.AppendHyperlink(@"Template.docx", "File", HyperlinkType.FileLink); -//Saves the Word document to a MemoryStream -using (MemoryStream stream = new MemoryStream()) -{ - document.Save(stream, FormatType.Docx); -} -//Closes the Word document +//Saves the Word document to MemoryStream. +MemoryStream stream = new MemoryStream(); +document.Save(stream, FormatType.Docx); +//Closes the Word document. document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("File hyperlink: "); +paragraph.AppendText("File Hyperlinks: "); paragraph = section.AddParagraph(); -//Appends a file hyperlink to the paragraph -paragraph.AppendHyperlink(@"Template.docx", "File", HyperlinkType.FileLink); +//Appends hyperlink field to the paragraph +paragraph.AppendHyperlink(@"Template.docx","File", HyperlinkType.FileLink); //Saves the Word document document.Save("Sample.docx", FormatType.Docx); //Closes the document @@ -187,15 +175,15 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Creates a new Word document Dim document As New WordDocument() 'Adds new section to the document Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -paragraph.AppendText("File hyperlink: ") +paragraph.AppendText("File Hyperlinks: ") paragraph = section.AddParagraph() -'Appends a file hyperlink to the paragraph +'Appends hyperlink field to the paragraph paragraph.AppendHyperlink("Template.docx", "File", HyperlinkType.FileLink) 'Saves the Word document document.Save("Sample.docx", FormatType.Docx) @@ -214,47 +202,45 @@ The following code example explains how to add a bookmark hyperlink. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-bookmark-hyperlink/.NET/Add-bookmark-hyperlink/Program.cs" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Creates a new bookmark +//Creates new Bookmark paragraph.AppendBookmarkStart("Introduction"); paragraph.AppendText("Hyperlink"); paragraph.AppendBookmarkEnd("Introduction"); paragraph.AppendText("\nA hyperlink is a reference or navigation element in a document to another section of the same document or to another document that may be on or part of a (different) domain."); paragraph = section.AddParagraph(); -paragraph.AppendText("Bookmark hyperlink: "); +paragraph.AppendText("Bookmark Hyperlink: "); paragraph = section.AddParagraph(); -//Appends a bookmark hyperlink to the paragraph +//Appends Bookmark hyperlink to the paragraph paragraph.AppendHyperlink("Introduction", "Bookmark", HyperlinkType.Bookmark); -//Saves the Word document to a MemoryStream -using (MemoryStream stream = new MemoryStream()) -{ - document.Save(stream, FormatType.Docx); -} -//Closes the Word document +//Saves the Word document to MemoryStream. +MemoryStream stream = new MemoryStream(); +document.Save(stream, FormatType.Docx); +//Closes the Word document. document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Creates a new bookmark +//Creates new Bookmark paragraph.AppendBookmarkStart("Introduction"); paragraph.AppendText("Hyperlink"); paragraph.AppendBookmarkEnd("Introduction"); paragraph.AppendText("\nA hyperlink is a reference or navigation element in a document to another section of the same document or to another document that may be on or part of a (different) domain."); paragraph = section.AddParagraph(); -paragraph.AppendText("Bookmark hyperlink: "); +paragraph.AppendText("Bookmark Hyperlink: "); paragraph = section.AddParagraph(); -//Appends a bookmark hyperlink to the paragraph +//Appends Bookmark hyperlink to the paragraph paragraph.AppendHyperlink("Introduction", "Bookmark", HyperlinkType.Bookmark); //Saves the Word document document.Save("Sample.docx", FormatType.Docx); @@ -263,21 +249,21 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Creates a new Word document Dim document As New WordDocument() 'Adds new section to the document Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -'Creates a new bookmark +'Creates new Bookmark paragraph.AppendBookmarkStart("Introduction") paragraph.AppendText("Hyperlink") paragraph.AppendBookmarkEnd("Introduction") paragraph.AppendText(vbLf & "A hyperlink is a reference or navigation element in a document to another section of the same document or to another document that may be on or part of a (different) domain.") paragraph = section.AddParagraph() -paragraph.AppendText("Bookmark hyperlink: ") +paragraph.AppendText("Bookmark Hyperlink: ") paragraph = section.AddParagraph() -'Appends a bookmark hyperlink to the paragraph +'Appends Bookmark hyperlink to the paragraph paragraph.AppendHyperlink("Introduction", "Bookmark", HyperlinkType.Bookmark) 'Saves the Word document document.Save("Sample.docx", FormatType.Docx) @@ -291,51 +277,47 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Image hyperlink -The display content for a hyperlink can also be an image that redirects to other content. +The display content for the Hyperlinks can also be an image that may redirect to some other contents. The following code example explains how to add an image hyperlink. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Add-image-hyperlink/.NET/Add-image-hyperlink/Program.cs" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("Image hyperlink: "); +paragraph.AppendText("Image Hyperlink"); paragraph = section.AddParagraph(); -//Creates a new image instance and loads the image +//Creates a new image instance and load image WPicture picture = new WPicture(document); -using (FileStream imageStream = new FileStream(@"Mountain-200.jpg", FileMode.Open, FileAccess.ReadWrite)) -{ - picture.LoadImage(imageStream); -} -//Appends an image hyperlink to the paragraph +FileStream imageStream = new FileStream(@"Mountain-200.jpg", FileMode.Open, FileAccess.ReadWrite); +picture.LoadImage(imageStream); +//Appends new image hyperlink to the paragraph paragraph.AppendHyperlink("http://www.syncfusion.com", picture, HyperlinkType.WebLink); -//Saves the Word document to a MemoryStream -using (MemoryStream stream = new MemoryStream()) -{ - document.Save(stream, FormatType.Docx); -} -//Closes the Word document +//Saves the Word document to MemoryStream. +MemoryStream stream = new MemoryStream(); +document.Save(stream, FormatType.Docx); +//Closes the Word document. document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates a new Word document +//Creates a new Word document WordDocument document = new WordDocument(); //Adds new section to the document IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -paragraph.AppendText("Image hyperlink: "); +paragraph.AppendText("Image Hyperlink"); paragraph = section.AddParagraph(); -//Creates a new image instance and loads the image +//Creates a new image instance and load image WPicture picture = new WPicture(document); picture.LoadImage(Image.FromFile("Image.png")); -//Appends an image hyperlink to the paragraph +//Appends new image hyperlink to the paragraph paragraph.AppendHyperlink("http://www.syncfusion.com", picture, HyperlinkType.WebLink); //Saves the Word document document.Save("Sample.docx", FormatType.Docx); @@ -344,18 +326,18 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Creates a new Word document Dim document As New WordDocument() 'Adds new section to the document Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -paragraph.AppendText("Image hyperlink: ") +paragraph.AppendText("Image Hyperlink") paragraph = section.AddParagraph() -'Creates a new image instance and loads the image +'Creates a new image instance and load image Dim picture As New WPicture(document) picture.LoadImage(Image.FromFile("Image.png")) -'Appends an image hyperlink to the paragraph +'Appends new image hyperlink to the paragraph paragraph.AppendHyperlink("http://www.syncfusion.com", picture, HyperlinkType.WebLink) 'Saves the Word document document.Save("Sample.docx", FormatType.Docx) @@ -374,42 +356,38 @@ The following code example explains how to modify the URL of an existing hyperli {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Modify-url-of-hyperlink/.NET/Modify-url-of-hyperlink/Program.cs" %} -using (FileStream fileStream = new FileStream(@"Sample.docx", FileMode.Open, FileAccess.ReadWrite)) +FileStream fileStream = new FileStream(@"Sample.docx", FileMode.Open, FileAccess.ReadWrite); +//Loads the template document +WordDocument document = new WordDocument(fileStream, FormatType.Docx); +WParagraph paragraph = document.LastParagraph; +//Iterates through the paragraph items +foreach (ParagraphItem item in paragraph.ChildEntities) { - //Loads the template document - WordDocument document = new WordDocument(fileStream, FormatType.Docx); - WParagraph paragraph = document.LastParagraph; - //Iterates through the paragraph items - foreach (ParagraphItem item in paragraph.ChildEntities) + if (item is WField) { - if (item is WField) + if ((item as WField).FieldType == FieldType.FieldHyperlink) { - if ((item as WField).FieldType == FieldType.FieldHyperlink) + //Gets the hyperlink field + Hyperlink link = new Hyperlink(item as WField); + if (link.Type == HyperlinkType.WebLink) { - //Gets the hyperlink field - Hyperlink link = new Hyperlink(item as WField); - if (link.Type == HyperlinkType.WebLink) - { - //Modifies the URL of the hyperlink - link.Uri = "http://www.google.com"; - link.TextToDisplay = "Google"; - break; - } + //Modifies the url of the hyperlink + link.Uri = "http://www.google.com"; + link.TextToDisplay = "Google"; + break; } } } - //Saves the Word document to a MemoryStream - using (MemoryStream stream = new MemoryStream()) - { - document.Save(stream, FormatType.Docx); - } - //Closes the Word document - document.Close(); } +//Saves the Word document to MemoryStream. +MemoryStream stream = new MemoryStream(); +document.Save(stream, FormatType.Docx); +//Closes the Word document. +document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Loads the template document +//Loads the template document WordDocument document = new WordDocument("Sample.docx", FormatType.Docx); WParagraph paragraph = document.LastParagraph; //Iterates through the paragraph items @@ -423,7 +401,7 @@ foreach (ParagraphItem item in paragraph.ChildEntities) Hyperlink link = new Hyperlink(item as WField); if (link.Type == HyperlinkType.WebLink) { - //Modifies the URL of the hyperlink + //Modifies the url of the hyperlink link.Uri = "http://www.google.com"; link.TextToDisplay = "Google"; break; @@ -437,18 +415,17 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Loads the template document +'Loads the template document Dim document As New WordDocument("Sample.docx", FormatType.Docx) Dim paragraph As WParagraph = document.LastParagraph 'Iterates through the paragraph items For Each item As ParagraphItem In paragraph.ChildEntities If TypeOf item Is WField Then - Dim field As WField = DirectCast(item, WField) - If field.FieldType = FieldType.FieldHyperlink Then + If TryCast(item, WField).FieldType = FieldType.FieldHyperlink Then 'Gets the hyperlink field - Dim link As New Hyperlink(field) + Dim link As New Hyperlink(TryCast(item, WField)) If link.Type = HyperlinkType.WebLink Then - 'Modifies the URL of the hyperlink + 'Modifies the url of the hyperlink link.Uri = "http://www.google.com" link.TextToDisplay = "Google" Exit For @@ -467,8 +444,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## See Also -The following knowledge base articles cover scenarios not discussed above — removing hyperlinks, replacing text with hyperlinks, and stripping hyperlink styling. - * [How to find and modify hyperlink address in Word document in C#, VB.NET](https://support.syncfusion.com/kb/article/12198/find-and-modify-hyperlink-address-in-word-document) * [How to replace particular text with hyperlink in the Word document](https://support.syncfusion.com/kb/article/10326/how-to-replace-the-particular-text-with-hyperlink-in-word-document) * [How to replace the URL of image hyperlink in Word document in C# and VB](https://support.syncfusion.com/kb/article/11259/how-to-replace-url-of-image-hyperlink-in-word-document) diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Paragraph.md b/Document-Processing/Word/Word-Library/NET/Working-with-Paragraph.md index 2298015dc5..17c59714a3 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Paragraph.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Paragraph.md @@ -7,7 +7,7 @@ documentation: UG --- # Working with Paragraph in Word Library -Paragraph is the basic element in a Word document that contains textual and graphical content. Each paragraph has its own formatting such as line spacing, alignment, indentation, and more. Within a paragraph, the contents are represented by one or more child elements such as [WTextRange](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextRange.html), [WPicture](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WPicture.html), [Hyperlink](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Hyperlink.html), and more. The [ParagraphItem](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.ParagraphItem.html) is the base class for the child elements of paragraph. The following elements can be the child elements of a paragraph: +Paragraph is the basic element in a Word document that contains a textual and graphical contents. Each paragraph has its own formatting such as line spacing, alignment, indentation, and more. Within a paragraph, the contents are represented by one or more child elements such as [WTextRange](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextRange.html), [WPicture](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WPicture.html), and [Hyperlink](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Hyperlink.html) and more. The [ParagraphItem](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.ParagraphItem.html) is the base class for the child elements of paragraph. The following elements can be the child elements of a paragraph: * Text: Represented by an instance of [WTextRange](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextRange.html). * Image: Represented by an instance of [WPicture](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WPicture.html). @@ -85,37 +85,34 @@ The following code example illustrates how to modify an existing paragraph. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Modify-an-existing-paragraph/.NET/Modify-an-existing-paragraph/Program.cs" %} -//Opens the file as Stream -using (FileStream fileStream = new FileStream(@"Test.docx", FileMode.Open, FileAccess.ReadWrite)) +FileStream fileStream = new FileStream(@"Test.docx", FileMode.Open, FileAccess.ReadWrite); +//Loads the template document +WordDocument document = new WordDocument(fileStream, FormatType.Docx); +//Gets the text body of first section +WTextBody textBody = document.Sections[0].Body; +//Gets the paragraph at index 1 +WParagraph paragraph = textBody.Paragraphs[1]; +//Iterates through the child elements of paragraph +foreach (ParagraphItem item in paragraph.ChildEntities) { - //Loads the template document - WordDocument document = new WordDocument(fileStream, FormatType.Docx); - //Gets the text body of first section - WTextBody textBody = document.Sections[0].Body; - //Gets the paragraph at index 1 - WParagraph paragraph = textBody.Paragraphs[1]; - //Iterates through the child elements of paragraph - foreach (ParagraphItem item in paragraph.ChildEntities) + if (item is WTextRange) { - if (item is WTextRange) - { - WTextRange text = item as WTextRange; - //Modifies the character format of the text - text.CharacterFormat.Bold = true; - break; - } + WTextRange text = item as WTextRange; + //Modifies the character format of the text + text.CharacterFormat.Bold = true; + break; } - //Saves the Word document to MemoryStream - MemoryStream stream = new MemoryStream(); - document.Save(stream, FormatType.Docx); - //Closes the Word document - document.Close(); } +///Saves the Word document to MemoryStream +MemoryStream stream = new MemoryStream(); +document.Save(stream, FormatType.Docx); +//Closes the Word document +document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} //Loads the template document -WordDocument document = new WordDocument("Test.docx"); +WordDocument document = new WordDocument("Template.docx"); //Gets the text body of first section WTextBody textBody = document.Sections[0].Body; //Gets the paragraph at index 1 @@ -139,7 +136,7 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Loads the template document -Dim document As New WordDocument("Test.docx") +Dim document As New WordDocument("Template.docx") 'Gets the text body of first section Dim textBody As WTextBody = document.Sections(0).Body 'Gets the paragraph at index 1 @@ -426,8 +423,6 @@ A tab stop is a horizontal position that is set for aligning text of the paragra Each paragraph has its own tab stop collection where the new tab stop can be added and existing tab stop can be removed. -N> The tab position value is specified in points (1 inch = 72 points). - The following code example explains how to add tab stops to the paragraph. {% tabs %} @@ -501,8 +496,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync You can set RTL (Right-to-left) direction to the paragraph in a Word document. The following code example shows how to set RTL (Right-to-left) for a paragraph in Word document. -N> Setting RTL (Right-to-left) direction also affects the alignment of the paragraph. Set the `HorizontalAlignment` to `Right` for proper RTL alignment. - {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/RTL-paragraph/.NET/RTL-paragraph/Program.cs" %} @@ -768,8 +761,6 @@ You can remove the styles present in the existing document using the [Remove](ht The following code example explains how to remove the style from the word document. -N> Removing a style that is applied to paragraphs will revert those paragraphs to the default formatting. Built-in styles cannot be removed using this method. - {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Word-document/Remove-particular-style-from-document/.NET/Remove-particular-style-from-document/Program.cs" %} @@ -811,7 +802,7 @@ Dim styleCollection As IStyleCollection = document.Styles 'Finds the style with the name "Style1." Dim style As WParagraphStyle = CType(styleCollection.FindByName("Style1"), WParagraphStyle) 'Remove the "Style1" style from the Word document. -style.Remove() +style.Remove 'Saves and closes the document instance. document.Save("Sample.docx", FormatType.Docx) document.Close() @@ -840,7 +831,7 @@ IWParagraph firstParagraph = section.AddParagraph(); IWTextRange firstText = firstParagraph.AppendText("A new text is added to the paragraph."); firstText.CharacterFormat.FontSize = 14; firstText.CharacterFormat.Bold = true; -firstText.CharacterFormat.TextColor = Syncfusion.Drawing.Color.Green; +firstText.CharacterFormat.TextColor = Color.Green; //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); document.Save(stream, FormatType.Docx); @@ -986,11 +977,11 @@ firstText.CharacterFormat.Shadow = true; firstText.CharacterFormat.SmallCaps = true; IWTextRange secondText = firstParagraph.AppendText("This the second text range"); //Apply formatting for second text range -secondText.CharacterFormat.HighlightColor = Syncfusion.Drawing.Color.GreenYellow; +secondText.CharacterFormat.HighlightColor = Color.GreenYellow; secondText.CharacterFormat.UnderlineStyle = UnderlineStyle.DotDash; secondText.CharacterFormat.Italic = true; secondText.CharacterFormat.FontName = "Times New Roman"; -secondText.CharacterFormat.TextColor = Syncfusion.Drawing.Color.Green; +secondText.CharacterFormat.TextColor = Color.Green; //Add new paragraph to the section IWParagraph secondParagraph = section.AddParagraph(); //Add new text to the paragraph @@ -1147,7 +1138,7 @@ For further information, click [here](https://help.syncfusion.com/document-proce ## Working with symbols -Symbols are used to add contents such as currencies, numbers, punctuation, etc. DocIO represents symbols with [WSymbol](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSymbol.html) instance. Each symbol can be identified with their character codes. +Symbols are used to add contents such as currencies, numbers, punctuations, etc. DocIO represents symbols with [WSymbol](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSymbol.html) instance. Each symbol can be identified with their character codes. The following code example explains how to add new symbol to the document. @@ -1241,7 +1232,7 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Loads the template document -WordDocument document = new WordDocument("Sample1.docx", FormatType.Docx); +WordDocument document = new WordDocument("Sample.docx", FormatType.Docx); //Gets the textbody content WTextBody textbody = document.Sections[0].Body; //Iterates through the paragraphs @@ -1302,7 +1293,7 @@ Breaks allow the document contents to split into multiple parts to customize the * Page break: Starts the content on the next page. * Line break: Starts the content in a new line. * Column break: Starts the content in the next column. -* Text wrapping break: Starts the content below the picture, table, or other items. +* Text wrapping break: Starts the content below to the picture, table, or other items. The following code example explains how various types of breaks can be appended to the paragraphs. @@ -1406,7 +1397,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### Text wrapping break -When including images or other objects in a Word document, the text is wrapped around the objects as per wrapping behavior. If you wish to move the text below the picture (as a caption), instead of adding an extra line break or empty paragraphs, you can add the text wrapping break to achieve it. +When including images or other objects in a Word document, the text is wrapped around the objects as per wrapping behavior. If you wish to move the text below to the picture (as like caption), instead of adding an extra line break or empty paragraphs, you can add the text wrapping break to achieve it. The following code example illustrates how to insert a text wrapping break to move the text below to the picture. @@ -1484,7 +1475,7 @@ For further information, click [here](https://help.syncfusion.com/document-proce ## Working with Text Box -Text box contains a group of textual and graphical contents. DocIO supports creating and manipulating the text box and its formatting by using the [WTextBox](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBox.html) instance. +Text box contains a group of textual and graphical contents. DocIO supports to create and manipulate the text box and its formatting by using the [WTextBox](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBox.html) instance. The following code example explains how to add new text box to the paragraph. @@ -1504,12 +1495,10 @@ IWParagraph textboxParagraph = textbox.TextBoxBody.AddParagraph(); textboxParagraph.AppendText("Text inside text box"); textboxParagraph = textbox.TextBoxBody.AddParagraph(); //Adds new picture to textbox body -using (FileStream imagestream = new FileStream(@"Mountain-200.jpg", FileMode.Open, FileAccess.ReadWrite)) -{ - IWPicture picture = textboxParagraph.AppendPicture(imagestream); - picture.Height = 75; - picture.Width = 50; -} +FileStream imagestream = new FileStream(@"Mountain-200.jpg", FileMode.Open, FileAccess.ReadWrite); +IWPicture picture = textboxParagraph.AppendPicture(imagestream); +picture.Height = 75; +picture.Width = 50; //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); document.Save(stream, FormatType.Docx); @@ -1571,8 +1560,6 @@ Text box has its own formatting such as outline color, fill effects, text direct The following code example explains how to apply formatting and rotation for text box. -N> The valid value for `Rotation` ranges from 0 to 359 degrees. - {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Paragraphs/Format-and-rotate-text-box/.NET/Format-and-rotate-text-box/Program.cs" %} diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md b/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md index ad49e7ac13..d73f3c6d3f 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Sections.md @@ -6,9 +6,9 @@ control: DocIO documentation: UG --- -# Working with Sections in a Word Library +# Working with Sections -A section contains the contents of the headers, footers, and main document body through the instances of [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html). A section also has a specific set of properties used to define the page settings, number of columns, headers and footers and so on that decide how the text appears. [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html) represents a group of paragraphs and tables, etc. +A section contains the contents present in Headers, Footers and main document through the instances of [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html). A section also has a specific set of properties used to define the page settings, number of columns, headers and footers and so on that decide how the text appears. [WTextBody](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTextBody.html) represents group of paragraphs and tables etc. N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-platform]*** for ASP.NET Core, Blazor, Xamarin, UWP, .NET MAUI, and WinUI; ***C# [Windows-specific]*** for WinForms and WPF; ***VB.NET [Windows-specific]*** for VB.NET applications. @@ -52,7 +52,7 @@ Dim section As IWSection = document.AddSection() Dim paragraph As IWParagraph = section.AddParagraph() 'Appends the text to the created paragraph paragraph.AppendText("AdventureWorks Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company.") -'Saves and closes the Word document instance +‘Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -61,9 +61,9 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Sections/Add-sections-in-Word-document). -You can add multiple sections to the document. When you add more than one section to the Word document, the section starts on a new page by default. +You can add the multiple sections into the document. When you add more than one section into the word document, the section starts from the next page by default. -You can also add a new section that starts on the same page by specifying the [BreakCode](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSection.html#Syncfusion_DocIO_DLS_WSection_BreakCode) as shown in the following code example. +You can also add a new section that starts on a same page by specifying the [BreakCode](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WSection.html#Syncfusion_DocIO_DLS_WSection_BreakCode) as shown in following code example. {% tabs %} @@ -132,7 +132,7 @@ section.BreakCode = SectionBreakCode.NoBreak paragraph = section.AddParagraph() 'Appends the text to the created paragraph paragraph.AppendText(paraText) -'Saves and closes the Word document instance +‘Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -209,7 +209,7 @@ section.PageSetup.OtherPagesTray = PrinterPaperTray.MiddleBin Dim paragraph As IWParagraph = section.AddParagraph() 'Appends the text to the created paragraph. paragraph.AppendText("AdventureWorks Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company.") -'Saves and closes the Word document instance +‘Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -218,7 +218,7 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Sections/Page-setup-properties). -## Creating a Multi-column Document +## Creating Multi-column document You can split the contents into two or more columns by specifying the column width and spacing between columns. @@ -328,7 +328,7 @@ paragraph.AppendBreak(BreakType.ColumnBreak) paragraph = section.AddParagraph() 'Appends the text to the created paragraph paragraph.AppendText(paraText) -'Saves and closes the Word document instance +‘Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -339,7 +339,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Creating document with different page settings -You can prefer to have more sections in a Word document when you need to have different page settings or headers and footers for a specific set of contents. The following code example illustrates how to create a Word document with multiple sections whose page orientation is portrait and landscape, respectively. +You can prefer to have more sections in a Word document when you need to have different page settings or headers and footers for a specific set of contents. The following code example illustrates how to create a Word document with multiple sections whose page orientation are portrait and landscape respectively. {% tabs %} @@ -430,7 +430,7 @@ section.PageSetup.PageSize = PageSize.A4; section.PageSetup.Orientation = PageOrientation.Landscape 'Appends the text to the paragraph paragraph.AppendText(paraText) -'Saves and closes the Word document instance +‘Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -538,7 +538,7 @@ paragraph.AppendText("[ Default Page Header ]") 'Inserts the default Page footer paragraph = section.HeadersFooters.OddFooter.AddParagraph() paragraph.AppendText("[ Default Page Footer ]") -'Saves and closes the Word document instance +‘Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -659,7 +659,7 @@ paragraph.AppendText("[ Default Page Header ]") 'Inserts the default page footer paragraph = section.HeadersFooters.OddFooter.AddParagraph() paragraph.AppendText("[ Default Page Footer ]") -'Saves and closes the Word document instance +‘Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -782,7 +782,7 @@ paragraph.AppendText("[Even Page Header ]") 'Inserts the even page footer paragraph = section.HeadersFooters.EvenFooter.AddParagraph() paragraph.AppendText("[ Even Page Footer ]") -'Saves and closes the Word document instance +‘Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -911,7 +911,7 @@ section.HeadersFooters.Footer.AddParagraph().AppendText("[ Third Section Footer 'Appends some text to the third page in document paragraph = section.AddParagraph() paragraph.AppendText(Convert.ToString(vbCr & vbCr & "[ Third Page ] " & vbCr & vbCr) & paraText) -'Saves and closes the Word document instance +‘Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -1180,7 +1180,7 @@ paragraph.AppendField("TotalNumberOfPages", FieldType.FieldNumPages) paragraph = section.AddParagraph() 'Appends the text to the created paragraph paragraph.AppendText("AdventureWorks Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company.") -'Saves and closes the Word document instance +‘Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -1287,7 +1287,7 @@ paragraph.AppendText("[ Default Page Header ]") 'Inserts the default page footer paragraph = section.HeadersFooters.OddFooter.AddParagraph() paragraph.AppendText("[ Default Page Footer ]") -'Saves and closes the Word document instance +‘Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -1366,11 +1366,11 @@ Using document As WordDocument = New WordDocument() section.PageSetup.Borders.Color = Color.Blue 'Set the linewidth of the borders. section.PageSetup.Borders.LineWidth = 0.75F - 'Set the page border margins. - section.PageSetup.Borders.Top.Space = 5F - section.PageSetup.Borders.Bottom.Space = 5F - section.PageSetup.Borders.Right.Space = 5F - section.PageSetup.Borders.Left.Space = 5F + //Set the page border margins. + section.PageSetup.Borders.Top.Space = 5F; + section.PageSetup.Borders.Bottom.Space = 5F; + section.PageSetup.Borders.Right.Space = 5F; + section.PageSetup.Borders.Left.Space = 5F; 'Add a paragraph to a section. Dim paragraph As IWParagraph = section.AddParagraph() paragraph.AppendText("AdventureWorks Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company.") @@ -1504,7 +1504,7 @@ document.Close(); Dim document As New WordDocument(inputFileName) 'Removes the second section from the collection document.Sections.RemoveAt(1) -'Saves and closes the Word document instance +‘Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Shapes.md b/Document-Processing/Word/Word-Library/NET/Working-with-Shapes.md index 9a08419362..9ff2566e65 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Shapes.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Shapes.md @@ -6,13 +6,15 @@ control: DocIO documentation: UG keywords: --- -# Working with Shapes in .NET Word (DocIO) Library +# Working with Shapes for File-Formats Platform DocIO Control -Shapes are drawing objects that can include lines, curves, circles, rectangles, and so on. A shape can have preset or custom geometry. You can create and manipulate preset shapes in DOCX and WordML format documents. +Shapes are drawing objects that include lines, curves, circles, rectangles, etc. It can be preset or custom geometry. You can create and manipulate the pre-defined shape in DOCX and WordML format documents. ## Adding shapes -The following code example illustrates how to add a preset shape to the document. +The following code example illustrates how to add pre-defined shape to the document. + +N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-platform]*** for ASP.NET Core, Blazor, Xamarin, UWP, .NET MAUI, and WinUI; ***C# [Windows-specific]*** for WinForms and WPF; ***VB.NET [Windows-specific]*** for VB.NET applications. {% tabs %} @@ -68,10 +70,10 @@ IWTextRange text = paragraph.AppendText("This text is in rounded rectangle shape text.CharacterFormat.TextColor = Color.Green; text.CharacterFormat.Bold = true; //Adds another shape to the document -paragraph = section.AddParagraph() as WParagraph; +paragraph = section.AddParagraph()as WParagraph; paragraph.AppendBreak(BreakType.LineBreak); Shape pentagon = paragraph.AppendShape(AutoShapeType.Pentagon, 100, 100); -paragraph = pentagon.TextBody.AddParagraph() as WParagraph; +paragraph = pentagon.TextBody.AddParagraph()as WParagraph; paragraph.AppendText("This text is in pentagon shape"); pentagon.HorizontalPosition = 72; pentagon.VerticalPosition = 200; @@ -119,9 +121,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### Format shapes -A shape can have formatting such as line color, fill color, positioning, and wrap formats. The following code example illustrates how to apply formatting options to a shape. - -N> `FillFormat.Transparency` accepts a value from 0 to 100 (percentage). +Shape can have formatting such as line color, fill color, positioning, wrap formats, etc. The following code example illustrates how to apply formatting options for shape. {% tabs %} @@ -230,7 +230,7 @@ text.CharacterFormat.Bold = True rectangle.FillFormat.Fill = True rectangle.FillFormat.Color = Color.LightGray 'Set transparency (opacity) to the shape fill color. -rectangle.FillFormat.Transparency = 75 +rectangle.FillFormat.Transparency = 75; 'Apply wrap formats rectangle.WrapFormat.TextWrappingStyle = TextWrappingStyle.Square rectangle.WrapFormat.TextWrappingType = TextWrappingType.Right @@ -331,7 +331,7 @@ paragraph = TryCast(rectangle.TextBody.AddParagraph(), WParagraph) Dim text As IWTextRange = paragraph.AppendText("This text is in rounded rectangle shape") 'Saves and closes the Word document document.Save("Sample.docx", FormatType.Docx) -document.Close() +document.Close {% endhighlight %} {% endtabs %} @@ -340,21 +340,20 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Grouping shapes -The .NET Word (DocIO) library allows you to group multiple shapes, pictures, text boxes, and charts as a single group shape in a Word document (DOCX). These group shapes are preserved in DOCX and WordML format conversions. +Word library now allows you to create or group multiple shapes, pictures, text boxes, and charts as a group shape in Word document (DOCX) and preserve it as in DOCX and WordML format conversions. -Microsoft Word provides an option to group a set of shapes and images as a single shape and to later ungroup it back into individual items. +You can create a document with group shapes by using Microsoft Word. It provides an option to group a set of shapes and images as a single shape and a group shape as individual item. ![Create Group shape in Microsoft Word](Working-with-Shapes_images/Working-with-Shapes_img1.jpeg) **Key Features:** -1. You can easily manage a group of shapes, pictures, text boxes, or charts as a group shape. -2. You can move several shapes or images simultaneously and apply the same formatting properties to the children of a group shape. +1. You can easily manage group of shapes, pictures, text boxes, or charts as a group shape. +2. You can move several shapes or images simultaneously and apply the same formatting properties for children of group shapes. -N> The following constraints apply while grouping shapes or other objects: -N> 1. The shapes should be positioned relative to the "Page". -N> 2. The wrapping style should not be "In Line with Text". +N> 1. While grouping the shapes or other objects, the shapes should be positioned relative to the “Page”. +N> 2. While grouping the shapes or other objects, the wrapping style should not be "In Line with Text". -The following code example illustrates how to create a group shape in a Word document. In the sample, an `Image.png` file must be present in the working directory (replace the path as needed). +The following code example illustrates how to create group shape in Word document. {% tabs %} @@ -491,67 +490,67 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +‘Creates a new Word document Dim document As WordDocument = New WordDocument() -'Adds new section to the document +‘Adds new section to the document Dim section As IWSection = document.AddSection() -'Adds new paragraph to the section +‘Adds new paragraph to the section Dim paragraph As WParagraph = TryCast(section.AddParagraph(), WParagraph) -'Creates new group shape +‘Creates new group shape Dim groupShape As GroupShape = New GroupShape(document) -'Adds group shape to the paragraph +‘Adds group shape to the paragraph paragraph.ChildEntities.Add(groupShape) -'Creates new shape +‘Creates new shape Dim shape As Shape = New Shape(document, AutoShapeType.RoundedRectangle) -'Sets height and width for shape +‘Sets height and width for shape shape.Height = 100 shape.Width = 150 -'Sets horizontal and vertical position +‘Sets horizontal and vertical position shape.HorizontalPosition = 72 shape.VerticalPosition = 72 -'Sets wrapping style for shape +‘Sets wrapping style for shape shape.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText -'Sets horizontal and vertical origin +‘Sets horizontal and vertical origin shape.HorizontalOrigin = HorizontalOrigin.Page shape.VerticalOrigin = VerticalOrigin.Page -'Adds the specified shape to group shape +‘Adds the specified shape to group shape groupShape.Add(shape) -'Creates new picture +‘Creates new picture Dim picture As WPicture = New WPicture(document) picture.LoadImage(Image.FromFile("Image.png")) -'Sets wrapping style for picture +‘Sets wrapping style for picture picture.TextWrappingStyle = TextWrappingStyle.InFrontOfText -'Sets height and width for the image +‘Sets height and width for the image picture.Height = 100 picture.Width = 100 -'Sets horizontal and vertical position +‘Sets horizontal and vertical position picture.HorizontalPosition = 400 picture.VerticalPosition = 150 -'Sets horizontal and vertical origin +‘Sets horizontal and vertical origin picture.HorizontalOrigin = HorizontalOrigin.Page picture.VerticalOrigin = VerticalOrigin.Page -'Adds the specified picture to group shape +‘Adds the specified picture to group shape groupShape.Add(picture) -'Creates new textbox +‘Creates new textbox Dim textbox As WTextBox = New WTextBox(document) textbox.TextBoxFormat.Width = 150 textbox.TextBoxFormat.Height = 75 -'Adds new text to the textbox body +‘Adds new text to the textbox body Dim textboxParagraph As IWParagraph = textbox.TextBoxBody.AddParagraph() textboxParagraph.AppendText("Text inside text box") -'Sets wrapping style for textbox +‘Sets wrapping style for textbox textbox.TextBoxFormat.TextWrappingStyle = TextWrappingStyle.Behind -'Sets horizontal and vertical position +‘Sets horizontal and vertical position textbox.TextBoxFormat.HorizontalPosition = 200 textbox.TextBoxFormat.VerticalPosition = 200 -'Sets horizontal and vertical origin +‘Sets horizontal and vertical origin textbox.TextBoxFormat.VerticalOrigin = VerticalOrigin.Page textbox.TextBoxFormat.HorizontalOrigin = HorizontalOrigin.Page -'Adds the specified textbox to group shape +‘Adds the specified textbox to group shape groupShape.Add(textbox) -'Saves the Word document +‘Saves the Word document document.Save("Sample.docx", FormatType.Docx) -'Closes the document +‘Closes the document document.Close() {% endhighlight %} @@ -559,7 +558,7 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Shapes/Add-group-shape-in-Word). -The following code example illustrates how to add a collection of shapes, text boxes, and charts as a group shape by passing an array of paragraph items to the `GroupShape` constructor. +The following code example illustrates how to add collection of shapes or images as a group shape in Word document. {% tabs %} @@ -580,7 +579,7 @@ shape.Width = 150; //Sets Wrapping style for shape shape.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText; //Sets horizontal and vertical position for shape -shape.HorizontalPosition = 72; +shape.HorizontalPosition = 7; shape.VerticalPosition = 72; //Sets horizontal and vertical origin for shape shape.HorizontalOrigin = HorizontalOrigin.Page; @@ -688,7 +687,7 @@ shape.Width = 150; //Sets Wrapping style for shape shape.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText; //Sets horizontal and vertical position for shape -shape.HorizontalPosition = 72; +shape.HorizontalPosition = 7; shape.VerticalPosition = 72; //Sets horizontal and vertical origin for shape shape.HorizontalOrigin = HorizontalOrigin.Page; @@ -769,7 +768,7 @@ chart.PrimaryCategoryAxis.CategoryLabels = chart.ChartData[2, 1, 11, 1]; paragraphItems[2] = chart; //Creates new group shape GroupShape groupShape = new GroupShape(document, paragraphItems); -groupShape.HorizontalPosition = 72; + groupShape.HorizontalPosition = 72; //Adds the group shape to the paragraph paragraph.ChildEntities.Add(groupShape); //Saves the Word document @@ -779,64 +778,64 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +‘Creates a new Word document Dim document As WordDocument = New WordDocument() -'Adds new section to the document +‘Adds new section to the document Dim section As IWSection = document.AddSection() -'Adds new paragraph to the section +‘Adds new paragraph to the section Dim paragraph As WParagraph = TryCast(section.AddParagraph(), WParagraph) -'Creates paragraph item collections to add child shapes +‘Creates paragraph item collections to add child shapes Dim paragraphItems As ParagraphItem() = New ParagraphItem(2) {} -'Creates new shape +‘Creates new shape Dim shape As Shape = New Shape(document, AutoShapeType.RoundedRectangle) -'Sets height and width for shape +‘Sets height and width for shape shape.Height = 100 shape.Width = 150 -'Sets Wrapping style for shape +‘Sets Wrapping style for shape shape.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText -'Sets horizontal and vertical position for shape -shape.HorizontalPosition = 72 +‘Sets horizontal and vertical position for shape +shape.HorizontalPosition = 7 shape.VerticalPosition = 72 -'Sets horizontal and vertical origin for shape +‘Sets horizontal and vertical origin for shape shape.HorizontalOrigin = HorizontalOrigin.Page shape.VerticalOrigin = VerticalOrigin.Page -'Sets the shape as paragraph item +‘Sets the shape as paragraph item paragraphItems(0) = shape -'Appends new textbox to the document +‘Appends new textbox to the document Dim textbox As WTextBox = New WTextBox(document) -'Sets height and width for textbox +‘Sets height and width for textbox textbox.TextBoxFormat.Width = 150 textbox.TextBoxFormat.Height = 75 -'Adds new text to the textbox body +‘Adds new text to the textbox body Dim textboxParagraph As IWParagraph = textbox.TextBoxBody.AddParagraph() -'Adds new text to the textbox paragraph +‘Adds new text to the textbox paragraph textboxParagraph.AppendText("Text inside text box") -'Sets wrapping style for textbox +‘Sets wrapping style for textbox textbox.TextBoxFormat.TextWrappingStyle = TextWrappingStyle.Behind -'Sets horizontal and vertical position for textbox +‘Sets horizontal and vertical position for textbox textbox.TextBoxFormat.HorizontalPosition = 200 textbox.TextBoxFormat.VerticalPosition = 200 -'Sets horizontal and vertical origin for textbox +‘Sets horizontal and vertical origin for textbox textbox.TextBoxFormat.VerticalOrigin = VerticalOrigin.Page textbox.TextBoxFormat.HorizontalOrigin = HorizontalOrigin.Page -'Sets the textbox as paragraph item +‘Sets the textbox as paragraph item paragraphItems(1) = textbox -'Appends new chart to the document +‘Appends new chart to the document Dim chart As WChart = New WChart(document) -'Sets height and width for chart +‘Sets height and width for chart chart.Height = 270 chart.Width = 446 -'Sets wrapping style for chart +‘Sets wrapping style for chart chart.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText -'Sets chart type +‘Sets chart type chart.ChartType = OfficeChartType.Pie chart.VerticalPosition = 350 -'Sets chart title -'Sets font and size for chart title +‘Sets chart title +‘Sets font and size for chart title chart.ChartTitle = "Best Selling Products" chart.ChartTitleArea.FontName = "Calibri" chart.ChartTitleArea.Size = 14 -'Sets data for chart +‘Sets data for chart chart.ChartData.SetValue(1, 1, "") chart.ChartData.SetValue(1, 2, "Sales") chart.ChartData.SetValue(2, 1, "Phyllis Lapin") @@ -859,29 +858,29 @@ chart.ChartData.SetValue(10, 1, "Christina Berglund") chart.ChartData.SetValue(10, 2, 29.171) chart.ChartData.SetValue(11, 1, "Elizabeth Lincoln") chart.ChartData.SetValue(11, 2, 25.696) -'Creates a new chart series with the name "Sales" +‘Creates a new chart series with the name “Sales” Dim pieSeries As IOfficeChartSerie = chart.Series.Add("Sales") -'Sets value for the chart series +‘Sets value for the chart series pieSeries.Values = chart.ChartData(2, 2, 11, 2) -'Sets data label +‘Sets data label pieSeries.DataPoints.DefaultDataPoint.DataLabels.IsValue = True pieSeries.DataPoints.DefaultDataPoint.DataLabels.Position = OfficeDataLabelPosition.Outside -'Sets background color +‘Sets background color chart.ChartArea.Fill.ForeColor = Color.FromArgb(242, 242, 242) chart.PlotArea.Fill.ForeColor = Color.FromArgb(242, 242, 242) chart.ChartArea.Border.LinePattern = OfficeChartLinePattern.None -'Sets category labels +‘Sets category labels chart.PrimaryCategoryAxis.CategoryLabels = chart.ChartData(2, 1, 11, 1) -'Sets the chart as paragraph item +‘Sets the chart as paragraph item paragraphItems(2) = chart -'Creates new group shape +‘Creates new group shape Dim groupShape As GroupShape = New GroupShape(document, paragraphItems) groupShape.HorizontalPosition = 72 -'Adds the group shape to the paragraph +‘Adds the group shape to the paragraph paragraph.ChildEntities.Add(groupShape) -'Saves the Word document +‘Saves the Word document document.Save("Sample.docx", FormatType.Docx) -'Closes the document +‘Closes the document document.Close() {% endhighlight %} @@ -891,7 +890,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### Nested group shapes -You can nest one group shape inside another. The following code example illustrates how to group nested group shapes as a single group shape in a Word document. +The following code example illustrates how to group the nested group shapes as a group shape in Word document. {% tabs %} @@ -1074,91 +1073,91 @@ document.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +‘Creates a new Word document Dim document As WordDocument = New WordDocument() -'Adds new section to the document +‘Adds new section to the document Dim section As IWSection = document.AddSection() -'Adds new paragraph to the section +‘Adds new paragraph to the section Dim paragraph As WParagraph = TryCast(section.AddParagraph(), WParagraph) -'Creates new group shape +‘Creates new group shape Dim groupShape As GroupShape = New GroupShape(document) -'Adds group shape to the paragraph +‘Adds group shape to the paragraph paragraph.ChildEntities.Add(groupShape) -'Appends new shape to the document +‘Appends new shape to the document Dim shape As Shape = New Shape(document, AutoShapeType.RoundedRectangle) -'Sets height and width for shape +‘Sets height and width for shape shape.Height = 100 shape.Width = 150 -'Sets Wrapping style for shape +‘Sets Wrapping style for shape shape.WrapFormat.TextWrappingStyle = TextWrappingStyle.InFrontOfText -'Sets horizontal and vertical position for shape +‘Sets horizontal and vertical position for shape shape.HorizontalPosition = 72 shape.VerticalPosition = 72 -'Sets horizontal and vertical origin for shape +‘Sets horizontal and vertical origin for shape shape.HorizontalOrigin = HorizontalOrigin.Page shape.VerticalOrigin = VerticalOrigin.Page -'Adds the specified shape to group shape +‘Adds the specified shape to group shape groupShape.Add(shape) -'Appends new picture to the document +‘Appends new picture to the document Dim picture As WPicture = New WPicture(document) -'Loads image from the file -picture.LoadImage(Image.FromFile("Image.png")) -'Sets wrapping style for picture +‘Loads image from the file +picture.LoadImage(Image.FromFile("Image.jpg")) +‘Sets wrapping style for picture picture.TextWrappingStyle = TextWrappingStyle.InFrontOfText -'Sets height and width for the picture +‘Sets height and width for the picture picture.Height = 100 picture.Width = 100 -'Sets horizontal and vertical position for the picture +‘Sets horizontal and vertical position for the picture picture.HorizontalPosition = 400 picture.VerticalPosition = 150 -'Sets horizontal and vertical origin for the picture +‘Sets horizontal and vertical origin for the picture picture.HorizontalOrigin = HorizontalOrigin.Page picture.VerticalOrigin = VerticalOrigin.Page -'Adds specified picture to the group shape +‘Adds specified picture to the group shape groupShape.Add(picture) -'Creates new nested group shape +‘Creates new nested group shape Dim nestedGroupShape As GroupShape = New GroupShape(document) -'Appends new textbox to the document +‘Appends new textbox to the document Dim textbox As WTextBox = New WTextBox(document) -'Sets width and height for the textbox +‘Sets width and height for the textbox textbox.TextBoxFormat.Width = 150 textbox.TextBoxFormat.Height = 75 -'Adds new text to the textbox body +‘Adds new text to the textbox body Dim textboxParagraph As IWParagraph = textbox.TextBoxBody.AddParagraph() -'Adds new text to the textbox paragraph +‘Adds new text to the textbox paragraph textboxParagraph.AppendText("Text inside text box") -'Sets wrapping style for the textbox +‘Sets wrapping style for the textbox textbox.TextBoxFormat.TextWrappingStyle = TextWrappingStyle.Behind -'Sets horizontal and vertical position for the textbox +‘Sets horizontal and vertical position for the textbox textbox.TextBoxFormat.HorizontalPosition = 200 textbox.TextBoxFormat.VerticalPosition = 200 -'Sets horizontal and vertical origin for the textbox +‘Sets horizontal and vertical origin for the textbox textbox.TextBoxFormat.VerticalOrigin = VerticalOrigin.Page textbox.TextBoxFormat.HorizontalOrigin = HorizontalOrigin.Page -'Adds specified textbox to the nested group shape +‘Adds specified textbox to the nested group shape nestedGroupShape.Add(textbox) -'Appends new shape to the document +‘Appends new shape to the document shape = New Shape(document, AutoShapeType.Oval) -'Sets height and width for the new shape +‘Sets height and width for the new shape shape.Height = 100 shape.Width = 150 -'Sets horizontal and vertical position for the shape +‘Sets horizontal and vertical position for the shape shape.HorizontalPosition = 200 shape.VerticalPosition = 72 -'Sets horizontal and vertical origin for the shape +‘Sets horizontal and vertical origin for the shape shape.HorizontalOrigin = HorizontalOrigin.Page shape.VerticalOrigin = VerticalOrigin.Page -'Sets horizontal and vertical position for the nested group shape +‘Sets horizontal and vertical position for the nested group shape nestedGroupShape.HorizontalPosition = 72 nestedGroupShape.VerticalPosition = 72 -'Adds specified shape to the nested group shape +‘Adds specified shape to the nested group shape nestedGroupShape.Add(shape) -'Adds nested group shape to the group shape of the paragraph +‘Adds nested group shape to the group shape of the paragraph groupShape.Add(nestedGroupShape) groupShape.HorizontalPosition = 142 -'Saves the Word document +‘Saves the Word document document.Save("Sample.docx", FormatType.Docx) -'Closes the document +‘Closes the document document.Close() {% endhighlight %} @@ -1168,12 +1167,10 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Ungrouping shapes -You can ungroup group shapes in a Word document so that each shape is preserved as an individual item. +You can ungroup the group shapes in the Word document to preserve each shape as individual item. The following code example illustrates how to ungroup the group shape in Word document. -The following code example illustrates how to ungroup a group shape in a Word document. - {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Shapes/Ungroup-shapes/.NET/Ungroup-shapes/Program.cs" %} @@ -1248,7 +1245,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Online Demo * Explore how to create a Word document with shapes using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/autoshapes#/tailwind). -* See how to create a Word document with group shapes using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/groupshapes#/tailwind). +* See how to create a Word document with group shapes using the [.NET Word Library](https://www.syncfusion.com/document-sdk/net-word-library) (DocIO) in a live demo [here](https://document.syncfusion.com/demos/word/groupshapes#/tailwind). ## See Also diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Tables.md b/Document-Processing/Word/Word-Library/NET/Working-with-Tables.md index 01eef21a71..cb1cad82f4 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Tables.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Tables.md @@ -5,14 +5,14 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Tables in a Word document +# Working with Tables in Word document A table in Word document is used to arrange document content in rows and columns. [WTable](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTable.html) instance represents a table in Word document. A table must contain at least one row. 1. A row is a collection of cells and it is represented by an instance of [WTableRow](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTableRow.html). Each row must contain at least one cell. 2. A cell can contain one or more paragraphs and tables. An instance of [WTableCell](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTableCell.html) represents a table cell. Each table cell must contain at least one paragraph. -N> Adding more than 63 columns is not supported in Word document using Microsoft Word application. It shows an alert when you attempt to insert a table with more than 64 columns, which is one of the behaviors of Microsoft Word and Essential® DocIO does the same. +N> Adding more than 63 columns not supported in Word document using Microsoft Word application. It shows alert when you attempt to insert table with more than 64 columns, which is a one of the behaviors of Microsoft Word and Essential® DocIO does the same. The following image illustrates how a table in Word document is organized in EssentialDocIO’s DOM: @@ -364,7 +364,7 @@ nestedCell.Width = 200; nestedCell.AddParagraph().AppendText("Mango"); //Accesses the instance of the cell (second row, second cell) nestedCell = table.Rows[1].Cells[1]; -nestedCell.AddParagraph().AppendText("85"); +table[1, 1].AddParagraph().AppendText("85"); table[2, 0].AddParagraph().AppendText("Pomegranate"); table[2, 1].AddParagraph().AppendText("70"); //Saves the Word document to MemoryStream @@ -408,7 +408,7 @@ nestedCell.Width = 200; nestedCell.AddParagraph().AppendText("Mango"); //Accesses the instance of the cell (second row, second cell) nestedCell = table.Rows[1].Cells[1]; -nestedCell.AddParagraph().AppendText("85"); +table[1, 1].AddParagraph().AppendText("85"); table[2, 0].AddParagraph().AppendText("Pomegranate"); table[2, 1].AddParagraph().AppendText("70"); //Saves and closes the document instance @@ -450,7 +450,7 @@ nestedCell.Width = 200 nestedCell.AddParagraph().AppendText("Mango") 'Accesses the instance of the cell (second row, second cell) nestedCell = table.Rows(1).Cells(1) -nestedCell.AddParagraph().AppendText("85") +table(1, 1).AddParagraph().AppendText("85") table(2, 0).AddParagraph().AppendText("Pomegranate") table(2, 1).AddParagraph().AppendText("70") 'Saves and closes the document instance @@ -464,7 +464,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Align text within a table -You can iterate the cells within a table and align text for each cell. Find more information about iterating the cells from [here](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-tables#iterating-through-table-elements). +You can iterate the cells within a table and align text for each cell. Find more information about iterating the cells from [here](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-tables#iterating-through-table-elements) The following code example illustrates how to align text within a table. @@ -680,7 +680,7 @@ End Using You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Tables/Insert-image-in-cell). -## Apply formatting to Table and Row +## Apply formatting to Table, Row and Cell The following code example illustrates how to load an existing document and apply table formatting options such as [Borders](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.RowFormat.html#Syncfusion_DocIO_DLS_RowFormat_Borders), [LeftIndent](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.RowFormat.html#Syncfusion_DocIO_DLS_RowFormat_LeftIndent), [Paddings](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.RowFormat.html#Syncfusion_DocIO_DLS_RowFormat_Paddings), [IsAutoResized](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.RowFormat.html#Syncfusion_DocIO_DLS_RowFormat_IsAutoResized), etc. @@ -692,8 +692,9 @@ N> 4. As in the Microsoft Word, DocIO supports [RowFormat.Borders](https://help. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Tables/Apply-table-formatting/.NET/Apply-table-formatting/Program.cs" %} -//Opens an existing Word document into DocIO instance +//Creates an instance of WordDocument class (Empty Word Document) FileStream fileStreamPath = new FileStream("Table.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); +//Opens an existing Word document into DocIO instance WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); //Accesses the instance of the first section in the Word document WSection section = document.Sections[0]; @@ -844,8 +845,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync Using DocIO, you can format table cells by setting text wrapping to control content flow and adjusting text direction for better readability. You can also customize cell borders, apply vertical alignment, and set a background color to enhance the table’s appearance. -N> In the following snippets, the `row` and `cell` variables are assumed to be obtained from an existing table (for example, `WTableRow row = table.Rows[0];` and `WTableCell cell = row.Cells[0];`). See the [Apply formatting to Table and Row](#apply-formatting-to-table-and-row) section for how to access a table and its rows. - #### Set cell background color The following code snippet illustrates how to specify the background color of a table cell using the [CellFormat.BackColor](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellFormat.html#Syncfusion_DocIO_DLS_CellFormat_BackColor) property. @@ -1055,15 +1054,15 @@ WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); WSection section = document.Sections[0]; //Accesses the instance of the first table in the section WTable table = section.Tables[0] as WTable; -//Resizes the table to fit its contents +//Resizes the table to fit the contents respect to the contents table.AutoFit(AutoFitType.FitToContent); //Accesses the instance of the second table in the section table = section.Tables[1] as WTable; -//Resizes the table to fit the window/page width +//Resizes the table to fit the contents respect to window/page width table.AutoFit(AutoFitType.FitToWindow); //Accesses the instance of the third table in the section table = section.Tables[2] as WTable; -//Resizes the table to fit the fixed column width +//Resizes the table to fit the contents respect to fixed column width table.AutoFit(AutoFitType.FixedColumnWidth); //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); @@ -1073,23 +1072,23 @@ document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Creates an instance of WordDocument class (Empty Word Document) +//Creates an instance of WordDocument class (Empty Word Document)*'| markdownify }} WordDocument document = new WordDocument(); //Opens an existing Word document into DocIO instance -document.Open("Template.docx", FormatType.Docx); +document.Open("Template", FormatType.Docx); //Accesses the instance of the first section in the Word document WSection section = document.Sections[0]; //Accesses the instance of the first table in the section WTable table = section.Tables[0] as WTable; -//Resizes the table to fit its contents +//Resizes the table to fit the contents respect to the contents table.AutoFit(AutoFitType.FitToContent); //Accesses the instance of the second table in the section table = section.Tables[1] as WTable; -//Resizes the table to fit the window/page width +//Resizes the table to fit the contents respect to window/page width table.AutoFit(AutoFitType.FitToWindow); //Accesses the instance of the third table in the section table = section.Tables[2] as WTable; -//Resizes the table to fit the fixed column width +//Resizes the table to fit the contents respect to fixed column width table.AutoFit(AutoFitType.FixedColumnWidth); //Saves and closes the document instance document.Save("Sample.docx", FormatType.Docx); @@ -1100,18 +1099,18 @@ document.Close(); 'Creates an instance of WordDocument class (Empty Word Document) Dim document As WordDocument = New WordDocument 'Opens an existing Word document into DocIO instance -document.Open("Template.docx", FormatType.Docx) +document.Open("Template", FormatType.Docx) Dim section As WSection = document.Sections(0) Dim table As WTable = CType(section.Tables(0), WTable) -'Resizes the table to fit its contents +'Resizes the table to fit the contents respect to the contents table.AutoFit(AutoFitType.FitToContent) 'Accesses the instance of the second table in the section table = CType(section.Tables(1), WTable) -'Resizes the table to fit the window/page width +'Resizes the table to fit the contents respect to window/page width table.AutoFit(AutoFitType.FitToWindow) 'Accesses the instance of the third table in the section table = CType(section.Tables(2), WTable) -'Resizes the table to fit the fixed column width +'Resizes the table to fit the contents respect to fixed column width table.AutoFit(AutoFitType.FixedColumnWidth) 'Saves and closes the document instance document.Save("Sample.docx", FormatType.Docx) @@ -1128,7 +1127,7 @@ N> In ASP.NET Core, UWP, and Xamarin platforms, to apply autofit for table in a A table style defines a set of table, row, cell and paragraph level formatting that can be applied to a table. [WTableStyle](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WTableStyle.html) instance represents table style in a Word document. -N> Essential® DocIO currently provides support for table styles in DOCX and WordML formats only. The visual appearance is also preserved in Word to PDF, Word to Image, and Word to HTML conversions. +N> Essential® DocIO currently provides support for table styles in DOCX and WordML formats alone. The visual appearance is also preserved in Word to PDF, Word to Image, and Word to HTML conversions. The following code example illustrates how to apply the built-in table styles to the table. @@ -1181,7 +1180,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync Once you have applied a table style, you can enable or disable the special formatting of the table. There are six options: first column, last column, banded rows, banded columns, header row and last row. -The following code example illustrates how to enable and disable the special table formatting options of the table styles. +The following code example illustrates how to enable and disable the special table formatting options of the table styles {% tabs %} @@ -1373,11 +1372,11 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Tables/Apply-custom-table-style). -### Apply base style +### Apply Base Style Table styles can be based on other table styles also. When applying a base style, the new style will inherit the values of the base style that are not explicitly redefined in the new style. You can apply a custom table style or a built-in table style as a base for the table style. -The following code example illustrates how to apply built-in and custom table styles as base styles for another custom table style. +The following code example illustrates how to apply built-in and custom table styles as base styles for another custom table. {% tabs %} @@ -1663,7 +1662,7 @@ IWSection section = document.AddSection(); section.AddParagraph().AppendText("Vertical merging of Table cells"); IWTable table = section.AddTable(); table.ResetCells(5, 5); -// Specifies the vertical merge to the third column, from second row to fifth row +// Specifies the vertical merge to the third cell, from second row to fifth row table.ApplyVerticalMerge(2, 1, 4); //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); @@ -1679,7 +1678,7 @@ IWSection section = document.AddSection(); section.AddParagraph().AppendText("Vertical merging of Table cells"); IWTable table = section.AddTable(); table.ResetCells(5, 5); -//Specifies the vertical merge to the third column, from second row to fifth row +//Specifies the vertical merge to the third cell, from second row to fifth row table.ApplyVerticalMerge(2, 1, 4); //Saves and closes the document instance document.Save("VerticalMerge.docx", FormatType.Docx); @@ -1693,7 +1692,7 @@ Dim section As IWSection = document.AddSection() section.AddParagraph().AppendText("Vertical merging of Table cells") Dim table As IWTable = section.AddTable() table.ResetCells(5, 5) -'Specifies the vertical merge to the third column, from second row to fifth row +'Specifies the vertical merge to the third cell, from second row to fifth row table.ApplyVerticalMerge(2, 1, 4) 'Saves and closes the document instance document.Save("VerticalMerge.docx", FormatType.Docx) @@ -1704,9 +1703,7 @@ document.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Tables/Apply-vertical-merge-to-cells). -To merge cells manually, set the [HorizontalMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellFormat.html#Syncfusion_DocIO_DLS_CellFormat_HorizontalMerge) or [VerticalMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellFormat.html#Syncfusion_DocIO_DLS_CellFormat_VerticalMerge) property of [CellFormat](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellFormat.html) to [CellMerge.Start](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellMerge.html) for the first cell of the merge range and to [CellMerge.Continue](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CellMerge.html) for the cells being merged into it. - -The following code example illustrates how to create a table that contains horizontal merged cells. +The following code example illustrate how to create a table that contains horizontal merged cells. {% tabs %} @@ -1871,7 +1868,7 @@ You can specify one or more rows in a table to be repeated as header row at the * In the case of a single header row, it must be the first row in the table. * In the case of multiple header rows, then header rows must be consecutive from the first row of the table. -N> Header rows have no effect on nested tables in Microsoft Word or DocIO. +N> Heading rows do not have any effect with nested tables in Microsoft Word as well as DocIO The following code example illustrates how to create a table with a single header row. @@ -1965,7 +1962,7 @@ The following code example illustrates how to disable all the table rows from sp {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Tables/Disable-row-to-break-across-pages/.NET/Disable-row-to-break-across-pages/Program.cs" %} //Creates an instance of WordDocument class FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); +WordDocument document = new WordDocument(fileStreamPath); WSection section = document.Sections[0]; WTable table = section.Tables[0] as WTable; //Disables breaking across pages for all rows in the table. @@ -2030,7 +2027,7 @@ foreach (WTableRow row in table.Rows) //Iterates through the paragraphs of the cell foreach (WParagraph paragraph in cell.Paragraphs) { - //When the paragraph contains the text 'panda', apply green as the back color to the cell + //When the paragraph contains text Panda then apply green as back color to cell if (paragraph.Text.Contains("panda")) cell.CellFormat.BackColor = Color.Green; } @@ -2057,7 +2054,7 @@ foreach (WTableRow row in table.Rows) //Iterates through the paragraphs of the cell foreach (WParagraph paragraph in cell.Paragraphs) { - //When the paragraph contains the text 'panda', apply green as the back color to the cell + //When the paragraph contains text Panda then apply green as back color to cell if (paragraph.Text.Contains("panda")) cell.CellFormat.BackColor = Color.Green; } @@ -2079,7 +2076,7 @@ For Each row As WTableRow In table.Rows For Each cell As WTableCell In row.Cells 'Iterates through the paragraphs of the cell For Each paragraph As WParagraph In cell.Paragraphs - 'When the paragraph contains the text 'panda', apply green as the back color to the cell + 'When the paragraph contains text Panda then apply green as back color to cell If paragraph.Text.Contains("panda") Then cell.CellFormat.BackColor = Color.Green End If diff --git a/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md b/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md index 2f75c64ec9..4a61ec8ea8 100644 --- a/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md +++ b/Document-Processing/Word/Word-Library/NET/Working-with-Word-document.md @@ -5,7 +5,7 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Word document in a Word Library +# Working with Word document ## Cloning a Word document @@ -32,7 +32,6 @@ using (WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx) {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -string fileName = "Template.docx"; //Opens an existing document WordDocument inputTemplateDoc = new WordDocument(fileName); //Creates a clone of Input Template @@ -41,11 +40,10 @@ WordDocument clonedDocument = inputTemplateDoc.Clone(); clonedDocument.Save("ClonedDocument.docx"); clonedDocument.Close(); //Closes the input template document instance -inputTemplateDoc.Close(); +sourceDocument.Close(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -Dim fileName As String = "Template.docx" 'Opens an existing document Dim inputTemplateDoc As New WordDocument(fileName) 'Creates a clone of Input Template @@ -54,14 +52,14 @@ Dim clonedDocument As WordDocument = inputTemplateDoc.Clone() clonedDocument.Save("ClonedDocument.docx") clonedDocument.Close() 'Closes the input template document instance -inputTemplateDoc.Close() +sourceDocument.Close() {% endhighlight %} {% endtabs %} You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-document/Clone-whole-Word-document). -You can also create a deep copy of document elements such as sections, paragraphs, Tables, Text, Image, OleObject, Shapes, TextBoxes, etc. The following code example illustrates how to clone the section and save each cloned section as a Word document. +You can also create a deep copy of document elements such as sections, paragraphs, Tables, Text, Image, OleObject, Shapes, TextBoxes and etc., The following code example illustrates how to clone the section and save each cloned section as a Word document. {% tabs %} @@ -69,7 +67,7 @@ You can also create a deep copy of document elements such as sections, paragraph //Creates an instance of WordDocument class FileStream fileStreamPath = new FileStream("SourceDocument.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument sourceDocument = new WordDocument(fileStreamPath); -//Processes each section in the Word document +//Processes the each section in the Word document for (int i = 0; i < sourceDocument.Sections.Count;i++) { //Creates new WordDocument instance to add cloned section @@ -88,7 +86,7 @@ sourceDocument.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens a source document WordDocument sourceDocument = new WordDocument("SourceDocument.docx"); -//Processes each section in the Word document +//Processes the each section in the Word document for (int i = 0; i < sourceDocument.Sections.Count;i++) { //Creates new WordDocument instance to add cloned section @@ -106,7 +104,7 @@ sourceDocument.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens a source document Dim sourceDocument As New WordDocument("SourceDocument.docx") -'Processes each section in the Word document +'Processes the each section in the Word document For i As Integer = 0 To sourceDocument.Sections.Count - 1 'Creates new WordDocument instance to add cloned section Dim destinationDocument As New WordDocument() @@ -124,9 +122,9 @@ sourceDocument.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-document/Split-by-section). -## Link Paragraph and Character Style +### Link Paragraph and Character Style -You can link character styles with paragraph styles, and vice versa in a Word document using [LinkedStyleName](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Style.html#Syncfusion_DocIO_DLS_Style_LinkedStyleName) property. +You can link character styles with paragraph and vice versa in a Word document using [LinkedStyleName](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.Style.html#Syncfusion_DocIO_DLS_Style_LinkedStyleName) property. The following code example explains how to link character and paragraph style. @@ -147,7 +145,7 @@ using (WordDocument document = new WordDocument()) //Sets the formatting of the style charStyle.CharacterFormat.Bold = true; charStyle.CharacterFormat.Italic = true; - //Links both paragraph and character style + //Link both paragraph and character style paraStyle.LinkedStyleName = "CharacterStyle"; //Appends the contents into the paragraph document.LastParagraph.AppendText("AdventureWorks Cycles"); @@ -180,8 +178,8 @@ using (WordDocument document = new WordDocument()) //Sets the formatting of the style charStyle.CharacterFormat.Bold = true; charStyle.CharacterFormat.Italic = true; - //Links both paragraph and character style - paraStyle.LinkedStyleName = "CharacterStyle"; + //Link both paragraph and character style + paraStyle.LinkedStyleName = "CharacterStyle"; //Appends the contents into the paragraph document.LastParagraph.AppendText("AdventureWorks Cycles"); //Applies the style to paragraph @@ -198,7 +196,7 @@ using (WordDocument document = new WordDocument()) {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Creates a new Word document +'Opens an input Word template Using document As WordDocument = New WordDocument() 'This method adds a section and a paragraph in the document document.EnsureMinimal() @@ -211,7 +209,7 @@ Using document As WordDocument = New WordDocument() 'Sets the formatting of the style charStyle.CharacterFormat.Bold = True charStyle.CharacterFormat.Italic = True - 'Links both paragraph and character style + 'Link both paragraph and character style paraStyle.LinkedStyleName = "CharacterStyle" 'Appends the content into the paragraph document.LastParagraph.AppendText("AdventureWorks Cycles") @@ -233,7 +231,7 @@ End Using ## Working with Word document properties -Document properties, also known as metadata, are details about a file that describe or identify it. You can also define additional custom document properties by using DocIO document properties, which are classified into two categories: +Document properties, also known as metadata, are details about a file that describe or identify it. You can also define the additional custom document properties for the documents by using DocIO Document properties that are classified as two categories. * Built-in document properties - includes details such as title, author name, subject, and keywords that identify the document's topic or contents. * Custom document properties - defines the user-defined document properties. @@ -252,7 +250,7 @@ using (WordDocument document = new WordDocument(sourceStreamPath, FormatType.Aut //Accesses the built-in document properties Console.WriteLine("Title - {0}",document.BuiltinDocumentProperties.Title); Console.WriteLine("Author - {0}", document.BuiltinDocumentProperties.Author); - //Modifies or sets the built-in document properties. + //Modifies or sets the Built-in document properties. document.BuiltinDocumentProperties.Author = "Andrew"; document.BuiltinDocumentProperties.LastAuthor = "Steven"; document.BuiltinDocumentProperties.CreateDate = new DateTime(1900, 12, 31, 12, 0, 0); @@ -277,7 +275,7 @@ WordDocument document = new WordDocument(inputFileName); //Accesses the built-in document properties Console.WriteLine("Title - {0}",document.BuiltinDocumentProperties.Title); Console.WriteLine("Author - {0}", document.BuiltinDocumentProperties.Author); -//Modifies or sets the built-in document properties. +//Modifies or sets the Built-in document properties. document.BuiltinDocumentProperties.Author = "Andrew"; document.BuiltinDocumentProperties.LastAuthor = "Steven"; document.BuiltinDocumentProperties.CreateDate = new DateTime(1900, 12, 31, 12, 0, 0); @@ -439,7 +437,7 @@ N> 2. In ASP.NET Core and Xamarin platforms, to update page count in a Word doc N> 3. DocIO uses the Word-to-PDF layout engine to update page count. If the required fonts are missing in the environment, alternate fonts are used, which may affect accuracy. [Ensure](https://support.syncfusion.com/kb/article/6821/check-whether-fonts-in-word-document-are-available-in-machine-for-pdf-or-image-conversion) all fonts used in the input document are available for a correct page count. N> 4. In UWP platform, to updates paragraph, word, and character counts in the document using the [UpdateWordCount()](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_UpdateWordCount) API. -### Adding custom document properties +### Adding Custom Document properties You add a new custom document properties through [Add](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.CustomDocumentProperties.html#Syncfusion_DocIO_DLS_CustomDocumentProperties_Add_System_String_System_Object_) method of [CustomProperties](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_CustomDocumentProperties) class. The following code example illustrates how to add a new custom document properties. @@ -901,22 +899,22 @@ using (FileStream docStream = new FileStream("Input.docx", FileMode.Open, FileAc {% highlight c# tabtitle="C# [Windows-specific]" %} //Load Word document. -using (WordDocument document = new WordDocument("Input.docx", FormatType.Docx)) +using (WordDocument document = new WordDocument(“Input.docx” FormatType.Docx)) { //Disable a flag to hide the background in print layout view. document.Settings.DisplayBackgrounds = false; //Save the Word document. - document.Save("Sample.docx", FormatType.Docx); + document.Save(“Sample.docx”), FormatType.Docx); } {% endhighlight %} -{% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} +{% highlight vb.net tabtitle="VB.NET [Windows-specific] " %} 'Load Word document. -Using document As WordDocument = New WordDocument("Input.docx", FormatType.Docx) +Using document As WordDocument = New WordDocument(“Input.docx"), FormatType.Docx) 'Disable a flag to hide the background in the print layout view. document.Settings.DisplayBackgrounds = False 'Save the Word document. - document.Save("Sample.docx", FormatType.Docx) + document.Save(“Sample.docx"), FormatType.Docx) End Using {% endhighlight %} @@ -924,8 +922,6 @@ End Using You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-document/Hide-backgrounds-in-print-layout-view). -N> This setting affects only the Word client's print-layout view; it does not alter the background stored in the document. - ## Remove background in a Word document You can remove background colors and images in an existing Word document by setting [NoBackground](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BackgroundType.html) as the background type. @@ -952,23 +948,23 @@ using (FileStream docStream = new FileStream("Input.docx", FileMode.Open, FileAc {% highlight c# tabtitle="C# [Windows-specific]" %} //Load Word document. -using (WordDocument document = new WordDocument("Input.docx", FormatType.Docx)) +using (WordDocument document = new WordDocument(“Input.docx” FormatType.Docx)) { //Remove the existing background in the Word document. document.Background.Type = BackgroundType.NoBackground; //Save the Word document. - document.Save("Sample.docx", FormatType.Docx); + document.Save(“Sample.docx”), FormatType.Docx); } {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Load Word document. -Using document As WordDocument = New WordDocument("Input.docx", FormatType.Docx) +Using document As WordDocument = New WordDocument(“Input.docx"), FormatType.Docx) 'Remove the existing background in the Word document. - document.Background.Type = BackgroundType.NoBackground + document.Background.Type = BackgroundType.NoBackground; 'Save the Word document. - document.Save("Sample.docx", FormatType.Docx) + document.Save(“Sample.docx"), FormatType.Docx) End Using {% endhighlight %} diff --git a/Document-Processing/Word/Word-Library/NET/working-with-lists.md b/Document-Processing/Word/Word-Library/NET/working-with-lists.md index 234d131615..fde55427a9 100644 --- a/Document-Processing/Word/Word-Library/NET/working-with-lists.md +++ b/Document-Processing/Word/Word-Library/NET/working-with-lists.md @@ -6,7 +6,7 @@ control: DocIO documentation: UG --- -# Working with Lists in the Word Library +# Working with Lists Lists can organize and format the contents of a document in hierarchical way. There are nine levels in the list, starting from level 0 to level 8. DocIO supports both built-in list styles and custom list styles. The following are the types of list supported in DocIO: @@ -26,7 +26,7 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Applies default bulleted list style +//Applies default numbered list style paragraph.ListFormat.ApplyDefBulletStyle(); //Adds text to the paragraph paragraph.AppendText("List item 1"); @@ -56,7 +56,7 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Applies default bulleted list style +//Applies default numbered list style paragraph.ListFormat.ApplyDefBulletStyle(); //Adds text to the paragraph paragraph.AppendText("List item 1"); @@ -85,7 +85,7 @@ Dim document As New WordDocument() Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -'Applies default bulleted list style +'Applies default numbered list style paragraph.ListFormat.ApplyDefBulletStyle() 'Adds text to the paragraph paragraph.AppendText("List item 1") @@ -109,7 +109,7 @@ document.Close() {% endtabs %} -By running the above code, you will generate a **Bulleted List** as shown below. +By running the above code, you will generate a **Bullet List** as shown below. ![List](Lists_images/CreateBulletedList.png) You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Simple-bulleted-list). @@ -228,7 +228,7 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Applies default bulleted list style +//Applies default numbered list style paragraph.ListFormat.ApplyDefBulletStyle(); //Adds text to the paragraph paragraph.AppendText("List item 1 - Level 0"); @@ -262,7 +262,7 @@ WordDocument document = new WordDocument(); IWSection section = document.AddSection(); //Adds new paragraph to the section IWParagraph paragraph = section.AddParagraph(); -//Applies default bulleted list style +//Applies default numbered list style paragraph.ListFormat.ApplyDefBulletStyle(); //Adds text to the paragraph paragraph.AppendText("List item 1 - Level 0"); @@ -295,7 +295,7 @@ Dim document As New WordDocument() Dim section As IWSection = document.AddSection() 'Adds new paragraph to the section Dim paragraph As IWParagraph = section.AddParagraph() -'Applies default bulleted list style +'Applies default numbered list style paragraph.ListFormat.ApplyDefBulletStyle() 'Adds text to the paragraph paragraph.AppendText("List item 1 - Level 0") @@ -323,14 +323,14 @@ document.Close() {% endtabs %} -By running the above code, you will generate a **Multilevel Bulleted List** as shown below. +By running the above code, you will generate a **Multilevel Bullet List** as shown below. ![List](Lists_images/MultilevelBulletList.png) You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Multilevel-bulleted-list). ## Create Multilevel Numbered List -The following code example explains how to create a multilevel numbered list. +The following code example explains how to create multilevel numbered list. {% tabs %} @@ -441,7 +441,7 @@ By running the above code, you will generate a **Multilevel Numbered List** as s You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Multilevel-numbered-list). -## List Number Format +## List number format The ListPatternType enum in DocIO lets you customize how list numbers appear in Word documents. It supports 61 styles, including Arabic, Hebrew, and more. This is useful for creating region-specific documents or applying culturally appropriate numbering formats. @@ -515,7 +515,7 @@ levelOne.PatternType = ListPatternType.Hebrew1; levelOne.StartAt = 1; // Adds a heading paragraph for the Hebrew1 list. paragraph = section.AddParagraph(); -paragraph.AppendText("List pattern Hebrew"); +paragraph.AppendText("List pattern Herbrew"); // Adds first list item using Hebrew1 style. paragraph = section.AddParagraph(); paragraph.AppendText("List item 1"); @@ -604,7 +604,7 @@ levelOne.PatternType = ListPatternType.Hebrew1; levelOne.StartAt = 1; // Adds a heading paragraph for the Hebrew1 list. paragraph = section.AddParagraph(); -paragraph.AppendText("List pattern Hebrew"); +paragraph.AppendText("List pattern Herbrew"); // Adds first list item using Hebrew1 style. paragraph = section.AddParagraph(); paragraph.AppendText("List item 1"); @@ -716,7 +716,7 @@ document.Close() {% endtabs %} -By running the above code, you will generate a **List Number Format** as shown below. +By running the above code, you will generate a **List Numbered Format** as shown below. ![List](Lists_images/ListNumberFormat.png) You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/List-number-format). @@ -727,7 +727,7 @@ N> Except for the following [ListPatternType](https://help.syncfusion.com/cr/doc You can customize lists in Word documents using DocIO, allowing you to define numbering styles, bullet symbols, indentation levels, and list patterns to suit your formatting needs. -The following code example explains how to create a user-defined numbered list style. For a user-defined bulleted list style, see [Bulleted List Styles](#bulleted-list-styles). +The following code example explains how to create user defined list styles. {% tabs %} @@ -890,7 +890,7 @@ paragraph = section.AddParagraph(); paragraph.AppendText("Multilevel numbered list - Level 0"); //Continues last defined list paragraph.ListFormat.ContinueListNumbering(); -//Decreases the level indent +//Increases the level indent paragraph.ListFormat.DecreaseIndentLevel(); //Adds new paragraph paragraph = section.AddParagraph(); @@ -931,7 +931,7 @@ paragraph = section.AddParagraph(); paragraph.AppendText("Multilevel numbered list - Level 0"); //Continues last defined list paragraph.ListFormat.ContinueListNumbering(); -//Decreases the level indent +//Increases the level indent paragraph.ListFormat.DecreaseIndentLevel(); //Adds new paragraph paragraph = section.AddParagraph(); @@ -971,7 +971,7 @@ paragraph = section.AddParagraph() paragraph.AppendText("Multilevel numbered list - Level 0") 'Continues last defined list paragraph.ListFormat.ContinueListNumbering() -'Decreases the level indent +'Increases the level indent paragraph.ListFormat.DecreaseIndentLevel() 'Adds new paragraph paragraph = section.AddParagraph() @@ -988,7 +988,7 @@ document.Close() {% endtabs %} -By running the above code, you will generate the **Increase or Decrease List Indent** output as shown below. +By running the above code, you will generate a **Increase or Decrease List indent** as shown below. ![List](Lists_images/ChangeListLevels.png) You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Paragraphs/Increase-or-decrease-list-indent). @@ -1007,18 +1007,18 @@ IWSection section = document.AddSection(); //Add a new list style to the document. ListStyle listStyle = document.AddListStyle(ListType.Bulleted, "UserDefinedList"); WListLevel levelOne = listStyle.Levels[0]; -//Define the pattern, bullet character, and start index for level 0. +//Define the following character, pattern and start index for level 0. levelOne.PatternType = ListPatternType.Bullet; levelOne.BulletCharacter = "*"; levelOne.StartAt = 1; WListLevel levelTwo = listStyle.Levels[1]; -//Define the pattern, bullet character, and start index for level 1. +//Define the following character, pattern and start index for level 1. levelTwo.PatternType = ListPatternType.Bullet; levelTwo.BulletCharacter = "\u00A9"; levelTwo.CharacterFormat.FontName = "Wingdings"; levelTwo.StartAt = 1; WListLevel levelThree = listStyle.Levels[2]; -//Define the pattern, bullet character, and start index for level 2. +//Define the following character, pattern and start index for level 2. levelThree.PatternType = ListPatternType.Bullet; levelThree.BulletCharacter = "\u0076"; levelThree.CharacterFormat.FontName = "Wingdings"; @@ -1058,18 +1058,18 @@ IWSection section = document.AddSection(); //Add a new list style to the document. ListStyle listStyle = document.AddListStyle(ListType.Bulleted, "UserDefinedList"); WListLevel levelOne = listStyle.Levels[0]; -//Define the pattern, bullet character, and start index for level 0. +//Define the following character, pattern and start index for level 0. levelOne.PatternType = ListPatternType.Bullet; levelOne.BulletCharacter = "*"; levelOne.StartAt = 1; WListLevel levelTwo = listStyle.Levels[1]; -//Define the pattern, bullet character, and start index for level 1. +//Define the following character, pattern and start index for level 1. levelTwo.PatternType = ListPatternType.Bullet; levelTwo.BulletCharacter = "\u00A9"; levelTwo.CharacterFormat.FontName = "Wingdings"; levelTwo.StartAt = 1; WListLevel levelThree = listStyle.Levels[2]; -//Define the pattern, bullet character, and start index for level 2. +//Define the following character, pattern and start index for level 2. levelThree.PatternType = ListPatternType.Bullet; levelThree.BulletCharacter = "\u0076"; levelThree.CharacterFormat.FontName = "Wingdings"; @@ -1108,18 +1108,18 @@ Dim section As IWSection = document.AddSection() 'Add a new list style to the document. Dim listStyle As ListStyle = document.AddListStyle(ListType.Bulleted, "UserDefinedList") Dim levelOne As WListLevel = listStyle.Levels(0) -'Define the pattern, bullet character, and start index for level 0. +'Define the following character, pattern and start index for level 0. levelOne.PatternType = ListPatternType.Bullet levelOne.BulletCharacter = "*" levelOne.StartAt = 1 Dim levelTwo As WListLevel = listStyle.Levels(1) -'Define the pattern, bullet character, and start index for level 1. +'Define the following character, pattern and start index for level 1. levelTwo.PatternType = ListPatternType.Bullet levelTwo.BulletCharacter = ChrW(169) levelTwo.CharacterFormat.FontName = "Wingdings" levelTwo.StartAt = 1 Dim levelThree As WListLevel = listStyle.Levels(2) -'Define the pattern, bullet character, and start index for level 2. +'Define the following character, pattern and start index for level 2. levelThree.PatternType = ListPatternType.Bullet levelThree.BulletCharacter = ChrW(118) levelThree.CharacterFormat.FontName = "Wingdings" @@ -1159,7 +1159,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Numbered List with Prefix -The following code example explains how to create a numbered list with prefix from previous level. +The following code example explains how to create numbered list with prefix from previous level. N> The [NumberPrefix](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WListLevel.html#Syncfusion_DocIO_DLS_WListLevel_NumberPrefix) value for the numbered list should meet the syntax "\u000N" to update the previous list level value as prefix to the current list level. For example, it should be represented as (“\u0000.” or “\u0000.\u0001.”). @@ -1184,7 +1184,7 @@ levelTwo.NumberPrefix = "\u0000."; levelTwo.PatternType = ListPatternType.Arabic; levelTwo.StartAt = 1; WListLevel levelThree = listStyle.Levels[2]; -//Defines the follow character, prefix from previous level, pattern, start index for level 2 +//Defines the follow character, prefix from previous level, pattern, start index for level 1 levelThree.FollowCharacter = FollowCharacterType.Nothing; levelThree.NumberPrefix = "\u0000.\u0001."; levelThree.PatternType = ListPatternType.Arabic; @@ -1235,7 +1235,7 @@ levelTwo.NumberPrefix = "\u0000."; levelTwo.PatternType = ListPatternType.Arabic; levelTwo.StartAt = 1; WListLevel levelThree = listStyle.Levels[2]; -//Defines the follow character, prefix from previous level, pattern, start index for level 2 +//Defines the follow character, prefix from previous level, pattern, start index for level 1 levelThree.FollowCharacter = FollowCharacterType.Nothing; levelThree.NumberPrefix = "\u0000.\u0001."; levelThree.PatternType = ListPatternType.Arabic; @@ -1285,7 +1285,7 @@ levelTwo.NumberPrefix = vbNullChar & "." levelTwo.PatternType = ListPatternType.Arabic levelTwo.StartAt = 1 Dim levelThree As WListLevel = listStyle.Levels(2) -'Defines the follow character, prefix from previous level, pattern, start index for level 2 +'Defines the follow character, prefix from previous level, pattern, start index for level 1 levelThree.FollowCharacter = FollowCharacterType.[Nothing] levelThree.NumberPrefix = vbNullChar & "." & ChrW(1) & "." levelThree.PatternType = ListPatternType.Arabic diff --git a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md index 6bc6d876f9..a756e7dde0 100644 --- a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md +++ b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md @@ -5,9 +5,9 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Mail merge in Word Library +# Working with Mail merge -Mail merge is a process of merging data from a data source into a Word template document. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) class provides support to bind template document and data source. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) instance is replaced with the actual data retrieved from the data source for the given merge field name in a template document. +Mail merge is a process of merging data from data source to a Word template document. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) class provides support to bind template document and data source. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) instance is replaced with the actual data retrieved from data source for the given merge field name in a template document. ## Supported data sources @@ -16,7 +16,7 @@ The following data sources are supported by Essential® DocIO for
      Data Source

      		Examples

      		Sample
      - + @@ -98,12 +98,12 @@ The mail merge process involves three documents: 3. **Final merged document**: This resultant document is a combination of the template Word document and the data from data source. -T> 1. You can use conditional fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, when you require intelligent decisions in addition to simple mail merge (i.e., replacing merge fields with result text). To use conditional fields, execute mail merge and then update fields in the Word document using [UpdateDocumentFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_UpdateDocumentFields) API. -T> 2. You can replace the fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, with its most recent result and convert the field results to static text by unlinking the fields. Refer to this [link](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-fields#unlink-fields) for more information. +T> 1. You can use conditional fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, when you require intelligent decisions in addition to simple mail merge (replace merge fields with result text). To use conditional fields, execute mail merge and then update fields in the Word document using [UpdateDocumentFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_UpdateDocumentFields) API. +T> 2. You can replace the fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, with its most recent result and **generates the plain Word document** by unlinking the fields. Refer to this [link](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-fields#unlink-fields) for more information. ### Create Word document template -You can create a template document with merge fields by using any Word editor application, like Microsoft Word. By using a Word editor application, you can take the advantage of the visual interface to design unique layout, formatting, and more for your Word document template interactively. +You can create a template document with merge fields by using any Word editor application, like Microsoft Word. By using Word editor application, you can take the advantage of the visual interface to design unique layout, formatting, and more for your Word document template interactively. The following screenshot shows how to insert a merge field in the Word document by **using the Microsoft Word.** @@ -111,7 +111,7 @@ The following screenshot shows how to insert a merge field in the Word document You need to add a prefix (“Image:”) to the merge field name for merging an image in the place of a merge field. -**For example:** The merge field name should be like "Image:Photo" (<>) +**For example:** The merge field name should be like “Image:Photo” (<>) You can **create Word document template programmatically** by adding merge fields to the Word document using Essential® DocIO. @@ -123,20 +123,16 @@ N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-plat {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Create-merge-field/.NET/Create-merge-field/Program.cs" %} //Creates an instance of a WordDocument -using (WordDocument document = new WordDocument()) -{ - //Adds a section and a paragraph in the document - document.EnsureMinimal(); - //Appends merge field to the last paragraph. - document.LastParagraph.AppendField("FullName", FieldType.FieldMergeField); - //Saves the Word document to MemoryStream - using (MemoryStream stream = new MemoryStream()) - { - document.Save(stream, FormatType.Docx); - //Writes the Word document to a file - File.WriteAllBytes("Template.docx", stream.ToArray()); - } -} +WordDocument document = new WordDocument(); +//Adds a section and a paragraph in the document +document.EnsureMinimal(); +//Appends merge field to the last paragraph. +document.LastParagraph.AppendField("FullName", FieldType.FieldMergeField); +//Saves the Word document to MemoryStream +MemoryStream stream = new MemoryStream(); +document.Save(stream, FormatType.Docx); +//Closes the Word document +document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} @@ -175,21 +171,17 @@ The following code example shows how to perform mail merge in above Word documen {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Getting-started-mail-merge/.NET/Getting-started-mail-merge/Program.cs" %} //Opens the template document -using (FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite)) -{ - WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); - string[] fieldNames = new string[] { "FullName" }; - string[] fieldValues = new string[] { "Nancy Davolio" }; - //Performs the mail merge - document.MailMerge.Execute(fieldNames, fieldValues); - //Saves the Word document to MemoryStream - using (MemoryStream stream = new MemoryStream()) - { - document.Save(stream, FormatType.Docx); - //Writes the Word document to a file - File.WriteAllBytes("Sample.docx", stream.ToArray()); - } -} +FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); +WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); +string[] fieldNames = new string[] { "FullName" }; +string[] fieldValues = new string[] { "Nancy Davolio" }; +//Performs the mail merge +document.MailMerge.Execute(fieldNames, fieldValues); +//Saves the Word document to MemoryStream +MemoryStream stream = new MemoryStream(); +document.Save(stream, FormatType.Docx); +//Closes the Word document +document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} @@ -230,15 +222,15 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ## Performing Mail merge for a group -You can perform Mail merge and append multiple records from the data source within a specified region to a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-group). +You can perform Mail merge and append multiple records from data source within a specified region to a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-group). -## Performing Nested Mail merge for a group +## Performing Nested Mail merge for group -You can perform nested Mail merge with a relational or hierarchical data source and independent data tables in a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups). +You can perform nested Mail merge with relational or hierarchical data source and independent data tables in a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups). ## Performing Mail merge with dynamic objects -Essential® DocIO allows you to perform Mail merge with dynamic objects. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups#mail-merge-with-dynamic-objects). +Essential® DocIO allows you to perform Mail merge with the dynamic objects. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups#mail-merge-with-dynamic-objects). ## Performing Mail merge with business objects @@ -250,9 +242,9 @@ Essential® DocIO supports performing nested Mail merge with impli ## Event support for mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO in the Mail merge process: +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO in Mail merge process: -* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html): Occurs when a **Mail merge field** except an image Mail merge field is encountered. +* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html): Occurs when a **Mail merge field** except image Mail merge field is encountered. * [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html): Occurs when an **image Mail merge field** is encountered. @@ -262,19 +254,19 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ### MergeField event -You can customize the merging text during the Mail merge process by using the [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergefield-event). +You can customize the merging text during Mail merge process by using the [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergefield-event). ### MergeImageField event -You can customize the merging image during the Mail merge process by using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergeimagefield-event). +You can customize the merging image during Mail merge process by using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergeimagefield-event). ### BeforeClearField event -You can get the unmerged fields during the Mail merge process by using the [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). +You can get the unmerged fields during Mail merge process by using the [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). ### BeforeClearGroupField event -You can get the unmerged groups during the Mail merge process by using the [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforecleargroupfield-event). +You can get the unmerged groups during Mail merge process by using the [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforecleargroupfield-event). ## Mail merge options @@ -282,7 +274,7 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ### Field mapping -You can automatically map the merge field names with the data source column names during the Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#field-mapping). +You can automatically map the merge field names with data source column names during Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#field-mapping). ### Retrieving the merge field names @@ -290,11 +282,11 @@ You can retrieve the merge field names and also merge field group names in the W ### Removing empty paragraphs -You can remove the empty paragraphs when the paragraph has a merge field item without any data during the Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-paragraphs). +You can remove the empty paragraphs when the paragraph has a merge field item without any data during Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-paragraphs). ### Removing empty merge fields -You can remove or keep the unmerged merge fields in the output document based on the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property on each mail merge execution. The default value of `ClearFields` is `true`, which removes unmerged merge fields. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-merge-fields). +You can remove or keep the unmerged merge fields in the output document based on the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property on each mail merge execution. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-merge-fields). ### Restart numbering in lists From d80de900fac78ca47a71f76c790226af7cd6df1f Mon Sep 17 00:00:00 2001 From: Dharanya Sakthivel Date: Mon, 10 Aug 2026 16:02:19 +0530 Subject: [PATCH 36/70] ES-1042923-Revamp-UG --- .../mail-merge-for-nested-groups.md | 57 +++++++++---------- 1 file changed, 26 insertions(+), 31 deletions(-) diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md index 40a48c955c..1d35ce169b 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md @@ -6,9 +6,9 @@ control: DocIO documentation: UG --- -# Mail merge for nested groups +# Nested Mail merge for group -You can perform nested mail merge with relational or hierarchical data source and independent data tables in a template document. +You can perform nested Mail merge with relational or hierarchical data source and independent data tables in a template document. The following table illustrates the supported mail merge overloads for ExecuteNestedGroup method. @@ -43,9 +43,9 @@ The following table illustrates the supported mail merge overloads for ExecuteNe ## Create template for nested group mail merge -Nested mail merge operation automatically replaces the merge field with immediate group data. You can also predefine the group data that is populated in a merge field. - -To execute nested mail merge, design your Word document template as follows. +Nested Mail merge operation automatically replaces the merge field with immediate group data. You can also predefine the group data that is populated to a merge field. + +To execute nested mail merge, design your Word document template as follow. ![Word document template for nested groups](../MailMerge_images/file-formats-word-nested-group-mail-merge-template.png) @@ -53,7 +53,7 @@ In this template, Employees is the owner group and it has two child groups Custo ## Execute nested group mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_System_Data_Common_DbConnection_System_Collections_ArrayList_) method to perform mail merge for nested groups or regions in the Word document. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_System_Data_Common_DbConnection_System_Collections_ArrayList_) method to perform Mail merge for nested groups or regions in the Word document. You need to define commands with the table name and expression for linking the multiple data tables **(explicit relation data)** during nested Mail merge process. You can use the “%TableName.ColumnName%” expression for getting the current value of specified column or field from the table. @@ -154,7 +154,7 @@ The resultant document looks as follows. Essential® DocIO allows you to perform Mail merge with the dynamic objects. The [ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0) is like a collection of key and value pairs, which means IDictionary. So, you can also use IDictionary collection instead of [ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0) to execute mail merge. -The following code snippet shows how to perform the mail merge with dynamic objects ([ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject)). +The following code snippet shows how to perform the Mail merge with dynamic objects ([ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0)). {% tabs %} @@ -170,7 +170,7 @@ dataSet.Add(dataTable); dataTable = new MailMergeDataTable("Orders", GetOrders()); dataSet.Add(dataTable); List commands = new List(); -//DictionaryEntry contains "Source table" (key) and "Command" (value) +//DictionaryEntry contain "Source table" (key) and "Command" (value) DictionaryEntry entry = new DictionaryEntry("Customers", string.Empty); commands.Add(entry); //Retrieves the customer details @@ -196,7 +196,7 @@ dataSet.Add(dataTable); dataTable = new MailMergeDataTable("Orders", GetOrders()); dataSet.Add(dataTable); List commands = new List(); -//DictionaryEntry contains "Source table" (key) and "Command" (value) +//DictionaryEntry contain "Source table" (key) and "Command" (value) DictionaryEntry entry = new DictionaryEntry("Customers", string.Empty); commands.Add(entry); //Retrieves the customer details @@ -220,7 +220,7 @@ dataSet.Add(dataTable) dataTable = New MailMergeDataTable("Orders", GetOrders()) dataSet.Add(dataTable) Dim commands As New List(Of DictionaryEntry)() -'DictionaryEntry contains "Source table" (key) and "Command" (value) +'DictionaryEntry contain "Source table" (key) and "Command" (value) Dim entry As New DictionaryEntry("Customers", String.Empty) commands.Add(entry) 'Retrieves the customer details @@ -361,28 +361,23 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Mail merge with implicit relational data -You can perform **nested mail merge with implicit relational data** objects without any explicit relational commands by using the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_Syncfusion_DocIO_DLS_MailMergeDataTable_) overload method. - -DocIO automatically maps child collections to nested groups by matching the property name on the data object to the group name declared in the template (for example, a property named `Departments` on the `Organization` class maps to the `Departments` group region). Ensure property names match the group names used in the template. +You can perform **nested Mail merge with implicit relational data** objects without any explicit relational commands by using the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_Syncfusion_DocIO_DLS_MailMergeDataTable_) overload method. -### Map fields of ancestor groups +### Map the field of ancestor group -You can also merge any field in the nested group by **mapping the field or column of its ancestor group or table** in the data source. To achieve this, add the corresponding group name or table name as a prefix to the merge field name along with the `:` separator. +You can also merge any field in the nested group by **mapping the field or column of its ancestor group or table** in the data source. To achieve this, you need to add a corresponding group name or table name as a prefix to the merge field name along with “:” separator. For example: - * The merge field name should be like `TableName:Id` (<>) - * The merge field name should be like `Image:TableName:Photo` (<>) - -> **NOTE** -> Image merge fields require the merge field to be configured with the `Image:` prefix in the template and the data value to be a byte array or `Image` instance. - -For example, consider that you have a template document as follows. + * The merge field name should be like “TableName:Id” (<>) + * The merge field name should be like “Image:TableName:Photo” (<>) + +For example, consider that you have a template document as follow. ![Word document template to map the fields of ancestor group](../MailMerge_images/file-formats-word-mapping-template.png) -In the above template, Organizations is the owner group and it has two child groups Departments and Employees. The `Supervisor` merge field of the Departments group is used in the Employees group. +In the above template, Organizations is the owner group and it has two child groups Departments and Employees. The Supervisor merge field of Departments group is used in Employees group. -The following code example shows how to perform nested mail merge with the implicit relational data objects. +The following code example shows how to perform nested Mail merge with the implicit relational data objects. {% tabs %} @@ -390,9 +385,9 @@ The following code example shows how to perform nested mail merge with the impli //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -//Gets the organization details as IEnumerable collection +//Gets the organization details as “IEnumerable” collection List organizationList = GetOrganizations(); -//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection +//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection MailMergeDataTable dataTable = new MailMergeDataTable("Organizations", organizationList); //Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable); @@ -406,9 +401,9 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Gets the organization details as IEnumerable collection +//Gets the organization details as “IEnumerable” collection List organizationList = GetOrganizations(); -//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection +//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection MailMergeDataTable dataTable = new MailMergeDataTable("Organizations", organizationList); //Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable); @@ -420,9 +415,9 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As WordDocument = New WordDocument("Template.docx") -'Gets the organization details as IEnumerable collection +'Gets the organization details as “IEnumerable” collection Dim organizationList As List(Of Organization) = GetOrganizations() -'Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection +'Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Organizations", organizationList) 'Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable) @@ -482,7 +477,7 @@ public static List GetOrganizations() {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -Public Shared Function GetOrganizations() As List(Of Organization) +Public Function GetOrganizations() As List(Of Organization) 'Creates Employee details Dim employees As List(Of EmployeeDetails) = New List(Of EmployeeDetails) employees.Add(New EmployeeDetails("Thomas Hardy", "1001", "05/27/1996")) From 577706a8d44b46424f771648505335bdbb27adee Mon Sep 17 00:00:00 2001 From: Dharanya Sakthivel Date: Mon, 10 Aug 2026 17:30:33 +0530 Subject: [PATCH 37/70] ES-1042923-Revamp-UG --- .../NET/mail-merge/mail-merge-options.md | 63 ++++++++----------- 1 file changed, 26 insertions(+), 37 deletions(-) diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md index 697b56134d..3336f510f3 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md @@ -8,11 +8,11 @@ documentation: UG # Mail merge options in Word Library -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class allows you to customize the mail merge process with the following options. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class allows you to customize the Mail merge process with the following options. ## Field Mapping -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class can automatically **map the merge field names with data source column names** during mail merge process. You can also customize the field mapping when the merge field names in the template document vary with the column names in the data source by using [MappedFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_MappedFields) collection. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class can automatically **maps the merge field names with data source column names** during Mail merge process. You can also customize the field mapping when the merge field names in the template document varies with the column names in the data source by using [MappedFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_MappedFields) collection. The following code example shows how to add mapping when a merge field name in a document and column name in data source have different names. @@ -132,29 +132,29 @@ The following code example shows how to retrieve the merge field names for a spe {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Retrieve-merge-field-names/.NET/Retrieve-merge-field-names/Program.cs" %} -//Gets the fields from the specified group. +//Gets the fields from the specified groups. string[] fieldNames = document.MailMerge.GetMergeFieldNames(groupName); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Gets the fields from the specified group +//Gets the fields from the specified groups string[] fieldNames = document.MailMerge.GetMergeFieldNames(groupName); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Gets the fields from the specified group +'Gets the fields from the specified groups Dim fieldNames As String() = document.MailMerge.GetMergeFieldNames(groupName) {% endhighlight %} {% endtabs %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Mail-Merge/Retrieve-merge-field-names). This sample demonstrates all three methods shown above (`GetMergeFieldNames`, `GetMergeGroupNames`, and `GetMergeFieldNames(groupName)`). +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Mail-Merge/Retrieve-merge-field-names). ## Remove empty paragraphs -You can remove the empty paragraphs when the paragraph has only a merge field item, without any data during mail merge process. +You can remove the empty paragraphs when the paragraph has only a merge field item, without any data during Mail merge process. -The following code example shows how to remove the empty paragraphs during mail merge process. +The following code example shows how to remove the empty paragraphs during Mail merge process. {% tabs %} @@ -215,15 +215,15 @@ Essential® DocIO removes or keeps the unmerged merge fields in th When a merge field is considered as unmerged during mail merge process? -1. The merge field doesn't have a mapping field in data source. +1. The merge field doesn't have mapping field in data source. -2. The merge field has a mapping field in data source, but the data is null or string.Empty. +2. The merge field has mapping field in data source, but the data is null or string.Empty. -The mail merge operation automatically removes the unmerged merge fields since the default value of the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property is true. +Mail merge operation automatically removes the unmerged merge fields since the default value of [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property is true. T> 1. Set [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property to false before the mail merge execution statement if your requirement is to keep the unmerged merge fields in the output document. T> 2. Modify the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property before each mail merge execution statement while performing multiple mail merge executions if your requirement is to remove the unmerged merge fields in one mail merge execution and keep the unmerged merge fields in another mail merge execution. -T> 3. Order the mail merge executions with the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property false as first to avoid removal of merge fields that are required for next mail merge execution in the same document. +T> 3. Order the mail merge executions with the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property false as first to avoid removal merge fields that are required for next mail merge execution in the same document. T> 4. You can get the unmerged fields in your document, customize the mail merge process using the BeforeClearField Event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). The following code example shows how to keep the unmerged merge fields in the generated Word document. @@ -234,7 +234,7 @@ The following code example shows how to keep the unmerged merge fields in the ge //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -//Sets “ClearFields” to false to keep the unmerged mail merge fields in document +//Sets “ClearFields” to true to remove empty mail merge fields from document document.MailMerge.ClearFields = false; string[] fieldNames = new string[] { "EmployeeId", "Phone", "City" }; string[] fieldValues = new string[] { "1001", "+91-9999999999", "London" }; @@ -250,7 +250,7 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Sets “ClearFields” to false to keep the unmerged mail merge fields in document +//Sets “ClearFields” to true to remove empty mail merge fields from document document.MailMerge.ClearFields = false; string[] fieldNames = new string[] { "EmployeeId", "Phone", "City" }; string[] fieldValues = new string[] { "1001", "+91-9999999999", "London" }; @@ -264,7 +264,7 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As New WordDocument("Template.docx") -'Sets “ClearFields” to false to keep the unmerged mail merge fields in document +'Sets “ClearFields” to true to remove empty mail merge fields from document document.MailMerge.ClearFields = False Dim fieldNames As String() = New String() {"EmployeeId", "Phone", "City"} Dim fieldValues As String() = New String() {"1001", "+91-9999999999", "London"} @@ -281,7 +281,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Remove empty group -You can remove the empty merge field groups which contain unmerged merge fields after executing mail merge for a group in a Word document. +You can remove the empty merge field groups which contains unmerged merge fields after executing mail merge for a group in a Word document. The following code example shows how to remove empty merge field group during mail merge process in a Word document. @@ -544,15 +544,15 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Restart numbering in lists -You can restart the list numbering for each record while performing mail merge for a group in Word document (https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.ImportOptions.html). +You can restart the list numbering for each records while performing mail merge for a group in Word document. -The following code example shows how to restart the list numbering in a Word document while performing mail merge. +The following code example shows how to restart the list numbering in a Word documents while performing mail merge. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Restart-list-numbering-in-mail-merge/.NET/Restart-list-numbering-in-mail-merge/Program.cs" %} //Loads an existing Word document -FileStream fileStream = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); +FileStream fileStream = new FileStream("Template.docx", FileMode.Open); WordDocument document = new WordDocument(fileStream, FormatType.Docx); //Sets ImportOptions to restart the list numbering document.ImportOptions = ImportOptions.ListRestartNumbering; @@ -583,7 +583,7 @@ employeeList.Add(new Employee("101", "Nancy Davolio", "Seattle, WA, USA")); employeeList.Add(new Employee("102", "Andrew Fuller", "Tacoma, WA, USA")); employeeList.Add(new Employee("103", "Janet Leverling", "Kirkland, WA, USA")); //Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection -MailMergeDataTable dataTable = new MailMergeDataTable("Employees", employeeList); +MailMergeDataTable dataTable = new MailMergeDataTable("Employee", employeeList); //Performs mail merge document.MailMerge.ExecuteGroup(dataTable); //Saves the Word document @@ -603,7 +603,7 @@ employeeList.Add(New Employee("101", "Nancy Davolio", "Seattle, WA, USA")) employeeList.Add(New Employee("102", "Andrew Fuller", "Tacoma, WA, USA")) employeeList.Add(New Employee("103", "Janet Leverling", "Kirkland, WA, USA")) 'Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection -Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Employees", employeeList) +Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Employee", employeeList) 'Performs mail merge document.MailMerge.ExecuteGroup(dataTable) 'Saves the Word document @@ -774,7 +774,7 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document -Dim document As WordDocument = New WordDocument("Template.docx") +Dim document As WordDocument = New WordDocument("Data/Template.docx") 'Creates a data table Dim table As DataTable = New DataTable("CompatibleVersions") table.Columns.Add("WordVersion") @@ -867,7 +867,7 @@ document.Close() {% endtabs %} -The following code example shows how to skip merging particular image during mail merge process using [MergeImageFieldEventHandler](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html). For details on the event arguments, see [MergeImageFieldEventArgs](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventArgs.html) (members: `Skip`, `FieldName`, `FieldValue`, `ImageStream`, `ImageFileName`, `Picture`). +The following code example shows how to skip merging particular image during mail merge process using MergeImageFieldEventHandler. {% tabs %} @@ -876,10 +876,7 @@ private void MergeEmployeePhoto(object sender, MergeImageFieldEventArgs args) { //Skip to merge particular image if (args.FieldName == "Andrew") - { args.Skip = true; - return; - } //Sets image string ProductFileName = args.FieldValue.ToString(); FileStream imageStream = new FileStream(ProductFileName, FileMode.Open, FileAccess.Read); @@ -895,10 +892,7 @@ private void MergeEmployeePhoto(object sender, MergeImageFieldEventArgs args) { //Skip to merge particular image if (args.FieldName == "Andrew") - { args.Skip = true; - return; - } //Sets image args.ImageFileName = args.FieldValue.ToString(); } @@ -909,7 +903,6 @@ Private Sub MergeEmployeePhoto(ByVal sender As Object, ByVal args As MergeImageF 'Skip to merge particular image If args.FieldName = "Andrew" Then args.Skip = True - Return End If 'Sets image Dim ProductFileName As String = args.FieldValue.ToString() @@ -927,8 +920,6 @@ You can start a new page for each group of records while performing a mail merge The following code example illustrates how to start a new page for each group of records during the mail merge process. -N> The `GetInvoice` helper method and the `Invoice`, `Orders`, `Order`, and `OrderTotals` classes used by this snippet are shown below the tabs. - {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Start-at-new-page/.NET/Start-at-new-page/Program.cs" %} @@ -1114,7 +1105,7 @@ Public Function GetInvoice() As List(Of Invoice) invoices.Add(New Invoice(orders, order, orderTotals)) orders = New List(Of Orders)() - orders.Add(New Orders("10250", "Hanari Carnes", "Rua do Paço, 67", "Rio de Janeiro", "05454-876", "Brazil", "VINET", "Rua do Paço, 67", "51100", "Rio de Janeiro", "Brazil", "Margaret Peacock", "Hanari Carnes", "1996-07-04T00:00:00-04:00", "1996-08-01T00:00:00-04:00", "1996-07-16T00:00:00-04:00", "United Package")) + orders.Add(New Orders("10250", "Hanari Carnes", "Rua do Paço, 67", "Rio de Janeiro", "05454-876", "Brazil", "VINET", "Rua do Paço, "1996-07-04T00:00:00-04:00", "1996-08-01T00:00:00-04:00", "1996-07-16T00:00:00-04:00", "United Package")) order = New List(Of Order)() order.Add(New Order("65", "Louisiana Fiery Hot Pepper Sauce", "16.8", "15", "0.15", "214.2")) @@ -2029,7 +2020,7 @@ By executing the above code example, it generates the resultant Word document as ![Output Word document of start at new page](../mailmerge_images/generated-word-document-in-file-formats.png) -N> The [StartAtNewPage](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_StartAtNewPage) property is valid only for group mail merge where the group start and group end are present in the text body of the Word document. It is not valid when the group start and group end are present inside a table, header, or footer. +N> This [StartAtNewPage](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_StartAtNewPage) property is valid for group mail merge and also that the corresponding group start and group end should be present in the text body of the Word document. This [StartAtNewPage](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_StartAtNewPage) property is not valid when the group start and group end are present in the table, headers, and footers. ## Remove mail merge settings @@ -2075,7 +2066,7 @@ Dim document As New WordDocument("Template.docx", FormatType.Docx) If document.MailMerge.Settings.HasData Then document.MailMerge.Settings.RemoveData() End If -'Saves and closes the Word document instance +Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -2090,8 +2081,6 @@ You can change the linked **data source file path from a Word mail merge main do The following code example shows how to change the data source file path in the template Word document. -N> The path can be relative or absolute and should point to a file format supported by Microsoft Word for mail merge (for example, `.txt`, `.csv`, `.xls`/`.xlsx`, or `.mdb`). - {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Change-mail-merge-data-source-path/.NET/Change-mail-merge-data-source-path/Program.cs" %} From 076df025c45b3c6b6b21c321904dae937c836707 Mon Sep 17 00:00:00 2001 From: Dharanya Sakthivel Date: Mon, 10 Aug 2026 19:02:15 +0530 Subject: [PATCH 38/70] ES-1042923-Revamp-UG --- .../NET/mail-merge/mail-merge-events.md | 63 +++++++++---------- 1 file changed, 31 insertions(+), 32 deletions(-) diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md index 6268a86a38..dd4639a7d6 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md @@ -6,17 +6,17 @@ control: DocIO documentation: UG --- -# Event support for Mail merge in Word Library +# Event support for Mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merge image data during the Mail merge process. The following events are supported by Syncfusion® DocIO during Mail merge process: +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO during Mail merge process: -* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) — occurs when a **Mail merge field** except image Mail merge field is encountered. +* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html)- occurs when a **Mail merge field** except image Mail merge field is encountered. -* [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) — occurs when an **image Mail merge field** is encountered. +* [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html)- occurs when an **image Mail merge field** is encountered. -* [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) — occurs when an **unmerged field** is encountered. +* [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html)- occurs when an **unmerged field** is encountered. -* [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) — occurs when an **unmerged group field** is encountered. +* [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html)- occurs when an **unmerged group field** is encountered. ## MergeField Event @@ -106,8 +106,8 @@ End Sub {% endtabs %} -N> 1. While executing mail merge, DocIO internally uses a copy of a particular region for populating the contents. Sometimes, unexpected problems may arise due to inserting multiple body items into the region through the mail merge process. So, to insert multiple body items using the merge field event handler, we recommend using this [approach](https://www.syncfusion.com/kb/11701/how-to-replace-merge-field-with-html-string-using-mail-merge). -N> 2. The [ExecuteGroup(DataTable)](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteGroup_System_Data_DataTable_) method is not supported on the UWP platform. The cross-platform sample above is not valid for UWP; use an alternative data-binding approach on UWP. +N> 1. While executing mail merge, DocIO internally uses a copy of a particular region for populating the contents. Sometimes, unexpected problems may arise due to inserting multiple body items into the region through the mail merge process. So, to insert multiple body items using the merge field event handler, you are recommended to use this [approach](https://www.syncfusion.com/kb/11701/how-to-replace-merge-field-with-html-string-using-mail-merge) at your side. +N> 2. The [ExecuteGroup(DataTable)](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteGroup_System_Data_DataTable_) method is not supported on the UWP platform. The following code example shows GetDataTable method which is used to get data for mail merge. @@ -170,7 +170,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync You can format the merged image like resizing the image and more during mail merge process using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) Event. -N> The [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event triggers only for image merge fields. Ensure you have a valid image merge field in the template document, following the syntax: **{ MERGEFIELD Image:Logo }**. +N> The [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event triggers only for image merge fields. Ensure you have a valid image merge field in the template document, following the syntax: **{ MERGEFIELD Image:logo }**. The following code example shows how to use the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event during Mail merge process. @@ -183,9 +183,9 @@ WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); //Uses the mail merge events handler for image fields document.MailMerge.MergeImageField += new MergeImageFieldEventHandler(MergeField_ProductImage); //Specifies the field names and field values -string[] fieldNames = new string[] { "Logo" }; -string[] fieldValues = new string[] { "Logo.png" }; -//Executes the mail merge +string[] fieldNames = new string[] { "Logo"}; +string[] fieldValues = new string[] { "Logo.png"}; +//Executes the mail merge with groups document.MailMerge.Execute(fieldNames, fieldValues); //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); @@ -200,9 +200,9 @@ WordDocument document = new WordDocument("Template.docx"); //Uses the mail merge events handler for image fields document.MailMerge.MergeImageField += new MergeImageFieldEventHandler(MergeField_ProductImage); //Specifies the field names and field values -string[] fieldNames = new string[] { "Logo" }; -string[] fieldValues = new string[] { "Logo.png" }; -//Executes the mail merge +string[] fieldNames = new string[] { "Logo"}; +string[] fieldValues = new string[] { "Logo.png"}; +//Executes the mail merge with groups document.MailMerge.Execute(fieldNames, fieldValues); //Saves and closes WordDocument instance document.Save("Sample.docx"); @@ -217,7 +217,7 @@ AddHandler document.MailMerge.MergeImageField, AddressOf MergeField_ProductImage 'Specifies the field names and field values Dim fieldNames As String() = New String() {"Logo"} Dim fieldValues As String() = New String() {"Logo.png"} -'Executes the mail merge +'Executes the mail merge with groups document.MailMerge.Execute(fieldNames, fieldValues) 'Saves and closes WordDocument instance document.Save("Sample.docx") @@ -298,10 +298,10 @@ The following code example shows how to use the [BeforeClearField](https://help. {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Event-to-bind-data-for-unmerged-fields/.NET/Event-to-bind-data-for-unmerged-fields/Program.cs" %} //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -//Sets “ClearFields” to false to keep empty mail merge fields in the document +WordDocument document = new WordDocument(fileStreamPath); +//Sets “ClearFields” to true to remove empty mail merge fields from document document.MailMerge.ClearFields = false; -//Uses the mail merge event to clear the unmerged field while performing mail merge execution +//Uses the mail merge event to clear the unmerged field while perform mail merge execution document.MailMerge.BeforeClearField += new BeforeClearFieldEventHandler(BeforeClearFieldEvent); //Execute mail merge document.MailMerge.ExecuteGroup(GetDataTable()); @@ -315,9 +315,9 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Sets “ClearFields” to false to keep empty mail merge fields in the document +//Sets “ClearFields” to true to remove empty mail merge fields from document document.MailMerge.ClearFields = false; -//Uses the mail merge event to clear the unmerged field while performing mail merge execution +//Uses the mail merge event to clear the unmerged field while perform mail merge execution document.MailMerge.BeforeClearField += new BeforeClearFieldEventHandler(BeforeClearFieldEvent); //Execute mail merge document.MailMerge.ExecuteGroup(GetDataTable()); @@ -329,10 +329,10 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As WordDocument = New WordDocument("Template.docx") -'Sets “ClearFields” to false to keep empty mail merge fields in the document +'Sets “ClearFields” to true to remove empty mail merge fields from document document.MailMerge.ClearFields = False -'Uses the mail merge event to clear the unmerged field while performing mail merge execution -AddHandler document.MailMerge.BeforeClearField, AddressOf BeforeClearFieldEvent +'Uses the mail merge event to clear the unmerged field while perform mail merge execution +document.MailMerge.BeforeClearField += New BeforeClearFieldEventHandler(AddressOf BeforeClearField) 'Execute mail merge document.MailMerge.ExecuteGroup(GetDataTable()) 'Saves and closes the WordDocument instance @@ -559,13 +559,13 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As WordDocument = New WordDocument("Template.docx") -'Sets “ClearFields” to false to keep empty mail merge fields in the document +'Sets “ClearFields” to true to remove empty mail merge fields from document document.MailMerge.ClearFields = False -'Uses the mail merge event to clear the unmerged field while performing mail merge execution +'Uses the mail merge event to clear the unmerged field while perform mail merge execution AddHandler document.MailMerge.BeforeClearGroupField, AddressOf BeforeClearFields 'Gets the employee details as “IEnumerable” collection Dim employeeList As List(Of Employees) = GetEmployees() -'Creates an instance of MailMergeDataTable by specifying mail merge group name and “IEnumerable” collection +'Creates an instance of MailMergeDataTableby specifying mail merge group name and “IEnumerable” collection Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Employees", employeeList) 'Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable) @@ -589,7 +589,6 @@ private static void BeforeClearFields(object sender, BeforeClearGroupFieldEventA string[] groupName = args.GroupName.Split(':'); if (groupName[groupName.Length - 1] == "Orders") { - //Gets the field names in the group string[] fields = args.FieldNames; List orderList = GetOrders(); //Binds the data to the unmerged fields in group as alternative values @@ -627,16 +626,16 @@ private static void BeforeClearFields(object sender, BeforeClearGroupFieldEventA {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} Private Sub BeforeClearFields(ByVal sender As Object, ByVal args As BeforeClearGroupFieldEventArgs) If Not args.HasMappedGroupInDataSource Then - 'Gets the Current unmerged group name from the event argument + ‘Gets the Current unmerged group name from the event argument Dim groupName As String() = args.GroupName.Split(":"c) If groupName(groupName.Length - 1) = "Orders" Then 'Gets the field names in the group Dim fields As String() = args.FieldNames Dim orderList As List(Of OrderDetails) = GetOrders() - 'Binds the data to the unmerged fields in group as alternative values + ‘Binds the data to the unmerged fields in group as alternative values args.AlternateValues = orderList Else - 'If group value is empty, you can set whether the unmerged merge group field can be clear or not + ‘If group value is empty, you can set whether the unmerged merge group field can be clear or not args.ClearGroup = True End If End If @@ -699,7 +698,7 @@ public static List GetEmployees() 'Gets orders list Private Shared Function GetOrders() As List(Of OrderDetails) Dim orders As List(Of OrderDetails) = New List(Of OrderDetails)() - orders.Add(New OrderDetails("10952", New DateTime(2015, 2, 5), New DateTime(2015, 2, 12), New DateTime(2015, 2, 21))) + orders.Add(New OrderDetails("10835", New DateTime(2015, 1, 5), New DateTime(2015, 1, 12), New DateTime(2015, 1, 21))) Return orders End Function From 33a9d0e1f0e119ba39468467376832d7ac31b2a7 Mon Sep 17 00:00:00 2001 From: Dharanya Sakthivel Date: Tue, 11 Aug 2026 10:50:23 +0530 Subject: [PATCH 39/70] ES-1042923-Revamp-UG --- .../NET/mail-merge/mail-merge-for-group.md | 20 +++++++++---------- .../mail-merge-troubleshooting-tips.md | 12 +++++------ .../NET/mail-merge/simple-mail-merge.md | 2 +- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md index 94aa99e128..6ce9737417 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-group.md @@ -6,9 +6,9 @@ control: DocIO documentation: UG --- -# Mail merge for a group in Word Library +# Mail Merge for a group in Word Library -You can perform Mail merge and append multiple records from data source within a specified region to a template document. The region is bounded by start and end group merge fields. The region gets repeated for every record from the data source. +You can perform Mail Merge and append multiple records from data source within a specified region to a template document. The region is bounded by start and end group merge fields. The region gets repeated for every record from the data source. The following table illustrates the supported mail merge overloads for ExecuteGroup method. @@ -35,27 +35,27 @@ The following table illustrates the supported mail merge overloads for ExecuteGr ## Create template for group mail merge -The region where the Mail merge operations are to be performed must be marked by two merge fields with the following names. +The region where the Mail Merge operations are to be performed must be marked by two merge fields with the following names. * «TableStart:TableName» and «BeginGroup:GroupName» - For the entry point of the region. * «TableEnd:TableName» and «EndGroup:GroupName» - For the end point of the region. - * *TableStart* and *TableEnd* regions are preferred for performing Mail merge inside the table cell. - * *BeginGroup* and *EndGroup* regions are preferred for performing Mail merge inside the document body contents. + * *TableStart* and *TableEnd* regions are preferred for performing Mail Merge inside the table cell. + * *BeginGroup* and *EndGroup* regions are preferred for performing Mail Merge inside the document body contents. For example, consider that you have a template document as shown. ![Mail merge for a group](../MailMerge_images/Group_mail_merge_template.png) -In this template, Employees is the group name and the same name should be used while performing Mail merge through code. There are two special merge fields “TableStart:Employees” and “TableEnd:Employees” to denote the start and end of the Mail merge group. +In this template, Employees is the group name and the same name should be used while performing Mail Merge through code. There are two special merge fields “TableStart:Employees” and “TableEnd:Employees” to denote the start and end of the Mail Merge group. ## Execute group mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for [ExecuteGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteGroup_System_Data_DataTable_) method to perform Mail merge within a group from various data sources. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for [ExecuteGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteGroup_System_Data_DataTable_) method to perform Mail Merge within a group from various data sources. N> For group mail merge, declare a class with the field names, create a list, and pass it to [MailMergeDataTable](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMergeDataTable.html). Ensure that the property and field names in the input document match when creating the data table. -The following code example shows how to perform Mail merge in the specific region with **data source retrieved from SQL connection**. +The following code example shows how to perform Mail Merge in the specific region with **data source retrieved from SQL connection**. N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-platform]*** for ASP.NET Core, Blazor, Xamarin, UWP, .NET MAUI, and WinUI; ***C# [Windows-specific]*** for WinForms and WPF; ***VB.NET [Windows-specific]*** for VB.NET applications. @@ -138,9 +138,9 @@ The resultant document looks as follows. ![Group resultant document](../MailMerge_images/Group_mail_merge_output.png) -## Mail merge with .NET objects +## Mail Merge with .NET objects -You can perform Mail merge with .NET objects in a template document. The following code snippet shows how to perform Mail merge with business objects. +You can perform Mail Merge with .NET objects in a template document. The following code snippet shows how to perform Mail Merge with business objects. {% tabs %} diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md index bc8b3c7e94..4f555a22d1 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-troubleshooting-tips.md @@ -6,15 +6,15 @@ control: DocIO documentation: UG --- -# Troubleshooting Mail merge Issues in .NET Word Library +# Troubleshooting Mail Merge Issues in .NET Word Library ## Why is mail merge not working correctly in DocIO? -Mail merge issues can arise due to incorrect merge fields, mismatched data sources, or missing fields in the template. Ensure the following: +Mail Merge issues can arise due to incorrect merge fields, mismatched data sources, or missing fields in the template. Ensure the following: * Merge fields (<>) are used instead of plain text. * **Data Source Check:** Ensure the required fields exist in the data source. Verify the data source column/property names against the merge field names in the Word template. -* **Match Field Names:** Sometimes, the field names in the Word document are different from the property names in your data source class. For example, if your document has "FirstName" and "LastName", but your Employee class uses different names, Mail merge will not work correctly. +* **Match Field Names:** Sometimes, the field names in the Word document are different from the property names in your data source class. For example, if your document has "FirstName" and "LastName", but your Employee class uses different names, Mail Merge will not work correctly. **How to fix this:** * The property names in your data source class should be exactly the same as the merge field names in your Word document. @@ -60,7 +60,7 @@ End Class ## Why does mail merge not recognize manually typed text in Word document? -Mail merge only works with merge fields, not manually typed placeholders. If text is entered instead of a merge field, Word treats it as plain text. +Mail Merge only works with merge fields, not manually typed placeholders. If text is entered instead of a merge field, Word treats it as plain text. **Solution using Microsoft Word:** 1. Navigate to Insert → Field or press Ctrl+F9. @@ -71,9 +71,9 @@ Mail merge only works with merge fields, not manually typed placeholders. If tex Refer to [Syncfusion® Documentation](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-find-and-replace#find-and-replace-a-pattern-of-text-with-a-merge-field) for detailed implementation. -## Why is nested group Mail merge not functioning correctly? +## Why is nested group Mail Merge not functioning correctly? -Nested Mail merge requires proper execution using the correct method and structure. +Nested Mail Merge requires proper execution using the correct method and structure. * Use the appropriate overload of the [`ExecuteNestedGroup`](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) method to handle nested groups effectively. Supported overloads include: * `ExecuteNestedGroup(MailMergeDataTable)` — for implicit relational data, where the child groups are nested within the parent table's data. * `ExecuteNestedGroup(MailMergeDataSet, List)` — for explicit relational data, where the relations between parent and child groups are defined using command entries. diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/simple-mail-merge.md b/Document-Processing/Word/Word-Library/NET/mail-merge/simple-mail-merge.md index dfaf164f25..ec1e3c0274 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/simple-mail-merge.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/simple-mail-merge.md @@ -49,7 +49,7 @@ The following table illustrates the supported mail merge overloads for Execute m
      Data Source

      		Sample

      		Examples
      -## Mail merge with string arrays +## Mail Merge with string arrays The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for the [Execute](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_Execute_System_String___System_String___) method to perform a mail merge from various data sources. The mail merge operation replaces the matching merge fields with the respective data. Unmatched merge fields are left unchanged in the output document by default. From c18edf32736d7a0d169a56f9e6a2101d877ecb33 Mon Sep 17 00:00:00 2001 From: Dhanush Sugumaran Date: Tue, 11 Aug 2026 12:03:53 +0530 Subject: [PATCH 40/70] Task(1045705): Updated file based on provided feedback --- Document-Processing/PDF/PDF-Viewer/vue/mcp.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/mcp.md b/Document-Processing/PDF/PDF-Viewer/vue/mcp.md index 5045562d77..5fb5c5f5ae 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/mcp.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/mcp.md @@ -33,13 +33,13 @@ Before beginning, ensure the following prerequisites are met: - An active [Syncfusion® API key](https://syncfusion.com/account/api-key) - A **Vue application** (existing or new); see [Vue PDF Viewer documentation](./getting-started) - An active Syncfusion® license (any of the following): - - Commercial License - - Free Community License - - Free Trial + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) ### Getting Your API Key -Generate the Syncfusion® API key from the API Key page and store it in a `.txt` or `.key` file. The saved file will be referenced in the MCP configuration: +Generate the Syncfusion® API key from the [API Key page](https://www.syncfusion.com/account/api-key) and store it in a `.txt` or `.key` file. The saved file will be referenced in the MCP configuration: ````json "env": { From 9d76d6ffcf5451ce46b59bf33ee32030fdaef3ec Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Tue, 11 Aug 2026 12:41:18 +0530 Subject: [PATCH 41/70] 1044353: Addressed review changes and updated proper code-snippets for Import and Export Annotations --- .../annotation-types/ink-annotation.md | 2 +- .../annotation-types/line-annotation.md | 2 +- .../annotation-types/redaction-annotation.md | 2 +- .../export-import/export-annotation.md | 2 +- .../annotations/signature-annotation.md | 4 +- .../export-form-fields.md | 107 +++++++++++++----- .../import-form-fields.md | 82 ++++++++++---- 7 files changed, 144 insertions(+), 57 deletions(-) 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 aa74175838..33d2cef21e 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 @@ -81,7 +81,7 @@ if (setNone) { ### Add ink annotation programmatically -The PDF Viewer library allows adding ink annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method. +The PDF Viewer library allows adding ink annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. ```html 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 c222ca4b70..e0b1977a48 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 @@ -105,7 +105,7 @@ document.getElementById('setNone').addEventListener('click', function() { ### Add a line annotation programmatically -The PDF Viewer library allows adding shape annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method. +The PDF Viewer library allows adding shape annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. ```html 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 da5e35cbfc..1965cf3c88 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 @@ -33,7 +33,7 @@ You can also add redaction annotations from the context menu by selecting conten ![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) for configuration. ### Add redaction annotations programmatically 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 e9da3a2aea..54255c827f 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 @@ -13,7 +13,7 @@ domainurl: ##DomainURL## PDF Viewer provides support for exporting annotations. You can export annotations from the PDF Viewer in two ways: - Using the built-in UI in the Comments panel (JSON or XFDF file) -- Programmatically (export to JSON, XFDF, or as a JSON object for custom handling) +- Programmatically (export to JSON, XFDF, or as an object for custom handling) ## Export using the UI (Comments panel) 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 2200f77b45..2e562f5577 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 @@ -77,7 +77,7 @@ if (handWrittenSignature) { ### Add a handwritten signature programmatically -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. +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#addannotation) method. Here is an example of adding a handwritten signature programmatically using the `addAnnotation()` method: ```html @@ -341,7 +341,7 @@ pdfviewer.enableHandwrittenSignature = false; {% endhighlight %} {% endtabs %} -Note: 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. +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 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 f1237aa319..b2d9a5144d 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 @@ -26,46 +26,92 @@ The PDF Viewer allows you to export form field data in multiple formats for easy 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. +### Export as FDF, XFDF, and JSON + +The following example demonstrates exporting form field data in different formats and importing data back: ```html - -
      + +
      + + + + + + +
      + + +
      ``` ```js -document.getElementById('exportFdf').addEventListener('click', function () { - // Destination is optional; if omitted the browser will prompt. - viewer.exportFormFields('FormData','Fdf'); +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +// Initialize the viewer +var viewer = new ej.pdfviewer.PdfViewer(); +viewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +viewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +viewer.appendTo('#PdfViewer'); + +// Helper: open a native file picker, read the chosen file as text, +// then call viewer.importFormFields(stringData, format). +function importFile(format) { + var input = document.createElement('input'); + input.type = 'file'; + input.accept = '.' + format.toLowerCase(); // .fdf | .xfdf | .json + input.onchange = function (e) { + var file = e.target.files && e.target.files[0]; + if (!file) return; + + var reader = new FileReader(); + reader.onload = function (ev) { + // ev.target.result is a STRING — what importFormFields actually wants + viewer.importFormFields(ev.target.result, format); + }; + reader.readAsText(file); + }; + input.click(); +} + +// --- Import Form Fields --- +document.getElementById('importFdf').addEventListener('click', function () { + importFile('Fdf'); }); -``` -### Export as XFDF -The following example exports form field data as XFDF. - -```html - -``` +document.getElementById('importXfdf').addEventListener('click', function () { + importFile('Xfdf'); +}); -```js -// ...same imports and viewer initialization as above... -document.getElementById('exportXfdf').addEventListener('click', function () { - viewer.exportFormFields('FormData', 'Xfdf'); +document.getElementById('importJson').addEventListener('click', function () { + importFile('Json'); }); -``` -### Export as JSON -The following example exports form field data as JSON. +// --- Export Form Fields --- +document.getElementById('exportFdf').addEventListener('click', function () { + viewer.exportFormFields('FormData', 'Fdf'); // downloads FormData.fdf +}); -```html - -``` +document.getElementById('exportXfdf').addEventListener('click', function () { + viewer.exportFormFields('FormData', 'Xfdf'); // downloads FormData.xfdf +}); -```js -// ...same imports and viewer initialization as above... document.getElementById('exportJson').addEventListener('click', function () { - viewer.exportFormFields('FormData', 'Json'); + viewer.exportFormFields('FormData', 'Json'); // downloads FormData.json }); ``` @@ -75,6 +121,8 @@ Use [exportFormFieldsAsObject()](https://ej2.syncfusion.com/javascript/documenta ```html + + ``` ```js @@ -91,6 +139,11 @@ document.getElementById('exportObj').addEventListener('click', function () { // viewer.exportFormFieldsAsObject('Xfdf').then(...) // viewer.exportFormFieldsAsObject('Json').then(...) }); + +// Import from previously exported object +document.getElementById('importObj').addEventListener('click', function () { + viewer.importFormFields(exportedData, ej.pdfviewer.FormFieldDataFormat.Fdf); +}); ``` ## Common Use Cases 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 7460ddd99b..891f543a6a 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 @@ -20,42 +20,76 @@ The **PDF Viewer** lets you import values into interactive form fields in the cu 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 +### Import FDF, XFDF, and JSON + +The following example demonstrates importing form field data in different formats: ```html - -
      + +
      + + + +
      + + +
      ``` ```js +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +// Initialize the viewer +var viewer = new ej.pdfviewer.PdfViewer(); +viewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +viewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +viewer.appendTo('#PdfViewer'); + +// Helper: open a native file picker, read the chosen file as text, +// then call viewer.importFormFields(stringData, format). +function importFile(format) { + var input = document.createElement('input'); + input.type = 'file'; + input.accept = '.' + format.toLowerCase(); // .fdf | .xfdf | .json + input.onchange = function (e) { + var file = e.target.files && e.target.files[0]; + if (!file) return; + + var reader = new FileReader(); + reader.onload = function (ev) { + // ev.target.result is a STRING — what importFormFields actually wants + viewer.importFormFields(ev.target.result, format); + }; + reader.readAsText(file); + }; + input.click(); +} + +// --- Import Form Fields --- document.getElementById('importFdf').addEventListener('click', function () { - // The file for importing should be accessible at the given path or as a file stream depending on your integration - viewer.importFormFields('formData.fdf', 'Fdf'); + importFile('Fdf'); }); -``` - -### Import XFDF -```html - -
      -``` -```js document.getElementById('importXfdf').addEventListener('click', function () { - // The file for importing should be accessible at the given path or as a file stream depending on your integration - viewer.importFormFields('formData.xfdf', 'Xfdf'); + importFile('Xfdf'); }); -``` - -### Import JSON -```html - -``` -```js document.getElementById('importJson').addEventListener('click', function () { - // The file for importing should be accessible at the given path or as a file stream depending on your integration - viewer.importFormFields('formData.json', 'Json'); + importFile('Json'); }); ``` From 4a978dde6fa2c4fbf2a98111a37417ca9bfbab10 Mon Sep 17 00:00:00 2001 From: Dharanya Sakthivel Date: Tue, 11 Aug 2026 17:20:22 +0530 Subject: [PATCH 42/70] ES-1042923-UG-Changes --- .../NET/mail-merge/mail-merge-events.md | 63 ++++++------- .../mail-merge-for-nested-groups.md | 57 ++++++------ .../NET/mail-merge/mail-merge-options.md | 63 +++++++------ .../NET/working-with-mail-merge.md | 90 ++++++++++--------- 4 files changed, 149 insertions(+), 124 deletions(-) diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md index dd4639a7d6..6268a86a38 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-events.md @@ -6,17 +6,17 @@ control: DocIO documentation: UG --- -# Event support for Mail merge +# Event support for Mail merge in Word Library -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO during Mail merge process: +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merge image data during the Mail merge process. The following events are supported by Syncfusion® DocIO during Mail merge process: -* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html)- occurs when a **Mail merge field** except image Mail merge field is encountered. +* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) — occurs when a **Mail merge field** except image Mail merge field is encountered. -* [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html)- occurs when an **image Mail merge field** is encountered. +* [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) — occurs when an **image Mail merge field** is encountered. -* [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html)- occurs when an **unmerged field** is encountered. +* [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) — occurs when an **unmerged field** is encountered. -* [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html)- occurs when an **unmerged group field** is encountered. +* [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) — occurs when an **unmerged group field** is encountered. ## MergeField Event @@ -106,8 +106,8 @@ End Sub {% endtabs %} -N> 1. While executing mail merge, DocIO internally uses a copy of a particular region for populating the contents. Sometimes, unexpected problems may arise due to inserting multiple body items into the region through the mail merge process. So, to insert multiple body items using the merge field event handler, you are recommended to use this [approach](https://www.syncfusion.com/kb/11701/how-to-replace-merge-field-with-html-string-using-mail-merge) at your side. -N> 2. The [ExecuteGroup(DataTable)](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteGroup_System_Data_DataTable_) method is not supported on the UWP platform. +N> 1. While executing mail merge, DocIO internally uses a copy of a particular region for populating the contents. Sometimes, unexpected problems may arise due to inserting multiple body items into the region through the mail merge process. So, to insert multiple body items using the merge field event handler, we recommend using this [approach](https://www.syncfusion.com/kb/11701/how-to-replace-merge-field-with-html-string-using-mail-merge). +N> 2. The [ExecuteGroup(DataTable)](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteGroup_System_Data_DataTable_) method is not supported on the UWP platform. The cross-platform sample above is not valid for UWP; use an alternative data-binding approach on UWP. The following code example shows GetDataTable method which is used to get data for mail merge. @@ -170,7 +170,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync You can format the merged image like resizing the image and more during mail merge process using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) Event. -N> The [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event triggers only for image merge fields. Ensure you have a valid image merge field in the template document, following the syntax: **{ MERGEFIELD Image:logo }**. +N> The [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event triggers only for image merge fields. Ensure you have a valid image merge field in the template document, following the syntax: **{ MERGEFIELD Image:Logo }**. The following code example shows how to use the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event during Mail merge process. @@ -183,9 +183,9 @@ WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); //Uses the mail merge events handler for image fields document.MailMerge.MergeImageField += new MergeImageFieldEventHandler(MergeField_ProductImage); //Specifies the field names and field values -string[] fieldNames = new string[] { "Logo"}; -string[] fieldValues = new string[] { "Logo.png"}; -//Executes the mail merge with groups +string[] fieldNames = new string[] { "Logo" }; +string[] fieldValues = new string[] { "Logo.png" }; +//Executes the mail merge document.MailMerge.Execute(fieldNames, fieldValues); //Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); @@ -200,9 +200,9 @@ WordDocument document = new WordDocument("Template.docx"); //Uses the mail merge events handler for image fields document.MailMerge.MergeImageField += new MergeImageFieldEventHandler(MergeField_ProductImage); //Specifies the field names and field values -string[] fieldNames = new string[] { "Logo"}; -string[] fieldValues = new string[] { "Logo.png"}; -//Executes the mail merge with groups +string[] fieldNames = new string[] { "Logo" }; +string[] fieldValues = new string[] { "Logo.png" }; +//Executes the mail merge document.MailMerge.Execute(fieldNames, fieldValues); //Saves and closes WordDocument instance document.Save("Sample.docx"); @@ -217,7 +217,7 @@ AddHandler document.MailMerge.MergeImageField, AddressOf MergeField_ProductImage 'Specifies the field names and field values Dim fieldNames As String() = New String() {"Logo"} Dim fieldValues As String() = New String() {"Logo.png"} -'Executes the mail merge with groups +'Executes the mail merge document.MailMerge.Execute(fieldNames, fieldValues) 'Saves and closes WordDocument instance document.Save("Sample.docx") @@ -298,10 +298,10 @@ The following code example shows how to use the [BeforeClearField](https://help. {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Event-to-bind-data-for-unmerged-fields/.NET/Event-to-bind-data-for-unmerged-fields/Program.cs" %} //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -WordDocument document = new WordDocument(fileStreamPath); -//Sets “ClearFields” to true to remove empty mail merge fields from document +WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); +//Sets “ClearFields” to false to keep empty mail merge fields in the document document.MailMerge.ClearFields = false; -//Uses the mail merge event to clear the unmerged field while perform mail merge execution +//Uses the mail merge event to clear the unmerged field while performing mail merge execution document.MailMerge.BeforeClearField += new BeforeClearFieldEventHandler(BeforeClearFieldEvent); //Execute mail merge document.MailMerge.ExecuteGroup(GetDataTable()); @@ -315,9 +315,9 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Sets “ClearFields” to true to remove empty mail merge fields from document +//Sets “ClearFields” to false to keep empty mail merge fields in the document document.MailMerge.ClearFields = false; -//Uses the mail merge event to clear the unmerged field while perform mail merge execution +//Uses the mail merge event to clear the unmerged field while performing mail merge execution document.MailMerge.BeforeClearField += new BeforeClearFieldEventHandler(BeforeClearFieldEvent); //Execute mail merge document.MailMerge.ExecuteGroup(GetDataTable()); @@ -329,10 +329,10 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As WordDocument = New WordDocument("Template.docx") -'Sets “ClearFields” to true to remove empty mail merge fields from document +'Sets “ClearFields” to false to keep empty mail merge fields in the document document.MailMerge.ClearFields = False -'Uses the mail merge event to clear the unmerged field while perform mail merge execution -document.MailMerge.BeforeClearField += New BeforeClearFieldEventHandler(AddressOf BeforeClearField) +'Uses the mail merge event to clear the unmerged field while performing mail merge execution +AddHandler document.MailMerge.BeforeClearField, AddressOf BeforeClearFieldEvent 'Execute mail merge document.MailMerge.ExecuteGroup(GetDataTable()) 'Saves and closes the WordDocument instance @@ -559,13 +559,13 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As WordDocument = New WordDocument("Template.docx") -'Sets “ClearFields” to true to remove empty mail merge fields from document +'Sets “ClearFields” to false to keep empty mail merge fields in the document document.MailMerge.ClearFields = False -'Uses the mail merge event to clear the unmerged field while perform mail merge execution +'Uses the mail merge event to clear the unmerged field while performing mail merge execution AddHandler document.MailMerge.BeforeClearGroupField, AddressOf BeforeClearFields 'Gets the employee details as “IEnumerable” collection Dim employeeList As List(Of Employees) = GetEmployees() -'Creates an instance of MailMergeDataTableby specifying mail merge group name and “IEnumerable” collection +'Creates an instance of MailMergeDataTable by specifying mail merge group name and “IEnumerable” collection Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Employees", employeeList) 'Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable) @@ -589,6 +589,7 @@ private static void BeforeClearFields(object sender, BeforeClearGroupFieldEventA string[] groupName = args.GroupName.Split(':'); if (groupName[groupName.Length - 1] == "Orders") { + //Gets the field names in the group string[] fields = args.FieldNames; List orderList = GetOrders(); //Binds the data to the unmerged fields in group as alternative values @@ -626,16 +627,16 @@ private static void BeforeClearFields(object sender, BeforeClearGroupFieldEventA {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} Private Sub BeforeClearFields(ByVal sender As Object, ByVal args As BeforeClearGroupFieldEventArgs) If Not args.HasMappedGroupInDataSource Then - ‘Gets the Current unmerged group name from the event argument + 'Gets the Current unmerged group name from the event argument Dim groupName As String() = args.GroupName.Split(":"c) If groupName(groupName.Length - 1) = "Orders" Then 'Gets the field names in the group Dim fields As String() = args.FieldNames Dim orderList As List(Of OrderDetails) = GetOrders() - ‘Binds the data to the unmerged fields in group as alternative values + 'Binds the data to the unmerged fields in group as alternative values args.AlternateValues = orderList Else - ‘If group value is empty, you can set whether the unmerged merge group field can be clear or not + 'If group value is empty, you can set whether the unmerged merge group field can be clear or not args.ClearGroup = True End If End If @@ -698,7 +699,7 @@ public static List GetEmployees() 'Gets orders list Private Shared Function GetOrders() As List(Of OrderDetails) Dim orders As List(Of OrderDetails) = New List(Of OrderDetails)() - orders.Add(New OrderDetails("10835", New DateTime(2015, 1, 5), New DateTime(2015, 1, 12), New DateTime(2015, 1, 21))) + orders.Add(New OrderDetails("10952", New DateTime(2015, 2, 5), New DateTime(2015, 2, 12), New DateTime(2015, 2, 21))) Return orders End Function diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md index 1d35ce169b..40a48c955c 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md @@ -6,9 +6,9 @@ control: DocIO documentation: UG --- -# Nested Mail merge for group +# Mail merge for nested groups -You can perform nested Mail merge with relational or hierarchical data source and independent data tables in a template document. +You can perform nested mail merge with relational or hierarchical data source and independent data tables in a template document. The following table illustrates the supported mail merge overloads for ExecuteNestedGroup method. @@ -43,9 +43,9 @@ The following table illustrates the supported mail merge overloads for ExecuteNe ## Create template for nested group mail merge -Nested Mail merge operation automatically replaces the merge field with immediate group data. You can also predefine the group data that is populated to a merge field. - -To execute nested mail merge, design your Word document template as follow. +Nested mail merge operation automatically replaces the merge field with immediate group data. You can also predefine the group data that is populated in a merge field. + +To execute nested mail merge, design your Word document template as follows. ![Word document template for nested groups](../MailMerge_images/file-formats-word-nested-group-mail-merge-template.png) @@ -53,7 +53,7 @@ In this template, Employees is the owner group and it has two child groups Custo ## Execute nested group mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_System_Data_Common_DbConnection_System_Collections_ArrayList_) method to perform Mail merge for nested groups or regions in the Word document. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_System_Data_Common_DbConnection_System_Collections_ArrayList_) method to perform mail merge for nested groups or regions in the Word document. You need to define commands with the table name and expression for linking the multiple data tables **(explicit relation data)** during nested Mail merge process. You can use the “%TableName.ColumnName%” expression for getting the current value of specified column or field from the table. @@ -154,7 +154,7 @@ The resultant document looks as follows. Essential® DocIO allows you to perform Mail merge with the dynamic objects. The [ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0) is like a collection of key and value pairs, which means IDictionary. So, you can also use IDictionary collection instead of [ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0) to execute mail merge. -The following code snippet shows how to perform the Mail merge with dynamic objects ([ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0)). +The following code snippet shows how to perform the mail merge with dynamic objects ([ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject)). {% tabs %} @@ -170,7 +170,7 @@ dataSet.Add(dataTable); dataTable = new MailMergeDataTable("Orders", GetOrders()); dataSet.Add(dataTable); List commands = new List(); -//DictionaryEntry contain "Source table" (key) and "Command" (value) +//DictionaryEntry contains "Source table" (key) and "Command" (value) DictionaryEntry entry = new DictionaryEntry("Customers", string.Empty); commands.Add(entry); //Retrieves the customer details @@ -196,7 +196,7 @@ dataSet.Add(dataTable); dataTable = new MailMergeDataTable("Orders", GetOrders()); dataSet.Add(dataTable); List commands = new List(); -//DictionaryEntry contain "Source table" (key) and "Command" (value) +//DictionaryEntry contains "Source table" (key) and "Command" (value) DictionaryEntry entry = new DictionaryEntry("Customers", string.Empty); commands.Add(entry); //Retrieves the customer details @@ -220,7 +220,7 @@ dataSet.Add(dataTable) dataTable = New MailMergeDataTable("Orders", GetOrders()) dataSet.Add(dataTable) Dim commands As New List(Of DictionaryEntry)() -'DictionaryEntry contain "Source table" (key) and "Command" (value) +'DictionaryEntry contains "Source table" (key) and "Command" (value) Dim entry As New DictionaryEntry("Customers", String.Empty) commands.Add(entry) 'Retrieves the customer details @@ -361,23 +361,28 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Mail merge with implicit relational data -You can perform **nested Mail merge with implicit relational data** objects without any explicit relational commands by using the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_Syncfusion_DocIO_DLS_MailMergeDataTable_) overload method. +You can perform **nested mail merge with implicit relational data** objects without any explicit relational commands by using the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_Syncfusion_DocIO_DLS_MailMergeDataTable_) overload method. + +DocIO automatically maps child collections to nested groups by matching the property name on the data object to the group name declared in the template (for example, a property named `Departments` on the `Organization` class maps to the `Departments` group region). Ensure property names match the group names used in the template. -### Map the field of ancestor group +### Map fields of ancestor groups -You can also merge any field in the nested group by **mapping the field or column of its ancestor group or table** in the data source. To achieve this, you need to add a corresponding group name or table name as a prefix to the merge field name along with “:” separator. +You can also merge any field in the nested group by **mapping the field or column of its ancestor group or table** in the data source. To achieve this, add the corresponding group name or table name as a prefix to the merge field name along with the `:` separator. For example: - * The merge field name should be like “TableName:Id” (<>) - * The merge field name should be like “Image:TableName:Photo” (<>) - -For example, consider that you have a template document as follow. + * The merge field name should be like `TableName:Id` (<>) + * The merge field name should be like `Image:TableName:Photo` (<>) + +> **NOTE** +> Image merge fields require the merge field to be configured with the `Image:` prefix in the template and the data value to be a byte array or `Image` instance. + +For example, consider that you have a template document as follows. ![Word document template to map the fields of ancestor group](../MailMerge_images/file-formats-word-mapping-template.png) -In the above template, Organizations is the owner group and it has two child groups Departments and Employees. The Supervisor merge field of Departments group is used in Employees group. +In the above template, Organizations is the owner group and it has two child groups Departments and Employees. The `Supervisor` merge field of the Departments group is used in the Employees group. -The following code example shows how to perform nested Mail merge with the implicit relational data objects. +The following code example shows how to perform nested mail merge with the implicit relational data objects. {% tabs %} @@ -385,9 +390,9 @@ The following code example shows how to perform nested Mail merge with the impli //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -//Gets the organization details as “IEnumerable” collection +//Gets the organization details as IEnumerable collection List organizationList = GetOrganizations(); -//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection MailMergeDataTable dataTable = new MailMergeDataTable("Organizations", organizationList); //Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable); @@ -401,9 +406,9 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Gets the organization details as “IEnumerable” collection +//Gets the organization details as IEnumerable collection List organizationList = GetOrganizations(); -//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection MailMergeDataTable dataTable = new MailMergeDataTable("Organizations", organizationList); //Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable); @@ -415,9 +420,9 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As WordDocument = New WordDocument("Template.docx") -'Gets the organization details as “IEnumerable” collection +'Gets the organization details as IEnumerable collection Dim organizationList As List(Of Organization) = GetOrganizations() -'Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +'Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Organizations", organizationList) 'Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable) @@ -477,7 +482,7 @@ public static List GetOrganizations() {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -Public Function GetOrganizations() As List(Of Organization) +Public Shared Function GetOrganizations() As List(Of Organization) 'Creates Employee details Dim employees As List(Of EmployeeDetails) = New List(Of EmployeeDetails) employees.Add(New EmployeeDetails("Thomas Hardy", "1001", "05/27/1996")) diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md index 3336f510f3..697b56134d 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-options.md @@ -8,11 +8,11 @@ documentation: UG # Mail merge options in Word Library -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class allows you to customize the Mail merge process with the following options. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class allows you to customize the mail merge process with the following options. ## Field Mapping -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class can automatically **maps the merge field names with data source column names** during Mail merge process. You can also customize the field mapping when the merge field names in the template document varies with the column names in the data source by using [MappedFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_MappedFields) collection. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class can automatically **map the merge field names with data source column names** during mail merge process. You can also customize the field mapping when the merge field names in the template document vary with the column names in the data source by using [MappedFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_MappedFields) collection. The following code example shows how to add mapping when a merge field name in a document and column name in data source have different names. @@ -132,29 +132,29 @@ The following code example shows how to retrieve the merge field names for a spe {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Retrieve-merge-field-names/.NET/Retrieve-merge-field-names/Program.cs" %} -//Gets the fields from the specified groups. +//Gets the fields from the specified group. string[] fieldNames = document.MailMerge.GetMergeFieldNames(groupName); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} -//Gets the fields from the specified groups +//Gets the fields from the specified group string[] fieldNames = document.MailMerge.GetMergeFieldNames(groupName); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -'Gets the fields from the specified groups +'Gets the fields from the specified group Dim fieldNames As String() = document.MailMerge.GetMergeFieldNames(groupName) {% endhighlight %} {% endtabs %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Mail-Merge/Retrieve-merge-field-names). +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Mail-Merge/Retrieve-merge-field-names). This sample demonstrates all three methods shown above (`GetMergeFieldNames`, `GetMergeGroupNames`, and `GetMergeFieldNames(groupName)`). ## Remove empty paragraphs -You can remove the empty paragraphs when the paragraph has only a merge field item, without any data during Mail merge process. +You can remove the empty paragraphs when the paragraph has only a merge field item, without any data during mail merge process. -The following code example shows how to remove the empty paragraphs during Mail merge process. +The following code example shows how to remove the empty paragraphs during mail merge process. {% tabs %} @@ -215,15 +215,15 @@ Essential® DocIO removes or keeps the unmerged merge fields in th When a merge field is considered as unmerged during mail merge process? -1. The merge field doesn't have mapping field in data source. +1. The merge field doesn't have a mapping field in data source. -2. The merge field has mapping field in data source, but the data is null or string.Empty. +2. The merge field has a mapping field in data source, but the data is null or string.Empty. -Mail merge operation automatically removes the unmerged merge fields since the default value of [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property is true. +The mail merge operation automatically removes the unmerged merge fields since the default value of the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property is true. T> 1. Set [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property to false before the mail merge execution statement if your requirement is to keep the unmerged merge fields in the output document. T> 2. Modify the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property before each mail merge execution statement while performing multiple mail merge executions if your requirement is to remove the unmerged merge fields in one mail merge execution and keep the unmerged merge fields in another mail merge execution. -T> 3. Order the mail merge executions with the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property false as first to avoid removal merge fields that are required for next mail merge execution in the same document. +T> 3. Order the mail merge executions with the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property false as first to avoid removal of merge fields that are required for next mail merge execution in the same document. T> 4. You can get the unmerged fields in your document, customize the mail merge process using the BeforeClearField Event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). The following code example shows how to keep the unmerged merge fields in the generated Word document. @@ -234,7 +234,7 @@ The following code example shows how to keep the unmerged merge fields in the ge //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -//Sets “ClearFields” to true to remove empty mail merge fields from document +//Sets “ClearFields” to false to keep the unmerged mail merge fields in document document.MailMerge.ClearFields = false; string[] fieldNames = new string[] { "EmployeeId", "Phone", "City" }; string[] fieldValues = new string[] { "1001", "+91-9999999999", "London" }; @@ -250,7 +250,7 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Sets “ClearFields” to true to remove empty mail merge fields from document +//Sets “ClearFields” to false to keep the unmerged mail merge fields in document document.MailMerge.ClearFields = false; string[] fieldNames = new string[] { "EmployeeId", "Phone", "City" }; string[] fieldValues = new string[] { "1001", "+91-9999999999", "London" }; @@ -264,7 +264,7 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As New WordDocument("Template.docx") -'Sets “ClearFields” to true to remove empty mail merge fields from document +'Sets “ClearFields” to false to keep the unmerged mail merge fields in document document.MailMerge.ClearFields = False Dim fieldNames As String() = New String() {"EmployeeId", "Phone", "City"} Dim fieldValues As String() = New String() {"1001", "+91-9999999999", "London"} @@ -281,7 +281,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Remove empty group -You can remove the empty merge field groups which contains unmerged merge fields after executing mail merge for a group in a Word document. +You can remove the empty merge field groups which contain unmerged merge fields after executing mail merge for a group in a Word document. The following code example shows how to remove empty merge field group during mail merge process in a Word document. @@ -544,15 +544,15 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Restart numbering in lists -You can restart the list numbering for each records while performing mail merge for a group in Word document. +You can restart the list numbering for each record while performing mail merge for a group in Word document (https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.ImportOptions.html). -The following code example shows how to restart the list numbering in a Word documents while performing mail merge. +The following code example shows how to restart the list numbering in a Word document while performing mail merge. {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Restart-list-numbering-in-mail-merge/.NET/Restart-list-numbering-in-mail-merge/Program.cs" %} //Loads an existing Word document -FileStream fileStream = new FileStream("Template.docx", FileMode.Open); +FileStream fileStream = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStream, FormatType.Docx); //Sets ImportOptions to restart the list numbering document.ImportOptions = ImportOptions.ListRestartNumbering; @@ -583,7 +583,7 @@ employeeList.Add(new Employee("101", "Nancy Davolio", "Seattle, WA, USA")); employeeList.Add(new Employee("102", "Andrew Fuller", "Tacoma, WA, USA")); employeeList.Add(new Employee("103", "Janet Leverling", "Kirkland, WA, USA")); //Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection -MailMergeDataTable dataTable = new MailMergeDataTable("Employee", employeeList); +MailMergeDataTable dataTable = new MailMergeDataTable("Employees", employeeList); //Performs mail merge document.MailMerge.ExecuteGroup(dataTable); //Saves the Word document @@ -603,7 +603,7 @@ employeeList.Add(New Employee("101", "Nancy Davolio", "Seattle, WA, USA")) employeeList.Add(New Employee("102", "Andrew Fuller", "Tacoma, WA, USA")) employeeList.Add(New Employee("103", "Janet Leverling", "Kirkland, WA, USA")) 'Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection -Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Employee", employeeList) +Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Employees", employeeList) 'Performs mail merge document.MailMerge.ExecuteGroup(dataTable) 'Saves the Word document @@ -774,7 +774,7 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document -Dim document As WordDocument = New WordDocument("Data/Template.docx") +Dim document As WordDocument = New WordDocument("Template.docx") 'Creates a data table Dim table As DataTable = New DataTable("CompatibleVersions") table.Columns.Add("WordVersion") @@ -867,7 +867,7 @@ document.Close() {% endtabs %} -The following code example shows how to skip merging particular image during mail merge process using MergeImageFieldEventHandler. +The following code example shows how to skip merging particular image during mail merge process using [MergeImageFieldEventHandler](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html). For details on the event arguments, see [MergeImageFieldEventArgs](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventArgs.html) (members: `Skip`, `FieldName`, `FieldValue`, `ImageStream`, `ImageFileName`, `Picture`). {% tabs %} @@ -876,7 +876,10 @@ private void MergeEmployeePhoto(object sender, MergeImageFieldEventArgs args) { //Skip to merge particular image if (args.FieldName == "Andrew") + { args.Skip = true; + return; + } //Sets image string ProductFileName = args.FieldValue.ToString(); FileStream imageStream = new FileStream(ProductFileName, FileMode.Open, FileAccess.Read); @@ -892,7 +895,10 @@ private void MergeEmployeePhoto(object sender, MergeImageFieldEventArgs args) { //Skip to merge particular image if (args.FieldName == "Andrew") + { args.Skip = true; + return; + } //Sets image args.ImageFileName = args.FieldValue.ToString(); } @@ -903,6 +909,7 @@ Private Sub MergeEmployeePhoto(ByVal sender As Object, ByVal args As MergeImageF 'Skip to merge particular image If args.FieldName = "Andrew" Then args.Skip = True + Return End If 'Sets image Dim ProductFileName As String = args.FieldValue.ToString() @@ -920,6 +927,8 @@ You can start a new page for each group of records while performing a mail merge The following code example illustrates how to start a new page for each group of records during the mail merge process. +N> The `GetInvoice` helper method and the `Invoice`, `Orders`, `Order`, and `OrderTotals` classes used by this snippet are shown below the tabs. + {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Start-at-new-page/.NET/Start-at-new-page/Program.cs" %} @@ -1105,7 +1114,7 @@ Public Function GetInvoice() As List(Of Invoice) invoices.Add(New Invoice(orders, order, orderTotals)) orders = New List(Of Orders)() - orders.Add(New Orders("10250", "Hanari Carnes", "Rua do Paço, 67", "Rio de Janeiro", "05454-876", "Brazil", "VINET", "Rua do Paço, "1996-07-04T00:00:00-04:00", "1996-08-01T00:00:00-04:00", "1996-07-16T00:00:00-04:00", "United Package")) + orders.Add(New Orders("10250", "Hanari Carnes", "Rua do Paço, 67", "Rio de Janeiro", "05454-876", "Brazil", "VINET", "Rua do Paço, 67", "51100", "Rio de Janeiro", "Brazil", "Margaret Peacock", "Hanari Carnes", "1996-07-04T00:00:00-04:00", "1996-08-01T00:00:00-04:00", "1996-07-16T00:00:00-04:00", "United Package")) order = New List(Of Order)() order.Add(New Order("65", "Louisiana Fiery Hot Pepper Sauce", "16.8", "15", "0.15", "214.2")) @@ -2020,7 +2029,7 @@ By executing the above code example, it generates the resultant Word document as ![Output Word document of start at new page](../mailmerge_images/generated-word-document-in-file-formats.png) -N> This [StartAtNewPage](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_StartAtNewPage) property is valid for group mail merge and also that the corresponding group start and group end should be present in the text body of the Word document. This [StartAtNewPage](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_StartAtNewPage) property is not valid when the group start and group end are present in the table, headers, and footers. +N> The [StartAtNewPage](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_StartAtNewPage) property is valid only for group mail merge where the group start and group end are present in the text body of the Word document. It is not valid when the group start and group end are present inside a table, header, or footer. ## Remove mail merge settings @@ -2066,7 +2075,7 @@ Dim document As New WordDocument("Template.docx", FormatType.Docx) If document.MailMerge.Settings.HasData Then document.MailMerge.Settings.RemoveData() End If -Saves and closes the Word document instance +'Saves and closes the Word document instance document.Save("Sample.docx", FormatType.Docx) document.Close() {% endhighlight %} @@ -2081,6 +2090,8 @@ You can change the linked **data source file path from a Word mail merge main do The following code example shows how to change the data source file path in the template Word document. +N> The path can be relative or absolute and should point to a file format supported by Microsoft Word for mail merge (for example, `.txt`, `.csv`, `.xls`/`.xlsx`, or `.mdb`). + {% tabs %} {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Change-mail-merge-data-source-path/.NET/Change-mail-merge-data-source-path/Program.cs" %} diff --git a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md index a756e7dde0..a25695e0c0 100644 --- a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md +++ b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md @@ -5,9 +5,9 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Mail merge +# Working with Mail merge in a Word document -Mail merge is a process of merging data from data source to a Word template document. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) class provides support to bind template document and data source. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) instance is replaced with the actual data retrieved from data source for the given merge field name in a template document. +Mail merge is a process of merging data from a data source into a Word template document. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) class provides support to bind template document and data source. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) instance is replaced with the actual data retrieved from the data source for the given merge field name in a template document. ## Supported data sources @@ -16,7 +16,7 @@ The following data sources are supported by Essential® DocIO for - + @@ -98,12 +98,12 @@ The mail merge process involves three documents: 3. **Final merged document**: This resultant document is a combination of the template Word document and the data from data source. -T> 1. You can use conditional fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, when you require intelligent decisions in addition to simple mail merge (replace merge fields with result text). To use conditional fields, execute mail merge and then update fields in the Word document using [UpdateDocumentFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_UpdateDocumentFields) API. -T> 2. You can replace the fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, with its most recent result and **generates the plain Word document** by unlinking the fields. Refer to this [link](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-fields#unlink-fields) for more information. +T> 1. You can use conditional fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, when you require intelligent decisions in addition to simple mail merge (i.e., replacing merge fields with result text). To use conditional fields, execute mail merge and then update fields in the Word document using [UpdateDocumentFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_UpdateDocumentFields) API. +T> 2. You can replace the fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, with its most recent result and convert the field results to static text by unlinking the fields. Refer to this [link](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-fields#unlink-fields) for more information. ### Create Word document template -You can create a template document with merge fields by using any Word editor application, like Microsoft Word. By using Word editor application, you can take the advantage of the visual interface to design unique layout, formatting, and more for your Word document template interactively. +You can create a template document with merge fields by using any Word editor application, like Microsoft Word. By using a Word editor application, you can take the advantage of the visual interface to design unique layout, formatting, and more for your Word document template interactively. The following screenshot shows how to insert a merge field in the Word document by **using the Microsoft Word.** @@ -111,7 +111,7 @@ The following screenshot shows how to insert a merge field in the Word document You need to add a prefix (“Image:”) to the merge field name for merging an image in the place of a merge field. -**For example:** The merge field name should be like “Image:Photo” (<>) +**For example:** The merge field name should be like "Image:Photo" (<>) You can **create Word document template programmatically** by adding merge fields to the Word document using Essential® DocIO. @@ -123,16 +123,20 @@ N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-plat {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Create-merge-field/.NET/Create-merge-field/Program.cs" %} //Creates an instance of a WordDocument -WordDocument document = new WordDocument(); -//Adds a section and a paragraph in the document -document.EnsureMinimal(); -//Appends merge field to the last paragraph. -document.LastParagraph.AppendField("FullName", FieldType.FieldMergeField); -//Saves the Word document to MemoryStream -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document -document.Close(); +using (WordDocument document = new WordDocument()) +{ + //Adds a section and a paragraph in the document + document.EnsureMinimal(); + //Appends merge field to the last paragraph. + document.LastParagraph.AppendField("FullName", FieldType.FieldMergeField); + //Saves the Word document to MemoryStream + using (MemoryStream stream = new MemoryStream()) + { + document.Save(stream, FormatType.Docx); + //Writes the Word document to a file + File.WriteAllBytes("Template.docx", stream.ToArray()); + } +} {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} @@ -171,17 +175,21 @@ The following code example shows how to perform mail merge in above Word documen {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Getting-started-mail-merge/.NET/Getting-started-mail-merge/Program.cs" %} //Opens the template document -FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -string[] fieldNames = new string[] { "FullName" }; -string[] fieldValues = new string[] { "Nancy Davolio" }; -//Performs the mail merge -document.MailMerge.Execute(fieldNames, fieldValues); -//Saves the Word document to MemoryStream -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document -document.Close(); +using (FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite)) +{ + WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); + string[] fieldNames = new string[] { "FullName" }; + string[] fieldValues = new string[] { "Nancy Davolio" }; + //Performs the mail merge + document.MailMerge.Execute(fieldNames, fieldValues); + //Saves the Word document to MemoryStream + using (MemoryStream stream = new MemoryStream()) + { + document.Save(stream, FormatType.Docx); + //Writes the Word document to a file + File.WriteAllBytes("Sample.docx", stream.ToArray()); + } +} {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} @@ -222,15 +230,15 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ## Performing Mail merge for a group -You can perform Mail merge and append multiple records from data source within a specified region to a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-group). +You can perform Mail merge and append multiple records from the data source within a specified region to a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-group). -## Performing Nested Mail merge for group +## Performing Nested Mail merge for a group -You can perform nested Mail merge with relational or hierarchical data source and independent data tables in a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups). +You can perform nested Mail merge with a relational or hierarchical data source and independent data tables in a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups). ## Performing Mail merge with dynamic objects -Essential® DocIO allows you to perform Mail merge with the dynamic objects. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups#mail-merge-with-dynamic-objects). +Essential® DocIO allows you to perform Mail merge with dynamic objects. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups#mail-merge-with-dynamic-objects). ## Performing Mail merge with business objects @@ -242,9 +250,9 @@ Essential® DocIO supports performing nested Mail merge with impli ## Event support for mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO in Mail merge process: +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO in the Mail merge process: -* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html): Occurs when a **Mail merge field** except image Mail merge field is encountered. +* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html): Occurs when a **Mail merge field** except an image Mail merge field is encountered. * [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html): Occurs when an **image Mail merge field** is encountered. @@ -254,19 +262,19 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ### MergeField event -You can customize the merging text during Mail merge process by using the [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergefield-event). +You can customize the merging text during the Mail merge process by using the [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergefield-event). ### MergeImageField event -You can customize the merging image during Mail merge process by using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergeimagefield-event). +You can customize the merging image during the Mail merge process by using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergeimagefield-event). ### BeforeClearField event -You can get the unmerged fields during Mail merge process by using the [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). +You can get the unmerged fields during the Mail merge process by using the [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). ### BeforeClearGroupField event -You can get the unmerged groups during Mail merge process by using the [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforecleargroupfield-event). +You can get the unmerged groups during the Mail merge process by using the [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforecleargroupfield-event). ## Mail merge options @@ -274,7 +282,7 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ### Field mapping -You can automatically map the merge field names with data source column names during Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#field-mapping). +You can automatically map the merge field names with the data source column names during the Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#field-mapping). ### Retrieving the merge field names @@ -282,11 +290,11 @@ You can retrieve the merge field names and also merge field group names in the W ### Removing empty paragraphs -You can remove the empty paragraphs when the paragraph has a merge field item without any data during Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-paragraphs). +You can remove the empty paragraphs when the paragraph has a merge field item without any data during the Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-paragraphs). ### Removing empty merge fields -You can remove or keep the unmerged merge fields in the output document based on the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property on each mail merge execution. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-merge-fields). +You can remove or keep the unmerged merge fields in the output document based on the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property on each mail merge execution. The default value of `ClearFields` is `true`, which removes unmerged merge fields. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-merge-fields). ### Restart numbering in lists From fdfdb3882801053a729476939fdbfe39c7582177 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 11 Aug 2026 21:20:37 +0530 Subject: [PATCH 43/70] Resolved the dotnet spelling error --- .../angular/save-pdf-file/to-box-cloud-file-storage.md | 2 +- .../javascript-es6/save-pdf-file/to-azure-blob-storage.md | 2 +- .../javascript-es6/save-pdf-file/to-box-cloud-file-storage.md | 2 +- .../PDF/PDF-Viewer/react/open-pdf-file/from-one-drive.md | 2 +- .../PDF/PDF-Viewer/react/save-pdf-file/to-azure-blob-storage.md | 2 +- .../PDF-Viewer/react/save-pdf-file/to-box-cloud-file-storage.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-box-cloud-file-storage.md index 837c9eae69..2f91a94f8c 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-box-cloud-file-storage.md @@ -149,7 +149,7 @@ import { LinkAnnotationService, BookmarkViewService, MagnificationService, } ``` -N> Install the Box .NET SDK in the web service project: `dot net add package Box.V2`. +N> Install the Box .NET SDK in the web service project: `dotnet add package Box.V2`. 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 `Angular PDF Viewer` component. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md index 0d76aa6d60..7dedc823fc 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md @@ -74,7 +74,7 @@ function saveDocument() { }; ``` -N> Install the Azure Storage Blob client package for browser use: `npm install @azure/storage-blob`. For server-side operations use `dot net add package Azure.Storage.Blobs`. +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). diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md index b9643469ad..39cfa31260 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md @@ -134,7 +134,7 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> Install the Box .NET SDK in the web service project: `dot net add package Box.V2`. +N> Install the Box .NET SDK in the web service project: `dotnet add package Box.V2`. 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. diff --git a/Document-Processing/PDF/PDF-Viewer/react/open-pdf-file/from-one-drive.md b/Document-Processing/PDF/PDF-Viewer/react/open-pdf-file/from-one-drive.md index 81c89b3f1b..a577db3286 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/open-pdf-file/from-one-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/react/open-pdf-file/from-one-drive.md @@ -185,6 +185,6 @@ N> The following NuGet packages are commonly required by the example and can be * **Microsoft.Extensions.Configuration.FileExtensions** * **Microsoft.Extensions.Configuration.Json** -N> Install packages using the NuGet Package Manager or `dot net` CLI and confirm package versions match target framework compatibility. +N> Install packages using the NuGet Package Manager or `dotnet` CLI and confirm package versions match target framework compatibility. [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/react/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-azure-blob-storage.md index 6d28d832a1..f090606670 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-azure-blob-storage.md @@ -99,7 +99,7 @@ function saveDocument() { } ``` -N> Install the Azure Storage Blob client package for browser use: `npm install @azure/storage-blob`. For server-side operations use `dot net add package Azure.Storage.Blobs`. +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). diff --git a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-box-cloud-file-storage.md index 2b4b985f91..e49aafc72d 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-box-cloud-file-storage.md @@ -150,7 +150,7 @@ root.render(); ``` {% endraw %} -N> Install the Box .NET SDK in the web service project: `dot net add package Box.V2`. +N> Install the Box .NET SDK in the web service project: `dotnet add package Box.V2`. 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 `React PDF Viewer` component. From 24be68f3555e9a7829b1bb0c40a5e092b6673cf7 Mon Sep 17 00:00:00 2001 From: Dharanya Sakthivel Date: Tue, 11 Aug 2026 21:24:37 +0530 Subject: [PATCH 44/70] ES-1042923-UG-Changes --- .../NET/working-with-mail-merge.md | 90 +++++++++---------- 1 file changed, 41 insertions(+), 49 deletions(-) diff --git a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md index a25695e0c0..a756e7dde0 100644 --- a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md +++ b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md @@ -5,9 +5,9 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Mail merge in a Word document +# Working with Mail merge -Mail merge is a process of merging data from a data source into a Word template document. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) class provides support to bind template document and data source. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) instance is replaced with the actual data retrieved from the data source for the given merge field name in a template document. +Mail merge is a process of merging data from data source to a Word template document. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) class provides support to bind template document and data source. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) instance is replaced with the actual data retrieved from data source for the given merge field name in a template document. ## Supported data sources @@ -16,7 +16,7 @@ The following data sources are supported by Essential® DocIO for
      Data Source

      		Examples

      		Sample
      - + @@ -98,12 +98,12 @@ The mail merge process involves three documents: 3. **Final merged document**: This resultant document is a combination of the template Word document and the data from data source. -T> 1. You can use conditional fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, when you require intelligent decisions in addition to simple mail merge (i.e., replacing merge fields with result text). To use conditional fields, execute mail merge and then update fields in the Word document using [UpdateDocumentFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_UpdateDocumentFields) API. -T> 2. You can replace the fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, with its most recent result and convert the field results to static text by unlinking the fields. Refer to this [link](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-fields#unlink-fields) for more information. +T> 1. You can use conditional fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, when you require intelligent decisions in addition to simple mail merge (replace merge fields with result text). To use conditional fields, execute mail merge and then update fields in the Word document using [UpdateDocumentFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_UpdateDocumentFields) API. +T> 2. You can replace the fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, with its most recent result and **generates the plain Word document** by unlinking the fields. Refer to this [link](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-fields#unlink-fields) for more information. ### Create Word document template -You can create a template document with merge fields by using any Word editor application, like Microsoft Word. By using a Word editor application, you can take the advantage of the visual interface to design unique layout, formatting, and more for your Word document template interactively. +You can create a template document with merge fields by using any Word editor application, like Microsoft Word. By using Word editor application, you can take the advantage of the visual interface to design unique layout, formatting, and more for your Word document template interactively. The following screenshot shows how to insert a merge field in the Word document by **using the Microsoft Word.** @@ -111,7 +111,7 @@ The following screenshot shows how to insert a merge field in the Word document You need to add a prefix (“Image:”) to the merge field name for merging an image in the place of a merge field. -**For example:** The merge field name should be like "Image:Photo" (<>) +**For example:** The merge field name should be like “Image:Photo” (<>) You can **create Word document template programmatically** by adding merge fields to the Word document using Essential® DocIO. @@ -123,20 +123,16 @@ N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-plat {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Create-merge-field/.NET/Create-merge-field/Program.cs" %} //Creates an instance of a WordDocument -using (WordDocument document = new WordDocument()) -{ - //Adds a section and a paragraph in the document - document.EnsureMinimal(); - //Appends merge field to the last paragraph. - document.LastParagraph.AppendField("FullName", FieldType.FieldMergeField); - //Saves the Word document to MemoryStream - using (MemoryStream stream = new MemoryStream()) - { - document.Save(stream, FormatType.Docx); - //Writes the Word document to a file - File.WriteAllBytes("Template.docx", stream.ToArray()); - } -} +WordDocument document = new WordDocument(); +//Adds a section and a paragraph in the document +document.EnsureMinimal(); +//Appends merge field to the last paragraph. +document.LastParagraph.AppendField("FullName", FieldType.FieldMergeField); +//Saves the Word document to MemoryStream +MemoryStream stream = new MemoryStream(); +document.Save(stream, FormatType.Docx); +//Closes the Word document +document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} @@ -175,21 +171,17 @@ The following code example shows how to perform mail merge in above Word documen {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Getting-started-mail-merge/.NET/Getting-started-mail-merge/Program.cs" %} //Opens the template document -using (FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite)) -{ - WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); - string[] fieldNames = new string[] { "FullName" }; - string[] fieldValues = new string[] { "Nancy Davolio" }; - //Performs the mail merge - document.MailMerge.Execute(fieldNames, fieldValues); - //Saves the Word document to MemoryStream - using (MemoryStream stream = new MemoryStream()) - { - document.Save(stream, FormatType.Docx); - //Writes the Word document to a file - File.WriteAllBytes("Sample.docx", stream.ToArray()); - } -} +FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); +WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); +string[] fieldNames = new string[] { "FullName" }; +string[] fieldValues = new string[] { "Nancy Davolio" }; +//Performs the mail merge +document.MailMerge.Execute(fieldNames, fieldValues); +//Saves the Word document to MemoryStream +MemoryStream stream = new MemoryStream(); +document.Save(stream, FormatType.Docx); +//Closes the Word document +document.Close(); {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} @@ -230,15 +222,15 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ## Performing Mail merge for a group -You can perform Mail merge and append multiple records from the data source within a specified region to a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-group). +You can perform Mail merge and append multiple records from data source within a specified region to a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-group). -## Performing Nested Mail merge for a group +## Performing Nested Mail merge for group -You can perform nested Mail merge with a relational or hierarchical data source and independent data tables in a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups). +You can perform nested Mail merge with relational or hierarchical data source and independent data tables in a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups). ## Performing Mail merge with dynamic objects -Essential® DocIO allows you to perform Mail merge with dynamic objects. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups#mail-merge-with-dynamic-objects). +Essential® DocIO allows you to perform Mail merge with the dynamic objects. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups#mail-merge-with-dynamic-objects). ## Performing Mail merge with business objects @@ -250,9 +242,9 @@ Essential® DocIO supports performing nested Mail merge with impli ## Event support for mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO in the Mail merge process: +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO in Mail merge process: -* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html): Occurs when a **Mail merge field** except an image Mail merge field is encountered. +* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html): Occurs when a **Mail merge field** except image Mail merge field is encountered. * [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html): Occurs when an **image Mail merge field** is encountered. @@ -262,19 +254,19 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ### MergeField event -You can customize the merging text during the Mail merge process by using the [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergefield-event). +You can customize the merging text during Mail merge process by using the [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergefield-event). ### MergeImageField event -You can customize the merging image during the Mail merge process by using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergeimagefield-event). +You can customize the merging image during Mail merge process by using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergeimagefield-event). ### BeforeClearField event -You can get the unmerged fields during the Mail merge process by using the [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). +You can get the unmerged fields during Mail merge process by using the [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). ### BeforeClearGroupField event -You can get the unmerged groups during the Mail merge process by using the [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforecleargroupfield-event). +You can get the unmerged groups during Mail merge process by using the [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforecleargroupfield-event). ## Mail merge options @@ -282,7 +274,7 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ### Field mapping -You can automatically map the merge field names with the data source column names during the Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#field-mapping). +You can automatically map the merge field names with data source column names during Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#field-mapping). ### Retrieving the merge field names @@ -290,11 +282,11 @@ You can retrieve the merge field names and also merge field group names in the W ### Removing empty paragraphs -You can remove the empty paragraphs when the paragraph has a merge field item without any data during the Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-paragraphs). +You can remove the empty paragraphs when the paragraph has a merge field item without any data during Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-paragraphs). ### Removing empty merge fields -You can remove or keep the unmerged merge fields in the output document based on the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property on each mail merge execution. The default value of `ClearFields` is `true`, which removes unmerged merge fields. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-merge-fields). +You can remove or keep the unmerged merge fields in the output document based on the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property on each mail merge execution. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-merge-fields). ### Restart numbering in lists From 6516eb3e1a339c287427c15601308bec8c6d920a Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 11 Aug 2026 22:50:39 +0530 Subject: [PATCH 45/70] Resolved the heading issue --- .../PDF/PDF-Viewer/javascript-es6/organize-pdf.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md index 9b198e0ec7..11ce5523ec 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md @@ -193,6 +193,6 @@ The following keyboard shortcuts are available at the organize pages dialog. * **Ctrl+Scroll** : Zoom in and zoom out page thumbnails for better visibility. ![Undo and redo controls in organizer](./images/undo-redo.png) -#### Conclusion +### Conclusion 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/typescript-pdf-viewer-examples/tree/master/How%20to/Organize%20pdf) \ No newline at end of file From 706a64310ffb167c5fab3f336b0875ce28efa618 Mon Sep 17 00:00:00 2001 From: Dharanya Sakthivel Date: Wed, 12 Aug 2026 09:09:35 +0530 Subject: [PATCH 46/70] ES-1042923-UG-Changes --- .../mail-merge-for-nested-groups.md | 57 +++++++++---------- 1 file changed, 26 insertions(+), 31 deletions(-) diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md index 40a48c955c..1d35ce169b 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md @@ -6,9 +6,9 @@ control: DocIO documentation: UG --- -# Mail merge for nested groups +# Nested Mail merge for group -You can perform nested mail merge with relational or hierarchical data source and independent data tables in a template document. +You can perform nested Mail merge with relational or hierarchical data source and independent data tables in a template document. The following table illustrates the supported mail merge overloads for ExecuteNestedGroup method. @@ -43,9 +43,9 @@ The following table illustrates the supported mail merge overloads for ExecuteNe ## Create template for nested group mail merge -Nested mail merge operation automatically replaces the merge field with immediate group data. You can also predefine the group data that is populated in a merge field. - -To execute nested mail merge, design your Word document template as follows. +Nested Mail merge operation automatically replaces the merge field with immediate group data. You can also predefine the group data that is populated to a merge field. + +To execute nested mail merge, design your Word document template as follow. ![Word document template for nested groups](../MailMerge_images/file-formats-word-nested-group-mail-merge-template.png) @@ -53,7 +53,7 @@ In this template, Employees is the owner group and it has two child groups Custo ## Execute nested group mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_System_Data_Common_DbConnection_System_Collections_ArrayList_) method to perform mail merge for nested groups or regions in the Word document. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_System_Data_Common_DbConnection_System_Collections_ArrayList_) method to perform Mail merge for nested groups or regions in the Word document. You need to define commands with the table name and expression for linking the multiple data tables **(explicit relation data)** during nested Mail merge process. You can use the “%TableName.ColumnName%” expression for getting the current value of specified column or field from the table. @@ -154,7 +154,7 @@ The resultant document looks as follows. Essential® DocIO allows you to perform Mail merge with the dynamic objects. The [ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0) is like a collection of key and value pairs, which means IDictionary. So, you can also use IDictionary collection instead of [ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0) to execute mail merge. -The following code snippet shows how to perform the mail merge with dynamic objects ([ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject)). +The following code snippet shows how to perform the Mail merge with dynamic objects ([ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0)). {% tabs %} @@ -170,7 +170,7 @@ dataSet.Add(dataTable); dataTable = new MailMergeDataTable("Orders", GetOrders()); dataSet.Add(dataTable); List commands = new List(); -//DictionaryEntry contains "Source table" (key) and "Command" (value) +//DictionaryEntry contain "Source table" (key) and "Command" (value) DictionaryEntry entry = new DictionaryEntry("Customers", string.Empty); commands.Add(entry); //Retrieves the customer details @@ -196,7 +196,7 @@ dataSet.Add(dataTable); dataTable = new MailMergeDataTable("Orders", GetOrders()); dataSet.Add(dataTable); List commands = new List(); -//DictionaryEntry contains "Source table" (key) and "Command" (value) +//DictionaryEntry contain "Source table" (key) and "Command" (value) DictionaryEntry entry = new DictionaryEntry("Customers", string.Empty); commands.Add(entry); //Retrieves the customer details @@ -220,7 +220,7 @@ dataSet.Add(dataTable) dataTable = New MailMergeDataTable("Orders", GetOrders()) dataSet.Add(dataTable) Dim commands As New List(Of DictionaryEntry)() -'DictionaryEntry contains "Source table" (key) and "Command" (value) +'DictionaryEntry contain "Source table" (key) and "Command" (value) Dim entry As New DictionaryEntry("Customers", String.Empty) commands.Add(entry) 'Retrieves the customer details @@ -361,28 +361,23 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Mail merge with implicit relational data -You can perform **nested mail merge with implicit relational data** objects without any explicit relational commands by using the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_Syncfusion_DocIO_DLS_MailMergeDataTable_) overload method. - -DocIO automatically maps child collections to nested groups by matching the property name on the data object to the group name declared in the template (for example, a property named `Departments` on the `Organization` class maps to the `Departments` group region). Ensure property names match the group names used in the template. +You can perform **nested Mail merge with implicit relational data** objects without any explicit relational commands by using the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_Syncfusion_DocIO_DLS_MailMergeDataTable_) overload method. -### Map fields of ancestor groups +### Map the field of ancestor group -You can also merge any field in the nested group by **mapping the field or column of its ancestor group or table** in the data source. To achieve this, add the corresponding group name or table name as a prefix to the merge field name along with the `:` separator. +You can also merge any field in the nested group by **mapping the field or column of its ancestor group or table** in the data source. To achieve this, you need to add a corresponding group name or table name as a prefix to the merge field name along with “:” separator. For example: - * The merge field name should be like `TableName:Id` (<>) - * The merge field name should be like `Image:TableName:Photo` (<>) - -> **NOTE** -> Image merge fields require the merge field to be configured with the `Image:` prefix in the template and the data value to be a byte array or `Image` instance. - -For example, consider that you have a template document as follows. + * The merge field name should be like “TableName:Id” (<>) + * The merge field name should be like “Image:TableName:Photo” (<>) + +For example, consider that you have a template document as follow. ![Word document template to map the fields of ancestor group](../MailMerge_images/file-formats-word-mapping-template.png) -In the above template, Organizations is the owner group and it has two child groups Departments and Employees. The `Supervisor` merge field of the Departments group is used in the Employees group. +In the above template, Organizations is the owner group and it has two child groups Departments and Employees. The Supervisor merge field of Departments group is used in Employees group. -The following code example shows how to perform nested mail merge with the implicit relational data objects. +The following code example shows how to perform nested Mail merge with the implicit relational data objects. {% tabs %} @@ -390,9 +385,9 @@ The following code example shows how to perform nested mail merge with the impli //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -//Gets the organization details as IEnumerable collection +//Gets the organization details as “IEnumerable” collection List organizationList = GetOrganizations(); -//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection +//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection MailMergeDataTable dataTable = new MailMergeDataTable("Organizations", organizationList); //Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable); @@ -406,9 +401,9 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Gets the organization details as IEnumerable collection +//Gets the organization details as “IEnumerable” collection List organizationList = GetOrganizations(); -//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection +//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection MailMergeDataTable dataTable = new MailMergeDataTable("Organizations", organizationList); //Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable); @@ -420,9 +415,9 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As WordDocument = New WordDocument("Template.docx") -'Gets the organization details as IEnumerable collection +'Gets the organization details as “IEnumerable” collection Dim organizationList As List(Of Organization) = GetOrganizations() -'Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection +'Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Organizations", organizationList) 'Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable) @@ -482,7 +477,7 @@ public static List GetOrganizations() {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -Public Shared Function GetOrganizations() As List(Of Organization) +Public Function GetOrganizations() As List(Of Organization) 'Creates Employee details Dim employees As List(Of EmployeeDetails) = New List(Of EmployeeDetails) employees.Add(New EmployeeDetails("Thomas Hardy", "1001", "05/27/1996")) From c8bf5966df7a67c9b79f2cd6d725a311afd76759 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Wed, 12 Aug 2026 10:56:02 +0530 Subject: [PATCH 47/70] Resolved the dotnet spelling issue --- .../PDF-Viewer/javascript-es6/open-pdf-file/from-one-drive.md | 2 +- .../PDF/PDF-Viewer/vue/save-pdf-file/to-azure-blob-storage.md | 2 +- .../PDF-Viewer/vue/save-pdf-file/to-box-cloud-file-storage.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-one-drive.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-one-drive.md index eda93b5dd2..1fd72a4949 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-one-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-one-drive.md @@ -166,6 +166,6 @@ N> Install the following NuGet packages in the server project to use the previou * **Microsoft.Extensions.Configuration.FileExtensions** * **Microsoft.Extensions.Configuration.Json** -You can install these packages using the NuGet Package Manager in Visual Studio or via the `dot net` CLI. +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/vue/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/vue/save-pdf-file/to-azure-blob-storage.md index 3a77aa911b..036431b3e7 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/save-pdf-file/to-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/save-pdf-file/to-azure-blob-storage.md @@ -114,7 +114,7 @@ export default { {% endhighlight %} {% endtabs %} -N> Install the Azure Storage Blob client package for browser use: `npm install @azure/storage-blob`. For server-side operations use `dot net add package Azure.Storage.Blobs`. +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). diff --git a/Document-Processing/PDF/PDF-Viewer/vue/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/vue/save-pdf-file/to-box-cloud-file-storage.md index 23613b4a66..0fa9cfd5d4 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/save-pdf-file/to-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/save-pdf-file/to-box-cloud-file-storage.md @@ -183,7 +183,7 @@ export default { {% endhighlight %} {% endtabs %} -N> Install the Box .NET SDK in the web service project: `dot net add package Box.V2`. +N> Install the Box .NET SDK in the web service project: `dotnet add package Box.V2`. 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 `Vue PDF Viewer` component. From 8d35a87834eee745391da850ee5b47c1e289ce52 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Wed, 12 Aug 2026 10:58:20 +0530 Subject: [PATCH 48/70] 1046916: Updated Video URL properly for Vue 3 --- .../PDF/PDF-Viewer/vue/getting-started-application.md | 6 ++++++ Document-Processing/PDF/PDF-Viewer/vue/getting-started.md | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md index bc47478bc2..300acfcca9 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md @@ -206,6 +206,12 @@ After the application starts, open the URL shown in the terminal (typically `htt > [View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/Getting%20Started%20Vue-3%20-%20Standalone). +## Video tutorial + +To get started quickly with Vue PDF Viewer, you can watch this video: + +{% youtube "https://www.youtube.com/watch?v=17aW6rOoyWQ" %} + ## See also - [Getting Started with Standalone Vue 2 PDF Viewer](./getting-started) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/getting-started.md b/Document-Processing/PDF/PDF-Viewer/vue/getting-started.md index 9cb120b8f6..d8f0e5985d 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/getting-started.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/getting-started.md @@ -160,7 +160,7 @@ You can also explore the PDF Viewer interactively using the live sample below. To get started quickly with Vue PDF Viewer, you can watch this video: -{% youtube "https://www.youtube.com/watch?v=17aW6rOoyWQ" %} +{% youtube "https://www.youtube.com/watch?v=wCGPrGahcJg" %} ## See also From 59d642d1f847f608da662a80b80c986ed59f7bcb Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Wed, 12 Aug 2026 11:00:56 +0530 Subject: [PATCH 49/70] 1044353: Resolved CI Failures --- .../PDF-Viewer/javascript-es5/annotations/annotation-event.md | 1 + 1 file changed, 1 insertion(+) 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 22e897ce0b..369cf0e769 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 @@ -32,6 +32,7 @@ This page documents annotation-related events for the JavaScript PDF Viewer and | [`signatureSelect`](#signatureselect) | Triggers when a signature is selected on a page in the PDF document. | | [`signatureUnselect`](#signatureunselect) | Triggers when a signature is unselected on a page in the PDF document. | +## Events ### annotationAdd From 41ed66664529f03122f203d2786a86eb9a1a51cc Mon Sep 17 00:00:00 2001 From: Dhanush Sugumaran Date: Wed, 12 Aug 2026 12:56:03 +0530 Subject: [PATCH 50/70] Task(1045705): Removed the mobile toolbar link from the TOC HTML page. --- Document-Processing-toc.html | 1 - 1 file changed, 1 deletion(-) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 711c34d46c..1c3e3aa957 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -1684,7 +1684,6 @@
    • Accessibility
      • -
    • Mobile Toolbar Interface
    • Toolbar Customization
      • Primary Toolbar
        • From f9ee7657abe089bc42dc814b1ac94a22a524391b Mon Sep 17 00:00:00 2001 From: ATCHAYASEKAR-SF4414 Date: Wed, 12 Aug 2026 16:27:05 +0530 Subject: [PATCH 51/70] added the split presentation documentation --- .../Working-with-PowerPoint-presentation.md | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) diff --git a/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-PowerPoint-presentation.md b/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-PowerPoint-presentation.md index bdc2e0c1a0..f49cc53481 100644 --- a/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-PowerPoint-presentation.md +++ b/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-PowerPoint-presentation.md @@ -76,6 +76,82 @@ clonedPresentation_1.Save("ClonedPresentation.pptx") You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/PowerPoint-Examples/tree/master/PowerPoint-Presentation/Clone-PowerPoint-presentation/.NET). +## Splitting a PowerPoint Presentation + +Splitting a PowerPoint presentation separates the slides from different sections into individual presentation files. This is useful when you want to organize slides by sections and create independent presentations for each section. The split operation clones the slides from each section and saves them as separate PPTX documents. + +The following code example demonstrates how to split a PowerPoint presentation by sections: + +{% tabs %} + +{% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/PowerPoint-Examples/master/PowerPoint-Presentation/Split-PowerPoint-presentation/.NET/Split-PowerPoint-presentation/Program.cs" %} +//Opens the source PPTX document +IPresentation sourcePptx = Presentation.Open(Path.GetFullPath(@"Data/Template.pptx")); +//Iterates through each section +foreach (ISection section in sourcePptx.Sections) +{ + //Creates a destination PPTX document. Existing presentations can also be used here + IPresentation destinationPptx = Presentation.Create(); + //Clones the slides from the section and moves to new PPTX document + foreach (ISlide slide in section.Slides) + { + destinationPptx.Slides.Add(slide.Clone(), PasteOptions.SourceFormatting, sourcePptx); + } + //Saves the destination PPTX document + string outputPath = Path.Combine(Path.GetFullPath("Output"), section.Name + "_Slides.pptx"); + destinationPptx.Save(outputPath); + destinationPptx.Close(); +} +//Closes the PPTX document +sourcePptx.Close(); +{% endhighlight %} + +{% highlight c# tabtitle="C# [Windows-specific]" %} +//Opens the source PPTX document +IPresentation sourcePptx = Presentation.Open(fileName); +//Iterates through each section +foreach (ISection section in sourcePptx.Sections) +{ + //Creates a destination PPTX document. Existing presentations can also be used here + IPresentation destinationPptx = Presentation.Create(); + //Clones the slides from the section and moves to new PPTX document + foreach (ISlide slide in section.Slides) + { + destinationPptx.Slides.Add(slide.Clone(), PasteOptions.SourceFormatting, sourcePptx); + } + //Saves the destination PPTX document + string outputPath = Path.Combine("Output", section.Name + "_Slides.pptx"); + destinationPptx.Save(outputPath); + destinationPptx.Close(); +} +//Closes the PPTX document +sourcePptx.Close(); +{% endhighlight %} + +{% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} +'Opens the source PPTX document +Dim sourcePptx As IPresentation = Presentation.Open(fileName) +'Iterates through each section +For Each section As ISection In sourcePptx.Sections + 'Creates a destination PPTX document. Existing presentations can also be used here + Dim destinationPptx As IPresentation = Presentation.Create() + 'Clones the slides from the section and moves to new PPTX document + For Each slide As ISlide In section.Slides + destinationPptx.Slides.Add(slide.Clone(), PasteOptions.SourceFormatting, sourcePptx) + Next + 'Saves the destination PPTX document + Dim outputPath As String = Path.Combine("Output", section.Name + "_Slides.pptx") + destinationPptx.Save(outputPath) + destinationPptx.Close() +Next +'Closes the PPTX document +sourcePptx.Close() +{% endhighlight %} + +{% endtabs %} + +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/PowerPoint-Examples/tree/master/PowerPoint-Presentation/Split-PowerPoint-presentation/.NET). + ## Printing a PowerPoint Presentation You can print the Presentation document by converting the PowerPoint presentation slides to images. For more information about converting the PowerPoint presentation slides to images, see [Conversion](/document-processing/powerpoint/powerpoint-library/net/getting-started). You can use the System.Drawing.Printing.[PrintDocument](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.printing.printdocument?redirectedfrom=MSDN&view=dotnet-plat-ext-7.0) class to print the converted images by the default printer or to any of the available printer with customized settings. From f4e146540b21a3f8f396f114dceb728d00359ecf Mon Sep 17 00:00:00 2001 From: ATCHAYASEKAR-SF4414 Date: Wed, 12 Aug 2026 16:43:46 +0530 Subject: [PATCH 52/70] added proper hyperlink --- .../NET/Working-with-PowerPoint-presentation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-PowerPoint-presentation.md b/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-PowerPoint-presentation.md index f49cc53481..c195047d99 100644 --- a/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-PowerPoint-presentation.md +++ b/Document-Processing/PowerPoint/PowerPoint-Library/NET/Working-with-PowerPoint-presentation.md @@ -150,7 +150,7 @@ sourcePptx.Close() {% endtabs %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/PowerPoint-Examples/tree/master/PowerPoint-Presentation/Split-PowerPoint-presentation/.NET). +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/PowerPoint-Examples/tree/master/Sections/Split-PowerPoint-by-Sections/.NET). ## Printing a PowerPoint Presentation From c3cfb17826de53344120803e49f7d415aec58c86 Mon Sep 17 00:00:00 2001 From: ATCHAYASEKAR-SF4414 Date: Wed, 12 Aug 2026 17:55:18 +0530 Subject: [PATCH 53/70] updated the merge markdown code --- .../NET/Working-with-Markdown-document.md | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/Document-Processing/Markdown/Markdown-Library/NET/Working-with-Markdown-document.md b/Document-Processing/Markdown/Markdown-Library/NET/Working-with-Markdown-document.md index 0c5d28f96b..b6a99c997a 100644 --- a/Document-Processing/Markdown/Markdown-Library/NET/Working-with-Markdown-document.md +++ b/Document-Processing/Markdown/Markdown-Library/NET/Working-with-Markdown-document.md @@ -44,45 +44,47 @@ End Using A complete working sample is available on [GitHub](https://github.com/SyncfusionExamples/Markdown-Examples/tree/master/Working-with-Markdown-document/Clone-whole-Markdown-document/.NET). -You can also create a deep copy of Markdown document elements such as paragraphs, headings, blockquotes, code blocks, lists, tables, images, and more. The following code example illustrates how to clone blocks of a Markdown document and save each cloned blocks as a separate Markdown document. +## Merging Markdown Documents + +You can merge multiple Markdown documents by combining blocks from a source document into a destination document. This is useful when you want to consolidate content from multiple Markdown files into one unified document. The merge operation allows you to clone and add blocks from a source document to a destination document while preserving the formatting and structure of both documents. + +The following code example demonstrates how to merge two Markdown documents: {% tabs %} {% highlight c# tabtitle="C#" %} -//Opens an existing Markdown document -MarkdownDocument sourceDocument = new MarkdownDocument("Input.md"); +//Opens an existing Markdown documents +MarkdownDocument sourceDocument = new MarkdownDocument(Path.GetFullPath("Data/SourceDocument.md")); +MarkdownDocument destinationDocument = new MarkdownDocument(Path.GetFullPath("Data/DestinationDocument.md")); //Processes each blocks in the Markdown document for (int i = 0; i < sourceDocument.Blocks.Count; i++) { - //Creates new MarkdownDocument instance to add cloned section - MarkdownDocument destinationDocument = new MarkdownDocument(); //Clones and adds source document Blocks to the destination document destinationDocument.Blocks.Add((IMdBlock)sourceDocument.Blocks[i].Clone()); - //Saves and closes the document instance - destinationDocument.Save("Block_" + i + ".md"); - destinationDocument.Dispose(); } +//Saves and closes the document instance +destinationDocument.Save(Path.GetFullPath("Output/MergedDocument.md")); +destinationDocument.Dispose(); //Closes the source document instance sourceDocument.Dispose(); {% endhighlight %} {% highlight vb.net tabtitle="VB.NET" %} -'Opens an existing Markdown document -Dim sourceDocument As MarkdownDocument = New MarkdownDocument("Input.md") +'Opens an existing Markdown documents +Dim sourceDocument As MarkdownDocument = New MarkdownDocument(Path.GetFullPath("Data/SourceDocument.md")) +Dim destinationDocument As MarkdownDocument = New MarkdownDocument(Path.GetFullPath("Data/DestinationDocument.md")) 'Processes each blocks in the Markdown document For i As Integer = 0 To sourceDocument.Blocks.Count - 1 - 'Creates new MarkdownDocument instance to add cloned section - Dim destinationDocument As New MarkdownDocument() 'Clones and adds source document Blocks to the destination document destinationDocument.Blocks.Add(CType(sourceDocument.Blocks(i).Clone(), IMdBlock)) - 'Saves and closes the document instance - destinationDocument.Save("Block_" + i + ".md") - destinationDocument.Dispose() Next +'Saves and closes the document instance +destinationDocument.Save(Path.GetFullPath("Output/MergedDocument.md")) +destinationDocument.Dispose() 'Closes the source document instance sourceDocument.Dispose() {% endhighlight %} {% endtabs %} -A complete working sample is available on [GitHub](https://github.com/SyncfusionExamples/Markdown-Examples/tree/master/Working-with-Markdown-document/Split-by-blocks/.NET). \ No newline at end of file +A complete working sample is available on [GitHub](https://github.com/SyncfusionExamples/Markdown-Examples/tree/master/Working-with-Markdown-document/Merge-Markdown/.NET). \ No newline at end of file From df87ada035131c748e270d0e263d246c573d2ac4 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Thu, 13 Aug 2026 11:47:28 +0530 Subject: [PATCH 54/70] 1046071: Updated Development changes to Hot-fix --- .../interactive-pdf-navigation/bookmark.md | 10 +-- .../interactive-pdf-navigation/hyperlink.md | 13 ++-- .../page-thumbnail.md | 4 +- .../interactive-pdf-navigation/page.md | 12 ++-- .../open-pdf-file/from-amazon-s3.md | 11 ++-- .../from-azure-active-directory.md | 18 +++--- .../open-pdf-file/from-azure-blob-storage.md | 13 ++-- .../from-box-cloud-file-storage.md | 7 +- .../from-google-cloud-storage.md | 9 ++- .../open-pdf-file/from-google-drive.md | 7 +- .../asp-net-mvc/organize-pages/events.md | 14 ++-- .../organize-pages/extract-pages.md | 2 - .../asp-net-mvc/organize-pages/mobile-view.md | 2 +- .../organize-pages/programmatic-support.md | 4 +- .../asp-net-mvc/organize-pages/toolbar.md | 64 +++++++++++++++++-- 15 files changed, 116 insertions(+), 74 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/bookmark.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/bookmark.md index 446d95f999..dbe8913eb6 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/bookmark.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/bookmark.md @@ -10,7 +10,7 @@ documentation: ug # Bookmark navigation in ASP.NET MVC 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., +You can enable/disable bookmark navigation by using the following code snippet: {% tabs %} {% highlight html tabtitle="Standalone" %} @@ -38,7 +38,7 @@ Here is an example of how to use the **goToBookmark** method: {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - +
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() @@ -54,7 +54,7 @@ Here is an example of how to use the **goToBookmark** method: {% endhighlight %} {% highlight cshtml tabtitle="Server-Backed" %} - +
        @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() @@ -70,9 +70,9 @@ Here is an example of how to use the **goToBookmark** method: {% endhighlight %} {% endtabs %} -x - Specifies the pageIndex for Navigate. +x - Specifies the page index to navigate to. -y - Specifies the Y coordinates value of the Page. +y - Specifies the Y coordinate value of the page. 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. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/hyperlink.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/hyperlink.md index 847f93bea0..61f01b21e4 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/hyperlink.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/hyperlink.md @@ -23,13 +23,13 @@ Use the table of contents to quickly navigate to headings and sections defined i ![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. ![Hyperlink Navigation in PDF Viewer](../images/link.png) -### Enabling and Disabling Hyperlinks +### 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. @@ -45,21 +45,22 @@ The following example demonstrates how to disable hyperlink navigation: {% highlight html tabtitle="Standalone" %} ```html
        - @Html.EJS().PdfViewer("pdfviewer").EnableHyperlink(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() + @Html.EJS().PdfViewer("pdfviewer").EnableHyperlink(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
        ``` {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} ```html
        - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableHyperlink(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableHyperlink(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
        ``` {% endhighlight %} {% endtabs %} > Note: Disabling hyperlinks only affects the viewer's behavior and does not alter the original PDF document. -### Controlling Link Behavior + +### Controlling link behavior The `hyperlinkOpenState` property determines how external URLs are opened when a hyperlink is clicked. @@ -88,7 +89,7 @@ The following example configures hyperlinks to open in a new tab: {% endhighlight %} {% endtabs %} -### Handling Hyperlink Events +### Handling hyperlink events The PDF Viewer exposes events that allow for monitoring and customizing hyperlink interactions. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page-thumbnail.md index d1f8492931..c334570eac 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page-thumbnail.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page-thumbnail.md @@ -1,6 +1,6 @@ --- layout: post -title: Thumbnail Navigation in ASP.NET Core PDF Viewer control | Syncfusion +title: Thumbnail Navigation in ASP.NET MVC PDF Viewer control | Syncfusion description: Discover how to navigate PDF pages using thumbnails in the Syncfusion ASP.NET MVC PDF Viewer control for a visual and intuitive experience. platform: document-processing control: PDF Viewer @@ -10,7 +10,7 @@ documentation: ug # Page Thumbnail navigation 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., +You can enable/disable thumbnail navigation by using the following code snippet: {% tabs %} {% highlight html tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page.md index 9ecf61a8cd..a131701f08 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page.md @@ -7,21 +7,21 @@ control: PDF Viewer documentation: ug --- -# Navigation in ASP.NET MVC PDF Viewer control +# Page navigation in ASP.NET MVC PDF Viewer The ASP.NET MVC PDF Viewer supports different internal and external navigations. ## Toolbar page navigation option -The default toolbar of PDF Viewer contains the following navigation options +The default toolbar of PDF Viewer contains the following navigation options: * **Go to page** :- Navigates to the specific page of a PDF document. -* **Show next page** :- Navigates to the next page of PDF a document. +* **Show next page** :- Navigates to the next page of a PDF document. * **Show previous page** :- Navigates to the previous page of a PDF document. * **Show first page** :- Navigates to the first page of a PDF document. * **Show last page** :- Navigates to the last page of a PDF document. -You can enable/disable page navigation option in PDF Viewer using the following code snippet., +You can enable/disable page navigation option in PDF Viewer using the following code snippet: {% tabs %} {% highlight html tabtitle="Standalone" %} @@ -48,7 +48,7 @@ Also, you can programmatically perform page navigation options as follows. {% highlight cshtml tabtitle="Standalone" %} - + @@ -84,7 +84,7 @@ Also, you can programmatically perform page navigation options as follows. {% highlight cshtml tabtitle="Server-Backed" %} - + diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md index c1a4036095..3f46f871cb 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md @@ -4,11 +4,10 @@ title: Open PDF from AWS S3 in ASP.NET MVC PDF Viewer | Syncfusion description: Learn how to load PDFs from AWS S3 in the Syncfusion ASP.NET MVC PDF Viewer component using standalone and server-backed approaches. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- -# Open PDF from AWS S3 +# Open PDF from AWS S3 in ASP.NET MVC The ASP.NET MVC PDF Viewer component supports loading PDF files from AWS S3 using either the standalone or the server-backed PDF Viewer. The following steps demonstrate both approaches. @@ -18,7 +17,7 @@ Follow these steps to load a PDF from AWS S3 in the standalone PDF Viewer. **Step 1:** Create AWS S3 account - Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. +Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. **Step 2:** Create PDF Viewer Sample in ASP.NET MVC @@ -53,7 +52,7 @@ AWS.config.update({ }); ``` -2. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then Uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion® PDF Viewer then load Base64 string generated into the viewer.load method. +2. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion® PDF Viewer using the viewer.load 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. @@ -94,7 +93,7 @@ Follow these steps to load a PDF from AWS S3 using the server-backed PDF Viewer. **Step 1:** Create AWS S3 account - Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. +Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. **Step 2:** Create PDF Viewer Sample in ASP.NET MVC @@ -114,7 +113,7 @@ using Amazon.S3.Model; 2. Modify the `Load()` method to load the PDF files from AWS S3. ```csharp - private readonly string _accessKey = "Your Access Key from AWS S35"; + private readonly string _accessKey = "Your Access Key from AWS S3"; private readonly string _secretKey = "Your Secret Key from AWS S3"; private readonly string _bucketName = "Your Bucket name from AWS S3"; diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md index ab5a0eb010..87fd48c1ea 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md @@ -1,14 +1,13 @@ --- layout: post -title: Open PDF from Azure Active Directory in ASP.NET MVC PDF Viewer | Syncfusion +title: Open PDF from Azure Active Directory in MVC PDF Viewer | Syncfusion description: Learn how to load and save PDFs using Azure Active Directory (AAD) with the Syncfusion ASP.NET MVC PDF Viewer component. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- -# Open PDF from Azure Active Directory +# Open PDF from Azure Active Directory in ASP.NET MVC ### Overview @@ -135,13 +134,12 @@ public async Task SaveToAAD(jsonObjects responseData) {% endhighlight %} {% endtabs %} -3. Configure server-side code: - - Open the server-side application (e.g., ASP.NET MVC) 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). +3. Configure the server-side code with the following values in `HomeController.cs`: + - `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). 4. Add the following code snippet in `Index.cshtml`. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md index 9e060bcbb9..c250a174b7 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md @@ -1,14 +1,13 @@ --- layout: post -title: Open PDF from Azure Blob Storage in ASP.NET MVC PDF Viewer | Syncfusion +title: Open PDF from Azure Blob Storage in MVC PDF Viewer | Syncfusion description: Learn how to load PDFs from Azure Blob Storage in the Syncfusion ASP.NET MVC PDF Viewer component using standalone and server-backed approaches. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- -# Open PDF from Azure Blob Storage +# Open PDF from Azure Blob Storage in ASP.NET MVC The ASP.NET MVC PDF Viewer component supports loading PDF files from Azure Blob Storage using either the standalone or the server-backed PDF Viewer. The following steps demonstrate both approaches. @@ -18,7 +17,7 @@ Follow these steps to load a PDF from Azure Blob Storage in the standalone PDF V **Step 1:** Create the Azure Blob Storage account -Log in to the Azure Portal. Create a new Storage Account with preferred settings. Note access keys during the setup. Within the Storage Account, create a Blob Container following the steps in this [link](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal). +Log in to the Azure Portal. Create a new Storage Account with preferred settings. Note the access keys during the setup. Within the Storage Account, create a Blob Container following the steps in this [link](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal). **Step 2:** Create PDF Viewer Sample in ASP.NET MVC @@ -28,7 +27,7 @@ Follow instructions provided in the Syncfusion® 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. +N> Replace **Your account name in Azure** with the actual account name for your Azure Blob Storage account, **Your container name in Azure** with the actual container name, and **Your Blob name in Azure** with the actual blob name. ```csharp var accountName = "*Your account name in Azure*"; @@ -36,7 +35,7 @@ var containerName = "*Your container name in Azure*"; var blobName = "*Your Blob name in Azure*"; ``` -2. Constructs the URL to the PDF in Azure Blob Storage. Calls fetchAndConvertToBase64 to fetch the PDF and convert it to a base64 string. Then Loads the base64 string into the PDF Viewer. +2. Constructs the URL to the PDF in Azure Blob Storage. Calls fetchAndConvertToBase64 to fetch the PDF and convert it to a base64 string. Then loads the base64 string into the PDF Viewer. ```csharp function loadDocument() { @@ -103,7 +102,7 @@ Follow these steps to load a PDF from Azure Blob Storage using the server-backed **Step 1:** Create the Azure Blob Storage account -Log in to the Azure Portal. Create a new Storage Account with preferred settings. Note access keys during the setup. Within the Storage Account, create a Blob Container following the steps in this [link](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal). +Log in to the Azure Portal. Create a new Storage Account with preferred settings. Note the access keys during the setup. Within the Storage Account, create a Blob Container following the steps in this [link](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal). **Step 2:** Create PDF Viewer Sample in ASP.NET MVC diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-box-cloud-file-storage.md index 33600c7da9..c1113326f7 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-box-cloud-file-storage.md @@ -4,7 +4,6 @@ title: Open PDF from Box cloud storage in ASP.NET MVC PDF Viewer | Syncfusion description: Learn how to load PDFs from Box cloud storage in the Syncfusion ASP.NET MVC PDF Viewer component using a server-backed approach. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- @@ -14,7 +13,7 @@ Follow these steps to load a PDF from Box cloud storage using the server-backed **Step 1:** Set up a Box developer account and create a Box application -To access Box storage programmatically, you'll need a developer account with Box. Go to the [Box Developer Console](https://developer.box.com/), sign in or create a new account, and then create a new Box application. This application will provide you with the necessary credentials Client ID and Client Secret to authenticate and access Box APIs. Before accessing files, you need to authenticate your application to access your Box account. Box API supports `OAuth 2.0 authentication` for this purpose. +To access Box storage programmatically, you'll need a developer account with Box. Go to the [Box Developer Console](https://developer.box.com/), sign in or create a new account, and then create a new Box application. This application will provide you with the necessary credentials: Client ID and Client Secret to authenticate and access Box APIs. Before accessing files, you need to authenticate your application to access your Box account. Box API supports `OAuth 2.0 authentication` for this purpose. **Step 2:** Create a PDF Viewer sample in ASP.NET MVC @@ -85,7 +84,7 @@ using Box.V2.Models; } ``` -N> replace **Your_Box_Storage_Access_Token** with your actual box access token, and **Your_Folder_ID** with the ID of the folder in your box storage where you want to perform specific operations. Remember to use your valid box API credentials, as **Your_Box_Storage_ClientID** and **Your_Box_Storage_ClientSecret"** are placeholders for your application's API key and secret. +N> Replace **Your_Box_Storage_Access_Token** with your actual Box access token, and **Your_Folder_ID** with the ID of the folder in your Box storage where you want to perform specific operations. Use your valid Box API credentials; **Your_Box_Storage_ClientID** and **Your_Box_Storage_ClientSecret** are placeholders for your application's API key and secret. **Step 4:** Configure the PDF Viewer component @@ -106,6 +105,6 @@ Set the [serviceUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2 ``` N> The **Box.V2.Core** NuGet package must be installed in your application to use the previous code example. -N> Replace `PDF_Succinctly.pdf` with the actual document name that you want to load from Box cloud file storage. Make sure to 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 that you want to load from Box cloud file storage. Make sure to pass the document name from the Box folder to the `documentPath` property of the 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/asp-net-mvc/open-pdf-file/from-google-cloud-storage.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-cloud-storage.md index 15de42eaf7..da9530f366 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-cloud-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-cloud-storage.md @@ -1,10 +1,9 @@ --- layout: post -title: Open PDF from Google Cloud Storage in ASP.NET MVC PDF Viewer | Syncfusion +title: Open PDF from Google Cloud Storage MVC PDF Viewer | Syncfusion description: Learn how to load PDFs from Google Cloud Storage in the Syncfusion ASP.NET MVC PDF Viewer component using a server-backed approach. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- @@ -14,11 +13,11 @@ Follow these steps to load a PDF from Google Cloud Storage using the server-back **Step 1:** Create a Service Account -Open the Google Cloud Console. Navigate to `IAM & Admin` > `Service accounts`. Click `Create Service Account`.` Enter a name, assign roles (e.g., Storage Object Admin), and create a key in JSON format. Download the key file securely. Utilize the downloaded key file in your applications or services for authentication and access to the Google Cloud Storage bucket. For additional details, refer to the [official documentation](https://cloud.google.com/iam/docs/service-accounts-create). +Open the Google Cloud Console. Navigate to `IAM & Admin` > `Service accounts`. Click `Create Service Account`. Enter a name, assign roles (e.g., Storage Object Admin), and create a key in JSON format. Download the key file securely. Utilize the downloaded key file in your applications or services for authentication and access to the Google Cloud Storage bucket. For additional details, refer to the [official documentation](https://cloud.google.com/iam/docs/service-accounts-create). **Step 2:** Create a PDF Viewer sample in ASP.NET MVC -Follow instructions provided in the Syncfusion® PDF Viewer Getting Started [Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started-with-server-backed) to create a simple PDF Viewer sample in ASP.NET MVC +Follow instructions provided in the Syncfusion® PDF Viewer Getting Started [Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started-with-server-backed) to create a simple PDF Viewer sample in ASP.NET MVC. **Step 3:** Modify the `HomeController.cs` file in the project @@ -31,7 +30,7 @@ using Google.Apis.Auth.OAuth2; ``` -2. Add the following private fields and constructor parameters to the `HomeController.cs` class, In the constructor, assign the values from the configuration to the corresponding fields +2. Add the following private fields and constructor parameters to the `HomeController.cs` class. In the constructor, assign the values from the configuration to the corresponding fields. ```csharp diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-drive.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-drive.md index a8f98fec25..495d7d1a42 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-google-drive.md @@ -4,7 +4,6 @@ title: Open PDF from Google Drive in ASP.NET MVC PDF Viewer | Syncfusion description: Learn how to load PDFs from Google Drive in the Syncfusion ASP.NET MVC PDF Viewer component using a server-backed approach. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- @@ -32,7 +31,7 @@ using Google.Apis.Services; using Google.Apis.Util.Store; ``` -2. Modify the `Load()` method to load the PDF files from Google drive. +2. Modify the `Load()` method to load the PDF files from Google Drive. ```csharp @@ -117,9 +116,9 @@ private readonly string tokenjson = "Path to create token.json file"; } ``` -N> Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google drive folder ID , Your name for your application and the path for the JSON file. +N> Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google Drive folder ID, your application name, and the path to the JSON file. -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 **folderId** value 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 diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/events.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/events.md index dd91c74ac3..de34cc101e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/events.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/events.md @@ -1,7 +1,7 @@ --- layout: post title: Organize Events in PDF Viewer | Syncfusion -description: Learn how to organize pages Events in the MVC PDF viewer, including rotating, rearranging, inserting, deleting, and copying pages on mobile devices. +description: Learn about the events available for Organize Pages in the ASP.NET MVC PDF Viewer, including pageOrganizerSaveAs and pageOrganizerZoomChanged. platform: document-processing control: PDF Viewer documentation: ug @@ -63,8 +63,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. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -75,8 +75,8 @@ Event arguments: @@ -89,8 +89,8 @@ Event arguments: diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/extract-pages.md index 85968b9829..5a7d0df305 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/extract-pages.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/extract-pages.md @@ -53,8 +53,6 @@ Two options appear in the secondary toolbar: ## Programmatic options and APIs -## Programmatic options and APIs - You can control the Extract Pages experience via settings and invoke extraction through code. ### Enable/disable Extract Pages diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/mobile-view.md index 626dbcdca1..390a0ca65c 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/mobile-view.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/mobile-view.md @@ -7,7 +7,7 @@ control: PDF Viewer documentation: ug --- -# Organize Pages in Mobile PDF Viewer ASP.NET MVC +# Organize Pages in Mobile PDF Viewer ASP.NET MVC 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. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/programmatic-support.md index a18f4b5463..f1051c29c6 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/programmatic-support.md @@ -61,14 +61,14 @@ The `pageOrganizerSettings` API allows you to customize the page management func {% highlight cshtml tabtitle="Standalone" %}
        - @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanDelete = false, CanInsert = false, CanRotate = false, canCopy = false, canRearrange = false, canImport = false, imageZoom = 1, showImageZoomingSlider = true, imageZoomMin = 1, imageZoomMax = 5 }).Render() + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanDelete = false, CanInsert = false, CanRotate = false, CanCopy = false, CanRearrange = false, CanImport = false, imageZoom = 1, showImageZoomingSlider = true, imageZoomMin = 1, imageZoomMax = 5 }).Render()
        {% endhighlight %} {% highlight cshtml tabtitle="Server-Backed" %}
        - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanDelete = false, CanInsert = false, CanRotate = false, canCopy = false, canRearrange = false, canImport = false, imageZoom = 1, showImageZoomingSlider = true, imageZoomMin = 1, imageZoomMax = 5 }).Render() + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanDelete = false, CanInsert = false, CanRotate = false, CanCopy = false, CanRearrange = false, CanImport = false, imageZoom = 1, showImageZoomingSlider = true, imageZoomMin = 1, imageZoomMax = 5 }).Render()
        {% endhighlight %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md index 4aa0cf93ab..bf89c665e5 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md @@ -1,10 +1,9 @@ --- layout: post -title: Organize Page Toolbar Customization in ASP.NET MVC PDF Viewer control | Syncfusion +title: Organize Page Toolbar Customization in MVC PDF Viewer | Syncfusion description: Learn here all about Organize Page Toolbar Customization in Syncfusion ASP.NET MVC PDF Viewer control of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- @@ -14,7 +13,7 @@ The PDF Viewer allows you to customize the toolbar for the organize pages featur ## Show or hide the insert option -The `canInsert` property controls the visibility of the insert tool. When set to `false`, the insert tool will be hidden from the toolbar. +The `CanInsert` property controls the visibility of the insert tool. When set to `false`, the insert tool will be hidden from the toolbar. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -35,7 +34,7 @@ The `canInsert` property controls the visibility of the insert tool. When set to ## 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. When set to `false`, the delete tool will be hidden. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -56,7 +55,7 @@ The `canDelete` property controls the visibility of the delete tool. When set to ## 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. When set to `false`, the rotate tool will be hidden. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -77,12 +76,63 @@ The `canRotate` property controls the visibility of the rotate tool. When set to ## 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. +The `CanCopy` property controls the visibility of the copy tool. When set to `false`, the copy tool will be hidden. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
        + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanCopy = false }).Render() +
        + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
        + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanCopy = false }).Render() +
        + +{% endhighlight %} +{% endtabs %} ## Show or hide the import option -The `canImport` property controls the visibility of the import tool. When set to `false`, the import tool will be hidden. +The `CanImport` property controls the visibility of the import tool. When set to `false`, the import tool will be hidden. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
        + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanImport = false }).Render() +
        + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
        + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanImport = false }).Render() +
        + +{% endhighlight %} +{% endtabs %} ## Show or hide the rearrange option The `canRearrange` property controls the ability to rearrange pages. When set to `false`, pages cannot be rearranged. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
        + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanRearrange = false }).Render() +
        + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
        + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanRearrange = false }).Render() +
        + +{% endhighlight %} +{% endtabs %} From 44190f60d353723342b1b88714b4066bacbe01b1 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar <166115263+SF4524LogeshKumar@users.noreply.github.com> Date: Thu, 13 Aug 2026 12:36:26 +0530 Subject: [PATCH 55/70] 1046071: Resolved CI failure --- .../asp-net-mvc/open-pdf-file/from-azure-active-directory.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md index 87fd48c1ea..5d415ed94c 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-active-directory.md @@ -9,7 +9,7 @@ documentation: ug # Open PDF from Azure Active Directory in ASP.NET MVC -### Overview +## Overview The ASP.NET MVC PDF Viewer component supports loading and saving PDF files with Azure Active Directory (AAD). The following steps explain how to securely load and store PDFs using AAD. @@ -205,4 +205,4 @@ public async Task SaveToAAD(jsonObjects responseData) - Click the Save to AAD button. - The server uploads the modified PDF back to Azure Blob Storage. -[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aad). \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aad). From 9559b111189d4393c68afeafe0fdd6dae750f627 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Thu, 13 Aug 2026 12:41:58 +0530 Subject: [PATCH 56/70] 1046071: Updated Hotfix JS quality enhancement changes. --- .../annotations/annotation-comment-filter.md | 9 +- .../annotations/annotation-event.md | 3 +- .../annotations/annotation-permission.md | 2 +- .../annotation-types/area-annotation.md | 15 +- .../annotation-types/arrow-annotation.md | 15 +- .../annotation-types/circle-annotation.md | 25 +- .../annotation-types/distance-annotation.md | 23 +- .../annotation-types/free-text-annotation.md | 25 +- .../annotation-types/highlight-annotation.md | 21 +- .../annotation-types/ink-annotation.md | 23 +- .../annotation-types/line-annotation.md | 19 +- .../annotation-types/perimeter-annotation.md | 21 +- .../annotation-types/polygon-annotation.md | 27 +- .../annotation-types/radius-annotation.md | 2 +- .../annotation-types/rectangle-annotation.md | 22 +- .../annotation-types/redaction-annotation.md | 223 +++++-- .../annotation-types/stamp-annotation.md | 25 +- .../sticky-notes-annotation.md | 4 +- .../strikethrough-annotation.md | 6 +- .../annotation-types/underline-annotation.md | 6 +- .../annotations/annotations-api.md | 18 +- .../javascript-es5/annotations/comments.md | 4 +- .../javascript-es5/annotations/custom-data.md | 4 +- .../annotations/custom-tools.md | 8 +- .../annotations/customize-annotation.md | 44 +- .../export-import/export-annotation.md | 6 +- .../export-import/import-annotation.md | 6 +- .../annotations/free-text-annotation.md | 298 --------- .../annotations/ink-annotation.md | 270 -------- .../javascript-es5/annotations/ink-eraser.md | 2 - .../annotations/line-angle-constraints.md | 8 +- .../annotations/measurement-annotation.md | 581 ------------------ .../javascript-es5/annotations/overview.md | 4 +- .../annotations/shape-annotation.md | 534 ---------------- .../annotations/signature-annotation.md | 10 +- .../annotations/stamp-annotation.md | 381 ------------ .../annotations/sticky-notes-annotation.md | 245 -------- .../annotations/text-markup-annotation.md | 575 ----------------- .../javascript-es5/forms/custom-data.md | 7 +- .../javascript-es5/forms/form-constrain.md | 4 +- .../javascript-es5/forms/form-designer.md | 6 +- .../javascript-es5/forms/form-field-events.md | 2 +- .../javascript-es5/forms/form-fields-api.md | 9 +- .../javascript-es5/forms/form-filling.md | 7 +- .../javascript-es5/forms/group-form-fields.md | 2 +- .../export-form-fields.md | 107 +++- .../import-export-events.md | 1 - .../import-form-fields.md | 82 ++- .../manage-form-fields/create-form-fields.md | 2 +- 49 files changed, 554 insertions(+), 3189 deletions(-) delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/free-text-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/measurement-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/shape-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/stamp-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/sticky-notes-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/text-markup-annotation.md diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-comment-filter.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-comment-filter.md index 53c4cf5ecc..d6e2e04fdf 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-comment-filter.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-comment-filter.md @@ -23,7 +23,7 @@ Imagine reviewing a PDF document with feedback from 5 team members, resulting in Comment filtering is most useful in these scenarios: - **Team reviews**: Filter annotations by author to see feedback from specific reviewers -- **Status tracking**: Filter by status (Accepted, Rejected, Canceled) to track document workflow progress +- **Status tracking**: Filter by status (Accepted, Rejected, Cancelled) to track document workflow progress - **Color-coded reviews**: Filter by annotation color to organize feedback by priority or type - **Time-based review**: Filter by modification date to see recent changes - **Document collaboration**: Use "Filter document and comments panel" to synchronize your view with the document @@ -36,8 +36,8 @@ The JavaScript PDF Viewer provides a comment filter dialog in the comments panel ### Filter options - **Author**: Filter annotations by the author who created them. Use the "Include replies" checkbox to also include comments where the author has replied to other annotations. -- **Annotation Type**: Filter by specific annotation types such as Highlight, Underline, Strikethrough, Text Box, Sticky Notes, and more. -- **Status**: Filter annotations by their status (e.g., Accepted, Rejected, Canceled, Completed, None). +- **Annotation Type**: Filter by specific annotation types such as Highlight, Underline, Strikethrough, Free Text, Sticky Notes, and more. +- **Status**: Filter annotations by their status (e.g., Accepted, Rejected, Cancelled, Completed, None). - **Date**: Filter annotations by their modification date. - **Color**: Filter annotations by their color. @@ -63,7 +63,7 @@ Follow these steps to filter annotations by their type and status: 1. Click the **filter icon** in the comments panel toolbar 2. In the **Annotation Type** dropdown, select the annotation types you want to view (e.g., Highlight, Underline) -3. In the **Status** dropdown, select the status you want to filter by (e.g., Accepted, Rejected, Pending) +3. In the **Status** dropdown, select the status you want to filter by (e.g., Accepted, Rejected, Completed) 4. Click **APPLY** to see only annotations matching your criteria 5. Use the **CLEAR** button to reset all filters @@ -128,7 +128,6 @@ This approach is useful when you want to: Use the `applyCommentFilter` method to apply filters with specific criteria: - ```html 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 fc1f3ff1bc..369cf0e769 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 @@ -1,5 +1,5 @@ --- -title: Annotations Events in JavaScript PDF Viewer control | Syncfusion +title: Annotation Events in JavaScript PDF Viewer control | Syncfusion description: Learn here all about Annotations Events in Syncfusion JavaScript PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer @@ -32,6 +32,7 @@ This page documents annotation-related events for the JavaScript PDF Viewer and | [`signatureSelect`](#signatureselect) | Triggers when a signature is selected on a page in the PDF document. | | [`signatureUnselect`](#signatureunselect) | Triggers when a signature is unselected on a page in the PDF document. | +## Events ### annotationAdd 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 cfec1cb860..1ea2d98396 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 @@ -121,7 +121,7 @@ var pdfviewer = new ej.pdfviewer.PdfViewer({ pdfviewer.appendTo('#PdfViewer'); ``` -Behavior notes +### Behavior notes - isLock true: The annotation is locked; users cannot move, resize, or edit it through the UI until it is unlocked. - skipPrint true: All annotations are omitted from the print output initiated from the viewer. - skipDownload true: All annotations are omitted from the exported/downloaded PDF from the viewer. 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 36b76702f2..238e85d926 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,10 +18,11 @@ Area is a measurement annotation used to measure the surface of a closed region ### Add area annotation via UI -- 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. +Use the annotation toolbar to add an area annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Click the **Measurement Annotation** dropdown. +3. Choose **Area**, then draw the region on the page. N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode. @@ -348,11 +349,11 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `AreaSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding an Area annotation. ```html @@ -447,7 +448,7 @@ Supported units for measurement annotations are ## Setting default scale ratio settings during control initialization -The properties of scale ratio for measurement annotation can be set before creating the control using ScaleRatioSettings as shown in the following code snippet, +The properties of scale ratio for measurement annotation can be set before creating the control using `measurementSettings` as shown in the following code snippet, {% tabs %} {% highlight js tabtitle="Standalone" %} 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 a030fc3f89..62375a77b5 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,10 +18,11 @@ Arrow is a shape annotation used to point, direct attention, or indicate flow. C ### Add arrow annotation via UI -Use the annotation toolbar to: -- Click the **Edit Annotation** button in the PDF Viewer toolbar. -- Open the **Shape Annotation** dropdown. -- Choose **Arrow**, then draw on the page. +Use the annotation toolbar to add an arrow annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Shape Annotation** dropdown. +3. Choose **Arrow**, then draw on the page. N> When in pan mode, selecting a shape annotation switches the viewer to text select mode. @@ -171,7 +172,7 @@ You can select, move, and resize Arrow annotations directly in the viewer: The fill color, stroke color, thickness, and opacity of arrow shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. -##### Editing fill color +#### Editing fill color The fill color of the annotation can be edited using the color palette provided in the Edit Color tool. @@ -335,11 +336,11 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `ArrowSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding an arrow annotation. ```html 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 e6a32dccc2..c53ec3492f 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,10 +18,11 @@ Circle is a shape annotation used to highlight circular regions or draw emphasis ### Add circle annotation via UI -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. +Use the annotation toolbar to add a circle annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Shape Annotation** dropdown. +3. Choose **Circle**, then draw on the page. N> When in pan mode, selecting a shape annotation switches the viewer to text select mode. @@ -216,7 +217,9 @@ The opacity of the annotation can be edited using the range slider provided in t ### Edit an existing circle annotation programmatically -Use editAnnotation on items from annotationCollection. +To modify an existing circle annotation programmatically, use the editAnnotation() method. + +Here is an example of using editAnnotation(): ```html @@ -350,17 +353,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `CircleSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding a Circle annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -389,12 +392,12 @@ document.getElementById('Circle')?.addEventListener('click', function () { height: 75, opacity: 0.5, strokeColor: '#FF0000', - fillColor: '#000fff#', + fillColor: '#000fff', author: 'User1' }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -423,7 +426,7 @@ document.getElementById('Circle')?.addEventListener('click', function () { height: 75, opacity: 0.5, strokeColor: '#FF0000', - fillColor: '#000fff#', + fillColor: '#000fff', author: 'User1' }); }); 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 91ce8d7d2f..8436490022 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,10 +18,11 @@ Distance is a measurement annotation used to measure the length between two poin ### Add distance annotation via UI -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. +Use the annotation toolbar to add a distance annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Measurement Annotation** dropdown. +3. Choose **Distance**, then draw on the page. N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode. @@ -185,7 +186,7 @@ You can select, move, and resize Distance annotations directly in the viewer: 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. -##### Edit fill color +#### Edit fill color The fill color of the annotation can be edited using the color palette provided in the Edit Color tool. @@ -211,7 +212,9 @@ The opacity of the annotation can be edited using the range slider provided in t ### Edit an existing distance annotation programmatically -Use editAnnotation on items from annotationCollection. +To modify an existing distance annotation programmatically, use the editAnnotation() method. + +Here is an example of using editAnnotation(): ```html @@ -337,17 +340,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `DistanceSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding a Distance annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -377,7 +380,7 @@ document.getElementById('Distance')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, 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 53aad96fdd..88f534c813 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,10 +18,11 @@ 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 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. +Use the annotation toolbar to add a Free Text annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Click the **Free Text Annotation** button to enable Free Text mode. +3. Click on the page to add text. N> When in pan mode, selecting Free Text switches the viewer to text select mode. @@ -247,7 +248,9 @@ Edit opacity using the range slider in the Edit Opacity tool. ### Edit Free Text annotation programmatically -Use editAnnotation to update existing Free Text content. +To modify an existing Free Text annotation programmatically, use the editAnnotation() method. + +Here is an example of using editAnnotation(): ```html @@ -317,10 +320,6 @@ document.getElementById('changeContent').addEventListener('click', function () { {% endhighlight %} {% endtabs %} - - - - ## Default Free Text settings during initialization Set default Free Text properties before creating the control using freeTextSettings. @@ -374,17 +373,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `FreeTextSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding a FreeText annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -421,7 +420,7 @@ document.getElementById('FreeText')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, 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 a16dda9b56..a8541538e6 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 @@ -27,10 +27,11 @@ 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, or select text first and then click **Highlight**. +Use the annotation toolbar to add a highlight annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. +2. Select **Highlight** to enable highlight mode. +3. 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) @@ -70,7 +71,7 @@ document.getElementById('set').addEventListener('click', function () { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, add the below `serviceUrl` in the `index.ts` file: `pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` +N> To set up the **server-backed PDF Viewer**, add the below `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/highlight-mode-cs1" %} @@ -112,7 +113,7 @@ document.getElementById('setNone').addEventListener('click', function () { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, add the below `serviceUrl` in the `index.ts` file: +N> To set up the **server-backed PDF Viewer**, add the below `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/highlight-normal-mode-cs1" %} @@ -336,17 +337,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `highlightSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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 properties while adding a Highlight annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -385,7 +386,7 @@ document.getElementById('highlight')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, 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 93c8926fec..33d2cef21e 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,10 +18,11 @@ Ink is a freehand drawing annotation used to sketch, sign, or mark up content. ### Add ink annotation via UI -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. +Use the annotation toolbar to add an ink annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Click the **Draw Ink** button to enable ink mode. +3. Draw on any page of the PDF document. ![Ink tool in the annotation toolbar](../../images/ink_tool.png) @@ -80,7 +81,7 @@ if (setNone) { ### Add ink annotation programmatically -Use addAnnotation to programmatically create an Ink annotation. +The PDF Viewer library allows adding ink annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. ```html @@ -187,7 +188,9 @@ Edit opacity using the range slider in the Edit Opacity tool. ### Edit an existing ink annotation programmatically -Use editAnnotation to modify properties and bounds of an existing ink annotation. +To modify an existing ink annotation programmatically, use the editAnnotation() method. + +Here is an example of using editAnnotation(): ```html @@ -323,17 +326,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `InkSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding an Ink annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -366,7 +369,7 @@ document.getElementById('Ink')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, 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 636bfa3f25..e0b1977a48 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,10 +18,11 @@ Line is a shape annotation used to mark straight connections or callouts. Common ### Add line annotation via UI -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. +Use the annotation toolbar to add a line annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Shape Annotation** dropdown. +3. Choose **Line**, then draw on the page. N> When in pan mode, selecting a shape annotation switches the viewer to text select mode. @@ -104,7 +105,7 @@ document.getElementById('setNone').addEventListener('click', function() { ### Add a line annotation programmatically -Use the addAnnotation method with Line settings. +The PDF Viewer library allows adding shape annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. ```html @@ -352,17 +353,17 @@ N> In both [Arrow](https://ej2.syncfusion.com/documentation/api/pdfviewer/index- ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `lineSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding a line annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -397,7 +398,7 @@ document.getElementById('line')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, 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 f3f0297d00..bcc9c64e41 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,10 +18,11 @@ Perimeter is a measurement annotation used to measure the length around a closed ### Add perimeter annotation via UI -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. +Use the annotation toolbar to add a perimeter annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Measurement Annotation** dropdown. +3. Choose **Perimeter**, then draw the polyline on the page. N> When in pan mode, selecting measurement annotations switches the viewer to text select mode. @@ -363,17 +364,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `PerimeterSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding a Perimeter annotation. ```html ``` {% tabs %} -{% highlight ts tabtitle="Standalone" %} +{% highlight js tabtitle="Standalone" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -404,8 +405,8 @@ document.getElementById('Perimeter')?.addEventListener('click', function () { }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -=ej.pdfviewer.PdfViewer.Inject( +{% highlight js tabtitle="Server-Backed" %} +ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, @@ -443,7 +444,7 @@ The scale ratio and unit of measurement can be modified using the scale ratio op ![Scale ratio](../../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/polygon-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/polygon-annotation.md index 469178bb38..8aba84da10 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,10 +18,11 @@ Polygon is a shape annotation used to outline irregular regions, highlight areas ### Add polygon annotation via UI -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. +Use the annotation toolbar to add a polygon annotation: + +1. Click the **Edit Annotation** button in the PDF Viewer toolbar. +2. Open the **Shape Annotation** dropdown. +3. Choose **Polygon**, then draw on the page. N> When in pan mode, selecting shape annotations switches the viewer to text select mode. @@ -220,7 +221,9 @@ The opacity of the annotation can be edited using the range slider provided in t ### Edit an existing polygon annotation programmatically -Use editAnnotation on items from annotationCollection. +To modify an existing polygon annotation programmatically, use the editAnnotation() method. + +Here is an example of using editAnnotation(): ```html @@ -348,11 +351,11 @@ pdfviewer.appendTo('#PdfViewer'); ## Set properties while adding Individual Annotation -Set properties for individual annotations before creating the control using `PolygonSettings`. +Set properties for individual annotations while adding the annotation using `addAnnotation()`. 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. +Refer to the following code snippet to set the properties while adding a Polygon annotation. ```html @@ -387,13 +390,13 @@ document.getElementById('Polygon')?.addEventListener('click', function () { vertexPoints: [ { x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 } ], - fillColor:'#ff000', + fillColor:'#ff0000', opacity: 0.9, - strokeColor:'##ff000' + strokeColor:'#ff0000' }); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} +{% highlight js tabtitle="Server-Backed" %} ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, @@ -422,9 +425,9 @@ document.getElementById('Polygon')?.addEventListener('click', function () { vertexPoints: [ { x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 } ], - fillColor:'#ff000', + fillColor:'#ff0000', opacity: 0.9, - strokeColor:'##ff000' + strokeColor:'#ff0000' }); }); {% endhighlight %} 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 9322791d71..f01125d768 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 @@ -104,7 +104,7 @@ document.getElementById('setNone').addEventListener('click', function() { ### Add a radius annotation programmatically -Add radius 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#addannotation) method. ```html 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 cde1e1489c..8ec24d1b9e 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 @@ -390,14 +390,26 @@ document.getElementById('Rectangle')?.addEventListener('click', function () { }); {% endhighlight %} {% highlight js tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, RectangleSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); -const pdfviewer: PdfViewer = new PdfViewer(); +var pdfviewer = new ej.pdfviewer.PdfViewer(); pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; pdfviewer.appendTo('#PdfViewer'); + //Apply Rectangle Settings while adding individual Annotation document.getElementById('Rectangle')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Rectangle', { @@ -409,7 +421,7 @@ document.getElementById('Rectangle')?.addEventListener('click', function () { strokeColor: '#FF0000', fillColor: '#000fff#', author: 'User1' - } as RectangleSettings); + }); }); {% endhighlight %} {% endtabs %} 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 c755640a27..1965cf3c88 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 @@ -33,7 +33,7 @@ You can also add redaction annotations from the context menu by selecting conten ![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) for configuration. ### Add redaction annotations programmatically @@ -43,27 +43,50 @@ Use the `addAnnotation` method with the Redaction type to add redaction annotati ``` ```js -document.getElementById('addRedactAnnot')?.addEventListener('click', () => { - viewer.annotation.addAnnotation('Redaction', { - bound: { x: 200, y: 480, width: 150, height: 75 }, - pageNumber: 1, - markerFillColor: '#0000FF', - markerBorderColor: 'white', - fillColor: 'red', - overlayText: 'Confidential', - fontColor: 'yellow', - fontFamily: 'Times New Roman', - fontSize: 8, - beforeRedactionsApplied: false - }); -}); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +var addRedactAnnot = document.getElementById('addRedactAnnot'); +if (addRedactAnnot) { + addRedactAnnot.addEventListener('click', function () { + pdfviewer.annotation.addAnnotation('Redaction', { + bound: { x: 200, y: 480, width: 150, height: 75 }, + pageNumber: 1, + markerFillColor: '#0000FF', + markerBorderColor: 'white', + fillColor: 'red', + overlayText: 'Confidential', + fontColor: 'yellow', + fontFamily: 'Times New Roman', + fontSize: 8, + beforeRedactionsApplied: false + }); + }); +} ``` Track additions using the annotationAdd event. ```js -viewer.annotationAdd = (args) => { - console.log('Annotation added:', args); +pdfviewer.annotationAdd = function (args) { + console.log('Annotation added:', args); }; ``` @@ -88,23 +111,46 @@ Use editAnnotation to modify overlay text, colors, fonts, etc. ``` ```js -document.getElementById('editRedactAnnotation')?.addEventListener('click', () => { - for (let i = 0; i < viewer.annotationCollection.length; i++) { - if (viewer.annotationCollection[i].subject === 'Redaction') { - viewer.annotationCollection[i].overlayText = 'EditedAnnotation'; - viewer.annotationCollection[i].markerFillColor = '#22FF00'; - viewer.annotationCollection[i].markerBorderColor = '#000000'; - viewer.annotationCollection[i].isRepeat = true; - viewer.annotationCollection[i].fillColor = '#F8F8F8'; - viewer.annotationCollection[i].fontColor = '#333333'; - viewer.annotationCollection[i].fontSize = 14; - viewer.annotationCollection[i].fontFamily = 'Symbol'; - viewer.annotationCollection[i].textAlign = 'Right'; - viewer.annotationCollection[i].beforeRedactionsApplied = false; - viewer.annotation.editAnnotation(viewer.annotationCollection[i]); - } - } -}); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +var editRedactAnnotation = document.getElementById('editRedactAnnotation'); +if (editRedactAnnotation) { + editRedactAnnotation.addEventListener('click', function () { + for (var i = 0; i < pdfviewer.annotationCollection.length; i++) { + if (pdfviewer.annotationCollection[i].subject === 'Redaction') { + pdfviewer.annotationCollection[i].overlayText = 'EditedAnnotation'; + pdfviewer.annotationCollection[i].markerFillColor = '#22FF00'; + pdfviewer.annotationCollection[i].markerBorderColor = '#000000'; + pdfviewer.annotationCollection[i].isRepeat = true; + pdfviewer.annotationCollection[i].fillColor = '#F8F8F8'; + pdfviewer.annotationCollection[i].fontColor = '#333333'; + pdfviewer.annotationCollection[i].fontSize = 14; + pdfviewer.annotationCollection[i].fontFamily = 'Symbol'; + pdfviewer.annotationCollection[i].textAlign = 'Right'; + pdfviewer.annotationCollection[i].beforeRedactionsApplied = false; + pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); + } + } + }); +} ``` ## Delete redaction annotations @@ -125,9 +171,32 @@ Delete by id using deleteAnnotationById: ``` ```js -document.getElementById('deleteAnnotationbyId')?.addEventListener('click', () => { - viewer.annotationModule.deleteAnnotationById(viewer.annotationCollection[0].annotationId); -}); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +var deleteAnnotationbyId = document.getElementById('deleteAnnotationbyId'); +if (deleteAnnotationbyId) { + deleteAnnotationbyId.addEventListener('click', function () { + pdfviewer.annotationModule.deleteAnnotationById(pdfviewer.annotationCollection[0].annotationId); + }); +} ``` ## Redact pages @@ -146,9 +215,32 @@ Options include Current Page, Odd Pages Only, Even Pages Only, and Specific Page ``` ```js -document.getElementById('addPageRedactions')?.addEventListener('click', () => { - viewer.annotation.addPageRedactions([1, 3, 5, 7]); -}); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +var addPageRedactions = document.getElementById('addPageRedactions'); +if (addPageRedactions) { + addPageRedactions.addEventListener('click', function () { + pdfviewer.annotation.addPageRedactions([1, 3, 5, 7]); + }); +} ``` ## Apply redaction @@ -168,9 +260,32 @@ N> Redaction is permanent and cannot be undone. ``` ```js -document.getElementById('redact')?.addEventListener('click', () => { - viewer.annotation.redact(); -}); +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +var redact = document.getElementById('redact'); +if (redact) { + redact.addEventListener('click', function () { + pdfviewer.annotation.redact(); + }); +} ``` N> Applying redaction is irreversible. @@ -180,7 +295,27 @@ N> Applying redaction is irreversible. Configure defaults with redactionSettings: ```js -viewer.redactionSettings = { +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +var pdfviewer = new ej.pdfviewer.PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/34.1.33/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.redactionSettings = { overlayText: 'Confidential', markerFillColor: '#FF0000', markerBorderColor: '#000000', 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 a978f30342..0d515eb903 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 @@ -96,6 +96,21 @@ document.getElementById('signStamp') && document.getElementById('signStamp').add document.getElementById('standardBusinessStamp') && document.getElementById('standardBusinessStamp').addEventListener('click', function () { pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, undefined, ej.pdfviewer.StandardBusinessStampItem.Approved); }); + +document.getElementById('customStamp') && document.getElementById('customStamp').addEventListener('click', function () { + pdfviewer.annotation.addAnnotation('Stamp', { + offset: { x: 100, y: 440 }, + width: 46, + height: 100, + pageNumber: 1, + isLock: true, + author: 'Guest', + customStamps: [{ + customStampName: 'Image', + customStampImageSource: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...' + }] + }); +}); {% endhighlight %} {% endtabs %} @@ -273,11 +288,9 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -[View Sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master) - ## Set properties while adding Individual Annotation -Set properties for individual annotation before creating the control using `StampSettings`. +Set properties for individual annotations before creating the control using `StampSettings`. > After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. @@ -313,7 +326,7 @@ document.getElementById('Stamp')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Stamp', { offset: { x: 200, y: 140 }, pageNumber: 1, opacity: 0.3, author: 'Guest User' - } ,'Approved'); + }, ej.pdfviewer.DynamicStampItem.Approved); }); {% endhighlight %} {% highlight js tabtitle="Server-Backed" %} @@ -342,11 +355,13 @@ document.getElementById('Stamp')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Stamp', { offset: { x: 200, y: 140 }, pageNumber: 1, opacity: 0.3, author: 'Guest User' - } ,'Approved'); + }, ej.pdfviewer.DynamicStampItem.Approved); }); {% endhighlight %} {% endtabs %} +[View Sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master) + ## See also - [Annotation Overview](../overview) 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 d2a64aa1b4..838b53deb2 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 @@ -18,9 +18,9 @@ Sticky Notes are comment annotations used to leave notes, replies, and review st ### Add annotations in UI -Use the Comments tool to: +To add a sticky note annotation via the UI: - Click the Comments button in the PDF Viewer toolbar. -- Click on the page where the sticky note should be added. +- Click 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) 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 d346dadd9a..186966043a 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 @@ -269,10 +269,6 @@ Use the range slider in the Edit Opacity tool to change annotation opacity. ![Delete button](../../../javascript-es6/images/delete_button.png) -#### Edit strikethrough annotation properties - -The color and opacity of strikethrough annotations can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar. - ### Edit existing strikethrough annotations programmatically To modify existing strikethrough annotations programmatically, use the `editAnnotation()` method. Example: @@ -412,7 +408,7 @@ Set properties for individual annotations before creating the control using `Str 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 strikethrough settings. ```html 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 23bdecfd77..4f2e16e2ce 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 @@ -246,8 +246,6 @@ if (underline) { {% endhighlight %} {% endtabs %} -## Edit underline annotation - ## Edit underline annotations ### Edit underline annotations in UI @@ -275,8 +273,6 @@ Use the range slider in the Edit Opacity tool to change annotation opacity. To modify existing underline annotations programmatically, use the `editAnnotation()` method. Example: -To modify an existing underline annotation programmatically, use the editAnnotation() method. Example: - ```html ``` @@ -412,7 +408,7 @@ Set properties for individual annotations before creating the control using `und 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 underline settings. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md index 4c4da1a46d..34beb21a37 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotations-api.md @@ -1,7 +1,7 @@ --- layout: post title: Annotations API in JavaScript PDF Viewer | Syncfusion -description: Learn how to read and configure annotations using APIs in the Syncfusion JavaScript PDF Viewer. +description: Learn how to read and configure annotations using APIs in the Syncfusion JavaScript PDF Viewer for enhanced document interactions. platform: document-processing control: PDF Viewer documentation: ug @@ -1334,11 +1334,11 @@ pdfviewer.appendTo('#PdfViewer'); - [Annotation Overview](../overview) - [Annotation Types](../annotations/annotation-types/area-annotation) -- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar) -- [Create and Modify Annotation](../../annotations/create-modify-annotation) -- [Customize Annotation](../../annotations/customize-annotation) -- [Remove Annotation](../../annotations/delete-annotation) -- [Handwritten Signature](../../annotations/signature-annotation) -- [Export and Import Annotation](../../annotations/export-import/export-annotation) -- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view) -- [Annotation Events](../../annotations/annotation-event) \ No newline at end of file +- [Annotation Toolbar](../toolbar-customization/annotation-toolbar) +- [Create and Modify Annotation](../annotations/create-modify-annotation) +- [Customize Annotation](../annotations/customize-annotation) +- [Remove Annotation](../annotations/delete-annotation) +- [Handwritten Signature](../annotations/signature-annotation) +- [Export and Import Annotation](../annotations/export-import/export-annotation) +- [Annotation in Mobile View](../annotations/annotations-in-mobile-view) +- [Annotation Events](../annotations/annotation-event) \ No newline at end of file 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 fa7c18b372..df2752d73a 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md @@ -113,7 +113,7 @@ Edit comments and replies in the following ways: ### How to add comments and replies programmatically -Comments can be added to the PDF document programmatically using the `editAnnotation` property. +Comments can be added to the PDF document programmatically using the `editAnnotation` method. The following example shows how to add comments and a reply in response to a button click. @@ -184,7 +184,7 @@ document.getElementById("addReply")?.addEventListener("click", function() { ### How to edit comments programmatically -Comments can be edited in the PDF document programmatically using the `editAnnotation` property. +Comments can be edited in the PDF document programmatically using the `editAnnotation` method. The following example shows how to edit comments and a reply in response to a button click. 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 5d89c11fab..e9b9a3f527 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 @@ -1,14 +1,14 @@ --- layout: post title: Custom Data in annotations in JavaScript PDF Viewer | Syncfusion -description: Learn how to use add custom Data in annotation in Syncfusion JavaScript PDF Viewer +description: Learn how to add, store, and retrieve custom key-value data in annotations using Syncfusion JavaScript PDF Viewer. platform: document-processing control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Custom data in annotations +# Custom data in PDF annotations Annotations can include custom key–value data via the `customData` property. This is supported at two levels: 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 e1f9f77c05..d8f79dc242 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 @@ -156,11 +156,9 @@ var annoToolbar = new Tool({ annoToolbar.appendTo('#annotationToolbar'); ``` -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. -- 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. +N> `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. +N> Default annotation styles can be predefined using the corresponding settings properties (for example, `areaSettings`). +N> 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 45b81cad2d..316a9e79c0 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 @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Customize annotations +# Customize annotation properties 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. @@ -33,36 +33,34 @@ Set defaults for specific annotation types when creating the `PdfViewer` instanc Text markup annotations: -- 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) +- 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: -- 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) -- Polygon: Use [`polygonSettings`](./annotation-types/polygon-annotation/#default-polygon-settings-during-initialization) +- 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) +- Polygon: Use [`polygonSettings`](./annotation-types/polygon-annotation#default-polygon-settings-during-initialization) 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) -- Area: Use [`areaSettings`](./annotation-types/area-annotation/#default-area-settings-during-initialization) -- Radius: Use [`radiusSettings`](./annotation-types/radius-annotation/#default-radius-settings-during-initialization) -- Volume: Use [`volumeSettings`](./annotation-types/volume-annotation/#default-volume-settings-during-initialization) +- Distance: Use [`distanceSettings`](./annotation-types/distance-annotation#default-distance-settings-during-initialization) +- Perimeter: Use [`perimeterSettings`](./annotation-types/perimeter-annotation#default-perimeter-settings-during-initialization) +- Area: Use [`areaSettings`](./annotation-types/area-annotation#default-area-settings-during-initialization) +- 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: -- 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) -- 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) - -Set defaults for specific annotation types when creating the PdfViewer instance. Below are examples using settings already used in the annotation type pages. +- 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) +- 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) {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -186,7 +184,7 @@ if (btn) { } ``` -## Customize Annotation Settings +## Customize Annotation Settings Defines the settings of the annotations. You can change annotation settings like author name, height, width etc., using [annotationSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#annotationsettings) API 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 2e8a6b9047..54255c827f 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 @@ -10,10 +10,10 @@ domainurl: ##DomainURL## # Export annotations in JavaScript PDF Viewer -PDF Viewer provides support to export annotations. You can export annotations from the PDF Viewer in two ways: +PDF Viewer provides support for exporting annotations. You can export annotations from the PDF Viewer in two ways: - Using the built-in UI in the Comments panel (JSON or XFDF file) -- Programmatically (JSON, XFDF, or as an object for custom handling) +- Programmatically (export to JSON, XFDF, or as an object for custom handling) ## Export using the UI (Comments panel) @@ -28,7 +28,7 @@ Follow the steps to export annotations: 2. Click the overflow menu (three dots) at the top of the panel. 3. Choose Export annotation to JSON file or Export annotation to XFDF file. -This generates and downloads the selected format containing all annotations in the current document. +This generates and downloads a file in the selected format containing all annotations in the current document. ![Export Annotation](../annotation-images/export-annot.png) 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 a020f3769e..80af6f1d53 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 @@ -1,13 +1,13 @@ --- layout: post -title: Import annotations in JavaScript PDF Viewer | Syncfusion +title: Import annotations in JavaScript PDF Viewer ES5 | Syncfusion description: Learn how to import annotations in Syncfusion JavaScript PDF Viewer using UI options and programmatic APIs. platform: document-processing control: PDF Viewer documentation: ug --- -# Import annotations in JavaScript PDF Viewer +# Import annotations in PDF 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. @@ -18,7 +18,7 @@ The Comments panel provides import options in its overflow menu: - Import annotations from JSON file - Import annotations from XFDF file -Steps: +Follow the steps to import annotations: 1. Open the Comments panel in the PDF Viewer. 2. Click the overflow menu (three dots) at the top of the panel. 3. Choose the appropriate import option and select the file. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/free-text-annotation.md deleted file mode 100644 index bc46a7f0bf..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/free-text-annotation.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -layout: post -title: Free text annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about free text annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Free text annotation in JavaScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete free text annotations. - -## Add a free text annotation to the PDF document - -Free text annotations can be added to the PDF document using the annotation toolbar. - -* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it. -* Select the **Free Text Annotation** button to enable free text annotation mode. -* Add text anywhere on the pages of the PDF document. - -When in pan mode, selecting free text annotation switches the PDF Viewer to text select mode. - -![Free text tool in the annotation toolbar](../images/freetext_tool.png) - -The following example switches to free text annotation mode using a button click. - - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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" - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let addFreeTextAnnotationButton = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotationButton) { - addFreeTextAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("FreeText"); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let addFreeTextAnnotationButton = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotationButton) { - addFreeTextAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("FreeText"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add a free text annotation programmatically to the PDF document - -The PDF Viewer library allows adding a free text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#annotation) method. - -Here is an example of adding a free text annotation programmatically using addAnnotation(): - -```html - - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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" - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let addFreeTextAnnotation = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotation) { - addFreeTextAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("FreeText", { - offset: { x: 120, y: 80 }, - fontSize: 16, - fontFamily: "Helvetica", - pageNumber: 1, - width: 200, - height: 40, - isLock: false, - defaultText: "Syncfusion" - } ); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let addFreeTextAnnotation = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotation) { - addFreeTextAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("FreeText", { - offset: { x: 120, y: 80 }, - fontSize: 16, - fontFamily: "Helvetica", - pageNumber: 1, - width: 200, - height: 40, - isLock: false, - defaultText: "Syncfusion" - } ); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Change the content of an existing free text annotation programmatically - -To change the content of an existing free text annotation programmatically, use the editAnnotation() method. - -Here is an example of changing the content of a free text annotation using editAnnotation(): - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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" - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let changeContent = document.getElementById('changeContent'); -if (changeContent) { - changeContent.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Text Box') { - pdfviewer.annotationCollection[i].dynamicText = 'syncfusion'; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let changeContent = document.getElementById('changeContent'); -if (changeContent) { - changeContent.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Text Box') { - pdfviewer.annotationCollection[i].dynamicText = 'syncfusion'; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -N> The current version of the PDF Viewer does not edit existing document text. New free text annotations can be added and modified within the document. - -## Edit the properties of free text annotations - -Font family, font size, styles, font color, text alignment, fill color, stroke color, border thickness, and opacity can be edited using the Font Family, Font Size, Font Color, Text Align, Font Style, Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. - -### Edit font family - -Edit the font family by selecting a font in the Font Family tool. - -![Change font family](../images/fontfamily.png) - -### Edit font size - -Edit the font size by selecting a size in the Font Size tool. - -![Change font size](../images/fontsize.png) - -### Edit font color - -Edit the font color using the color palette in the Font Color tool. - -![Change font color](../images/fontcolor.png) - -### Edit text alignment - -Align text by selecting an option from the Text Align tool. - -![Set text alignment](../images/textalign.png) - -### Edit text styles - -Edit text styles by selecting options in the Font Style tool. - -![Change text styles](../images/fontstyle.png) - -### Edit fill color - -Edit the fill color using the color palette in the Edit Color tool. - -![Change fill color](../images/fillcolor.png) - -### Edit stroke color - -Edit the stroke color using the color palette in the Edit Stroke Color tool. - -![Change stroke color](../images/fontstroke.png) - -### Edit thickness - -Edit border thickness using the range slider in the Edit Thickness tool. - -![Change border thickness](../images/fontthickness.png) - -### Edit opacity - -Edit opacity using the range slider in the Edit Opacity tool. - -![Change opacity](../images/fontopacity.png) - -## Set default properties during control initialization - -Default properties for free text annotations can be set before creating the control using FreeTextSettings. - -After changing default values, the selected values are applied. The following example sets default free text annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - freeTextSettings : { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' } - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - freeTextSettings : { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' } - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-annotation.md deleted file mode 100644 index 477e9f9900..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-annotation.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -layout: post -title: Ink annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about ink annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Ink annotation in JavaScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete ink annotations. - -![Ink annotations overview](../images/ink_annotation.png) - -## Add an ink annotation to the PDF document - -Ink annotations can be added to the PDF document using the annotation toolbar. - -* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it. -* Select the **Draw Ink** button to enable ink annotation mode. -* Draw on any page of the PDF document. - -![Ink tool in the annotation toolbar](../images/ink_tool.png) - -The following example switches to ink annotation mode. - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Ink"); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Ink"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add an ink annotation programmatically to the PDF document - -The PDF Viewer library allows adding an ink annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. - -Here is an example of adding an ink annotation programmatically using addAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Ink", { - offset: { x: 150, y: 100 }, - pageNumber: 1, - width : 200, - height:60, - path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]' - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Ink", { - offset: { x: 150, y: 100 }, - pageNumber: 1, - width : 200, - height:60, - path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]' - }); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing ink annotation programmatically - -To modify an existing ink annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let editInkAnnotation = document.getElementById('editInkAnnotation'); -if (editInkAnnotation) { - editInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "Ink") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let editInkAnnotation = document.getElementById('editInkAnnotation'); -if (editInkAnnotation) { - editInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "Ink") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit the properties of ink annotations - -Stroke color, thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. - -### Edit stroke color - -Edit the stroke color using the color palette in the Edit Stroke Color tool. - -![Change ink stroke color](../images/ink_strokecolor.png) - -### Edit thickness - -Edit thickness using the range slider in the Edit Thickness tool. - -![Change ink thickness](../images/ink_thickness.png) - -### Edit opacity - -Edit opacity using the range slider in the Edit Opacity tool. - -![Change ink opacity](../images/ink_opacity.png) - -## Set default properties during control initialization - -Default properties for ink annotations can be set before creating the control using InkAnnotationSettings. - -After changing default values, the selected values are applied. -Refer to the following code sample to set the default ink annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"; -pdfviewer.inkAnnotationSettings = {author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6}; -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'; -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.inkAnnotationSettings = {author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6}; -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-eraser.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-eraser.md index be5e82a40f..341acb1300 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-eraser.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-eraser.md @@ -131,7 +131,6 @@ document.getElementById('disableBtn').addEventListener('click', function() { Use the `inkEraserSize` property to control the width of the eraser: - ```html @@ -190,7 +189,6 @@ function applyRoleBasedEraserSettings() { You can programmatically switch between Ink drawing mode and Eraser mode for a seamless workflow: - ```html 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 4d6c9ac907..16ad9d835b 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 @@ -1,7 +1,7 @@ --- layout: post title: Line angle constraints in JavaScript PDF Viewer | Syncfusion -description: Learn to add, edit, delete, and configure highlight, underline, strikethrough, and squiggly text markup annotations programmatically in PDF Viewer. +description: Learn to enable line angle constraints in Syncfusion JavaScript PDF Viewer for precise line-type annotations. platform: document-processing control: PDF Viewer documentation: ug @@ -12,7 +12,7 @@ domainurl: ##DomainURL## 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](../../javascript-es6/annotations/annotation-images/line-angle-constraint.gif) ## Enable line angle constraints @@ -21,7 +21,6 @@ Set the `enableLineAngleConstraints` property within `annotationDrawingOptions` The following code demonstrates enabling line angle constraints: ```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", @@ -29,8 +28,7 @@ var pdfviewer = new ej.pdfviewer.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); - pdfviewer.appendTo('#PdfViewer'); - +pdfviewer.appendTo('#PdfViewer'); ``` ## Work with constrained annotations diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/measurement-annotation.md deleted file mode 100644 index 5bda021b57..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/measurement-annotation.md +++ /dev/null @@ -1,581 +0,0 @@ ---- -layout: post -title: Measurement annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about measurement annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): distance, perimeter, area, radius, and volume. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Measurement annotation in JavaScript PDF Viewer control - -The PDF Viewer provides options to add measurement annotations. The supported measurement annotations are: - -* Distance -* Perimeter -* Area -* Radius -* Volume - -![Measurement annotations overview](../images/calibrate_annotation.png) - -## Adding measurement annotations to the PDF document - -The measurement annotations 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. -* Click the **Measurement Annotation** drop-down button. The pop-up lists available measurement annotation types. -* Select a measurement type to enable its annotation mode. -* Measure and add annotations on the pages of the PDF document. - -When in pan mode, selecting a measurement annotation switches the PDF Viewer to text select mode. - - ![CalibrateTool](../images/calibrate_tool.png) - -The following example switches to distance annotation mode. - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); -let distanceMode = document.getElementById('distanceMode'); -if (distanceMode) { - distanceMode.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Distance"); - } - }); -} - - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let distanceMode = document.getElementById('distanceMode'); -if (distanceMode) { - distanceMode.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Distance"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add a measurement annotation to the PDF document programmatically - -The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. - -Here is an example showing how to add measurement annotations programmatically using addAnnotation(): - -```html - - - - - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let addDistanceAnnotation = document.getElementById('addDistanceAnnotation'); -if (addDistanceAnnotation) { - addDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Distance", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - }); - } - }); -} - -let addPerimeterAnnotation = document.getElementById('addPerimeterAnnotation'); -if (addPerimeterAnnotation) { - addPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Perimeter", { - offset: { x: 200, y: 350 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }] - }); - } - }); -} - -let addAreaAnnotation = document.getElementById('addAreaAnnotation'); -if (addAreaAnnotation) { - addAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Area", { - offset: { x: 200, y: 500 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }] - }); - } - }); -} - -let addRadiusAnnotation = document.getElementById('addRadiusAnnotation'); -if (addRadiusAnnotation) { - addRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Radius", { - offset: { x: 200, y: 630 }, - pageNumber: 1, - width: 90, - height: 90 - }); - } - }); -} - -let addVolumeAnnotation = document.getElementById('addVolumeAnnotation'); -if (addVolumeAnnotation) { - addVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Volume", { - offset: { x: 200, y: 810 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 }] - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let addDistanceAnnotation = document.getElementById('addDistanceAnnotation'); -if (addDistanceAnnotation) { - addDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Distance", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - }); - } - }); -} - -let addPerimeterAnnotation = document.getElementById('addPerimeterAnnotation'); -if (addPerimeterAnnotation) { - addPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Perimeter", { - offset: { x: 200, y: 350 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }] - }); - } - }); -} - -let addAreaAnnotation = document.getElementById('addAreaAnnotation'); -if (addAreaAnnotation) { - addAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Area", { - offset: { x: 200, y: 500 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }] - }); - } - }); -} - -let addRadiusAnnotation = document.getElementById('addRadiusAnnotation'); -if (addRadiusAnnotation) { - addRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Radius", { - offset: { x: 200, y: 630 }, - pageNumber: 1, - width: 90, - height: 90 - }); - } - }); -} - -let addVolumeAnnotation = document.getElementById('addVolumeAnnotation'); -if (addVolumeAnnotation) { - addVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Volume", { - offset: { x: 200, y: 810 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 }] - }); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing measurement annotation programmatically - -To modify an existing measurement annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - - - - - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); -let editDistanceAnnotation = document.getElementById('editDistanceAnnotation'); -if (editDistanceAnnotation) { - editDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Distance calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPerimeterAnnotation = document.getElementById('editPerimeterAnnotation'); -if (editPerimeterAnnotation) { - editPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Perimeter calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editAreaAnnotation = document.getElementById('editAreaAnnotation'); -if (editAreaAnnotation) { - editAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Area calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRadiusAnnotation = document.getElementById('editRadiusAnnotation'); -if (editRadiusAnnotation) { - editRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Radius calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editVolumeAnnotation = document.getElementById('editVolumeAnnotation'); -if (editVolumeAnnotation) { - editVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Volume calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let editDistanceAnnotation = document.getElementById('editDistanceAnnotation'); -if (editDistanceAnnotation) { - editDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Distance calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPerimeterAnnotation = document.getElementById('editPerimeterAnnotation'); -if (editPerimeterAnnotation) { - editPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Perimeter calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editAreaAnnotation = document.getElementById('editAreaAnnotation'); -if (editAreaAnnotation) { - editAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Area calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRadiusAnnotation = document.getElementById('editRadiusAnnotation'); -if (editRadiusAnnotation) { - editRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Radius calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editVolumeAnnotation = document.getElementById('editVolumeAnnotation'); -if (editVolumeAnnotation) { - editVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Volume calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit the properties of measurement 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. - -### Edit fill color - -The fill color of the annotation can be edited using the color palette provided in the Edit Color tool. - -![CalibrateFillColor](../images/calibrate_fillcolor.png) - -### Edit stroke color - -The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool. - -![CalibrateStrokeColor](../images/calibrate_stroke.png) - -### Edit thickness - -Edit border thickness using the range slider provided in the Edit Thickness tool. - -![CalibrateThickness](../images/calibrate_thickness.png) - -### Edit opacity - -The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. - -![CalibrateOpacity](../images/calibrate_opacity.png) - -### Edit the line properties - -Line-based measurement annotations (distance and perimeter) have additional options in the Line Properties window. Open it by right-clicking the annotation and selecting Properties from the context menu. - -![CalibrateProperty](../images/calibrate_lineprop.png) - -## Set default properties during control initialization - -Default properties for measurement annotations can be set before creating the control using distanceSettings, perimeterSettings, areaSettings, radiusSettings, and volumeSettings. - -Refer to the following code snippet to set the default annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - distanceSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}, - perimeterSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}, - areaSettings :{fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}, - radiusSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}, - volumeSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'}, - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - distanceSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}, - perimeterSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}, - areaSettings :{fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}, - radiusSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}, - volumeSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'}, - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} -## Editing scale ratio and unit of the measurement annotation - -The scale ratio and unit of measurement can be modified using the scale ratio option provided in the context menu of the PDF Viewer control. - - ![CalibrateScaleRatio](../images/calibrate_scaleratio.png) - -The Units of measurements support for the measurement annotations in the PDF Viewer are - -* Inch -* Millimeter -* Centimeter -* Point -* Pica -* Feet - -![CalibrateScaleDialog](../images/calibrate_scaledialog.png) - -## Setting default scale ratio settings during control initialization - -The properties of scale ratio for measurement annotation can be set before creating the control using ScaleRatioSettings as shown in the following code snippet, - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - measurementSettings = {scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'}, - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - measurementSettings = {scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'}, - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} 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 74db220781..1ca014f970 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/overview.md @@ -1,7 +1,7 @@ --- layout: post title: Overview of Annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about overview of annotations in the Syncfusion JavaScript PDF Viewer. +description: Learn about annotations in Syncfusion JavaScript PDF Viewer for reviewing, marking up, and annotating PDF documents. platform: document-processing control: PDF Viewer documentation: ug @@ -28,7 +28,7 @@ The PDF Viewer provides a complete set of annotation tools for reviewing, measur ## Annotation manipulation capabilities - [Create annotations](../annotations/create-modify-annotation): Use the toolbar, context menu, or APIs to add highlights, notes, shapes, and more directly onto the PDF document. -- [Edit annotations](../annotations/create-modify-annotation.md): Modify existing annotations by moving, resizing, or updating text and style properties like color, opacity, and thickness. +- [Edit annotations](../annotations/create-modify-annotation): Modify existing annotations by moving, resizing, or updating text and style properties like color, opacity, and thickness. - [Customize annotations](../annotations/customize-annotation): Adjust appearance and behavior—such as fonts, fill colors, and opacity—through the UI or configuration options. - [Undo and redo annotations](../annotations/annotations-undo-redo): Revert or reapply annotation actions (add, edit, delete) using toolbar buttons or corresponding APIs. - [Import and export annotations](../annotations/export-import/export-annotation): Save and load annotations in JSON or XFDF formats to persist markups across sessions or share them with others. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/shape-annotation.md deleted file mode 100644 index 3b547003b4..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/shape-annotation.md +++ /dev/null @@ -1,534 +0,0 @@ ---- -layout: post -title: Shape annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about shape annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2), including add, edit, delete, and default settings. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Shape annotation in JavaScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete shape annotations. The supported shape annotation types are: - -* Line -* Arrow -* Rectangle -* Circle -* Polygon - -![Shape annotations overview](../images/shape_annot.png) - -## Adding a shape annotation to the PDF document - -Shape annotations 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. -* Click the **Shape Annotation** drop-down button. The pop-up lists available shape annotation types. -* Select a shape type to enable its annotation mode. -* Draw the shape on the pages of the PDF document. - -N> When in pan mode and a shape annotation tool is selected, the PDF Viewer switches to text select mode automatically to ensure a smooth interaction experience. - -![Shape annotation toolbar](../images/shape_toolbar.png) - -Refer to the following code sample to switch to the circle annotation mode. - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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" - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let circleAnnotationButton = document.getElementById('circleAnnotationButton'); -if (circleAnnotationButton) { - circleAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Circle"); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let circleAnnotationButton = document.getElementById('circleAnnotationButton'); -if (circleAnnotationButton) { - circleAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Circle"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add a shape annotation to the PDF document programmatically - -The PDF Viewer library allows adding a shape annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#addannotation) method. - -Here is an example showing how to add shape annotations programmatically using addAnnotation(): - -```html - - - - - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let addLineAnnotation = document.getElementById('addLineAnnotation'); -if (addLineAnnotation) { - addLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Line", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - }); - } - }); -} - -let addArrowAnnotation = document.getElementById('addArrowAnnotation'); -if (addArrowAnnotation) { - addArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Arrow", { - offset: { x: 200, y: 370 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 370 }, { x: 350, y: 370 }] - }); - } - }); -} - -let addRectangleAnnotation = document.getElementById('addRectangleAnnotation'); -if (addRectangleAnnotation) { - addRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Rectangle", { - offset: { x: 200, y: 480 }, - pageNumber: 1, - width: 150, - height: 75 - }); - } - }); -} - -let addCircleAnnotation = document.getElementById('addCircleAnnotation'); -if (addCircleAnnotation) { - addCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Circle", { - offset: { x: 200, y: 620 }, - pageNumber: 1, - width: 90, - height: 90 - }); - } - }); -} - -let addPolygonAnnotation = document.getElementById('addPolygonAnnotation'); -if (addPolygonAnnotation) { - addPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Polygon", { - offset: { x: 200, y: 800 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 }] - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let addLineAnnotation = document.getElementById('addLineAnnotation'); -if (addLineAnnotation) { - addLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Line", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - }); - } - }); -} - -let addArrowAnnotation = document.getElementById('addArrowAnnotation'); -if (addArrowAnnotation) { - addArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Arrow", { - offset: { x: 200, y: 370 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 370 }, { x: 350, y: 370 }] - }); - } - }); -} - -let addRectangleAnnotation = document.getElementById('addRectangleAnnotation'); -if (addRectangleAnnotation) { - addRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Rectangle", { - offset: { x: 200, y: 480 }, - pageNumber: 1, - width: 150, - height: 75 - }); - } - }); -} - -let addCircleAnnotation = document.getElementById('addCircleAnnotation'); -if (addCircleAnnotation) { - addCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Circle", { - offset: { x: 200, y: 620 }, - pageNumber: 1, - width: 90, - height: 90 - }); - } - }); -} - -let addPolygonAnnotation = document.getElementById('addPolygonAnnotation'); -if (addPolygonAnnotation) { - addPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Polygon", { - offset: { x: 200, y: 800 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 }] - }); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing shape annotation programmatically - -To modify an existing shape annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - - - - - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); -let editLineAnnotation = document.getElementById('editLineAnnotation'); -if (editLineAnnotation) { - editLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Line") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editArrowAnnotation = document.getElementById('editArrowAnnotation'); -if (editArrowAnnotation) { - editArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Arrow") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRectangleAnnotation = document.getElementById('editRectangleAnnotation'); -if (editRectangleAnnotation) { - editRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Rectangle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editCircleAnnotation = document.getElementById('editCircleAnnotation'); -if (editCircleAnnotation) { - editCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Circle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPolygonAnnotation = document.getElementById('editPolygonAnnotation'); -if (editPolygonAnnotation) { - editPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Polygon") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let editLineAnnotation = document.getElementById('editLineAnnotation'); -if (editLineAnnotation) { - editLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Line") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editArrowAnnotation = document.getElementById('editArrowAnnotation'); -if (editArrowAnnotation) { - editArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Arrow") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRectangleAnnotation = document.getElementById('editRectangleAnnotation'); -if (editRectangleAnnotation) { - editRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Rectangle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editCircleAnnotation = document.getElementById('editCircleAnnotation'); -if (editCircleAnnotation) { - editCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Circle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPolygonAnnotation = document.getElementById('editPolygonAnnotation'); -if (editPolygonAnnotation) { - editPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Polygon") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Editing the properties of the shape annotation - -The fill color, stroke color, thickness, and opacity of shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. - -### Editing fill color - -The fill color of the annotation can be edited using the color palette provided in the Edit Color tool. - -![Edit fill color for shapes](../images/shape_fillColor.png) - -### Editing stroke color - -The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool. - -![Edit stroke color for shapes](../images/shape_strokecolor.png) - -### Editing thickness - -The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool. - -![Edit thickness for shapes](../images/shape_thickness.png) - -### Editing opacity - -The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. - -![Edit opacity for shapes](../images/shape_opacity.png) - -### Editing the line properties - -Line and arrow annotations have additional options in the Line Properties window. Open it by right-clicking a line or arrow annotation and selecting Properties from the context menu. - -Refer to the following code sample to set the default annotation settings. - -![Line properties dialog](../images/shape_lineprty.png) - -## Set default properties during control initialization - -Default properties for shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - lineSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}, - arrowSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}, - rectangleSettings : {fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}, - circleSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}, - polygonSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'} - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - lineSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}, - arrowSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}, - rectangleSettings : {fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}, - circleSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}, - polygonSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'} - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ No newline at end of file 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 d6754bfe0b..2e562f5577 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 @@ -33,7 +33,7 @@ The handwritten signature can be added to the PDF document using the annotation Refer to the following code sample to switch to the handwritten signature mode programmatically. ```html - + ``` {% tabs %} {% highlight ts tabtitle="Standalone" %} @@ -77,11 +77,11 @@ if (handWrittenSignature) { ### Add a handwritten signature programmatically -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. +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#addannotation) method. Here is an example of adding a handwritten signature programmatically using the `addAnnotation()` method: ```html - + ``` {% tabs %} @@ -252,7 +252,7 @@ document.getElementById('Signature')?.addEventListener('click', function () { height: 65, signatureItem: ['Signature'], signatureDialogSettings: { - displayMode: DisplayMode.Text, hideSaveSignature: false + displayMode: ej.pdfviewer.DisplayMode.Text, hideSaveSignature: false }, canSave: false, path: 'Syncfusion', @@ -290,7 +290,7 @@ document.getElementById('Signature')?.addEventListener('click', function () { height: 65, signatureItem: ['Signature'], signatureDialogSettings: { - displayMode: DisplayMode.Text, hideSaveSignature: false + displayMode: ej.pdfviewer.DisplayMode.Text, hideSaveSignature: false }, canSave: false, path: 'Syncfusion', diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/stamp-annotation.md deleted file mode 100644 index 0af4ee5c88..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/stamp-annotation.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -layout: post -title: Stamp annotation in JavaScript PDF Viewer control | Syncfusion -description: Learn about stamp annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): dynamic, sign here, standard business, and custom stamps. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Stamp annotation in JavaScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotations in PDF documents: - -* Dynamic -* Sign Here -* Standard Business -* Custom Stamp - -![StampAnnotation](../images/stamp_annot.png) - -## Add stamp annotations to the PDF document - -The stamp annotations 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. -* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types. - -![StampTool](../images/stamp_tool.png) - -* Select a stamp type to enable its annotation mode. - -![StampPopup](../images/selectstamp_annot.png) - -* Place the stamp on the pages of the PDF document. - -N> When in pan mode and a stamp annotation tool is selected, the PDF Viewer switches to text select mode automatically for a smooth interaction experience. - -The following examples switch to stamp annotation modes. - -```html - - - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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" - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', 'NotApproved'); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, 'Witness'); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, undefined, 'Approved'); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, SignStampItem, StandardBusinessStampItem, DynamicStampItem,} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'; -pdfviewer.appendTo('#PdfViewer'); - -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', 'NotApproved'); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, 'Witness'); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, undefined, 'Approved'); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add a custom stamp to the PDF document - -* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types. -* Click the Custom Stamp button. - -![CustomStamp](../images/customStamp.png) - -* In the file explorer dialog, choose an image and add it to the PDF page. - ->Only JPG and JPEG image formats are supported for custom stamp annotations. - -## Add a stamp annotation to the PDF document programmatically - -The PDF Viewer library allows adding a stamp annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#annotation) method. - -Here are examples showing how to add stamp annotations programmatically using addAnnotation(): - -```html - - - - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 140 }, - pageNumber: 1 - }, 'Approved'); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 240 }, - pageNumber: 1 - }, undefined,'Witness'); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 340 }, - pageNumber: 1 - }, undefined, undefined, 'Approved'); - } - }); -} - -let customStamp = document.getElementById('customStamp'); -if (customStamp) { - customStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation('Stamp', - { - offset: { x: 100, y: 440 }, - width: 46, - author: 'Guest', - height: 100, - isLock: true, - pageNumber: 1, - customStamps: [ - { - customStampName: "Image", - customStampImageSource: - "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAqwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQHAv/EAEEQAAEDAwIEAwYDBAYLAAAAAAECAwQABREGIRIxQVETYXEHFCIygZEVQmIjUnKCJCUzU6HRFhc1c5KisbKzwvD/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APcaUpQKUpQKUpQKUpQKUpQKVzXGdFtsN2ZPfbYjNJ4nHHDgJFfEK5Q5ttbuUaQhcNxvxUPcklPfflQdlYJxURpe/salthuMNpxEYvuNtKc28VKVcPGB2JB577Vyz7pNuUxy26eWlCml8Mu4OI4kR/0oB2Wvp2T17EJK43qDbloakOqL7m6I7TanHVjOMhCQTjzxgVut89i4Mqdj8Y4VlC0OIKFIUOYKTuOn0INRZZtWkrVLuDpIIHHJlPK4nX1dOJR5kk4A5DYDArVoWbHuVgTPjvF5Ul5xx5zhIBc4jkJyBlI+UHqE0FjpSlApSlApSlApSlApSlApSlApSlArClAczgVmqr7QZLptkezxHi1KvD4ihxKsFprBU6v6IB+pFBTdUKf1uUuFa0WpyUIVoYBx706chchXdKEhZSPLNXXVTsOw6NdjNxkvJS0iLEidHnDhLaPME4z5ZzVHk6kTHu1vTpyE1Jf8L3Oww1ZDaGc4XJXjklXDhP6UlWd63ybrL1rq1mNa1hLcAKEeQgcTbbvyuScHnw5KGweZJPIVRYoDT6okfSlnfWhmCwlu43FGAUKxu2j9atyT+UHvirZBixLZBaiQ2kR4zCMIQnZKRWuz2yLZ7czBgo4GWh13KidypR6qJJJPevOvaFqCXqC4HSGmzxlxQbmvJJAPXwwe2M8R9R3FQc1xde9qOqEW+C44jTFuVxPvtnHvCvI+e4HYZPavV4sdmLGajxmktMtJCENpGAkDkBUbpixRNO2dm3Q0/Cj4lrPNazzUf/uWKlkkEZByKDNKUoFKUoFKUoFKUoFKwahZ2p7dFfMZhTs+ZnHu0FHirB/VjZHqogUE3WOIYzUApzUlwBKUxLOwQCFL/bv467DCEn6qr5i6btk5ht+ZOlXlCxlLkiTxtr8whGG8fy0HdK1FZorymHbjH8dPNlC+NY/lTk1XNTe0m12SCXBFnrkOpX7uh6ItkKUBzPGEnhzjcA1bokKLAZS1BjMx20jAQy2EjHoK85i6PuOovaFNv+pWPDt8J/ggMKUCXktq+BX8HNXmT2G9HLF1trSyW2GrUFgbluT3eCIRIS26tS/iSjwgCcDl35Z3qBlSb/edVcN58e4tojKafiW2MfDQpRBXF8X5UnZPGsq5ZAr0TV2j52oL9Anx7wqCxHYWypLbeXAFH4lNqz8KiNs8x0qy2e1QrNbmYFuZDUdkYSkHOT1JPUk7k0HhsG6u3SHPeisLFwnucE95hOPdmc8DUNhR/OrCR5Ak9NvX9F6cRp20IZIR706AX1I5DA2Qn9KRsPvzJqGmXG0N6pfk3KTEhW2ykBsLKUh2Y4nKlY6lKCAOuVmuafry5T5rFs0vaHQ5JSVIm3FBaQhvq7wfNwjurAPnQZ9pms1WtlVmtDqRcnxwrdK+ERknqT0Vj7DftUN7OA1BilywWx65TnU8PjOAtMsJJzlbhBypXMhPFgADbrF6B0sNSagkzrk+5cbTDeUQ5IHwy3T+bHbYE/y9yK9sabQ02lDSAhCRhKUjAAoIaFaZ8gh++zg8vIKYsUFphB+/Ev8AmONuVTYGBgcqzSoFKUoFKUoFKUoFcV4mOW+2yJbEN6Y40gqTHYGVuHsK7awRmg8rd/1gameJn2n8Ptv5YQn+78f+8cSFLI57AJ8/Oy2eyalhxkRo79htEVI2YgQ1uEH+JSgD68NW/FQ2r7yqxWCTNZR4knZqM1/ePLPChP3IoKRc4l91FqJ3TkfUst2Aygfiz7TDTaEA8mkEAnjPXfAH2NohaPehR2Y8bVF9QwygNttJMcJSkDAAAZru0hY02CyMxFK8SWv9rMfPN55W6lE9d9vQCpughmrLNZVxI1Fc19kupYUn/wAYP+NdQVMjD+khEhsfM40nhUPMp3z9D9K76xQRN/uNxjWj3qwW9F0krKfDa8YISUn83F25VVocf2kXdR/EJlrskZQxiM14ryR5ZJA9c/SrHo973m2SFjPhCfKSzn9wPLCceXbyxUpPmRrdDemTHUMx2UFbjizgJAoPGrbpyJBRPvEi53STfhc34MRCVMrckLSvCT8aFEEjBUQdhUlfbHcrcItuYvc+VqbUBDcpf7PgDSfnJPBxBCQcDBGcnlUn7Om4kly+aonhbPBPkeGiRsIqCEqUcHkSMZ9K5bRqqMbjJ1E5FkTrndFe72m2sAF1MVBI4iD8iVKyoqO2w7VRbrJpRdkt7MGDe56GGhgJ8Njn1P8AZ9fPNd5gXNKQEXt0q7uRmz/0AqFja29znGFq2EmxuqaLzDrkhK2XUj5gF7YUNvhqsX+66nvtqlarsrsmDa7aUvQIqQULuCUqHiLdGPk4c8I686g9BMK8/lu7IxyzCB/9q4bpJkWeP7xd9TQojGeHjdipRk9hlW5/yrF21raoEGM/HcM+TMSDEhwyFuv55YA5DfcnYVx2fTD9wm/jeskMS7goYYhY42IKeyQeajtlR68tqCUjtXWVHakQL/FejupC23PcwsLSeoKVgEVsLWomsFMm1yAM5C2HGir6hSsfY1B6ILViuV50utSWkRpHvNvQTgGO6OLCe/CviB7bVMXjVMC2vCG0VTrk4MtQIeHHleZHJCf1KwKDTcNSqskB2XqSCYjTQ3fYcDzSj0SOSgSdhlP1r50FqherbM5cVQVQwmQtkNlfFxBON8/XB8wa4JNsfUzJ1Jq/wXFQWnH4tvbPEzFCUk8RyPjd2+bkOQ7nHs0iSLRY7dBkKUoy4gnYV8yHFEFxPoCtOPU+VBdaUpQKUpQKqF4H4xry027YxrYyq4yB3cPwND/vV9BVvNVTRf8ATrhqC9KIUJU4x2T2aZHAB/xcZ+tBa6UpQKr+r7lIjRWrdaz/AFrcleBF2z4W3xOq8kDf1wOtSV5ukSz216fOc4GGhk4GSo9EpHVROwHU1DaWtst2S9qG+N8Nzlp4WWSc+6R85S0P1dVHqfSgm7Rb2bTbItvjcXhR2g2kqOVKx1J6k8zVbfP+leoSxkGx2h7LxztJlD8h6FCOZ/VjtXdq25ymWY9ptSv61uSi2yr+4Rj43T5JHLzIrRfHIujtCy/dthFiqQyD8zrqhgZ7qUo/40FJsbL2q7W/YYchUdqdMlXC5SEDJQhbq/CbHTKuEEj90edXfRWi4Gk4yvAUqTMdADsp35ikckj91I7Vn2e6bTpnTUaG5hUtweLJcHVw9PQch6VZ6Dhudot12aQ1dIEWa2hXEhEllLgSe4Cga7OBPBwYHDjGMbYr6pQRNp03ZrM669arVChuu/OphkJJ8tunlUt0pSgjLxYLVew2LtAYleEctqcT8SPRXMfevq0WO12VtTdpgRoiVHKy02AVnuo8z9akaUEBr2O9L0beI8dtx1xyMpIQ2kqUodQANycZrk07JVeLyq4R2HmrZCiiJFW62UF9SilS1AHfhHAgA7b8XlVqIzWMb0GaUpQKUpQc9wkCJAkyVcmWlOH6AmoL2bsqZ0LZi4SXHowfcUeZU58ZP3VUpqNlcjT1zYaGVuRHUJA6koIFcuiZDcnR9lea+RcFkgdvgG1BN1omS48GM7JluoZYaSVuOLOEpSOZJrXdLjEtUF2bcJLceM0MrccOAP8AP0qqR4czWk1qfd2HItgZWFxLe6MLlKHJ14dE9kH1NBttDEjVVzYvtxaUza4547ZCdThSz0kLHQ4+UdAc86tcmQzDjOyJLiW2WUFxxxWwSkDJJ+lbQAOVVPU6vx29xdLsqPgBKZdzIG3ghWEtE9CtX/Kk0GzSTDlwekamnNlL08BMNCs5ZijdAweRVniPqB0qsarce1XrezWlghVsiTCp3B/tFtDicPok8CP4lq7VedSzXYFr8OBwpmyVCPEyPhStQPxEfupAKj5JNVz2eW9t2RIvLJWqGlsQbetXN1pCsuPerjmVZ6gCqLyBis0pUClKUClKUClKUClKUClKUClKUGCMjFVNqw36yeOxpmbb/wAPdcU43GntLPuqlHJCFJO6ckkJI2zzq20oKtE0iZE5q46mnKu8to8TLSmwiMwe6G99/wBSiTVoGwrNcV4uUez2yTcJiiGY7ZWrAyT2AHUk7D1oMXq6R7PapNxlk+FHQVkAZKj0SB1JOAPWozRtqfhW5ybcf9qXJz3qZk54FEbNg9kDCfoT1qGi++alvEGJdGwlq2hE+e0FApTKVu0we4Qk8R7nhNXkcqCs6q0zK1DcIWbkqNbW23ESmWk4ceCsZAV+UEAgnngnvViix2okZqPHbS2y0kIbQkYCUjYAVtpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKouv7mwi7W2HJBdZiJNxXHSd5DoUER2gOpU4rI/gq9VxO2i3PXRu6OwmFz2m/DbkKQCtKck4B+p+9BxaTtblqtQEvhM+UtUqatO4U8vdW/YbJHkkVNVgDFZoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoP//Z" - } - ] - }); - } - }); -} -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 140 }, - pageNumber: 1 - }, 'Approved'); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 240 }, - pageNumber: 1 - }, undefined,'Witness'); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 340 }, - pageNumber: 1 - }, undefined, undefined, 'Approved'); - } - }); -} - -let customStamp = document.getElementById('customStamp'); -if (customStamp) { - customStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation('Stamp', - { - offset: { x: 100, y: 440 }, - width: 46, - author: 'Guest', - height: 100, - isLock: true, - pageNumber: 1, - customStamps: [ - { - customStampName: "Image", - customStampImageSource: - "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAqwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQHAv/EAEEQAAEDAwIEAwYDBAYLAAAAAAECAwQABREGIRIxQVETYXEHFCIygZEVQmIjUnKCJCUzU6HRFhc1c5KisbKzwvD/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APcaUpQKUpQKUpQKUpQKUpQKVzXGdFtsN2ZPfbYjNJ4nHHDgJFfEK5Q5ttbuUaQhcNxvxUPcklPfflQdlYJxURpe/salthuMNpxEYvuNtKc28VKVcPGB2JB577Vyz7pNuUxy26eWlCml8Mu4OI4kR/0oB2Wvp2T17EJK43qDbloakOqL7m6I7TanHVjOMhCQTjzxgVut89i4Mqdj8Y4VlC0OIKFIUOYKTuOn0INRZZtWkrVLuDpIIHHJlPK4nX1dOJR5kk4A5DYDArVoWbHuVgTPjvF5Ul5xx5zhIBc4jkJyBlI+UHqE0FjpSlApSlApSlApSlApSlApSlApSlArClAczgVmqr7QZLptkezxHi1KvD4ihxKsFprBU6v6IB+pFBTdUKf1uUuFa0WpyUIVoYBx706chchXdKEhZSPLNXXVTsOw6NdjNxkvJS0iLEidHnDhLaPME4z5ZzVHk6kTHu1vTpyE1Jf8L3Oww1ZDaGc4XJXjklXDhP6UlWd63ybrL1rq1mNa1hLcAKEeQgcTbbvyuScHnw5KGweZJPIVRYoDT6okfSlnfWhmCwlu43FGAUKxu2j9atyT+UHvirZBixLZBaiQ2kR4zCMIQnZKRWuz2yLZ7czBgo4GWh13KidypR6qJJJPevOvaFqCXqC4HSGmzxlxQbmvJJAPXwwe2M8R9R3FQc1xde9qOqEW+C44jTFuVxPvtnHvCvI+e4HYZPavV4sdmLGajxmktMtJCENpGAkDkBUbpixRNO2dm3Q0/Cj4lrPNazzUf/uWKlkkEZByKDNKUoFKUoFKUoFKUoFKwahZ2p7dFfMZhTs+ZnHu0FHirB/VjZHqogUE3WOIYzUApzUlwBKUxLOwQCFL/bv467DCEn6qr5i6btk5ht+ZOlXlCxlLkiTxtr8whGG8fy0HdK1FZorymHbjH8dPNlC+NY/lTk1XNTe0m12SCXBFnrkOpX7uh6ItkKUBzPGEnhzjcA1bokKLAZS1BjMx20jAQy2EjHoK85i6PuOovaFNv+pWPDt8J/ggMKUCXktq+BX8HNXmT2G9HLF1trSyW2GrUFgbluT3eCIRIS26tS/iSjwgCcDl35Z3qBlSb/edVcN58e4tojKafiW2MfDQpRBXF8X5UnZPGsq5ZAr0TV2j52oL9Anx7wqCxHYWypLbeXAFH4lNqz8KiNs8x0qy2e1QrNbmYFuZDUdkYSkHOT1JPUk7k0HhsG6u3SHPeisLFwnucE95hOPdmc8DUNhR/OrCR5Ak9NvX9F6cRp20IZIR706AX1I5DA2Qn9KRsPvzJqGmXG0N6pfk3KTEhW2ykBsLKUh2Y4nKlY6lKCAOuVmuafry5T5rFs0vaHQ5JSVIm3FBaQhvq7wfNwjurAPnQZ9pms1WtlVmtDqRcnxwrdK+ERknqT0Vj7DftUN7OA1BilywWx65TnU8PjOAtMsJJzlbhBypXMhPFgADbrF6B0sNSagkzrk+5cbTDeUQ5IHwy3T+bHbYE/y9yK9sabQ02lDSAhCRhKUjAAoIaFaZ8gh++zg8vIKYsUFphB+/Ev8AmONuVTYGBgcqzSoFKUoFKUoFKUoFcV4mOW+2yJbEN6Y40gqTHYGVuHsK7awRmg8rd/1gameJn2n8Ptv5YQn+78f+8cSFLI57AJ8/Oy2eyalhxkRo79htEVI2YgQ1uEH+JSgD68NW/FQ2r7yqxWCTNZR4knZqM1/ePLPChP3IoKRc4l91FqJ3TkfUst2Aygfiz7TDTaEA8mkEAnjPXfAH2NohaPehR2Y8bVF9QwygNttJMcJSkDAAAZru0hY02CyMxFK8SWv9rMfPN55W6lE9d9vQCpughmrLNZVxI1Fc19kupYUn/wAYP+NdQVMjD+khEhsfM40nhUPMp3z9D9K76xQRN/uNxjWj3qwW9F0krKfDa8YISUn83F25VVocf2kXdR/EJlrskZQxiM14ryR5ZJA9c/SrHo973m2SFjPhCfKSzn9wPLCceXbyxUpPmRrdDemTHUMx2UFbjizgJAoPGrbpyJBRPvEi53STfhc34MRCVMrckLSvCT8aFEEjBUQdhUlfbHcrcItuYvc+VqbUBDcpf7PgDSfnJPBxBCQcDBGcnlUn7Om4kly+aonhbPBPkeGiRsIqCEqUcHkSMZ9K5bRqqMbjJ1E5FkTrndFe72m2sAF1MVBI4iD8iVKyoqO2w7VRbrJpRdkt7MGDe56GGhgJ8Njn1P8AZ9fPNd5gXNKQEXt0q7uRmz/0AqFja29znGFq2EmxuqaLzDrkhK2XUj5gF7YUNvhqsX+66nvtqlarsrsmDa7aUvQIqQULuCUqHiLdGPk4c8I686g9BMK8/lu7IxyzCB/9q4bpJkWeP7xd9TQojGeHjdipRk9hlW5/yrF21raoEGM/HcM+TMSDEhwyFuv55YA5DfcnYVx2fTD9wm/jeskMS7goYYhY42IKeyQeajtlR68tqCUjtXWVHakQL/FejupC23PcwsLSeoKVgEVsLWomsFMm1yAM5C2HGir6hSsfY1B6ILViuV50utSWkRpHvNvQTgGO6OLCe/CviB7bVMXjVMC2vCG0VTrk4MtQIeHHleZHJCf1KwKDTcNSqskB2XqSCYjTQ3fYcDzSj0SOSgSdhlP1r50FqherbM5cVQVQwmQtkNlfFxBON8/XB8wa4JNsfUzJ1Jq/wXFQWnH4tvbPEzFCUk8RyPjd2+bkOQ7nHs0iSLRY7dBkKUoy4gnYV8yHFEFxPoCtOPU+VBdaUpQKUpQKqF4H4xry027YxrYyq4yB3cPwND/vV9BVvNVTRf8ATrhqC9KIUJU4x2T2aZHAB/xcZ+tBa6UpQKr+r7lIjRWrdaz/AFrcleBF2z4W3xOq8kDf1wOtSV5ukSz216fOc4GGhk4GSo9EpHVROwHU1DaWtst2S9qG+N8Nzlp4WWSc+6R85S0P1dVHqfSgm7Rb2bTbItvjcXhR2g2kqOVKx1J6k8zVbfP+leoSxkGx2h7LxztJlD8h6FCOZ/VjtXdq25ymWY9ptSv61uSi2yr+4Rj43T5JHLzIrRfHIujtCy/dthFiqQyD8zrqhgZ7qUo/40FJsbL2q7W/YYchUdqdMlXC5SEDJQhbq/CbHTKuEEj90edXfRWi4Gk4yvAUqTMdADsp35ikckj91I7Vn2e6bTpnTUaG5hUtweLJcHVw9PQch6VZ6Dhudot12aQ1dIEWa2hXEhEllLgSe4Cga7OBPBwYHDjGMbYr6pQRNp03ZrM669arVChuu/OphkJJ8tunlUt0pSgjLxYLVew2LtAYleEctqcT8SPRXMfevq0WO12VtTdpgRoiVHKy02AVnuo8z9akaUEBr2O9L0beI8dtx1xyMpIQ2kqUodQANycZrk07JVeLyq4R2HmrZCiiJFW62UF9SilS1AHfhHAgA7b8XlVqIzWMb0GaUpQKUpQc9wkCJAkyVcmWlOH6AmoL2bsqZ0LZi4SXHowfcUeZU58ZP3VUpqNlcjT1zYaGVuRHUJA6koIFcuiZDcnR9lea+RcFkgdvgG1BN1omS48GM7JluoZYaSVuOLOEpSOZJrXdLjEtUF2bcJLceM0MrccOAP8AP0qqR4czWk1qfd2HItgZWFxLe6MLlKHJ14dE9kH1NBttDEjVVzYvtxaUza4547ZCdThSz0kLHQ4+UdAc86tcmQzDjOyJLiW2WUFxxxWwSkDJJ+lbQAOVVPU6vx29xdLsqPgBKZdzIG3ghWEtE9CtX/Kk0GzSTDlwekamnNlL08BMNCs5ZijdAweRVniPqB0qsarce1XrezWlghVsiTCp3B/tFtDicPok8CP4lq7VedSzXYFr8OBwpmyVCPEyPhStQPxEfupAKj5JNVz2eW9t2RIvLJWqGlsQbetXN1pCsuPerjmVZ6gCqLyBis0pUClKUClKUClKUClKUClKUClKUGCMjFVNqw36yeOxpmbb/wAPdcU43GntLPuqlHJCFJO6ckkJI2zzq20oKtE0iZE5q46mnKu8to8TLSmwiMwe6G99/wBSiTVoGwrNcV4uUez2yTcJiiGY7ZWrAyT2AHUk7D1oMXq6R7PapNxlk+FHQVkAZKj0SB1JOAPWozRtqfhW5ybcf9qXJz3qZk54FEbNg9kDCfoT1qGi++alvEGJdGwlq2hE+e0FApTKVu0we4Qk8R7nhNXkcqCs6q0zK1DcIWbkqNbW23ESmWk4ceCsZAV+UEAgnngnvViix2okZqPHbS2y0kIbQkYCUjYAVtpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKouv7mwi7W2HJBdZiJNxXHSd5DoUER2gOpU4rI/gq9VxO2i3PXRu6OwmFz2m/DbkKQCtKck4B+p+9BxaTtblqtQEvhM+UtUqatO4U8vdW/YbJHkkVNVgDFZoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoP//Z" - } - ] - }); - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Edit an existing stamp annotation programmatically - -To modify an existing stamp annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); -if (editAnnotation) { - editAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "stamp") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].annotationSettings.isLock = true; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -if (editAnnotation) { - editAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "stamp") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].annotationSettings.isLock = true; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Set default properties during control initialization - -Default properties for stamp annotations can be set before creating the control using StampSettings. - -After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default stamp annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - stampSettings : {opacity: 0.3, author: 'Guest User'} - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - stampSettings : {opacity: 0.3, author: 'Guest User'} - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/sticky-notes-annotation.md deleted file mode 100644 index e5a5c63bd3..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/sticky-notes-annotation.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -layout: post -title: Sticky notes in JavaScript PDF Viewer control | Syncfusion -description: Learn about sticky note annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Sticky notes in JavaScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete sticky note annotations in the PDF document. - -![StickyNotesAnnotation](../images/stickynotes_annotation.png) - -## Add a sticky note annotation to the PDF document - -Sticky note annotations can be added to the PDF document using the annotation toolbar. - -* Click the **Comments** button in the PDF Viewer toolbar. The annotation toolbar appears below it. -* Click the position where the sticky note annotation should be added. -* The sticky note annotation is added at the clicked position. - - ![StickyNotesTool](../images/stickynotes_tool.png) - -Annotation comments can be added using the comment panel. - -* Select a sticky note annotation in the PDF document and right-click it. -* Select Comment from the context menu. -* Add comments, replies, and status using the comment panel. - -![StickyNotesComment](../images/stickynotes_comment.png) - -## Add a sticky note annotation to the PDF document programmatically - -The PDF Viewer library allows adding a sticky note annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method. - -Here is an example showing how to add a sticky note annotation programmatically using addAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("StickyNotes", { - offset: { x: 100, y: 200 }, - pageNumber: 1, - isLock: false - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("StickyNotes", { - offset: { x: 100, y: 200 }, - pageNumber: 1, - isLock: false - }); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing sticky note annotation programmatically - -To modify an existing sticky note annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "sticky") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "sticky") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit the properties of sticky note annotations - -### Editing opacity - -Edit opacity using the range slider in the Edit Opacity tool. - -![StickyNotesOpacity](../images/sticky_opacity.png) - -### Editing comments - -Comment text, replies, and status can be edited using the comment panel. - -* Open the comment panel using the Comment Panel button in the annotation toolbar. - - ![StickyNotesComment](../images/commentPanel.png) - -Modify or delete comments or replies, and change status using the menu options in the comment panel. - - ![StickyNotesEdit](../images/sticky_editbtn.png) - -## Set default properties during control initialization - -Default properties for sticky note annotations can be set before creating the control using StickyNotesSettings. - -After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default sticky note annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - stickyNotesSettings : {author: 'Syncfusion'} - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - stickyNotesSettings : {author: 'Syncfusion'} - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} - -## Disable sticky note annotations - -The PDF Viewer control provides an option to disable sticky note annotations. The following example disables the feature. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - enableStickyNotesAnnotation : false - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - enableStickyNotesAnnotation : false - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/text-markup-annotation.md deleted file mode 100644 index 13005db875..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/text-markup-annotation.md +++ /dev/null @@ -1,575 +0,0 @@ ---- -layout: post -title: Text markup annotation in JavaScript PDF Viewer | Syncfusion -description: Learn to add, edit, delete, and customize text markup annotations like highlight, underline, and squiggly in Syncfusion JavaScript PDF Viewer. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Text markup annotation in JavaScript PDF Viewer - -The PDF Viewer provides options to add, edit, and delete text markup annotations, including Highlight, Underline, Strikethrough, and Squiggly. - -![Alt text](../images/text_markup_annotation.png) - -## Highlight text - -There are two ways to highlight text: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Highlight** in the context menu. - -![Alt text](../images/highlight_context.png) - - -2. Using the annotation toolbar -* 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**. - -![Alt text](../images/highlight_button.PNG) - -When pan mode is active and a text markup mode is entered, the PDF Viewer switches to text selection mode to enable selection. - -Refer to the following code snippet to switch to highlight mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/highlight-mode-cs1/index.html %} -{% 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 -`serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` - -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/highlight-mode-cs1" %} - -Refer to the following code snippet to switch back to normal mode from highlight mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/highlight-normal-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/highlight-normal-mode-cs1" %} - -## Highlight text programmatically - -Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let highlight = document.getElementById('highlight'); -if (highlight) { - highlight.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Highlight", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let highlight = document.getElementById('highlight'); -if (highlight) { - highlight.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Highlight", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Underline text - -There are two ways to underline text: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Underline** in the context menu. - -![Alt text](../images/underline_context.png) - - -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**. - -![Alt text](../images/underline_button.png) - -In the pan mode, if the underline mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for underlining the text. - -Refer to the following code snippet to switch to underline mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/underline-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/underline-mode-cs1" %} - - -Refer to the following code snippet to switch back to normal mode from underline mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/underline-normal-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/underline-normal-mode-cs1" %} - -## Underline text programmatically - -Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let underline = document.getElementById('underline'); -if (underline) { - underline.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Underline", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let underline = document.getElementById('underline'); -if (underline) { - underline.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Underline", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Strikethrough text - -There are two ways to strikethrough text: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Strikethrough** in the context menu. - -![Alt text](../images/strikethrough_context.png) - - -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**. - -![Alt text](../images/strikethrough_button.png) - -In the pan mode, if the strikethrough mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for striking through the text. - -Refer to the following code snippet to switch to strikethrough mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/strikethrough-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/strikethrough-mode-cs1" %} - -Refer to the following code snippet to switch back to normal mode from strikethrough mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/strikethrough-normal-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/strikethrough-normal-mode-cs1" %} - -## Strikethrough text programmatically - -Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let strikethrough = document.getElementById('strikethrough'); -if (strikethrough) { - strikethrough.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Strikethrough", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let strikethrough = document.getElementById('strikethrough'); -if (strikethrough) { - strikethrough.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Strikethrough", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Add squiggly to text - -There are two ways to add squiggly to text: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Squiggly** in the context menu. - -![Alt text](../images/squiggly_context.png) - -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**. - -![Alt text](../images/squiggly_button.png) - -In the pan mode, if the squiggly mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for adding squiggly to the text. - -Refer to the following code snippet to switch to squiggly mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/squiggly-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/squiggly-mode-cs1" %} - -Refer to the following code snippet to switch back to normal mode from squiggly mode. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/squiggly-normal-mode-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/squiggly-normal-mode-cs1" %} - -## Add squiggly to text programmatically - -Programmatically add squiggly using the [addAnnotation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -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", - }); -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); -pdfviewer.appendTo('#PdfViewer'); - -let squiggly = document.getElementById('squiggly'); -if (squiggly) { - squiggly.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Squiggly", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl : "https://document.syncfusion.com/web-services/pdf-viewer/api/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); -pdfviewer.appendTo('#PdfViewer'); -let squiggly = document.getElementById('squiggly'); -if (squiggly) { - squiggly.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Squiggly", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - }); - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Deleting a text markup annotation - -The selected annotation can be deleted in the following ways: - -1. Using the Delete/Backspace key - * Select the annotation. - * Press Delete (or Backspace). The selected annotation is removed. - -2. Using the annotation toolbar - * Select the annotation. - * Click **Delete Annotation** in the annotation toolbar. The selected annotation is removed. - -![Alt text](../images/delete_button.png) - -## Edit text markup annotation properties - -The color and the opacity of the text markup annotation can be edited using the Edit Color tool and the Edit Opacity tool in the annotation toolbar. - -### Edit color - -Use the color palette in the Edit Color tool to change the annotation color. - -![Alt text](../images/edit_color.png) - -### Edit opacity - -Use the range slider in the Edit Opacity tool to change annotation opacity. - -![Alt text](../images/edit_opacity.png) - -## Set default properties during control initialization - -Set default properties before creating the control using `highlightSettings`, `underlineSettings`, `strikethroughSettings`, and `squigglySettings`. - -> 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 annotation settings. - -{% tabs %} -{% highlight js tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"", - highlightSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''}, - underlineSettings: {author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9, modifiedDate: ''}, - strikethroughSettings: {author: 'Guest User', subject: 'Not Important', color: '#ff00ff', opacity: 0.9, modifiedDate: ''}, - squigglySettings: {author: 'Guest User', subject: 'Spelling Error', color: '#ff0000', opacity: 0.9, modifiedDate: ''} -}); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - highlightSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''}, - underlineSettings: {author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9, modifiedDate: ''}, - strikethroughSettings: {author: 'Guest User', subject: 'Not Important', color: '#ff00ff', opacity: 0.9, modifiedDate: ''}, - squigglySettings: {author: 'Guest User', subject: 'Spelling Error', color: '#ff0000', opacity: 0.9, modifiedDate: ''} -}); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} - -## Perform undo and redo - -The PDF Viewer supports undo and redo for changes. For text markup annotations, undo and redo are provided for: - -* Inclusion of the text markup annotations. -* Deletion of the text markup annotations. -* Change of either color or opacity of the text markup annotations. - -Undo and redo actions can be performed in the following ways: - -1. Using keyboard shortcuts: - After performing a text markup annotation action, press Ctrl+Z to undo and Ctrl+Y to redo. -2. Using the toolbar: - Use the **Undo** and **Redo** tools in the toolbar. - -Refer to the following code snippet to call undo and redo actions from the client side. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/undo-redo-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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-text-markup-annotation/undo-redo-cs1" %} - -## Save text markup annotations - -Click the download tool in the toolbar to save text markup annotations to the PDF document. The original document is not modified. - -## Print text markup annotations - -Click the print tool in the toolbar to print the PDF document with text markup annotations. The original document is not modified. - -## Disable text markup annotation - -Disable text markup annotations using the `enableTextMarkupAnnotation` property. - -{% tabs %} -{% highlight js tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - enableTextMarkupAnnotation: false, - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - enableTextMarkupAnnotation: false, - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer' - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} - -## See also - -* [Toolbar items](../toolbar) -* [Feature modules](../feature-module) 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 1bf494a8d2..f3b23ce089 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 @@ -30,6 +30,7 @@ This page explains how to: You can attach custom data at the time of field creation by passing a `customData` object in the settings parameter of `addFormField()`. ```js +// Ensure the viewer instance (var viewer = new ej.pdfviewer.PdfViewer({ ... })) is created and appended before this code runs. viewer.documentLoad = function () { var meta = { businessId: 'C-1024', tags: ['profile','kiosk'], requiredRole: 'admin' }; viewer.formDesignerModule.addFormField('Textbox', { @@ -70,7 +71,7 @@ viewer.checkBoxFieldSettings = { ## Update or Replace PDF Form Field Custom Data -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. +Modify the `customData` of an existing form field using [`updateFormField()`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#updateformfields). The field can be identified using its object reference or field ID. ```js // Retrieve existing fields @@ -85,7 +86,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/javascript/documentation/api/pdfviewer/index-default#updateformfields) to avoid overwriting previously stored data. ## Read Custom Data from PDF Form Fields @@ -121,7 +122,7 @@ viewer.documentLoad = function () { - [Form Designer overview](./overview) - [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) - [Create form fields](./overview-create-forms) -- [Group form fields](../group-form-fields) +- [Group form fields](./group-form-fields) - [Form flags](./form-constrain) - [Form validation](./form-validation) - [Form fields API](./form-fields-api) \ No newline at end of file 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 be521e030f..4e270dc391 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 @@ -22,7 +22,7 @@ This topic explains: The following flags are supported in the PDF Viewer: -- [isReadOnly](#make-fields-read-only) +- [isReadOnly](#make-fields-read-only) Prevents users from modifying the form field in the UI while still allowing updates through APIs. - [isRequired](#mark-fields-as-required) @@ -33,7 +33,7 @@ The following flags are supported in the PDF Viewer: ## Key actions -### Make fields read only +### 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 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 4186925d88..7ae8cdc083 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 @@ -73,7 +73,7 @@ pdfviewer.appendTo('#PdfViewer'); ## Form designer UI -When [Form Designer mode](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formdesigner) is enabled in the [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. +When [Form Designer mode](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formdesigner) is enabled in the [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. ![FormDesigner](../../javascript-es6/images/FormDesigner.gif) @@ -128,7 +128,7 @@ For more information about creating and editing form fields in the PDF Viewer, r ## Show or Hide the Built-in Form Designer Toolbar -You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) method. This allows you to display or hide the Form Designer tools in the PDF Viewer based on your application requirements. +You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) property. This allows you to display or hide the Form Designer tools in the PDF Viewer based on your application requirements. **Use this method to:** - Show the Form Designer toolbar when form design is required @@ -186,7 +186,7 @@ Move, resize, and edit an existing form field directly in the PDF Viewer using t ![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 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 +For more information, see [Editing Form Fields](./manage-form-fields/modify-form-fields). ## Deleting form fields 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 223ab59cd1..40a84f8f22 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 @@ -49,7 +49,7 @@ Form field events can be used to: You can wire up form field events on the PDF Viewer instance to execute custom logic when specific actions occur. ```js -var pdfviewer = new PdfViewer({ +var pdfviewer = new ej.pdfviewer.PdfViewer({ // Basic examples for common form-field events formFieldAdd: function (args) { console.log('formFieldAdd', args); }, formFieldRemove: function (args) { console.log('formFieldRemove', args); }, 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 7621eff181..4c45f61866 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 @@ -39,7 +39,7 @@ Updates the value of one or more form fields programmatically. ``` {% tabs %} {% highlight js tabtitle="index.js" %} -var btn = document.getElementById('updateFormFields'); +var btn = document.getElementById('updateFormFieldsValue'); if (btn) { btn.onclick = function () { // Retrieve form fields collection @@ -218,7 +218,7 @@ Clears values of specified or all fields without removing the fields themselves. ``` {% tabs %} {% highlight js tabtitle="index.js" %} -var btn = document.getElementById('clearFormFields'); +var btn = document.getElementById('clearformfield'); if (btn) { btn.onclick = function () { var field = pdfviewer.retrieveFormFields(); @@ -248,8 +248,7 @@ if (element) { ## isFormDesignerToolbarVisible -Opens the form designer toolbar when the PDF document is loaded in the PDF Viewer control initially -and get the form designer Toolbar Visible status. +Gets whether the Form Designer toolbar is currently visible. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -320,4 +319,4 @@ pdfviewer.enableFormDesignerToolbar(true); // show - [Group form fields](./group-form-fields) - [Add custom data to form fields](./custom-data) - [Form Constrain](./form-constrain) -- [Form fields Validation](./form-validation) \ No newline at end of file +- [Form Validation](./form-validation) \ No newline at end of file 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 b9c8abf22e..16c3f0da93 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 @@ -37,7 +37,7 @@ The following example demonstrates how to update PDF form field values programma // Wire up the button click document.getElementById('updateBtn').onclick = function () { // Retrieve form fields - var fields = pdfviewer.retrieveFormFields?.() || pdfviewer.formFieldCollection || []; + var fields = pdfviewer.retrieveFormFields() || []; // Get form fields by name var field = fields.find(function (f) { return f && f.name === 'name'; }) || fields[0]; @@ -73,8 +73,9 @@ Imported form field data is automatically mapped to the corresponding form field ``` ```js document.getElementById('importJson').addEventListener('click', function () { + // Ensure the viewer instance (var pdfviewer = new ej.pdfviewer.PdfViewer({ ... })) is created and appended before this code runs. // The file for importing should be accessible at the given path or as a file stream depending on your integration - viewer.importFormFields('File', FormFieldDataFormat.Json); + pdfviewer.importFormFields('File', 'Json'); }); ``` @@ -132,7 +133,7 @@ pdfviewer.validateFormFields = function (args) { - [Form Designer overview](./overview) - [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) - [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/customize-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields -- [Edit form fields](./manage-form-fields/edit-form-fields) +- [Edit form fields](./manage-form-fields/modify-form-fields) - [Group form fields](./group-form-fields) - [Add custom data to form fields](./custom-data) - [Form Constrain](./form-constrain) 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 974103c594..48c53be538 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 @@ -100,7 +100,7 @@ pdfviewer.documentLoad = function () { ## See also -- [Form Designer overview](../overview) +- [Form Designer overview](./overview) - [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) - [Create form fields](./manage-form-fields/create-form-fields) - [Modify form fields](./manage-form-fields/modify-form-fields) 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 f1237aa319..b2d9a5144d 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 @@ -26,46 +26,92 @@ The PDF Viewer allows you to export form field data in multiple formats for easy 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. +### Export as FDF, XFDF, and JSON + +The following example demonstrates exporting form field data in different formats and importing data back: ```html - -
        + +
        + + + + + + +
        + + +
        ``` ```js -document.getElementById('exportFdf').addEventListener('click', function () { - // Destination is optional; if omitted the browser will prompt. - viewer.exportFormFields('FormData','Fdf'); +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +// Initialize the viewer +var viewer = new ej.pdfviewer.PdfViewer(); +viewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +viewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +viewer.appendTo('#PdfViewer'); + +// Helper: open a native file picker, read the chosen file as text, +// then call viewer.importFormFields(stringData, format). +function importFile(format) { + var input = document.createElement('input'); + input.type = 'file'; + input.accept = '.' + format.toLowerCase(); // .fdf | .xfdf | .json + input.onchange = function (e) { + var file = e.target.files && e.target.files[0]; + if (!file) return; + + var reader = new FileReader(); + reader.onload = function (ev) { + // ev.target.result is a STRING — what importFormFields actually wants + viewer.importFormFields(ev.target.result, format); + }; + reader.readAsText(file); + }; + input.click(); +} + +// --- Import Form Fields --- +document.getElementById('importFdf').addEventListener('click', function () { + importFile('Fdf'); }); -``` -### Export as XFDF -The following example exports form field data as XFDF. - -```html - -``` +document.getElementById('importXfdf').addEventListener('click', function () { + importFile('Xfdf'); +}); -```js -// ...same imports and viewer initialization as above... -document.getElementById('exportXfdf').addEventListener('click', function () { - viewer.exportFormFields('FormData', 'Xfdf'); +document.getElementById('importJson').addEventListener('click', function () { + importFile('Json'); }); -``` -### Export as JSON -The following example exports form field data as JSON. +// --- Export Form Fields --- +document.getElementById('exportFdf').addEventListener('click', function () { + viewer.exportFormFields('FormData', 'Fdf'); // downloads FormData.fdf +}); -```html - -``` +document.getElementById('exportXfdf').addEventListener('click', function () { + viewer.exportFormFields('FormData', 'Xfdf'); // downloads FormData.xfdf +}); -```js -// ...same imports and viewer initialization as above... document.getElementById('exportJson').addEventListener('click', function () { - viewer.exportFormFields('FormData', 'Json'); + viewer.exportFormFields('FormData', 'Json'); // downloads FormData.json }); ``` @@ -75,6 +121,8 @@ Use [exportFormFieldsAsObject()](https://ej2.syncfusion.com/javascript/documenta ```html + + ``` ```js @@ -91,6 +139,11 @@ document.getElementById('exportObj').addEventListener('click', function () { // viewer.exportFormFieldsAsObject('Xfdf').then(...) // viewer.exportFormFieldsAsObject('Json').then(...) }); + +// Import from previously exported object +document.getElementById('importObj').addEventListener('click', function () { + viewer.importFormFields(exportedData, ej.pdfviewer.FormFieldDataFormat.Fdf); +}); ``` ## Common Use Cases 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 0f8a8faee0..efb46feabe 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 @@ -78,5 +78,4 @@ viewer.exportFailed = function (args) { - [Add custom data to form fields](../custom-data) - [Import form fields](./import-form-fields) - [Export form fields](./export-form-fields) -- [Form validation](../form-validation) - [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 0849db4d90..891f543a6a 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 @@ -20,42 +20,76 @@ The **PDF Viewer** lets you import values into interactive form fields in the cu 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 +### Import FDF, XFDF, and JSON + +The following example demonstrates importing form field data in different formats: ```html - -
        + +
        + + + +
        + + +
        ``` ```js +// Inject required modules +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, + ej.pdfviewer.Navigation, + ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, + ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, + ej.pdfviewer.FormFields, + ej.pdfviewer.FormDesigner, + ej.pdfviewer.PageOrganizer +); + +// Initialize the viewer +var viewer = new ej.pdfviewer.PdfViewer(); +viewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +viewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +viewer.appendTo('#PdfViewer'); + +// Helper: open a native file picker, read the chosen file as text, +// then call viewer.importFormFields(stringData, format). +function importFile(format) { + var input = document.createElement('input'); + input.type = 'file'; + input.accept = '.' + format.toLowerCase(); // .fdf | .xfdf | .json + input.onchange = function (e) { + var file = e.target.files && e.target.files[0]; + if (!file) return; + + var reader = new FileReader(); + reader.onload = function (ev) { + // ev.target.result is a STRING — what importFormFields actually wants + viewer.importFormFields(ev.target.result, format); + }; + reader.readAsText(file); + }; + input.click(); +} + +// --- Import Form Fields --- document.getElementById('importFdf').addEventListener('click', function () { - // The file for importing should be accessible at the given path or as a file stream depending on your integration - viewer.importFormFields('File', 'Fdf'); + importFile('Fdf'); }); -``` - -### Import XFDF -```html - -
        -``` -```js document.getElementById('importXfdf').addEventListener('click', function () { - // The file for importing should be accessible at the given path or as a file stream depending on your integration - viewer.importFormFields('File', 'Xfdf'); + importFile('Xfdf'); }); -``` - -### Import JSON -```html - -``` -```js document.getElementById('importJson').addEventListener('click', function () { - // The file for importing should be accessible at the given path or as a file stream depending on your integration - viewer.importFormFields('File', 'Json'); + importFile('Json'); }); ``` 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 7be1dcc362..2fce7cd644 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 @@ -253,7 +253,7 @@ document.getElementById('addPasswordField').addEventListener('click', function ( - [Form Designer overview](../overview) - [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) - [Modify form fields](./modify-form-fields) -- [Style form fields](./style-form-fields) +- [Style form fields](./customize-form-fields) - [Remove form fields](./remove-form-fields) - [Group form fields](../group-form-fields) - [Form validation](../form-validation) From 1fd19c4affda6c70efd4c81c3cc544a91a4051c1 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Thu, 13 Aug 2026 13:52:07 +0530 Subject: [PATCH 57/70] 1046071: Quality Enhancement on TS Hotfix --- Document-Processing-toc.html | 1 + .../javascript-es6/accessibility.md | 8 +- .../PDF/PDF-Viewer/javascript-es6/download.md | 10 +- .../PDF/PDF-Viewer/javascript-es6/event.md | 186 +++++++++--------- .../javascript-es6/globalization.md | 2 +- .../javascript-es6/how-to-overview.md | 8 +- .../javascript-es6/magnification.md | 10 +- .../javascript-es6/module-injection.md | 2 +- .../PDF-Viewer/javascript-es6/navigation.md | 20 +- .../open-pdf-file/from-one-drive.md | 2 +- .../javascript-es6/open-pdf-files.md | 8 +- .../PDF-Viewer/javascript-es6/organize-pdf.md | 10 +- .../PDF/PDF-Viewer/javascript-es6/overview.md | 4 +- .../save-pdf-file/to-amazon-s3.md | 10 +- .../save-pdf-file/to-azure-blob-storage.md | 12 +- .../to-box-cloud-file-storage.md | 10 +- .../to-dropbox-cloud-file-storage.md | 10 +- .../save-pdf-file/to-google-cloud-storage.md | 8 +- .../save-pdf-file/to-google-drive.md | 2 +- .../save-pdf-file/to-one-drive.md | 2 +- ...ocker-image-in-azure-kubernetes-service.md | 10 +- .../pdfviewer-server-docker-image-overview.md | 12 +- .../javascript-es6/server-to-standalone.md | 2 +- .../javascript-es6/text-search/find-text.md | 29 ++- .../text-search/text-search-events.md | 14 +- .../text-search/text-search-features.md | 10 +- .../annotation-toolbar.md | 11 +- .../toolbar-customization/custom-toolbar.md | 92 +++++---- .../form-designer-toolbar.md | 8 +- .../toolbar-customization/mobile-toolbar.md | 3 +- .../toolbar-customization/primary-toolbar.md | 6 +- .../PDF/PDF-Viewer/javascript-es6/toolbar.md | 8 +- .../document-loading-issues.md | 8 +- 33 files changed, 268 insertions(+), 270 deletions(-) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 0489040520..711c34d46c 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -2331,6 +2331,7 @@
      • Download
      • Event
      • Text Selection
        • +
      • Globalization
      • Localization
        • Default Language
          • diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md index acfcb88985..0e2bbebd8a 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Accessibility in Syncfusion PDF Viewer control TypeScript +# Accessibility in Syncfusion TypeScript PDF Viewer 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. The accessibility compliance for the PDF Viewer component is summarized below. @@ -80,9 +80,9 @@ The PDF Viewer follows WAI-ARIA [keyboard interaction](https://www.w3.org/WAI/AR |||**Shortcut for Text Search**| | CONTROL + F | COMMAND + F |Open the search toolbar| |||**Shortcut for Text Selection**| -|CONTROL + C |CONTROL + C | Copy the selected text or annotation or form field | -| CONTROL + X | CONTROL + X |Cut the selected text or annotation of the form field| -|CONTROL + Y |CONTROL + Y |Paste the selected text or annotation or form field| +| CONTROL + C | COMMAND + C | Copy the selected text or annotation or form field | +| CONTROL + X | COMMAND + X |Cut the selected text or annotation or form field| +|CONTROL + V | COMMAND + V |Paste the selected text or annotation or form field| |||**Shortcuts for the general operation**| | CONTROL + Z | CONTROL + Z |Undo the action| |CONTROL + Y |CONTROL + Y |Redo the action| diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md index ef14478233..a39f372093 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md @@ -107,7 +107,7 @@ pdfviewer.download(); ## How to get the base64 string while downloading the PDF document -The [downloadEnd](https://ej2.syncfusion.com/documentation/api/pdfviewer/#downloadend) event fires after a download completes and exposes the downloaded document as a base64 string. +The [downloadEnd] (https://ej2.syncfusion.com/documentation/api/pdfviewer/#downloadend) event fires after a download completes and exposes the downloaded document as a base64 string. The following example illustrates how to access the downloaded document as a base64 string. Note: Handling very large base64 strings may impact memory usage; consider using a stream when possible. @@ -120,19 +120,21 @@ The following example illustrates how to access the downloaded document as a bas ```ts +let pdfstream: string; + document.getElementById('download').addEventListener('click', function () { //API to perform download action. - viewer.download(); - viewer.downloadEnd = function (args) { + pdfviewer.downloadEnd = function (args) { pdfstream = args.downloadDocument; //Print the document as a base64 string in the console window. console.log(pdfstream); }; + pdfviewer.download(); }); document.getElementById('load').addEventListener('click', function () { //Load the base64 string in the viewer. - viewer.load(pdfstream, null); + pdfviewer.load(pdfstream, null); }); ``` diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md index aed96e08dd..eae3471e0e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Events in TypeScript PDF Viewer -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 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 following table lists commonly used events supported by the PDF Viewer component: @@ -22,7 +22,7 @@ The following table lists commonly used events supported by the PDF Viewer compo | [`commentDelete`](#commentdelete) | Triggers when a comment is deleted from the comment panel. | | [`commentEdit`](#commentedit) | Triggers when a comment is edited in the comment panel. | | [`commentSelect`](#commentselect) | Triggers when a comment is selected in the comment panel. | -| [`commentStatusChanged`](#commentstatuschanged) | Triggers when a comment’s status changes in the comment panel. | +| [`commentStatusChanged`](#commentstatuschanged) | Triggers when a comment's status changes in the comment panel. | | [`created`](#created) | Triggers during the creation of the PDF Viewer component. | | [`customContextMenuBeforeOpen`](#customcontextmenubeforeopen) | Fires before the custom context menu opens. | | [`customContextMenuSelect`](#customcontextmenuselect) | Fires when a custom context menu item is selected. | @@ -70,9 +70,9 @@ Note: For annotation and signature events, see the dedicated Annotations Events ## bookmarkClick -The [bookmarkClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#bookmarkclickevent) event triggers when a bookmark item is clicked in the bookmark panel. +The [bookmarkClick] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#bookmarkclickevent) event triggers when a bookmark item is clicked in the bookmark panel. -- Event arguments: [BookmarkClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/bookmarkClickEventArgs/). +- Event arguments: [BookmarkClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/bookmarkClickEventArgs). Example: @@ -94,7 +94,7 @@ viewer.appendTo('#pdfViewer'); ## toolbarClick -The [toolbarClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#toolbarclickevent) event triggers when a toolbar item is clicked. Use it to handle actions based on the clicked item's id or name. +The [toolbarClick] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#toolbarclickevent) event triggers when a toolbar item is clicked. Use it to handle actions based on the clicked item's id or name. - Event arguments: `ClickEventArgs`. @@ -118,16 +118,16 @@ viewer.appendTo('#pdfViewer'); ## validateFormFields -The [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#validateformfieldsevent) event triggers when form field validation fails, typically before a download or submit action proceeds. Use this event to inspect which required fields are empty and show custom messages or block application logic if needed. +The [validateFormFields] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#validateformfieldsevent) event triggers when form field validation fails, typically before a download or submit action proceeds. Use this event to inspect which required fields are empty and show custom messages or block application logic if needed. -- Event arguments: [ValidateFormFieldsArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs/) +- Event arguments: [ValidateFormFieldsArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs) - name: Event name - documentName: Current document name - formField: The last interacted field’s data (if applicable) - nonFillableFields: Array detailing required/invalid fields When it triggers -- Add a form field and mark it Required (UI: right‑click field > Properties > Required). +- Add a form field and mark it Required (UI: right-click field > Properties > Required). - Leave the field empty and click Download. The event fires and provides the list of fields that failed validation. Example: @@ -160,9 +160,9 @@ Tip ## zoomChange -The [zoomChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#zoomchangeevent) event triggers when the magnification value changes. +The [zoomChange] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#zoomchangeevent) event triggers when the magnification value changes. -- Event arguments: [ZoomChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/zoomChangeEventArgs/). +- Event arguments: [ZoomChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/zoomChangeEventArgs). Example: @@ -184,9 +184,9 @@ viewer.appendTo('#pdfViewer'); ## buttonFieldClick -The [buttonFieldClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#buttonfieldclickevent) event triggers when a button form field is clicked. +The [buttonFieldClick] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#buttonfieldclickevent) event triggers when a button form field is clicked. -- Event arguments: [ButtonFieldClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/buttonFieldClickEventArgs/). +- Event arguments: [ButtonFieldClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/buttonFieldClickEventArgs). Example: @@ -208,9 +208,9 @@ viewer.appendTo('#pdfViewer'); ## commentAdd -The [commentAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentaddevent) event triggers when a comment is added in the comment panel. +The [commentAdd] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentaddevent) event triggers when a comment is added in the comment panel. -- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs/). +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs). Example: @@ -232,9 +232,9 @@ viewer.appendTo('#pdfViewer'); ## commentDelete -The [commentDelete](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentdeleteevent) event triggers when a comment is deleted in the comment panel. +The [commentDelete] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentdeleteevent) event triggers when a comment is deleted in the comment panel. -- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs/). +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs). Example: @@ -256,9 +256,9 @@ viewer.appendTo('#pdfViewer'); ## commentEdit -The [commentEdit](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commenteditevent) event triggers when a comment is edited in the comment panel. +The [commentEdit] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commenteditevent) event triggers when a comment is edited in the comment panel. -- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs/). +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs). Example: @@ -280,9 +280,9 @@ viewer.appendTo('#pdfViewer'); ## commentSelect -The [commentSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentselectevent) event triggers when a comment is selected in the comment panel. +The [commentSelect] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentselectevent) event triggers when a comment is selected in the comment panel. -- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs/). +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs). Example: @@ -304,9 +304,9 @@ viewer.appendTo('#pdfViewer'); ## commentStatusChanged -The [commentStatusChanged](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentstatuschangedevent) event triggers when a comment status is changed in the comment panel. +The [commentStatusChanged] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentstatuschangedevent) event triggers when a comment status is changed in the comment panel. -- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs/). +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs). Example: @@ -328,7 +328,7 @@ viewer.appendTo('#pdfViewer'); ## created -The [created](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#createdevent) event is triggered during the creation of the PDF Viewer component. +The [created] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#createdevent) event is triggered during the creation of the PDF Viewer component. - Event arguments: `void`. @@ -353,9 +353,9 @@ viewer.appendTo('#pdfViewer'); ## customContextMenuBeforeOpen -The [customContextMenuBeforeOpen](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#customcontextmenubeforeopenevent) event fires just before the context menu is shown. Use it to show or hide items based on the current state (for example, only show search items when text is selected). +The [customContextMenuBeforeOpen] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#customcontextmenubeforeopenevent) event fires just before the context menu is shown. Use it to show or hide items based on the current state (for example, only show search items when text is selected). -- Event arguments: [CustomContextMenuBeforeOpenEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/customContextMenuBeforeOpenEventArgs/) +- Event arguments: [CustomContextMenuBeforeOpenEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/customContextMenuBeforeOpenEventArgs) - name: Event name - ids: Array of menu item ids that will be shown; remove ids to hide items for this open @@ -412,9 +412,9 @@ const menuItems: any[] = [ ## customContextMenuSelect -The [customContextMenuSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#customcontextmenuselectevent) event fires when a custom menu item is clicked. Use it to branch logic by the clicked item's id. +The [customContextMenuSelect] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#customcontextmenuselectevent) event fires when a custom menu item is clicked. Use it to branch logic by the clicked item's id. -- Event arguments: [CustomContextMenuSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/customContextMenuSelectEventArgs/). +- Event arguments: [CustomContextMenuSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/customContextMenuSelectEventArgs). - name: Event name - id: The id of the clicked menu item @@ -473,9 +473,9 @@ viewer.documentLoad = function (args) { ## documentLoad -The [documentLoad](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#documentloadevent) event occurs after a document is successfully loaded and parsed. +The [documentLoad] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#documentloadevent) event occurs after a document is successfully loaded and parsed. -- Event arguments: [LoadEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/loadEventArgs/). +- Event arguments: [LoadEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/loadEventArgs). Example: @@ -497,9 +497,9 @@ viewer.documentLoad = function (args) { ## documentLoadFailed -The [documentLoadFailed](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#documentloadfailedevent) event triggers when loading a document fails. +The [documentLoadFailed] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#documentloadfailedevent) event triggers when loading a document fails. -- Event arguments: [LoadFailedEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/loadFailedEventArgs/). +- Event arguments: [LoadFailedEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/loadFailedEventArgs). Example: @@ -520,9 +520,9 @@ viewer.documentLoadFailed = function (args) { ## documentUnload -The [documentUnload](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#documentunloadevent) event triggers when closing the current document. +The [documentUnload] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#documentunloadevent) event triggers when closing the current document. -- Event arguments: [UnloadEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/unloadEventArgs/). +- Event arguments: [UnloadEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/unloadEventArgs). Example: @@ -545,9 +545,9 @@ viewer.documentUnload = function (args) { ## downloadEnd -The [downloadEnd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#downloadendevent) event triggers after a document download completes. +The [downloadEnd] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#downloadendevent) event triggers after a document download completes. -- Event arguments: [DownloadEndEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/downloadEndEventArgs/). +- Event arguments: [DownloadEndEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/downloadEndEventArgs). Example: @@ -569,9 +569,9 @@ viewer.appendTo('#pdfViewer'); ## downloadStart -The [downloadStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#downloadstartevent) event triggers when the download operation is initiated. +The [downloadStart] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#downloadstartevent) event triggers when the download operation is initiated. -- Event arguments: [DownloadStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/downloadStartEventArgs/). +- Event arguments: [DownloadStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/downloadStartEventArgs). Example: @@ -593,9 +593,9 @@ viewer.appendTo('#pdfViewer'); ## exportFailed -The [exportFailed](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportfailedevent) event triggers when exporting annotations fails. +The [exportFailed] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportfailedevent) event triggers when exporting annotations fails. -- Event arguments: [ExportFailureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportFailureEventArgs/). +- Event arguments: [ExportFailureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportFailureEventArgs). Example: @@ -617,9 +617,9 @@ viewer.appendTo('#pdfViewer'); ## exportStart -The [exportStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportstartevent) event triggers when exporting annotations starts. +The [exportStart] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportstartevent) event triggers when exporting annotations starts. -- Event arguments: [ExportStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportStartEventArgs/). +- Event arguments: [ExportStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportStartEventArgs). Example: @@ -641,9 +641,9 @@ viewer.appendTo('#pdfViewer'); ## exportSuccess -The [exportSuccess](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportsuccessevent) event triggers when annotations are exported successfully. +The [exportSuccess] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportsuccessevent) event triggers when annotations are exported successfully. -- Event arguments: [ExportSuccessEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportSuccessEventArgs/). +- Event arguments: [ExportSuccessEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportSuccessEventArgs). Example: @@ -665,9 +665,9 @@ viewer.appendTo('#pdfViewer'); ## extractTextCompleted -The [extractTextCompleted](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#extracttextcompletedevent) event triggers when text extraction completes. +The [extractTextCompleted] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#extracttextcompletedevent) event triggers when text extraction completes. -- Event arguments: [ExtractTextCompletedEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/extractTextCompletedEventArgs/). +- Event arguments: [ExtractTextCompletedEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/extractTextCompletedEventArgs). Example: @@ -689,9 +689,9 @@ viewer.appendTo('#pdfViewer'); ## hyperlinkClick -The [hyperlinkClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#hyperlinkclickevent) event triggers when a hyperlink is clicked. +The [hyperlinkClick] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#hyperlinkclickevent) event triggers when a hyperlink is clicked. -- Event arguments: [HyperlinkClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/hyperlinkClickEventArgs/). +- Event arguments: [HyperlinkClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/hyperlinkClickEventArgs). Example: @@ -713,7 +713,7 @@ viewer.appendTo('#pdfViewer'); ## hyperlinkMouseOver -The [hyperlinkMouseOver](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#hyperlinkmouseoverevent) event triggers when hovering over a hyperlink. +The [hyperlinkMouseOver] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#hyperlinkmouseoverevent) event triggers when hovering over a hyperlink. - Event arguments: HyperlinkMouseOverArgs. @@ -737,9 +737,9 @@ viewer.appendTo('#pdfViewer'); ## importFailed -The [importFailed](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importfailedevent) event triggers when importing annotations fails. +The [importFailed] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importfailedevent) event triggers when importing annotations fails. -- Event arguments: [ImportFailureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importFailureEventArgs/). +- Event arguments: [ImportFailureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importFailureEventArgs). Example: @@ -761,9 +761,9 @@ viewer.appendTo('#pdfViewer'); ## importStart -The [importStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importstartevent) event triggers when importing annotations starts. +The [importStart] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importstartevent) event triggers when importing annotations starts. -- Event arguments: [ImportStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importStartEventArgs/). +- Event arguments: [ImportStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importStartEventArgs). Example: @@ -785,9 +785,9 @@ viewer.appendTo('#pdfViewer'); ## importSuccess -The [importSuccess](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importsuccessevent) event triggers when annotations are imported successfully. +The [importSuccess] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importsuccessevent) event triggers when annotations are imported successfully. -- Event arguments: [ImportSuccessEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importSuccessEventArgs/). +- Event arguments: [ImportSuccessEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importSuccessEventArgs). Example: @@ -809,9 +809,9 @@ viewer.appendTo('#pdfViewer'); ## keyboardCustomCommands -The [keyboardCustomCommands](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#keyboardcustomcommandsevent) event triggers when customized keyboard command keys are pressed. +The [keyboardCustomCommands] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#keyboardcustomcommandsevent) event triggers when customized keyboard command keys are pressed. -- Event arguments: [KeyboardCustomCommandsEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/keyboardCustomCommandsEventArgs/). +- Event arguments: [KeyboardCustomCommandsEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/keyboardCustomCommandsEventArgs). - name: Event name - keyboardCommand: The command metadata raised by Command Manager @@ -872,7 +872,7 @@ viewer.keyboardCustomCommands = (args: any): void => { ## moveSignature -The [moveSignature](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#movesignatureevent) event triggers when a signature is moved across the page. +The [moveSignature] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#movesignatureevent) event triggers when a signature is moved across the page. - Event arguments: `MoveSignatureEventArgs`. @@ -896,9 +896,9 @@ viewer.appendTo('#pdfViewer'); ## pageChange -The [pageChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagechangeevent) event triggers when the current page number changes (for example, via scrolling or navigation controls). +The [pageChange] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagechangeevent) event triggers when the current page number changes (for example, via scrolling or navigation controls). -- Event arguments: [PageChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageChangeEventArgs/). +- Event arguments: [PageChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageChangeEventArgs). Example: @@ -920,9 +920,9 @@ viewer.appendTo('#pdfViewer'); ## pageClick -The [pageClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pageclickevent) event triggers when a mouse click occurs on a page. +The [pageClick] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pageclickevent) event triggers when a mouse click occurs on a page. -- Event arguments: [PageClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageClickEventArgs/). +- Event arguments: [PageClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageClickEventArgs). Example: @@ -944,7 +944,7 @@ viewer.appendTo('#pdfViewer'); ## pageMouseover -The [pageMouseover](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagemouseoverevent) event triggers when the mouse moves over a page. +The [pageMouseover] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagemouseoverevent) event triggers when the mouse moves over a page. - Event arguments: `PageMouseoverEventArgs`. @@ -968,7 +968,7 @@ viewer.appendTo('#pdfViewer'); ## pageOrganizerSaveAs -The [pageOrganizerSaveAs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pageorganizersaveasevent) event triggers when a Save As action is performed in the page organizer. +The [pageOrganizerSaveAs] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pageorganizersaveasevent) event triggers when a Save As action is performed in the page organizer. - Event arguments: `PageOrganizerSaveAsEventArgs`. @@ -992,9 +992,9 @@ viewer.appendTo('#pdfViewer'); ## pageRenderComplete -The [pageRenderComplete](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagerendercompleteevent) event triggers after a page finishes rendering. +The [pageRenderComplete] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagerendercompleteevent) event triggers after a page finishes rendering. -- Event arguments: [PageRenderCompleteEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageRenderCompleteEventArgs/). +- Event arguments: [PageRenderCompleteEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageRenderCompleteEventArgs). Example: @@ -1016,9 +1016,9 @@ viewer.appendTo('#pdfViewer'); ## pageRenderInitiate -The [pageRenderInitiate](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagerenderinitiateevent) event triggers when page rendering begins. +The [pageRenderInitiate] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagerenderinitiateevent) event triggers when page rendering begins. -- Event arguments: [PageRenderInitiateEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageRenderInitiateEventArgs/). +- Event arguments: [PageRenderInitiateEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageRenderInitiateEventArgs). Example: @@ -1040,9 +1040,9 @@ viewer.appendTo('#pdfViewer'); ## printEnd -The [printEnd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#printendevent) event triggers when a print action completes. +The [printEnd] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#printendevent) event triggers when a print action completes. -- Event arguments: [PrintEndEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/printEndEventArgs/). +- Event arguments: [PrintEndEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/printEndEventArgs). Example: @@ -1064,9 +1064,9 @@ viewer.appendTo('#pdfViewer'); ## printStart -The [printStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#printstartevent) event triggers when a print action is initiated. +The [printStart] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#printstartevent) event triggers when a print action is initiated. -- Event arguments: [PrintStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/printStartEventArgs/). +- Event arguments: [PrintStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/printStartEventArgs). Example: @@ -1088,9 +1088,9 @@ viewer.appendTo('#pdfViewer'); ## removeSignature -The [removeSignature](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#removesignatureevent) event triggers when a signature is removed. +The [removeSignature] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#removesignatureevent) event triggers when a signature is removed. -- Event arguments: [RemoveSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/removeSignatureEventArgs/). +- Event arguments: [RemoveSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/removeSignatureEventArgs). Example: @@ -1112,9 +1112,9 @@ viewer.appendTo('#pdfViewer'); ## resizeSignature -The [resizeSignature](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#resizesignatureevent) event triggers when a signature is resized. +The [resizeSignature] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#resizesignatureevent) event triggers when a signature is resized. -- Event arguments: [ResizeSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/resizeSignatureEventArgs/). +- Event arguments: [ResizeSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/resizeSignatureEventArgs). Example: @@ -1136,7 +1136,7 @@ viewer.appendTo('#pdfViewer'); ## resourcesLoaded -The [resourcesLoaded](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#resourcesloadedevent) event triggers after the viewer's required resources are loaded. +The [resourcesLoaded] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#resourcesloadedevent) event triggers after the viewer's required resources are loaded. - Event arguments: `void`. @@ -1160,9 +1160,9 @@ viewer.appendTo('#pdfViewer'); ## signaturePropertiesChange -The [signaturePropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signaturepropertieschangeevent) event triggers when signature properties change. +The [signaturePropertiesChange] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signaturepropertieschangeevent) event triggers when signature properties change. -- Event arguments: [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/). +- Event arguments: [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs). Example: @@ -1184,9 +1184,9 @@ viewer.appendTo('#pdfViewer'); ## signatureSelect -The [signatureSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signatureselectevent) event triggers when a signature is selected. +The [signatureSelect] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signatureselectevent) event triggers when a signature is selected. -- Event arguments: [SignatureSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureSelectEventArgs/). +- Event arguments: [SignatureSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureSelectEventArgs). Example: @@ -1208,9 +1208,9 @@ viewer.appendTo('#pdfViewer'); ## signatureUnselect -The [signatureUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signatureunselectevent) event triggers when a signature is unselected. +The [signatureUnselect] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signatureunselectevent) event triggers when a signature is unselected. -- Event arguments: [SignatureUnselectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureUnselectEventArgs/). +- Event arguments: [SignatureUnselectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureUnselectEventArgs). Example: @@ -1232,9 +1232,9 @@ viewer.appendTo('#pdfViewer'); ## textSearchComplete -The [textSearchComplete](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchcompleteevent) event triggers when a text search completes. +The [textSearchComplete] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchcompleteevent) event triggers when a text search completes. -- Event arguments: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchCompleteEventArgs/). +- Event arguments: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchCompleteEventArgs). Example: @@ -1256,9 +1256,9 @@ viewer.appendTo('#pdfViewer'); ## textSearchHighlight -The [textSearchHighlight](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchhighlightevent) event triggers when searched text is highlighted. +The [textSearchHighlight] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchhighlightevent) event triggers when searched text is highlighted. -- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchHighlightEventArgs/). +- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchHighlightEventArgs). Example: @@ -1280,9 +1280,9 @@ viewer.appendTo('#pdfViewer'); ## textSearchStart -The [textSearchStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchstartevent) event triggers when a text search is initiated. +The [textSearchStart] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchstartevent) event triggers when a text search is initiated. -- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchStartEventArgs/). +- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchStartEventArgs). Example: @@ -1304,9 +1304,9 @@ viewer.appendTo('#pdfViewer'); ## textSelectionEnd -The [textSelectionEnd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textselectionendevent) event triggers when text selection is complete. +The [textSelectionEnd] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textselectionendevent) event triggers when text selection is complete. -- Event arguments: [TextSelectionEndEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSelectionEndEventArgs/). +- Event arguments: [TextSelectionEndEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSelectionEndEventArgs). Example: @@ -1328,7 +1328,7 @@ viewer.appendTo('#pdfViewer'); ## textSelectionStart -The [textSelectionStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textselectionstartevent) event triggers when text selection is initiated. +The [textSelectionStart] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textselectionstartevent) event triggers when text selection is initiated. - Event arguments: `TextSelectionStartEventArgs`. @@ -1352,9 +1352,9 @@ viewer.appendTo('#pdfViewer'); ## thumbnailClick -The [thumbnailClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#thumbnailclickevent) event triggers when a thumbnail is clicked. +The [thumbnailClick] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#thumbnailclickevent) event triggers when a thumbnail is clicked. -- Event arguments: [ThumbnailClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/thumbnailClickEventArgs/). +- Event arguments: [ThumbnailClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/thumbnailClickEventArgs). Example: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/globalization.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/globalization.md index 80a309189e..8a8de62d11 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/globalization.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/globalization.md @@ -64,7 +64,7 @@ The following table lists the default text values used by the PDF Viewer in the |Highlight context|Highlight| |Underline context|Underline| |Strikethrough context|Strike through| -|Server error|Web-service is not listening. PDF Viewer depends on web-service for all it's features. Please start the web service to continue.| +|Server error|Web-service is not listening. PDF Viewer depends on web-service for all its features. Please start the web service to continue.| |Open text|Open| |First text|First Page| |Previous text|Previous Page| diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md index e7db33a657..0d53304326 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -## Frequently Asked Questions in TypeScript PDF Viewer +# Frequently Asked Questions in TypeScript PDF Viewer The frequently asked questions for the Essential® PDF Viewer are listed below. @@ -34,7 +34,7 @@ The frequently asked questions for the Essential® PDF Viewer are * [How to display custom tooltip for annotation?](./how-to/display-custom-tool-tip-for-annotation) * [How to get the download start event?](./how-to/download-start-event-ts) * [How to enable or disable the local storage?](./how-to/enable-local-storage-ts) -* [Enable the resizer for text markup annotation?](./how-to/enable-resize) +* [How to enable the resizer for text markup annotation?](./how-to/enable-resize) * [How to enable or disable the text selection?](./how-to/enable-text-selection-ts) * [How to export the PDF pages as images?](./how-to/export-as-image-ts) * [How to extract text from the PDF document?](./how-to/extract-text-completed-ts) @@ -54,7 +54,7 @@ The frequently asked questions for the Essential® PDF Viewer are * [How to get the annotation when it is overlapped with another annotation on its selection?](./how-to/overlapped-annotation) * [How to get the page render started and completed event?](./how-to/pagerenderstarted-pagerendercompleted-ts) * [How to print the PDF document silently?](./how-to/print-document) -* [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium''?](./how-to/resolve-unable-to-find-an-entry-point-error) +* [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium'`?](./how-to/resolve-unable-to-find-an-entry-point-error) * [How to restrict the zooming in mobile mode?](./how-to/restricting-zoom-in-mobile-mode-ts) * [How to save the PDF document to database or URL?](./how-to/save-pdf-document-to-url) * [How to select annotations in multi page?](./how-to/select-multi-page-annotations) @@ -62,5 +62,5 @@ The frequently asked questions for the Essential® PDF Viewer are * [How to show or hide a particular annotation?](./how-to/show-hide-annotation-ts) * [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect-ts) * [How to unload the PDF document from the viewer?](./how-to/unload-document) -* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded) +* [How to load document after resources loaded?](./how-to/load-document-after-resources-loaded) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md index 7f736f18b9..88aa413631 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md @@ -70,11 +70,11 @@ pdfviewer.appendTo('#PdfViewer'); The following magnification options are available in the default toolbar of PDF Viewer, -* [**ZoomIn**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomin):- Zoom in from the current zoom value of PDF pages. -* [**ZoomOut**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomout):- Zoom out from the current zoom value of PDF pages. -* [**Zoom**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomto):- Zoom to specific zoom value of PDF pages. -* [**FitPage**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#fittopage):- Fits the page width with in the available view port size. -* [**FitWidth**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#fittowidth):- Fits the view port width based on the page content size. +* [**ZoomIn**] (https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomin):- Zoom in from the current zoom value of PDF pages. +* [**ZoomOut**] (https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomout):- Zoom out from the current zoom value of PDF pages. +* [**Zoom**] (https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomto):- Zoom to specific zoom value of PDF pages. +* [**FitPage**] (https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#fittopage):- Fits the page width within the available viewport size. +* [**FitWidth**] (https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#fittowidth):- Fits the viewport width based on the page content size. ![Magnification tools in PDF Viewer](./images/zoom.png) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/module-injection.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/module-injection.md index 550ada53f5..a31a0a7f53 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/module-injection.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/module-injection.md @@ -1,7 +1,7 @@ --- layout: post title: Module Injection for TypeScript PDF Viewer | Syncfusion -description: Syncfusion Typescript PDF Viewer to enable optional features like toolbar, navigation, annotations, search. +description: Syncfusion TypeScript PDF Viewer to enable optional features like toolbar, navigation, annotations, search. control: PDF Viewer documentation: ug domainurl: ##DomainURL## diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md index 5f3551d1b4..c643f6d8f2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md @@ -16,11 +16,11 @@ The TypeScript PDF Viewer supports multiple navigation options, including toolba The default toolbar includes 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):- 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 a PDF 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. ```html @@ -120,12 +120,12 @@ You can also perform page navigation programmatically: {% tabs %} {% highlight ts tabtitle="Standalone" %} -import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print TextSelection, TextSearch, Annotation, FormFields } from '@syncfusion/ej2-pdfviewer'; +import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields } from '@syncfusion/ej2-pdfviewer'; PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection, TextSearch, Annotation, FormFields ); let viewer: PdfViewer = new PdfViewer(); -viewer.appendTo('#pdfViewer'); +viewer.appendTo('#PdfViewer'); viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); // Go To First Page @@ -152,14 +152,14 @@ document.getElementById('goToPreviousPage').addEventListener('click', () => { {% endhighlight %} {% highlight ts tabtitle="Server-Backed" %} -import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print TextSelection, TextSearch, Annotation, FormFields } from '@syncfusion/ej2-pdfviewer'; +import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields } from '@syncfusion/ej2-pdfviewer'; PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection, TextSearch, Annotation, FormFields ); let viewer: PdfViewer = new PdfViewer(); viewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -viewer.appendTo('#pdfViewer'); +viewer.appendTo('#PdfViewer'); viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); // Go To First Page @@ -289,7 +289,7 @@ Hyperlink navigation enables users to open URLs embedded in the PDF. ![PDF Viewer hyperlink navigation](./images/link.png) -## Table of content navigation +## Table of contents navigation Table of contents navigation allows users to jump to sections defined in the document outline. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-one-drive.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-one-drive.md index eda93b5dd2..1fd72a4949 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-one-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-one-drive.md @@ -166,6 +166,6 @@ N> Install the following NuGet packages in the server project to use the previou * **Microsoft.Extensions.Configuration.FileExtensions** * **Microsoft.Extensions.Configuration.Json** -You can install these packages using the NuGet Package Manager in Visual Studio or via the `dot net` CLI. +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-es6/open-pdf-files.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-files.md index 7accdc9319..dc0ce7c732 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-files.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-files.md @@ -24,7 +24,7 @@ Follow the [TypeScript getting started guide](https://help.syncfusion.com/docume 1. Create a web service project in .NET Core 3.0 or later. Refer to [How to create a PDF Viewer web service in .NET Core](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for guidance. 2. Open the `PdfViewerController.cs` file. -3. Modify the [Load](https://ej2.syncfusion.com/documentation/api/pdfviewer/#load) method to resolve remote URLs when `isFileName` is `true`. +3. Modify the [Load] (https://ej2.syncfusion.com/documentation/api/pdfviewer/#load) method to resolve remote URLs when `isFileName` is `true`. ```csharp @@ -74,7 +74,7 @@ public IActionResult Load([FromBody] Dictionary jsonData) **Step 3:** Configure the PDF Viewer in the TypeScript application -Update the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) with the hosted web service endpoint (replace `https://localhost:44396/pdfviewer` with your server URL) and set `documentPath` to the PDF file to load. +Update the [serviceUrl] (https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) with the hosted web service endpoint (replace `https://localhost:44396/pdfviewer` with your server URL) and set `documentPath` to the PDF file to load. ```typescript @@ -114,7 +114,7 @@ Use the [TypeScript getting started guide](https://help.syncfusion.com/document- document.getElementById('load').addEventListener('click', () => { viewer.load( 'data:application/pdf;base64,'+ AddBase64String, null); -} +}); ``` [View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/Save%20and%20Load/Load%20PDF%20file%20from%20base64%20string) @@ -153,7 +153,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache } ``` -5. Modify the [Load](https://ej2.syncfusion.com/documentation/api/pdfviewer/#load) method to stream the PDF from SQL Server when `isFileName` is `true`. +5. Modify the [Load] (https://ej2.syncfusion.com/documentation/api/pdfviewer/#load) method to stream the PDF from SQL Server when `isFileName` is `true`. ```csharp diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md index 0ab0aa1995..11ce5523ec 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md @@ -14,7 +14,7 @@ The PDF Viewer provides tools to organize PDF documents by inserting, deleting, ## Getting started -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. +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. ![Organize Pages dialog showing page thumbnails](./images/organize-page.png) @@ -41,8 +41,6 @@ Insert blank pages to the left or right of a selected page using the respective Duplicate pages by selecting thumbnails and using the copy action; duplicates are inserted to the right of the selected page. -![Insert, delete, and copy page actions shown in the organizer](./images/insert-delete-copy.gif) - ### Copying PDF pages Duplicate pages by selecting thumbnails and using the copy action; duplicates are inserted to the right of the selected page. @@ -185,8 +183,8 @@ document.getElementById('openPageOrganizer').addEventListener('click', function ``` ```ts document.getElementById('closePageOrganizer').addEventListener('click', function () { - viewer.pageOrganizer.openPageOrganizer(); -} + viewer.pageOrganizer.closePageOrganizer(); +}); ``` ## Keyboard shortcuts The following keyboard shortcuts are available at the organize pages dialog. @@ -195,6 +193,6 @@ The following keyboard shortcuts are available at the organize pages dialog. * **Ctrl+Scroll** : Zoom in and zoom out page thumbnails for better visibility. ![Undo and redo controls in organizer](./images/undo-redo.png) -#### Conclusion +### Conclusion 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/typescript-pdf-viewer-examples/tree/master/How%20to/Organize%20pdf) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/overview.md index b34480c1f8..83394a7410 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/overview.md @@ -1,9 +1,11 @@ --- +layout: post title: Overview of JavaScript (ES6) PDF Viewer | Syncfusion description: Learn here all about the Syncfusion TypeScript PDF Viewer, its capabilities, and supported platforms. platform: document-processing control: PDF Viewer -documentation: UG +documentation: ug +domainurl: ##DomainURL## --- # Overview of JavaScript (ES6) PDF Viewer diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md index 282327b3dc..df2d2729be 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md @@ -19,7 +19,7 @@ Follow the steps below to save a PDF file to AWS S3 from a browser-based TypeScr Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in typescript. This will set up the basic structure of your PDF Viewer application. -**Step 2:** Modify the `src/app/app.ts` file in the Angular project +**Step 2:** Modify the `src/app/app.ts` file in the TypeScript project 1. Import the required namespaces at the top of the file: @@ -29,11 +29,11 @@ import * as AWS from 'aws-sdk'; 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 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. +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 (Cognition, STS) or perform uploads via a trusted server. ```typescript AWS.config.update({ - region: '**Your Region**', // Update this your region + region: '**Your Region**', // Update this with your region accessKeyId: '*Your Access Key*', // Update this with your access key id secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key }); @@ -135,7 +135,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 AWS S3 bucket. +5. Modify the [Download()] (https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the AWS S3 bucket. ```csharp @@ -193,7 +193,7 @@ N> Replace the placeholders with the appropriate AWS credentials and bucket name **Step 3:** Set the PDF Viewer properties in the TypeScript 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. +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. ```typescript diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md index 59975cd0ac..7dedc823fc 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md @@ -1,6 +1,6 @@ --- layout: post -title: Save PDF files to Azure Blob Storage in TypeScript PDF Viewer | Syncfusion +title: Save PDFs to Azure Blob Storage in Syncfusion TS PDF Viewer description: Learn how to save PDF files to Azure Blob Storage using the Syncfusion TypeScript PDF Viewer component in standalone and server-backed configurations. platform: document-processing control: PDF Viewer @@ -13,13 +13,13 @@ The TypeScript PDF Viewer component supports saving PDF files to Azure Blob Stor ## Using Standalone PDF Viewer -Follow the steps below to save a PDF file to Azure Blob Storage from an TypeScript PDF Viewer. +Follow the steps below to save a PDF file to Azure Blob Storage from a TypeScript PDF Viewer. **Step 1:** Create a PDF Viewer sample in TypeScript Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in TypeScript. This sets up the basic structure of the PDF Viewer application. -**Step 2:** Modify the `src/app/app.ts` file in the Angular project +**Step 2:** Modify the `src/app/app.ts` file in the TypeScript project 1. Import the required namespaces at the top of the file: @@ -80,7 +80,7 @@ N> Install the Azure Storage Blob client package for browser use: `npm install @ ## Using server-backed PDF Viewer -To save a PDF file to Azure Blob Storage, you can follow the steps below +To save a PDF file to Azure Blob Storage, you can follow the steps below. **Step 1:** Create a PDF Viewer sample in TypeScript @@ -115,7 +115,7 @@ public PdfViewerController(IConfiguration configuration, ILogger Replace the placeholders with the actual Azure Storage connection string and **Step 3:** Set the PDF Viewer properties in the TypeScript 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. +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. ```typescript import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md index 2341bd44e2..39cfa31260 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md @@ -1,15 +1,15 @@ --- layout: post -title: Save PDF files to Box cloud storage in TypeScript PDF Viewer | Syncfusion +title: Save PDFs to Box Storage in Syncfusion TypeScript PDF Viewer description: Learn how to save PDF files to Box cloud storage using the Syncfusion TypeScript PDF Viewer component with a server-backed web service. platform: document-processing control: PDF Viewer documentation: ug --- -# Save PDF files to Box cloud storage +# Save PDF Files to Box Storage in Syncfusion PDF Viewer -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. +The TypeScript 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 @@ -55,7 +55,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 Box cloud storage folder. +5. Modify the [Download()] (https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the Box cloud storage folder. ```csharp [HttpPost("Download")] @@ -94,7 +94,7 @@ public async Task Download([FromBody] Dictionary } ``` -6. Open the `appsettings.json` file in your web service project, add the required settings 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 { diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md index 8fc03f0612..f29c10166e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md @@ -7,7 +7,7 @@ control: PDF Viewer documentation: ug --- -# Save PDF files to Dropbox cloud storage +# Save PDF Files to Dropbox Cloud Storage in Syncfusion PDF Viewer The TypeScript PDF Viewer component supports saving PDF files to Dropbox using either the standalone or server-backed configuration. The following steps demonstrate both approaches. @@ -19,11 +19,11 @@ To save a PDF file to Dropbox, follow these steps: 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. -**Step 2:** Create a Simple PDF Viewer Sample in TypeScript +**Step 2:** Create a PDF Viewer sample in TypeScript Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in TypeScript. This sets up the basic structure of the PDF Viewer application. -**Step 3:** Modify the `src/app/app.ts` file in the Angular project +**Step 3:** Modify the `src/app/app.ts` file in the TypeScript project 1. Import the required namespaces at the top of the file: @@ -125,7 +125,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache } ``` -5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to the Dropbox storage. +5. Modify the [Download()] (https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to the Dropbox storage. ```csharp @@ -162,7 +162,7 @@ public async Task Download([FromBody] Dictionary } ``` -6. Open the `appsettings.json` file in the web service project and add the following entries 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 { diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md index b78b0679f1..1d2670a2a3 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md @@ -1,19 +1,19 @@ --- layout: post -title: Save PDF files to Google Cloud Storage in TypeScript PDF Viewer | Syncfusion +title: Save PDF Files to Google Cloud Storage in Syncfusion PDF Viewer description: Learn how to save PDF files to Google Cloud Storage using the Syncfusion TypeScript PDF Viewer component with a server-backed web service. platform: document-processing control: PDF Viewer documentation: ug --- -# Save PDF files to Google Cloud Storage +# Save and Manage PDFs in Google Cloud Storage To save a PDF file to Google Cloud Storage, follow the steps below. **Step 1:** Create a PDF Viewer sample in TypeScript -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. +Follow the Syncfusion getting-started instructions for the TypeScript PDF Viewer: [TypeScript PDF Viewer getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started). This sets up the basic PDF Viewer application structure. **Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project @@ -108,7 +108,7 @@ N> Replace **path/to/service-account-key.json** with the actual file path to the **Step 3:** Set the PDF Viewer properties in the TypeScript 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. +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. ```typescript diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-drive.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-drive.md index ec45d8afeb..395297c8eb 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-drive.md @@ -9,7 +9,7 @@ documentation: ug # Save PDF files to Google Drive in TypeScript -This article describes how to save a PDF file to Google Drive from the JavaScript PDF Viewer using a server-side web service. Follow the steps below. +This article describes how to save a PDF file to Google Drive from the TypeScript PDF Viewer using a server-side web service. Follow the steps below. **Step 1:** Set up the Google Drive API diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-one-drive.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-one-drive.md index 21bc0b5b2c..772a70ccaa 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-one-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-one-drive.md @@ -100,7 +100,7 @@ public async Task Download([FromBody] Dictionary } ``` -6. Open `appsettings.json` in the web service project and add the following keys 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 { diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md index d468fe393d..2f4eb46ef6 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md @@ -1,26 +1,26 @@ --- layout: post -title: Deploy TypeScript PDF Viewer server to Azure Kubernetes Service (AKS) +title: Deploy Syncfusion PDF Viewer Server to Azure Kubernetes Service description: Deploy the Syncfusion PDF Viewer server Docker image to Azure Kubernetes Service (AKS), expose it securely, and connect it to the TypeScript PDF Viewer client. platform: document-processing control: PDF Viewer documentation: ug --- -# Deploy Docker image to Azure Kubernetes Service (AKS) +# Manage Docker Image Deployments in Azure Kubernetes Service Host the Syncfusion PDF Viewer server container on Azure Kubernetes Service (AKS) to deliver PDFs to the TypeScript PDF Viewer client at scale. The following workflow provisions the infrastructure, deploys the published image from Docker Hub, and exposes a public endpoint for the component’s `serviceUrl`. ## Prerequisites -- Azure subscription and Azure CLI installed. See the [Install the Azure CLI](https://learn.microsoft.com/cli/azure/install-azure-cli) guide. +- Azure subscription and Azure CLI installed. See the [Install the Azure CLI](https://learn.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest) guide. - Sign in to Azure before you create resources. ```console az login ``` -Ensure the AKS nodes can pull the `syncfusion/pdfviewerserver:latest` image from Docker Hub or from a private registry mirror if outbound internet access is restricted. +Ensure the AKS nodes can pull the `syncfusion/pdfviewer server:latest` image from Docker Hub or from a private registry mirror if outbound internet access is restricted. ## Deploy the PDF Viewer server @@ -101,7 +101,7 @@ kubectl apply -f ./pdfviewer-server.yaml kubectl get all ``` -It can take several minutes for Azure to provision the LoadBalancer IP. When the external IP is available, browse to `http:///api/pdfviewer` to verify the default GET response. Enable HTTPS with an ingress controller or Azure Front Door for production workloads. +It can take several minutes for Azure to provision the LoadBalancer IP. When the external IP is available, browse to `http:///api/pdfviewer` to verify the default GET response. Enable HTTPS with an ingress controller or Azure Front Door for production workloads. **Step 6:** Connect the client to the server endpoint. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md index a683d0d164..b04e3cc50b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md @@ -1,6 +1,6 @@ --- layout: post -title: TypeScript PDF Viewer server Docker image overview +title: TypeScript Syncfusion PDF Viewer server Docker image overview description: Run the Syncfusion PDF Viewer server Docker image, configure licensing and Redis cache, and connect it to the TypeScript PDF Viewer client. platform: document-processing control: PDF Viewer @@ -10,11 +10,11 @@ documentation: ug The Syncfusion PDF Viewer component enables viewing, printing, form filling, and annotating PDF files in web applications. The client component requires a server-side Web API to process and render PDF content. -Use the PDF Viewer server Docker image to host this backend quickly in containerized environments. The container exposes a REST API that the TypeScript PDF Viewer client calls through its `serviceUrl` value. +Use the PDF Viewer server Docker image to host this back end quickly in containerized environments. The container exposes a REST API that the TypeScript PDF Viewer client calls through its `serviceUrl` value. PDF Viewer is a commercial product and requires a valid license in production environments. Request a license or trial key from the [Syncfusion licensing portal](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key). -PDF Viewer is available for JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor. Choose the Docker image when you need a lightweight deployment option or when multiple clients share the same backend. +PDF Viewer is available for JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor. Choose the Docker image when you need a lightweight deployment option or when multiple clients share the same back end. ## Prerequisites @@ -61,7 +61,7 @@ docker-compose up Alternatively, run the container directly with the license key: ```console -docker run -d -p 6001:80 –e SYNCFUSION_LICENSE_KEY= YOUR_LICENSE_KEY syncfusion/pdfviewer-server:latest +docker run -d -p 6001:80 -e SYNCFUSION_LICENSE_KEY=YOUR_LICENSE_KEY syncfusion/pdfviewer-server:latest ``` 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. @@ -122,7 +122,7 @@ if(ele) { The PDF Viewer server caches loaded document instances. To use a distributed cache, configure Azure Cache for Redis with Docker Compose as follows. -**Step 1:** Create an Azure Cache for Redis instance and copy the connection string. Follow the [Azure Cache for Redis quickstart](https://learn.microsoft.com/azure/azure-cache-for-redis/cache-dotnet-core-quickstart). +**Step 1:** Create an Azure Cache for Redis instance and copy the connection string. Follow the [Azure Cache for Redis quickstart](https://learn.microsoft.com/en-us/azure/redis/dotnet). **Step 2:** Provide the connection string with the `REDIS_CACHE_CONNECTION_STRING` variable in `docker-compose.yml`. The default sliding expiration is 10 minutes. To change it, set `DOCUMENT_SLIDING_EXPIRATION_TIME`. @@ -135,7 +135,7 @@ services: # Provide your license key for activation SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY REDIS_CACHE_CONNECTION_STRING: YOUR_REDIS_CACHE_CONNECTION_STRING - DOCUMENT_SLIDING_EXPIRATION_TIME: “20” + DOCUMENT_SLIDING_EXPIRATION_TIME: "20" ports: - "6001:80" ``` diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-to-standalone.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-to-standalone.md index e6c2fd82db..e2f3930786 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-to-standalone.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-to-standalone.md @@ -49,7 +49,7 @@ When you migrate to standalone mode, the processing location for various feature | **Thumbnail View** | Thumbnail images are generated on the server and transmitted to the client. | Thumbnails are rendered directly in the browser without server involvement. | | **Bookmark View** | Bookmark data is processed on the server and sent to the client for rendering. | Bookmark navigation is managed locally using the Syncfusion EJ2 PDF Viewer. | | **Text Search** | Text search operations are performed on the server, and results are returned to the client. | Text search is executed entirely within the browser. | -| **Print** | The server handles print preparation and formatting, then sends the processed output back to the client for printing. | The server handles print preparation and formatting, then sends the processed output back to the client for printing. | +| **Print** | The server handles print preparation and formatting, then sends the processed output back to the client for printing. | Print preparation and formatting are executed directly in the browser using the Syncfusion EJ2 PDF Library, with no server round-trip. | | **Toolbar** | Toolbar actions such as zoom, navigation, and export are processed on the server, and results are returned to the client. | Toolbar operations are executed instantly on the client without requiring server communication. | **Key Insight:** In standalone mode, all PDF processing occurs in the browser, eliminating the need for server coordination. Your server only serves the PDF file as a static resource or through a simple API endpoint. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/find-text.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/find-text.md index da7a9ac2ce..fd803087d8 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/find-text.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/find-text.md @@ -25,7 +25,7 @@ Searches for the specified text within the document and returns the bounding rec {% tabs %} {% highlight ts tabtitle="Standalone" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -42,7 +42,7 @@ document.getElementById('textbounds')?.addEventListener('click', function() { {% endhighlight %} {% highlight ts tabtitle="Server-backed" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -70,7 +70,7 @@ Searches for the specified text within the document and returns the bounding rec {% tabs %} {% highlight ts tabtitle="Standalone" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -87,7 +87,7 @@ document.getElementById('textbounds')?.addEventListener('click', function() { {% endhighlight %} {% highlight ts tabtitle="Server-backed" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -115,7 +115,7 @@ Searches for an array of strings within the document and returns the bounding re {% tabs %} {% highlight ts tabtitle="Standalone" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -132,7 +132,7 @@ document.getElementById('textbounds')?.addEventListener('click', function() { {% endhighlight %} {% highlight ts tabtitle="Server-backed" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -160,7 +160,7 @@ Searches for an array of strings within the document and returns the bounding re {% tabs %} {% highlight ts tabtitle="Standalone" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -177,7 +177,7 @@ document.getElementById('textbounds')?.addEventListener('click', function() { {% endhighlight %} {% highlight ts tabtitle="Server-backed" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; // Inject required modules PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); @@ -214,8 +214,7 @@ Example 1: Search for a single string ('pdf') case-insensitively across all page ``` ```ts import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, - TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, PageOrganizer, - ExtractTextOption} from '@syncfusion/ej2-pdfviewer'; + TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer'; PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, PageOrganizer); @@ -275,8 +274,8 @@ This will search for the terms "pdf" and "the" in a case-insensitive manner only ## See Also -[Text Search Features](./text-search-features) -[Text Search Events](./text-search-events) -[Extract Text](../how-to/extract-text-ts) -[Extract Text Options](../how-to/extract-text-option-ts) -[Extract Text Completed](../how-to/extract-text-completed-ts) \ No newline at end of file +- [Text Search Features](./text-search-features) +- [Text Search Events](./text-search-events) +- [Extract Text](../how-to/extract-text-ts) +- [Extract Text Options](../how-to/extract-text-option-ts) +- [Extract Text Completed](../how-to/extract-text-completed-ts) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-events.md index 9937fd0a35..808d047631 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-events.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-events.md @@ -28,7 +28,7 @@ const viewer: PdfViewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', textSearchStart: function (args: any) { // args.searchText contains the term being searched - // args.cancel can be set to true to stop the default search + // args.cancel is available on the event arguments to stop the default search when set to true console.log(`Text search started for: "${args.searchText}"`); } }); @@ -76,7 +76,7 @@ The [textSearchComplete](https://ej2.syncfusion.com/documentation/api/pdfviewer# const viewer: PdfViewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', textSearchComplete: (args: any) => { - // args.totalMatches may indicate how many results were found (when available) + // args.totalMatches contains the total number of matches found console.log('Text search completed.', args); } }); @@ -87,8 +87,8 @@ viewer.appendTo('#pdfViewer'); ## See Also -[Text Search Features](./text-search-features) -[Find Text](./find-text) -[Extract Text](../how-to/extract-text-ts) -[Extract Text Options](../how-to/extract-text-option-ts) -[Extract Text Completed](../how-to/extract-text-completed-ts) \ No newline at end of file +- [Text Search Features](./text-search-features) +- [Find Text](./find-text) +- [Extract Text](../how-to/extract-text-ts) +- [Extract Text Options](../how-to/extract-text-option-ts) +- [Extract Text Completed](../how-to/extract-text-completed-ts) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-features.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-features.md index 4441cd3f8f..a8613bc489 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-features.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-features.md @@ -298,8 +298,8 @@ document.getElementById('btnCancel')?.addEventListener('click', () => cancelText ## See Also -[Find Text](./find-text) -[Text Search Events](./text-search-events) -[Extract Text](../how-to/extract-text-ts) -[Extract Text Options](../how-to/extract-text-option-ts) -[Extract Text Completed](../how-to/extract-text-completed-ts) \ No newline at end of file +- [Find Text](./find-text) +- [Text Search Events](./text-search-events) +- [Extract Text](../how-to/extract-text-ts) +- [Extract Text Options](../how-to/extract-text-option-ts) +- [Extract Text Completed](../how-to/extract-text-completed-ts) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar.md index 793032c29d..afd7d1ec07 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar.md @@ -3,8 +3,7 @@ layout: post title: Annotation Toolbar in TypeScript PDF Viewer control | Syncfusion description: Learn here all about annotation toolbar customization in Syncfusion TypeScript PDF Viewer control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Annotation Toolbar Customization -publishingplatform: PDF Viewer +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- @@ -17,7 +16,7 @@ The annotation toolbar can be customized by showing or hiding default items and Show or hide the annotation toolbar programmatically during initialization or at runtime. -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. +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 example shows how to show or hide the annotation toolbar using the `showAnnotationToolbar` method. @@ -69,13 +68,13 @@ document.getElementById('set').addEventListener('click', ()=> { {% endhighlight %} {% endtabs %} -## How to customize the annotation toolbar +## Customize the annotation toolbar Choose which tools appear and control their order in the annotation toolbar. -Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/) with the [`AnnotationToolbarItems`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/#annotationtoolbaritems) property to choose which tools are displayed in the annotation toolbar. The property accepts a list of [`AnnotationToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationToolbarItem/) values. Only the items included in this list are shown; any item not listed is hidden. The rendered order follows the sequence of items in the list. +Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings) with the [`AnnotationToolbarItems`] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/#annotationtoolbaritems) property to choose which tools are displayed in the annotation toolbar. The property accepts a list of [`AnnotationToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationToolbarItem) values. Only the items included in this list are shown; any item not listed is hidden. The rendered order follows the sequence of items in the list. -The annotation toolbar is presented when entering annotation mode in PdfViewer and adapts responsively based on the available width. Include the Close tool to allow users to exit the annotation toolbar when needed. +The annotation toolbar appears when entering annotation mode in PdfViewer and adapts responsively based on the available width. The Close tool allows users to exit the annotation toolbar when needed. The following example demonstrates how to customize the annotation toolbar by specifying a selected set of tools using `AnnotationToolbarItem`. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md index 5ac8c7eeb8..906c63d0fb 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Custom Toolbar in TypeScript PDF Viewer -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. +The PDF Viewer exposes 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: @@ -125,12 +125,12 @@ Add Syncfusion EJ2 Toolbar components to perform primary actions like Open, Prev items: [ { prefixIcon: 'e-pv-open-document', tooltipText: 'Open', id: 'openButton', click: openDocument.bind(this) }, { prefixIcon: 'e-pv-bookmark-icon', tooltipText: 'Bookmark', id: 'bookmarkButton', click: bookmarkClicked }, - // tslint:disable-next-line:max-line-length + // ts lint:disable-next-line:max-line-length { prefixIcon: 'e-pv-previous-page-navigation-icon', id: 'previousPage', tooltipText: 'Previous Page', align: 'Center', click: previousClicked.bind(this) }, - // tslint:disable-next-line:max-line-length + // ts lint:disable-next-line:max-line-length { prefixIcon: 'e-pv-next-page-navigation-icon', id: 'nextPage', tooltipText: 'Next Page', align: 'Center', click: nextClicked.bind(this) }, { template: inputTemplate, tooltipText: 'Page Number', align: 'Center' }, - { template: ele, tooltipText: 'Page Number', align: 'Center' }, + { template: elem, tooltipText: 'Page Number', align: 'Center' }, { prefixIcon: 'e-pv-search-icon', tooltipText: 'Text Search', align: 'Right', click: searchClicked.bind(this) }, { prefixIcon: 'e-pv-print-document-icon', tooltipText: 'Print', align: 'Right', click: printClicked.bind(this) }, { prefixIcon: 'e-pv-download-document-icon', tooltipText: 'Download', align: 'Right', click: downloadClicked.bind(this) } @@ -336,7 +336,6 @@ Add the following scripts for handling user interactions with the custom toolbar {% tabs %} {% highlight ts tabtitle="Standalone" %} -```ts import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, @@ -353,7 +352,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkVie */ let inputTemplate: string = '
          '; -let ele: string = '
          of 0
          '; +let elem: string = '
          of 0
          '; let isBookmarkOpen: boolean = false; let isBookmarkClick: boolean = false; let isTextSearchBoxOpen: boolean = false; @@ -389,12 +388,12 @@ function bookmarkClicked(): void { { dataSource: bookmarks, id: 'Id', - parentID: 'Pid', + parentID: 'Pi', text: 'Title', hasChildren: 'HasChild', }, nodeSelected: nodeClick }); - treeObj.appendTo('#bookmarkview'); + treeObj.appendTo('#bookmarkView'); bookmarkPopup.show(); isBookmarkOpen = true; isBookmarkClick = true; @@ -463,7 +462,7 @@ function onCurrentPageBoxKeypress(event: KeyboardEvent): boolean { event.preventDefault(); return false; } else { - // tslint:disable-next-line:radix + // ts lint:disable-next-line:radix let currentPageNumber: number = parseInt((currentPageBox as HTMLInputElement).value); if (event.which === 13) { if (currentPageNumber > 0 && currentPageNumber <= viewer.pageCount) { @@ -482,13 +481,13 @@ function onCurrentPageBoxClicked(): void { } function readFile(args: any): void { - // tslint:disable-next-line - let upoadedFiles: any = args.target.files; + // ts lint:disable-next-line + let uploadedFiles: any = args.target.files; if (args.target.files[0] !== null) { - let uploadedFile: File = upoadedFiles[0]; + let uploadedFile: File = uploadedFiles[0]; if (uploadedFile) { let reader: FileReader = new FileReader(); - let filename: string = upoadedFiles[0].name; + let filename: string = uploadedFiles[0].name; reader.readAsDataURL(uploadedFile); // tslint:disable-next-line reader.onload = (e: any): void => { @@ -497,7 +496,7 @@ function readFile(args: any): void { viewer.fileName = filename; (currentPageBox as HTMLInputElement).value = '1'; document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount; - document.getElementById('bookmarkview').innerHTML = ''; + document.getElementById('bookmarkView').innerHTML = ''; isBookmarkOpen = false; }; } @@ -540,14 +539,14 @@ function updateZoomButtons(): void { function nodeClick(args: NodeSelectEventArgs): boolean { let bookmarksDetails: any = viewer.bookmark.getBookmarks(); let bookmarksDestination: any = bookmarksDetails.bookmarksDestination; - let bookid: number = Number(args.nodeData.id); - let pageIndex: number = bookmarksDestination.bookMarkDestination[bookid].PageIndex; - let Y: number = bookmarksDestination.bookMarkDestination[bookid].Y; + let bookId: number = Number(args.nodeData.id); + let pageIndex: number = bookmarksDestination.bookMarkDestination[bookId].PageIndex; + let Y: number = bookmarksDestination.bookMarkDestination[bookId].Y; viewer.bookmark.goToBookmark(pageIndex, Y); return false; } -function searchInputKeypressed(event: KeyboardEvent): void { +function searchInputKeypress(event: KeyboardEvent): void { enablePrevButton(true); enableNextButton(true); if (event.which === 13) { @@ -628,12 +627,12 @@ function updateSearchInputIcon(isEnable: boolean): void { items: [ { prefixIcon: 'e-pv-open-document', tooltipText: 'Open', id: 'openButton', click: openDocument.bind(this) }, { prefixIcon: 'e-pv-bookmark-icon', tooltipText: 'Bookmark', id: 'bookmarkButton', click: bookmarkClicked }, - // tslint:disable-next-line:max-line-length + // ts lint:disable-next-line:max-line-length { prefixIcon: 'e-pv-previous-page-navigation-icon', id: 'previousPage', tooltipText: 'Previous Page', align: 'Center', click: previousClicked.bind(this) }, - // tslint:disable-next-line:max-line-length + // ts lint:disable-next-line:max-line-length { prefixIcon: 'e-pv-next-page-navigation-icon', id: 'nextPage', tooltipText: 'Next Page', align: 'Center', click: nextClicked.bind(this) }, { template: inputTemplate, tooltipText: 'Page Number', align: 'Center' }, - { template: ele, tooltipText: 'Page Number', align: 'Center' }, + { template: elem, tooltipText: 'Page Number', align: 'Center' }, { prefixIcon: 'e-pv-search-icon', tooltipText: 'Text Search', align: 'Right', click: searchClicked.bind(this) }, { prefixIcon: 'e-pv-print-document-icon', tooltipText: 'Print', align: 'Right', click: printClicked.bind(this) }, { prefixIcon: 'e-pv-download-document-icon', tooltipText: 'Download', align: 'Right', click: downloadClicked.bind(this) } @@ -660,7 +659,7 @@ function updateSearchInputIcon(isEnable: boolean): void { searchInput = document.getElementById('searchInput'); bookmarkPopup = new Dialog({ showCloseIcon: true, header: 'Bookmarks', closeOnEscape: false, isModal: false, target: document.getElementById('pdfViewer'), - content: '
          ', + content: '
          ', buttons: [{ buttonModel: {}, }], position: { X: 'left', Y: 'top' }, cssClass: 'e-bookmark-popup', beforeClose: (): void => { @@ -680,7 +679,7 @@ function updateSearchInputIcon(isEnable: boolean): void { let previousSearch: Button = new Button({ iconCss: 'e-pv-previous-search' }); previousSearch.appendTo('#previousSearch'); - let nextSearch: Button = new Button({ iconCss: 'e-pv-next-search-btn' }); + let nextSearch: Button = new Button({ iconCss: 'e-pv-next-search-button' }); nextSearch.appendTo('#nextSearch'); let matchCaseCheck: CheckBox = new CheckBox({ label: 'Match case', change: checkBoxChanged }); @@ -695,10 +694,10 @@ function updateSearchInputIcon(isEnable: boolean): void { document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount; updatePageNavigation(); }; - searchButton = document.getElementById('searchBtn'); + searchButton = document.getElementById('searchButton'); searchInput.addEventListener('focus', () => { searchInput.parentElement.classList.add('e-input-focus'); }); searchInput.addEventListener('blur', () => { searchInput.parentElement.classList.remove('e-input-focus'); }); - searchInput.addEventListener('keypress', searchInputKeypressed); + searchInput.addEventListener('keypress', searchInputKeypress); document.getElementById('previousSearch').addEventListener('click', previousSearchClicked); document.getElementById('nextSearch').addEventListener('click', nextSearchClicked); currentPageBox.addEventListener('keypress', onCurrentPageBoxKeypress); @@ -709,10 +708,8 @@ function updateSearchInputIcon(isEnable: boolean): void { enableNextButton(false); enablePrevButton(false); -``` {% endhighlight %} {% highlight ts tabtitle="Server-Backed" %} -```ts import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, @@ -729,7 +726,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkVie */ let inputTemplate: string = '
          '; -let ele: string = '
          of 0
          '; +let elem: string = '
          of 0
          '; let isBookmarkOpen: boolean = false; let isBookmarkClick: boolean = false; let isTextSearchBoxOpen: boolean = false; @@ -765,12 +762,12 @@ function bookmarkClicked(): void { { dataSource: bookmarks, id: 'Id', - parentID: 'Pid', + parentID: 'Pi', text: 'Title', hasChildren: 'HasChild', }, nodeSelected: nodeClick }); - treeObj.appendTo('#bookmarkview'); + treeObj.appendTo('#bookmarkView'); bookmarkPopup.show(); isBookmarkOpen = true; isBookmarkClick = true; @@ -839,7 +836,7 @@ function onCurrentPageBoxKeypress(event: KeyboardEvent): boolean { event.preventDefault(); return false; } else { - // tslint:disable-next-line:radix + // ts lint:disable-next-line:radix let currentPageNumber: number = parseInt((currentPageBox as HTMLInputElement).value); if (event.which === 13) { if (currentPageNumber > 0 && currentPageNumber <= viewer.pageCount) { @@ -858,13 +855,13 @@ function onCurrentPageBoxClicked(): void { } function readFile(args: any): void { - // tslint:disable-next-line - let upoadedFiles: any = args.target.files; + // ts lint:disable-next-line + let uploadedFiles: any = args.target.files; if (args.target.files[0] !== null) { - let uploadedFile: File = upoadedFiles[0]; + let uploadedFile: File = uploadedFiles[0]; if (uploadedFile) { let reader: FileReader = new FileReader(); - let filename: string = upoadedFiles[0].name; + let filename: string = uploadedFiles[0].name; reader.readAsDataURL(uploadedFile); // tslint:disable-next-line reader.onload = (e: any): void => { @@ -873,7 +870,7 @@ function readFile(args: any): void { viewer.fileName = filename; (currentPageBox as HTMLInputElement).value = '1'; document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount; - document.getElementById('bookmarkview').innerHTML = ''; + document.getElementById('bookmarkView').innerHTML = ''; isBookmarkOpen = false; }; } @@ -916,14 +913,14 @@ function updateZoomButtons(): void { function nodeClick(args: NodeSelectEventArgs): boolean { let bookmarksDetails: any = viewer.bookmark.getBookmarks(); let bookmarksDestination: any = bookmarksDetails.bookmarksDestination; - let bookid: number = Number(args.nodeData.id); - let pageIndex: number = bookmarksDestination.bookMarkDestination[bookid].PageIndex; - let Y: number = bookmarksDestination.bookMarkDestination[bookid].Y; + let bookId: number = Number(args.nodeData.id); + let pageIndex: number = bookmarksDestination.bookMarkDestination[bookId].PageIndex; + let Y: number = bookmarksDestination.bookMarkDestination[bookId].Y; viewer.bookmark.goToBookmark(pageIndex, Y); return false; } -function searchInputKeypressed(event: KeyboardEvent): void { +function searchInputKeypress(event: KeyboardEvent): void { enablePrevButton(true); enableNextButton(true); if (event.which === 13) { @@ -1004,12 +1001,12 @@ function updateSearchInputIcon(isEnable: boolean): void { items: [ { prefixIcon: 'e-pv-open-document', tooltipText: 'Open', id: 'openButton', click: openDocument.bind(this) }, { prefixIcon: 'e-pv-bookmark-icon', tooltipText: 'Bookmark', id: 'bookmarkButton', click: bookmarkClicked }, - // tslint:disable-next-line:max-line-length + // ts lint:disable-next-line:max-line-length { prefixIcon: 'e-pv-previous-page-navigation-icon', id: 'previousPage', tooltipText: 'Previous Page', align: 'Center', click: previousClicked.bind(this) }, - // tslint:disable-next-line:max-line-length + // ts lint:disable-next-line:max-line-length { prefixIcon: 'e-pv-next-page-navigation-icon', id: 'nextPage', tooltipText: 'Next Page', align: 'Center', click: nextClicked.bind(this) }, { template: inputTemplate, tooltipText: 'Page Number', align: 'Center' }, - { template: ele, tooltipText: 'Page Number', align: 'Center' }, + { template: elem, tooltipText: 'Page Number', align: 'Center' }, { prefixIcon: 'e-pv-search-icon', tooltipText: 'Text Search', align: 'Right', click: searchClicked.bind(this) }, { prefixIcon: 'e-pv-print-document-icon', tooltipText: 'Print', align: 'Right', click: printClicked.bind(this) }, { prefixIcon: 'e-pv-download-document-icon', tooltipText: 'Download', align: 'Right', click: downloadClicked.bind(this) } @@ -1036,7 +1033,7 @@ function updateSearchInputIcon(isEnable: boolean): void { searchInput = document.getElementById('searchInput'); bookmarkPopup = new Dialog({ showCloseIcon: true, header: 'Bookmarks', closeOnEscape: false, isModal: false, target: document.getElementById('pdfViewer'), - content: '
          ', + content: '
          ', buttons: [{ buttonModel: {}, }], position: { X: 'left', Y: 'top' }, cssClass: 'e-bookmark-popup', beforeClose: (): void => { @@ -1056,7 +1053,7 @@ function updateSearchInputIcon(isEnable: boolean): void { let previousSearch: Button = new Button({ iconCss: 'e-pv-previous-search' }); previousSearch.appendTo('#previousSearch'); - let nextSearch: Button = new Button({ iconCss: 'e-pv-next-search-btn' }); + let nextSearch: Button = new Button({ iconCss: 'e-pv-next-search-button' }); nextSearch.appendTo('#nextSearch'); let matchCaseCheck: CheckBox = new CheckBox({ label: 'Match case', change: checkBoxChanged }); @@ -1071,10 +1068,10 @@ function updateSearchInputIcon(isEnable: boolean): void { document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount; updatePageNavigation(); }; - searchButton = document.getElementById('searchBtn'); + searchButton = document.getElementById('searchButton'); searchInput.addEventListener('focus', () => { searchInput.parentElement.classList.add('e-input-focus'); }); searchInput.addEventListener('blur', () => { searchInput.parentElement.classList.remove('e-input-focus'); }); - searchInput.addEventListener('keypress', searchInputKeypressed); + searchInput.addEventListener('keypress', searchInputKeypress); document.getElementById('previousSearch').addEventListener('click', previousSearchClicked); document.getElementById('nextSearch').addEventListener('click', nextSearchClicked); currentPageBox.addEventListener('keypress', onCurrentPageBoxKeypress); @@ -1085,7 +1082,6 @@ function updateSearchInputIcon(isEnable: boolean): void { enableNextButton(false); enablePrevButton(false); -``` {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar.md index 471b9bf98c..dba9276afc 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar.md @@ -1,6 +1,6 @@ --- layout: post -title: Form Designer Toolbar Customization in TypeScript PDF Viewer Component | Syncfusion +title: Customize Form Designer Toolbar in Syncfusion PDF Viewer description: Learn here all about form designer toolbar customization in Syncfusion TypeScript PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer @@ -16,7 +16,7 @@ Customize the form designer toolbar by showing or hiding default items and contr The form designer toolbar can be shown or hidden programmatically during initialization or at runtime. -Use the [enableFormDesigner](https://ej2.syncfusion.com/documentation/api/pdfviewer/pdfViewerModel/#enableformdesigner) property to set initial visibility or call the [showFormDesignerToolbar](https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbar/#showformdesignertoolbar) method at runtime to toggle visibility. The links below reference the corresponding API documentation. +Use the [enableFormDesigner] (https://ej2.syncfusion.com/documentation/api/pdfviewer/pdfViewerModel/#enableformdesigner) property to set initial visibility or call the [showFormDesignerToolbar] (https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbar/#showformdesignertoolbar) method at runtime to toggle visibility. The links below reference the corresponding API documentation. The following code snippet shows how to set the `enableFormDesigner` property during initialization. @@ -65,11 +65,11 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -## How to customize the form designer toolbar +## Customize the form designer toolbar Select which tools appear and control their order in the form designer toolbar. -Configure [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbarSettings/) and set the [`FormDesignerToolbarItems`](https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbarSettings/#formdesignertoolbaritems) property to specify available form-design tools. This property accepts a list of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/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. +Configure [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbarSettings) and set the [`FormDesignerToolbarItems`] (https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbarSettings/#formdesignertoolbaritems) property to specify available form-design tools. This property accepts a list of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/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-es6/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/mobile-toolbar.md index 0ba7b3a343..395f8a4e55 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/mobile-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/mobile-toolbar.md @@ -7,6 +7,7 @@ control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- + # Mobile Toolbar Interface in TypeScript PDF Viewer control 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. @@ -127,6 +128,6 @@ The Print option is not available in mobile mode by default. Enabling the deskto ### How to Use Print on Mobile: - 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 +- After enabling desktop mode, the Print option appears in the toolbar and can be used to print the document from the mobile device. 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-es6/toolbar-customization/primary-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/primary-toolbar.md index bc5097705f..907886c38d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/primary-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/primary-toolbar.md @@ -1,6 +1,6 @@ --- layout: post -title: Primary Toolbar Customization in TypeScript PDF Viewer Component | Syncfusion +title: Primary Toolbar Customization in Syncfusion PDF Viewer description: Learn here all about primary toolbar customization in Syncfusion TypeScript PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer @@ -14,9 +14,9 @@ The primary toolbar of the PDF Viewer can be customized by rearranging existing ## 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/documentation/api/pdfviewer/pdfViewerModel/#enabletoolbar) property or the [showToolbar](https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbar/#showtoolbar) method to show or hide the primary toolbar.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/documentation/api/pdfviewer/pdfViewerModel/#enabletoolbar) property or the [showToolbar] (https://ej2.syncfusion.com/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 ts tabtitle="index.ts" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar.md index b3643e4d7a..a253ace82d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar.md @@ -181,11 +181,11 @@ Add the below [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewe {% previewsample "/document-Processing/code-snippet/pdfviewer/javascript-es6/toolbar/toolbar-method-cs1" %} -## Show/Hide the default toolbaritem +## Show/Hide the default toolbar item The PDF Viewer has an option to show or hide these grouped items in the default toolbar. -* **Show/Hide toolbaritem using toolbarSettings as in the following code snippet.** +* **Show/Hide toolbar item using toolbarSettings as in the following code snippet.** {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -244,7 +244,7 @@ Add the below `serviceUrl` in the `index.ts` file {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/toolbar/toolbar-items-cs1" %} -* **Show/Hide toolbaritem using showToolbaritem as in the following code snippet** +* **Show/Hide toolbar item using showToolbaritem as in the following code snippet** {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -558,7 +558,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkVie **Step 5:** Add EJ2 Toolbar for perform primary actions like Open, Previous page, Next page, Go to page,Print and Download using the following code snippet, ```ts - Tool toolbarObj = new Tool({ + let toolbarObj = new Tool({ items: [ { prefixIcon: 'e-pv-open-document', tooltipText: 'Open', id: 'openButton', click: openDocument.bind(this) }, { prefixIcon: 'e-pv-bookmark-icon', tooltipText: 'Bookmark', id: 'bookmarkButton', click: bookmarkClicked }, diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md index 7afb43e0eb..01201ebdd2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md @@ -1,13 +1,13 @@ --- layout: post -title: Fix document loading issues in v23.1+ for the TypeScript PDF Viewer component -description: Resolve document rendering failures in v23.1 or newer by calling dataBind before load, verifying source URLs, checking CORS and CSP, and confirming network connectivity in the TypeScript PDF Viewer. +title: Fix Document Loading Issues in Syncfusion PDF Viewer v23.1+ +description: Resolve document rendering failures in Syncfusion PDF Viewer v23.1+ by using dataBind, validating URLs, checking CORS/CSP, and network access. platform: document-processing control: PDF Viewer documentation: ug --- -# Document Loading Issues in Version 23.1 or Newer +# Troubleshoot Document Loading Issues in Version 23.1+ If a document does not render in the viewer when using version 23.1 or newer, follow these steps: @@ -33,7 +33,7 @@ pdfviewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null 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. +8. Review Content Security Policy (CSP) settings and permit any external resources required by the viewer. N> For v23.1 and later, ensure `dataBind()` is called before `load()`; earlier releases may not require this call. From 8c825d74b3a4c156a384dc277b601a29d138fa77 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Thu, 13 Aug 2026 14:41:41 +0530 Subject: [PATCH 58/70] 1046071: Angular HF changes moved --- .../angular/save-pdf-file/to-box-cloud-file-storage.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-box-cloud-file-storage.md index 837c9eae69..2f91a94f8c 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-box-cloud-file-storage.md @@ -149,7 +149,7 @@ import { LinkAnnotationService, BookmarkViewService, MagnificationService, } ``` -N> Install the Box .NET SDK in the web service project: `dot net add package Box.V2`. +N> Install the Box .NET SDK in the web service project: `dotnet add package Box.V2`. 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 `Angular PDF Viewer` component. From 559192bb6e8ac988a494fd36f8f8ffda42596990 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Thu, 13 Aug 2026 14:49:33 +0530 Subject: [PATCH 59/70] 1046071: Updated Quality enhancement Angular React Vue --- Document-Processing-toc.html | 1 - .../react/open-pdf-file/from-one-drive.md | 2 +- .../save-pdf-file/to-azure-blob-storage.md | 2 +- .../to-box-cloud-file-storage.md | 2 +- .../PDF/PDF-Viewer/vue/accessibility.md | 2 +- .../PDF-Viewer/vue/content-security-policy.md | 12 +- .../PDF/PDF-Viewer/vue/download.md | 4 +- .../PDF/PDF-Viewer/vue/event.md | 23 +- .../PDF/PDF-Viewer/vue/feature-module.md | 9 +- .../vue/getting-started-application.md | 6 - .../PDF/PDF-Viewer/vue/how-to-overview.md | 6 +- .../PDF/PDF-Viewer/vue/interaction-mode.md | 2 +- .../PDF/PDF-Viewer/vue/magnification.md | 2 +- Document-Processing/PDF/PDF-Viewer/vue/mcp.md | 2 +- .../PDF/PDF-Viewer/vue/mobile-toolbar.md | 228 ----------- .../PDF/PDF-Viewer/vue/navigation.md | 12 +- .../PDF/PDF-Viewer/vue/open-pdf-files.md | 2 +- .../PDF/PDF-Viewer/vue/organize-pdf.md | 377 ------------------ .../PDF/PDF-Viewer/vue/overview.md | 4 +- .../PDF/PDF-Viewer/vue/quasar.md | 4 +- .../save-pdf-file/to-azure-blob-storage.md | 2 +- .../to-box-cloud-file-storage.md | 2 +- .../PDF-Viewer/vue/server-to-standalone.md | 4 +- .../PDF-Viewer/vue/text-markup-annotation.md | 11 - .../PDF/PDF-Viewer/vue/toolbar.md | 4 +- 25 files changed, 54 insertions(+), 671 deletions(-) delete mode 100644 Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/vue/organize-pdf.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/vue/text-markup-annotation.md diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 0489040520..07705ebaf4 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -1684,7 +1684,6 @@
      • Accessibility
        • -
      • Mobile Toolbar Interface
      • Toolbar Customization
        • Primary Toolbar
          • diff --git a/Document-Processing/PDF/PDF-Viewer/react/open-pdf-file/from-one-drive.md b/Document-Processing/PDF/PDF-Viewer/react/open-pdf-file/from-one-drive.md index 81c89b3f1b..a577db3286 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/open-pdf-file/from-one-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/react/open-pdf-file/from-one-drive.md @@ -185,6 +185,6 @@ N> The following NuGet packages are commonly required by the example and can be * **Microsoft.Extensions.Configuration.FileExtensions** * **Microsoft.Extensions.Configuration.Json** -N> Install packages using the NuGet Package Manager or `dot net` CLI and confirm package versions match target framework compatibility. +N> Install packages using the NuGet Package Manager or `dotnet` CLI and confirm package versions match target framework compatibility. [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/react/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-azure-blob-storage.md index 6d28d832a1..f090606670 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-azure-blob-storage.md @@ -99,7 +99,7 @@ function saveDocument() { } ``` -N> Install the Azure Storage Blob client package for browser use: `npm install @azure/storage-blob`. For server-side operations use `dot net add package Azure.Storage.Blobs`. +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). diff --git a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-box-cloud-file-storage.md index 2b4b985f91..e49aafc72d 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-box-cloud-file-storage.md @@ -150,7 +150,7 @@ root.render(); ``` {% endraw %} -N> Install the Box .NET SDK in the web service project: `dot net add package Box.V2`. +N> Install the Box .NET SDK in the web service project: `dotnet add package Box.V2`. 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 `React PDF Viewer` component. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md b/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md index 8b0e53e0f4..28b0516a8d 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md @@ -82,7 +82,7 @@ The PDF Viewer follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/ap | CONTROL + F | COMMAND + F |Open the search toolbar| |||**Shortcut for Text Selection**| |CONTROL + C |CONTROL + C | Copy the selected text or annotation or form field | -| CONTROL + X | CONTROL + X |Cut the selected text or annotation of the form field| +|CONTROL + X |CONTROL + X |Cut the selected text, annotation, or form field| |CONTROL + Y |CONTROL + Y |Paste the selected text or annotation or form field| |||**Shortcuts for the general operation**| | CONTROL + Z | CONTROL + Z |Undo the action| diff --git a/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md b/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md index b51ddff90b..fc814d2a69 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md @@ -1,8 +1,8 @@ --- layout: post title: Content Security Policy with Vue PDF Viewer component | Syncfusion -description: Learn here all about Content Security Policy with Vue PDF Viewer component of Syncfusion Essential JS 2 and more details. -control: CSP +description: Learn about configuring Content Security Policy with the Syncfusion Vue PDF Viewer component and related best practices. +control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## @@ -39,7 +39,7 @@ The PDF Viewer is rendered with calculated inline styles and base64-encoded font Include the following directives to permit inline styles and external fonts: {% tabs %} -{% highlight razor tabtitle="HTML" %} +{% highlight html tabtitle="HTML" %} ... @@ -68,7 +68,7 @@ The meta tag should be placed within the `` section of the HTML document t When images are added as blob or base64 data to the PDF Viewer, they are blocked in strict CSP mode. To permit these resources, include the [`img-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directive in the CSP meta tag: {% tabs %} -{% highlight razor tabtitle="HTML" %} +{% highlight html tabtitle="HTML" %} @@ -1031,6 +1033,7 @@ Example:
          @@ -3893,6 +3896,6 @@ export default { ## See also -- [Annotation events](./annotations/annotation-event) -- [Form field events](./form-designer/form-field-events) -- [Organize PDF events](./organize-pdf/organize-pdf-events) +- [Annotation events](./annotation/annotation-event) +- [Form field events](./forms/form-field-events) +- [Organize PDF events](./organize-pages/events) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md b/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md index 07c502c8f8..f8e5a58e91 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md @@ -8,9 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Feature modules in Vue PDF viewer Control +# Feature modules in Vue PDF Viewer Control -The [Vue PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk) exposes functionality as feature modules that can be imported selectively. Import and register only the modules required by an application to keep bundle sizes small and enable specific capabilities on demand. The following feature modules are available: +The Vue PDF Viewer exposes functionality as feature modules that can be imported selectively. Import and register only the modules required by an application to keep bundle sizes small and enable specific capabilities on demand. The following feature modules are available: * **Toolbar**: Built-in toolbar for user interaction. * **Magnification**: Zoom and fit options for improved viewing. @@ -42,8 +42,9 @@ N> In addition to registering the required modules, enable the corresponding com |Annotation|``| |FormFields|``| |FormDesigner|``| +|StickyNotesAnnotation|``| ## See also -* [Toolbar items](../pdfviewer/toolbar) -* [Toolbar customization](../pdfviewer/how-to/toolbar-customization) +* [Toolbar items](./toolbar) +* [Toolbar customization](./toolbar-customization/custom-toolbar) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md index 300acfcca9..bc47478bc2 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md @@ -206,12 +206,6 @@ After the application starts, open the URL shown in the terminal (typically `htt > [View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/Getting%20Started%20Vue-3%20-%20Standalone). -## Video tutorial - -To get started quickly with Vue PDF Viewer, you can watch this video: - -{% youtube "https://www.youtube.com/watch?v=17aW6rOoyWQ" %} - ## See also - [Getting Started with Standalone Vue 2 PDF Viewer](./getting-started) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md index 759d64b4fe..f4f7fd0448 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md @@ -36,7 +36,7 @@ The frequently asked questions in Essential® PDF Viewer are liste * [How to enable or disable the local storage?](./how-to/enable-local-storage) * [How to enable or disable the text selection?](./how-to/enable-text-selection) * [How to export the PDF pages as images?](./how-to/export-as-image) -* [How to extract text from the PDF document?](./how-to/extract-text-completed) +* [How to extract text Completed from the PDF document?](./how-to/extract-text-completed) * [How to extract text from a specific region?](./how-to/extract-text-option) * [How to extract text from the PDF document?](./how-to/extract-text) * [How to find the text in the PDF document asynchronously?](./how-to/find-text-async) @@ -49,7 +49,7 @@ The frequently asked questions in Essential® PDF Viewer are liste * [How to open the bookmark pane when the document is loaded?](./how-to/open-bookmark) * [How to open the thumbnail pane when the document is loaded?](./how-to/open-thumbnail) * [How to get the page render started and completed event?](./how-to/pagerenderstarted-pagerendercompleted) -* [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium''?](./how-to/resolve-unable-to-find-an-entry-point-error) +* [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium'`?](./how-to/resolve-unable-to-find-an-entry-point-error) * [How to restrict the zooming in mobile mode?](./how-to/restricting-zoom-in-mobile-mode) * [How to show custom stamp item in the stamp annotation?](./how-to/show-custom-stamp-item) * [How to show or hide a particular annotation?](./how-to/show-hide-annotation) @@ -63,4 +63,4 @@ The frequently asked questions in Essential® PDF Viewer are liste * [How to convert pixel to point in server side?](./how-to/convert-pixel-to-point-in-server-side) * [Why is the web service not listening?](./how-to/webservice-not-listening) * [How to select annotation?](./how-to/select-annotation) -* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded) \ No newline at end of file +* [How to load document after resources loaded?](./how-to/load-document-after-resources-loaded) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/interaction-mode.md b/Document-Processing/PDF/PDF-Viewer/vue/interaction-mode.md index de2a3d378c..dd0862b956 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/interaction-mode.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/interaction-mode.md @@ -14,7 +14,7 @@ The PDF Viewer provides two interaction modes for working with a loaded PDF docu ## Selection mode -Selection mode allows users to select and copy text from the loaded PDF. Touch-based panning and page scrolling are disabled in this mode. Enable or disable text selection using the following code snippet. +Selection mode allows users to select and copy text from the loaded PDF. Touch-based panning and page scrolling are disabled in this mode. Enable text selection using the following code snippet. {% tabs %} {% highlight html tabtitle="Composition API (Standalone)" %} diff --git a/Document-Processing/PDF/PDF-Viewer/vue/magnification.md b/Document-Processing/PDF/PDF-Viewer/vue/magnification.md index c8f149929f..6b32518f18 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/magnification.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/magnification.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Magnification in Vue PDF viewer control -The PDF Viewer includes magnification controls—ZoomIn, ZoomOut, Zoom, FitPage, and FitWidth—in the default toolbar. The magnification controls can be shown or hidden in the toolbar. +The PDF Viewer includes magnification controls—ZoomIn, ZoomOut, Zoom, FitPage, FitWidth, and Auto in the default toolbar. The magnification controls can be shown or hidden in the toolbar. The following examples show how to enable magnification in the PDF Viewer. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/mcp.md b/Document-Processing/PDF/PDF-Viewer/vue/mcp.md index 284b66da0f..3c7654c756 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/mcp.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/mcp.md @@ -236,4 +236,4 @@ The MCP Server acts purely as a knowledge bridge, connecting your AI model with ## See also -- [Model Context Protocol](https://modelcontextprotocol.io/docs/2026-07-28/getting-started/intro) +* [Model Context Protocol](https://modelcontextprotocol.io/docs/2026-07-28/getting-started/intro) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md deleted file mode 100644 index ab92fcd7d6..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/vue/mobile-toolbar.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -layout: post -title: Mobile Toolbar Interface in Vue PDF Viewer | Syncfusion -description: Learn All About the Mobile Toolbar Interface in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more. -control: Mobile Toolbar Interface -platform: document-processing -documentation: ug -domainurl: ##DomainURL## ---- -# Mobile toolbar interface in Vue PDF Viewer - -The Vue PDF Viewer provides a mobile-optimized toolbar interface for viewing, searching, annotating, and managing PDF documents on mobile devices. The toolbar includes Syncfusion® tools for search, download, bookmarking, annotation, and page organization. For advanced use cases, the desktop toolbar can be enabled on mobile devices to access additional features and controls. - -## Mobile mode toolbar configuration - -In mobile mode, the toolbar is optimized for small screens, presenting users with the most common actions for PDF interaction. The toolbar displays only the essential features to maximize screen real estate while maintaining usability. - -![Mobile toolbar with primary PDF interaction options](images/mobileToolbar.png) - -### Main toolbar options - -The following toolbar options are available in mobile mode: - -**OpenOption:** Tap to load a PDF document into the viewer. - -**SearchOption:** Access the search functionality to find text within the document. - -![Search bar displayed for finding text within a PDF](images/searchOption.png) - -**UndoRedoTool:** Quickly undo or redo annotation changes. - -**OrganizePagesTool:** Enable page organization features to reorder, delete, or rotate document pages. - -![Page organization interface for modifying PDF pages](images/organizePages.png) - -**AnnotationEditTool:** Activate annotation editing to add or modify annotations on the PDF. - -![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 displayed at the bottom of the viewer for easy access. - -### More options menu - -The "more options" menu provides additional actions: - -**DownloadOption:** Tap to download the currently open PDF document to the device. - -**BookmarkOption:** View and navigate to bookmarks within the document. - -![More options menu showing additional actions like download and bookmark](images/more-options.png) - -## Enable desktop mode on mobile devices - -By default, the PDF Viewer automatically detects the device type and displays the optimized toolbar layout. For applications that require the full desktop toolbar experience on mobile devices, enable desktop mode using the `enableDesktopMode` property. This provides access to all available toolbar actions and controls typically reserved for desktop platforms. - - -### Steps to enable desktop mode - -**Step 1**: Set the `enableDesktopMode` property to `true` in your PDF Viewer configuration. - -**Step 2**: The mobile toolbar is replaced with the desktop toolbar layout, providing access to additional actions and controls. - -{% tabs %} -{% highlight html tabtitle="Standalone" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - -{% endhighlight %} -{% endtabs %} - -## Optimize touch scrolling in desktop mode - -When using desktop mode on mobile devices, text selection may interfere with natural touch scrolling. To ensure smooth document scrolling with touch gestures, disable text selection by setting `enableTextSelection` to `false`. This allows users to scroll documents naturally without accidentally triggering text selection. - -{% tabs %} -{% highlight html tabtitle="Standalone" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - -{% endhighlight %} -{% endtabs %} - -## Access print functionality on mobile - -The Print option is not available in the default mobile toolbar. To access print functionality on mobile devices, enable desktop mode by setting `enableDesktopMode` to `true`. Once desktop mode is active, the print option becomes available in the toolbar, allowing users to print PDF documents directly from their mobile device. - -N> Print functionality on mobile devices typically opens the native print dialog, allowing users to save as PDF, print to wireless printers, or use other platform-specific print options. \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/navigation.md b/Document-Processing/PDF/PDF-Viewer/vue/navigation.md index 6ed02e3386..edd8876f6e 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/navigation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/navigation.md @@ -14,13 +14,13 @@ The Vue PDF Viewer supports several internal and external navigation methods. ## Toolbar page navigation option -The default toolbar of PDF Viewer contains the following navigation options +The default toolbar of the PDF Viewer contains the following navigation options -* [**Go to page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation/#gotopage):- Navigates to the specific page of a PDF document. -* [**Show next page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation/#gotonextpage):- Navigates to the next page of PDF a document. -* [**Show previous page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation/#gotopreviouspage):- Navigates to the previous page of a PDF document. -* [**Show first page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation/#gotofirstpage):- Navigates to the first page of a PDF document. -* [**Show last page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation/#gotolastpage):- Navigates to the last page of a PDF document. +* [**Go to page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation#gotopage):- Navigates to the specific page of a PDF document. +* [**Show next page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation#gotonextpage):- Navigates to the next page of PDF a document. +* [**Show previous page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation#gotopreviouspage):- Navigates to the previous page of a PDF document. +* [**Show first page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation#gotofirstpage):- Navigates to the first page of a PDF document. +* [**Show last page**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/navigation#gotolastpage):- Navigates to the last page of a PDF document. You can enable or disable page navigation in the PDF Viewer using the following code snippet. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-files.md b/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-files.md index ddf8f5e12a..1bb37f007c 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-files.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-files.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Open PDF files in Vue PDF Viewer -This article explains how to open and display PDF files in the Vue PDF Viewer from various sources. In this section, you can find the information about how to open PDF files from URL, database, local file system, and as base64 string. +This article explains how to open and display PDF files in the Vue PDF Viewer from various sources. In this section, you can find the information about how to open PDF files from URL, database, local files , and as base64 string. N> Ensure that the web service is running and reachable before loading documents in the Vue PDF Viewer component. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf.md deleted file mode 100644 index 23b95e0635..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -layout: post -title: Organize Pages in Vue PDF Viewer component | Syncfusion -description: Learn here all about Organize Pages in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more. -control: PDF Viewer -platform: document-processing -documentation: ug -domainurl: ##DomainURL## ---- - -# Organize Pages in Vue PDF Viewer component - -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. - -## Getting started - -To access the organize pages feature, simply open the PDF document in the PDF Viewer and navigate to the left vertical toolbar. Look for the `Organize Pages` option to begin utilizing these capabilities. - -![Organize pages toolbar option](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. - -### Rotating PDF pages - -You can adjust the orientation of PDF pages to ensure proper alignment. The rotate icon offers the following options: - -* `Rotate clockwise`: Rotate the selected pages 90 degrees clockwise. -* `Rotate counter-clockwise`: Rotate the selected pages 90 degrees counter-clockwise. - -### Rearranging PDF pages - -You can easily change the sequence of pages within your document using the drag and drop method: - -* `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order. - -![Rotate and rearrange pages animation](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. - -### 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. - -### 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. - -![Insert, delete, and copy pages animation](images/insert-delete-copy.gif) - -### Importing a PDF Document - -Seamlessly import a PDF document into your existing 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 PDF into document animation](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 pages thumbnail vie](images/selectall.png) - -### Zooming Page Thumbnails - -Adjust the size of page thumbnails within the organizer panel for better visibility and precision when editing. The zoom functionality allows you to: - -* Increase or decrease the size of page thumbnails using the zoom slider -* See more details on pages when zoomed in -* View more pages simultaneously when zoomed out - -This feature is especially useful when working with documents containing complex layouts or small details that need careful examination during organization. - -![Thumbnail zoom slider in organizer](./images/zoomOrganize.png) - -### Real-time updates - -Witness instant changes in page organization reflected within the PDF Viewer. Simply click the **Save** button to preserve your modifications. - -### Save As 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. - -## APIs 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. - -{% tabs %} -{% highlight html tabtitle="Standalone" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - -{% endhighlight %} -{% endtabs %} - -**isPageOrganizerOpen:** This API determines whether the page organizer dialog will be displayed automatically when a document is loaded into the PDF Viewer. By default, it is set to `false`, meaning the dialog is not displayed initially. - -{% tabs %} -{% highlight html tabtitle="Standalone" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - -{% endhighlight %} -{% endtabs %} - -**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, copying, importing and rearranging pages, as well as configuring thumbnail zoom settings. By default, all these actions are enabled and standard zoom settings are applied. - -{% tabs %} -{% highlight html tabtitle="Standalone" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - -{% endhighlight %} -{% endtabs %} - -**openPageOrganizer:** This API opens the page organizer dialog within the PDF Viewer, providing access to manage PDF pages. - -```html - -``` - -```ts -openPageOrganizer: function () { - var viewer = this.$refs.pdfviewer.ej2Instances; - // Open Page Organizer panel. - viewer.pageOrganizer.openPageOrganizer(); -} -``` - -**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. - -```html - -``` - -```ts -closePageOrganizer: function () { - var viewer = this.$refs.pdfviewer.ej2Instances; - // Close Page Organizer panel. - viewer.pageOrganizer.closePageOrganizer(); -} -``` - -## Keyboard shortcuts - -The following keyboard shortcuts are available at the organize pages dialog. - -* **Ctrl+Z** : Undo the last action performed. -* **Ctrl+Y** : Redo the action that was undone -* **Ctrl+Scroll** : Zoom in and zoom out page thumbnails for better visibility. - -![Undo and redo icons 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! - -[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to/Organize%20pdf) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/overview.md b/Document-Processing/PDF/PDF-Viewer/vue/overview.md index cd697d8c46..0c320f27c0 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/overview.md @@ -33,8 +33,8 @@ The [`Vue PDF Viewer`](https://www.syncfusion.com/pdf-viewer-sdk) component is a * [Form designer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/forms/form-designer) * [Handwritten signature](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/annotation/signature-annotation) * [Toolbar](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/toolbar) - Built-in toolbar and custom toolbars for common viewer actions. -* [Globalization](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/globalization) - Localize the UI. -* Open and display [normal and protected PDF files](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) with AES and RC4 encryption. +* [Globalization](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/localization/default-language) - Localize the UI. +* [Open and display](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) normal and protected PDF files with AES and RC4 encryption. ## Supported Web platforms diff --git a/Document-Processing/PDF/PDF-Viewer/vue/quasar.md b/Document-Processing/PDF/PDF-Viewer/vue/quasar.md index c7bc849742..e9030aa51a 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/quasar.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/quasar.md @@ -2,7 +2,7 @@ layout: post title: Getting Started with Quasar Framework and Vue PDF Viewer | Syncfusion description: Check out and learn about getting Started with the Quasar Framework and Vue PDF Viewer Component of Syncfusion Essential JS 2 and more details. -control: Quasar +control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## @@ -87,7 +87,7 @@ N> Refer to the [Themes topic](https://ej2.syncfusion.com/vue/documentation/appe ## Add the Syncfusion® Vue component -Add the PDF Viewer component to your Quasar application. The component is added to the root `src/App.vue` file, which is the default entry point for a Quasar Vite project. +Add the PDF Viewer component to your Quasar application. The component is added to the root `src/App.vue` file, which is the default entry point for a Quasar project. ### Import and register the PDF Viewer diff --git a/Document-Processing/PDF/PDF-Viewer/vue/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/vue/save-pdf-file/to-azure-blob-storage.md index 3a77aa911b..036431b3e7 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/save-pdf-file/to-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/save-pdf-file/to-azure-blob-storage.md @@ -114,7 +114,7 @@ export default { {% endhighlight %} {% endtabs %} -N> Install the Azure Storage Blob client package for browser use: `npm install @azure/storage-blob`. For server-side operations use `dot net add package Azure.Storage.Blobs`. +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). diff --git a/Document-Processing/PDF/PDF-Viewer/vue/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/vue/save-pdf-file/to-box-cloud-file-storage.md index 23613b4a66..0fa9cfd5d4 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/save-pdf-file/to-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/save-pdf-file/to-box-cloud-file-storage.md @@ -183,7 +183,7 @@ export default { {% endhighlight %} {% endtabs %} -N> Install the Box .NET SDK in the web service project: `dot net add package Box.V2`. +N> Install the Box .NET SDK in the web service project: `dotnet add package Box.V2`. 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 `Vue PDF Viewer` component. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/server-to-standalone.md b/Document-Processing/PDF/PDF-Viewer/vue/server-to-standalone.md index 2dc9eac994..05a6748a93 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/server-to-standalone.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/server-to-standalone.md @@ -47,7 +47,7 @@ When you migrate to standalone mode, the processing location for various feature | **Thumbnail View** | Thumbnail images are generated on the server and transmitted to the client. | Thumbnails are rendered directly in the browser without server involvement. | | **Bookmark View** | Bookmark data is processed on the server and sent to the client for rendering. | Bookmark navigation is managed locally using the Syncfusion EJ2 PDF Viewer. | | **Text Search** | Text search operations are performed on the server, and results are returned to the client. | Text search is executed entirely within the browser. | -| **Print** | The server handles print preparation and formatting, then sends the processed output back to the client for printing. | The server handles print preparation and formatting, then sends the processed output back to the client for printing. | +| **Print** | The server handles print preparation and formatting, then sends the processed output back to the client for printing. | Print is handled locally in the browser using the Syncfusion EJ2 PDF Viewer, without requiring server communication. | | **Toolbar** | Toolbar actions such as zoom, navigation, and export are processed on the server, and results are returned to the client. | Toolbar operations are executed instantly on the client without requiring server communication. | **Key Insight:** In standalone mode, all PDF processing occurs in the browser, eliminating the need for server coordination. Your server only serves the PDF file as a static resource or through a simple API endpoint. @@ -125,7 +125,7 @@ export default { ### Step 3: Add the `resourceUrl` Property -Add the [resourceUrl](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#resouceurl) property to point to the PDFium resource files. You can choose between two approaches: CDN hosting (recommended for quick migration) or local hosting. +Add the [resourceUrl](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#resourceurl) property to point to the PDFium resource files. You can choose between two approaches: CDN hosting (recommended for quick migration) or local hosting. #### Option A: Using CDN (Recommended for Quick Migration) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/text-markup-annotation.md deleted file mode 100644 index 06d7ea5363..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/vue/text-markup-annotation.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -layout: post -title: Text markup annotation in Vue PDF Viewer component | Syncfusion -description: Learn here all about Text markup annotation in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more. -control: Text markup annotation -platform: document-processing -documentation: ug -domainurl: ##DomainURL## ---- - -vue/documentation/pdfviewer/annotation/text-markup-annotation/ \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar.md index 149e5d2062..0b30037f70 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/toolbar.md @@ -676,6 +676,7 @@ export default { {% endtabs %} >Note : Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] + ### Align Property The align property is used to specify the alignment of a toolbar item within the toolbar. @@ -700,6 +701,7 @@ The prefix property is used to set the CSS class or icon that should be added as The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions. When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item. + These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel` in the context of PDF Viewer. When configuring the toolbar using the `ToolbarSettings` property, you can include these properties to customize the appearance and behavior of each toolbar item. N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference. @@ -1241,5 +1243,5 @@ Sample : ## See also -* [Toolbar customization](./how-to/toolbar-customization) +* [Toolbar customization](./toolbar-customization/custom-toolbar) * [Feature Modules](./feature-module) \ No newline at end of file From 96029ea62fdb772ec52b27ed5febd1433556e41e Mon Sep 17 00:00:00 2001 From: Dharanya Sakthivel Date: Thu, 13 Aug 2026 16:43:33 +0530 Subject: [PATCH 60/70] ES-1042923-RevampUG --- .../mail-merge-for-nested-groups.md | 57 ++++++------ .../NET/working-with-mail-merge.md | 88 ++++++++++--------- 2 files changed, 79 insertions(+), 66 deletions(-) diff --git a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md index 1d35ce169b..40a48c955c 100644 --- a/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md +++ b/Document-Processing/Word/Word-Library/NET/mail-merge/mail-merge-for-nested-groups.md @@ -6,9 +6,9 @@ control: DocIO documentation: UG --- -# Nested Mail merge for group +# Mail merge for nested groups -You can perform nested Mail merge with relational or hierarchical data source and independent data tables in a template document. +You can perform nested mail merge with relational or hierarchical data source and independent data tables in a template document. The following table illustrates the supported mail merge overloads for ExecuteNestedGroup method. @@ -43,9 +43,9 @@ The following table illustrates the supported mail merge overloads for ExecuteNe ## Create template for nested group mail merge -Nested Mail merge operation automatically replaces the merge field with immediate group data. You can also predefine the group data that is populated to a merge field. - -To execute nested mail merge, design your Word document template as follow. +Nested mail merge operation automatically replaces the merge field with immediate group data. You can also predefine the group data that is populated in a merge field. + +To execute nested mail merge, design your Word document template as follows. ![Word document template for nested groups](../MailMerge_images/file-formats-word-nested-group-mail-merge-template.png) @@ -53,7 +53,7 @@ In this template, Employees is the owner group and it has two child groups Custo ## Execute nested group mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_System_Data_Common_DbConnection_System_Collections_ArrayList_) method to perform Mail merge for nested groups or regions in the Word document. +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides various overloads for the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_System_Data_Common_DbConnection_System_Collections_ArrayList_) method to perform mail merge for nested groups or regions in the Word document. You need to define commands with the table name and expression for linking the multiple data tables **(explicit relation data)** during nested Mail merge process. You can use the “%TableName.ColumnName%” expression for getting the current value of specified column or field from the table. @@ -154,7 +154,7 @@ The resultant document looks as follows. Essential® DocIO allows you to perform Mail merge with the dynamic objects. The [ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0) is like a collection of key and value pairs, which means IDictionary. So, you can also use IDictionary collection instead of [ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0) to execute mail merge. -The following code snippet shows how to perform the Mail merge with dynamic objects ([ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-6.0)). +The following code snippet shows how to perform the mail merge with dynamic objects ([ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject)). {% tabs %} @@ -170,7 +170,7 @@ dataSet.Add(dataTable); dataTable = new MailMergeDataTable("Orders", GetOrders()); dataSet.Add(dataTable); List commands = new List(); -//DictionaryEntry contain "Source table" (key) and "Command" (value) +//DictionaryEntry contains "Source table" (key) and "Command" (value) DictionaryEntry entry = new DictionaryEntry("Customers", string.Empty); commands.Add(entry); //Retrieves the customer details @@ -196,7 +196,7 @@ dataSet.Add(dataTable); dataTable = new MailMergeDataTable("Orders", GetOrders()); dataSet.Add(dataTable); List commands = new List(); -//DictionaryEntry contain "Source table" (key) and "Command" (value) +//DictionaryEntry contains "Source table" (key) and "Command" (value) DictionaryEntry entry = new DictionaryEntry("Customers", string.Empty); commands.Add(entry); //Retrieves the customer details @@ -220,7 +220,7 @@ dataSet.Add(dataTable) dataTable = New MailMergeDataTable("Orders", GetOrders()) dataSet.Add(dataTable) Dim commands As New List(Of DictionaryEntry)() -'DictionaryEntry contain "Source table" (key) and "Command" (value) +'DictionaryEntry contains "Source table" (key) and "Command" (value) Dim entry As New DictionaryEntry("Customers", String.Empty) commands.Add(entry) 'Retrieves the customer details @@ -361,23 +361,28 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Mail merge with implicit relational data -You can perform **nested Mail merge with implicit relational data** objects without any explicit relational commands by using the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_Syncfusion_DocIO_DLS_MailMergeDataTable_) overload method. +You can perform **nested mail merge with implicit relational data** objects without any explicit relational commands by using the [ExecuteNestedGroup](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ExecuteNestedGroup_Syncfusion_DocIO_DLS_MailMergeDataTable_) overload method. + +DocIO automatically maps child collections to nested groups by matching the property name on the data object to the group name declared in the template (for example, a property named `Departments` on the `Organization` class maps to the `Departments` group region). Ensure property names match the group names used in the template. -### Map the field of ancestor group +### Map fields of ancestor groups -You can also merge any field in the nested group by **mapping the field or column of its ancestor group or table** in the data source. To achieve this, you need to add a corresponding group name or table name as a prefix to the merge field name along with “:” separator. +You can also merge any field in the nested group by **mapping the field or column of its ancestor group or table** in the data source. To achieve this, add the corresponding group name or table name as a prefix to the merge field name along with the `:` separator. For example: - * The merge field name should be like “TableName:Id” (<>) - * The merge field name should be like “Image:TableName:Photo” (<>) - -For example, consider that you have a template document as follow. + * The merge field name should be like `TableName:Id` (<>) + * The merge field name should be like `Image:TableName:Photo` (<>) + +> **NOTE** +> Image merge fields require the merge field to be configured with the `Image:` prefix in the template and the data value to be a byte array or `Image` instance. + +For example, consider that you have a template document as follows. ![Word document template to map the fields of ancestor group](../MailMerge_images/file-formats-word-mapping-template.png) -In the above template, Organizations is the owner group and it has two child groups Departments and Employees. The Supervisor merge field of Departments group is used in Employees group. +In the above template, Organizations is the owner group and it has two child groups Departments and Employees. The `Supervisor` merge field of the Departments group is used in the Employees group. -The following code example shows how to perform nested Mail merge with the implicit relational data objects. +The following code example shows how to perform nested mail merge with the implicit relational data objects. {% tabs %} @@ -385,9 +390,9 @@ The following code example shows how to perform nested Mail merge with the impli //Opens the template document FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -//Gets the organization details as “IEnumerable” collection +//Gets the organization details as IEnumerable collection List organizationList = GetOrganizations(); -//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection MailMergeDataTable dataTable = new MailMergeDataTable("Organizations", organizationList); //Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable); @@ -401,9 +406,9 @@ document.Close(); {% highlight c# tabtitle="C# [Windows-specific]" %} //Opens the template document WordDocument document = new WordDocument("Template.docx"); -//Gets the organization details as “IEnumerable” collection +//Gets the organization details as IEnumerable collection List organizationList = GetOrganizations(); -//Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +//Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection MailMergeDataTable dataTable = new MailMergeDataTable("Organizations", organizationList); //Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable); @@ -415,9 +420,9 @@ document.Close(); {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} 'Opens the template document Dim document As WordDocument = New WordDocument("Template.docx") -'Gets the organization details as “IEnumerable” collection +'Gets the organization details as IEnumerable collection Dim organizationList As List(Of Organization) = GetOrganizations() -'Creates an instance of “MailMergeDataTable” by specifying mail merge group name and “IEnumerable” collection +'Creates an instance of MailMergeDataTable by specifying mail merge group name and IEnumerable collection Dim dataTable As MailMergeDataTable = New MailMergeDataTable("Organizations", organizationList) 'Performs Mail merge document.MailMerge.ExecuteNestedGroup(dataTable) @@ -477,7 +482,7 @@ public static List GetOrganizations() {% endhighlight %} {% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} -Public Function GetOrganizations() As List(Of Organization) +Public Shared Function GetOrganizations() As List(Of Organization) 'Creates Employee details Dim employees As List(Of EmployeeDetails) = New List(Of EmployeeDetails) employees.Add(New EmployeeDetails("Thomas Hardy", "1001", "05/27/1996")) diff --git a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md index a756e7dde0..65e0245968 100644 --- a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md +++ b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md @@ -7,7 +7,7 @@ documentation: UG --- # Working with Mail merge -Mail merge is a process of merging data from data source to a Word template document. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) class provides support to bind template document and data source. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) instance is replaced with the actual data retrieved from data source for the given merge field name in a template document. +Mail merge is a process of merging data from a data source into a Word template document. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) class provides support to bind template document and data source. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) instance is replaced with the actual data retrieved from the data source for the given merge field name in a template document. ## Supported data sources @@ -16,7 +16,7 @@ The following data sources are supported by Essential® DocIO for
      • Data Source

      		Sample

      		Examples
      - + @@ -98,12 +98,12 @@ The mail merge process involves three documents: 3. **Final merged document**: This resultant document is a combination of the template Word document and the data from data source. -T> 1. You can use conditional fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, when you require intelligent decisions in addition to simple mail merge (replace merge fields with result text). To use conditional fields, execute mail merge and then update fields in the Word document using [UpdateDocumentFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_UpdateDocumentFields) API. -T> 2. You can replace the fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, with its most recent result and **generates the plain Word document** by unlinking the fields. Refer to this [link](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-fields#unlink-fields) for more information. +T> 1. You can use conditional fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, when you require intelligent decisions in addition to simple mail merge (i.e., replacing merge fields with result text). To use conditional fields, execute mail merge and then update fields in the Word document using [UpdateDocumentFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WordDocument.html#Syncfusion_DocIO_DLS_WordDocument_UpdateDocumentFields) API. +T> 2. You can replace the fields ([IF](https://support.microsoft.com/en-us/office/field-codes-if-field-9f79e82f-e53b-4ff5-9d2c-ae3b22b7eb5e?ui=en-us&rs=en-us&ad=us), [Formula](https://support.microsoft.com/en-us/office/field-codes-formula-field-32d5c9de-3516-4ec3-80ed-d1fc2b5bc21d?ui=en-us&rs=en-us&ad=us)) combined with merge fields, with its most recent result and convert the field results to static text by unlinking the fields. Refer to this [link](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-fields#unlink-fields) for more information. ### Create Word document template -You can create a template document with merge fields by using any Word editor application, like Microsoft Word. By using Word editor application, you can take the advantage of the visual interface to design unique layout, formatting, and more for your Word document template interactively. +You can create a template document with merge fields by using any Word editor application, like Microsoft Word. By using a Word editor application, you can take the advantage of the visual interface to design unique layout, formatting, and more for your Word document template interactively. The following screenshot shows how to insert a merge field in the Word document by **using the Microsoft Word.** @@ -111,7 +111,7 @@ The following screenshot shows how to insert a merge field in the Word document You need to add a prefix (“Image:”) to the merge field name for merging an image in the place of a merge field. -**For example:** The merge field name should be like “Image:Photo” (<>) +**For example:** The merge field name should be like "Image:Photo" (<>) You can **create Word document template programmatically** by adding merge fields to the Word document using Essential® DocIO. @@ -123,16 +123,20 @@ N> Refer to the appropriate tabs in the code snippets section: ***C# [Cross-plat {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Create-merge-field/.NET/Create-merge-field/Program.cs" %} //Creates an instance of a WordDocument -WordDocument document = new WordDocument(); -//Adds a section and a paragraph in the document -document.EnsureMinimal(); -//Appends merge field to the last paragraph. -document.LastParagraph.AppendField("FullName", FieldType.FieldMergeField); -//Saves the Word document to MemoryStream -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document -document.Close(); +using (WordDocument document = new WordDocument()) +{ + //Adds a section and a paragraph in the document + document.EnsureMinimal(); + //Appends merge field to the last paragraph. + document.LastParagraph.AppendField("FullName", FieldType.FieldMergeField); + //Saves the Word document to MemoryStream + using (MemoryStream stream = new MemoryStream()) + { + document.Save(stream, FormatType.Docx); + //Writes the Word document to a file + File.WriteAllBytes("Template.docx", stream.ToArray()); + } +} {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} @@ -171,17 +175,21 @@ The following code example shows how to perform mail merge in above Word documen {% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/DocIO-Examples/main/Mail-Merge/Getting-started-mail-merge/.NET/Getting-started-mail-merge/Program.cs" %} //Opens the template document -FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite); -WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); -string[] fieldNames = new string[] { "FullName" }; -string[] fieldValues = new string[] { "Nancy Davolio" }; -//Performs the mail merge -document.MailMerge.Execute(fieldNames, fieldValues); -//Saves the Word document to MemoryStream -MemoryStream stream = new MemoryStream(); -document.Save(stream, FormatType.Docx); -//Closes the Word document -document.Close(); +using (FileStream fileStreamPath = new FileStream("Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite)) +{ + WordDocument document = new WordDocument(fileStreamPath, FormatType.Docx); + string[] fieldNames = new string[] { "FullName" }; + string[] fieldValues = new string[] { "Nancy Davolio" }; + //Performs the mail merge + document.MailMerge.Execute(fieldNames, fieldValues); + //Saves the Word document to MemoryStream + using (MemoryStream stream = new MemoryStream()) + { + document.Save(stream, FormatType.Docx); + //Writes the Word document to a file + File.WriteAllBytes("Sample.docx", stream.ToArray()); + } +} {% endhighlight %} {% highlight c# tabtitle="C# [Windows-specific]" %} @@ -222,15 +230,15 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ## Performing Mail merge for a group -You can perform Mail merge and append multiple records from data source within a specified region to a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-group). +You can perform Mail merge and append multiple records from the data source within a specified region to a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-group). -## Performing Nested Mail merge for group +## Performing Nested Mail merge for a group -You can perform nested Mail merge with relational or hierarchical data source and independent data tables in a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups). +You can perform nested Mail merge with a relational or hierarchical data source and independent data tables in a template document. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups). ## Performing Mail merge with dynamic objects -Essential® DocIO allows you to perform Mail merge with the dynamic objects. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups#mail-merge-with-dynamic-objects). +Essential® DocIO allows you to perform Mail merge with dynamic objects. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-for-nested-groups#mail-merge-with-dynamic-objects). ## Performing Mail merge with business objects @@ -242,9 +250,9 @@ Essential® DocIO supports performing nested Mail merge with impli ## Event support for mail merge -The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO in Mail merge process: +The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html) class provides event support to customize the document contents and merging image data during the Mail merge process. The following events are supported by Essential® DocIO in the Mail merge process: -* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html): Occurs when a **Mail merge field** except image Mail merge field is encountered. +* [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html): Occurs when a **Mail merge field** except an image Mail merge field is encountered. * [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html): Occurs when an **image Mail merge field** is encountered. @@ -254,19 +262,19 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ### MergeField event -You can customize the merging text during Mail merge process by using the [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergefield-event). +You can customize the merging text during the Mail merge process by using the [MergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergefield-event). ### MergeImageField event -You can customize the merging image during Mail merge process by using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergeimagefield-event). +You can customize the merging image during the Mail merge process by using the [MergeImageField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MergeImageFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#mergeimagefield-event). ### BeforeClearField event -You can get the unmerged fields during Mail merge process by using the [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). +You can get the unmerged fields during the Mail merge process by using the [BeforeClearField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforeclearfield-event). ### BeforeClearGroupField event -You can get the unmerged groups during Mail merge process by using the [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforecleargroupfield-event). +You can get the unmerged groups during the Mail merge process by using the [BeforeClearGroupField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.BeforeClearGroupFieldEventHandler.html) event. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-events#beforecleargroupfield-event). ## Mail merge options @@ -274,7 +282,7 @@ The [MailMerge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Do ### Field mapping -You can automatically map the merge field names with data source column names during Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#field-mapping). +You can automatically map the merge field names with the data source column names during the Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#field-mapping). ### Retrieving the merge field names @@ -282,11 +290,11 @@ You can retrieve the merge field names and also merge field group names in the W ### Removing empty paragraphs -You can remove the empty paragraphs when the paragraph has a merge field item without any data during Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-paragraphs). +You can remove the empty paragraphs when the paragraph has a merge field item without any data during the Mail merge process. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-paragraphs). ### Removing empty merge fields -You can remove or keep the unmerged merge fields in the output document based on the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property on each mail merge execution. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-merge-fields). +You can remove or keep the unmerged merge fields in the output document based on the [ClearFields](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.MailMerge.html#Syncfusion_DocIO_DLS_MailMerge_ClearFields) property on each mail merge execution. The default value of `ClearFields` is `true`, which removes unmerged merge fields. For further information, click [here](https://help.syncfusion.com/document-processing/word/word-library/net/mail-merge/mail-merge-options#remove-empty-merge-fields). ### Restart numbering in lists From 8216c5b8101822b4179be2865eddd38bce414a12 Mon Sep 17 00:00:00 2001 From: KARTHIKASANTHANAKRISHNAN-SF4773 Date: Thu, 13 Aug 2026 18:29:19 +0530 Subject: [PATCH 61/70] CloudDocsEncodingIssue --- .../Excel-to-Image/NET/convert-excel-to-image-in-Linux.md | 2 +- .../Excel-to-Image/NET/convert-excel-to-image-in-MAUI.md | 2 +- .../Excel-to-Image/NET/convert-excel-to-image-in-Mac.md | 2 +- .../Conversions/Excel-to-PDF/NET/Excel-to-PDF-Conversion.md | 2 +- .../create-read-edit-excel-files-in-aws-elastic-beanstalk.md | 2 +- .../NET/create-read-edit-excel-files-in-aws-lambda.md | 2 +- .../create-read-edit-excel-files-in-azure-app-service-linux.md | 2 +- ...create-read-edit-excel-files-in-azure-app-service-windows.md | 2 +- .../NET/create-read-edit-excel-files-in-azure-functions-v1.md | 2 +- .../NET/create-read-edit-excel-files-in-azure-functions-v4.md | 2 +- .../NET/create-read-edit-excel-files-in-google-app-engine.md | 2 +- 11 files changed, 11 insertions(+), 11 deletions(-) diff --git a/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Linux.md b/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Linux.md index 52fce4b88a..a15592fb24 100644 --- a/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Linux.md +++ b/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Linux.md @@ -1,4 +1,4 @@ ---- +--- title: Convert an Excel document to Image on Linux | Syncfusion description: Convert an Excel document to an image in a .NET Core application on Linux using the Syncfusion .NET Core Excel library (XlsIO), without Microsoft Office. platform: document-processing diff --git a/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-MAUI.md b/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-MAUI.md index 96d5d1ecc4..ef9ef738e6 100644 --- a/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-MAUI.md +++ b/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-MAUI.md @@ -1,4 +1,4 @@ ---- +--- title: Convert an Excel document to Image in .NET MAUI | Syncfusion description: Convert an Excel document to an image in .NET MAUI using the Syncfusion .NET MAUI Excel library (XlsIO) without Microsoft Excel or interop dependencies. platform: document-processing diff --git a/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Mac.md b/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Mac.md index c434ee4111..9105889b0b 100644 --- a/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Mac.md +++ b/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Mac.md @@ -1,4 +1,4 @@ ---- +--- title: Convert an Excel document to Image on Mac | Syncfusion description: Convert an Excel document to an image on Mac using the Syncfusion .NET Core Excel library (XlsIO), without Microsoft Office. platform: document-processing diff --git a/Document-Processing/Excel/Conversions/Excel-to-PDF/NET/Excel-to-PDF-Conversion.md b/Document-Processing/Excel/Conversions/Excel-to-PDF/NET/Excel-to-PDF-Conversion.md index c98b66fdfd..401681ce61 100644 --- a/Document-Processing/Excel/Conversions/Excel-to-PDF/NET/Excel-to-PDF-Conversion.md +++ b/Document-Processing/Excel/Conversions/Excel-to-PDF/NET/Excel-to-PDF-Conversion.md @@ -1,4 +1,4 @@ ---- +--- title: Syncfusion Excel to PDF Conversion description: This section explains how to convert an Excel workbook to PDF, a single worksheet to PDF, an Excel chart to image or PDF, and how to print an Excel document. platform: document-processing diff --git a/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-aws-elastic-beanstalk.md b/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-aws-elastic-beanstalk.md index e1c4c2667a..6a8f55048c 100644 --- a/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-aws-elastic-beanstalk.md +++ b/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-aws-elastic-beanstalk.md @@ -1,4 +1,4 @@ ---- +--- title: Create, read, edit Excel files in AWS Elastic Beanstalk | Syncfusion description: This page explains how to create, read, and edit Excel files in AWS Elastic Beanstalk using the .NET Excel Library. platform: document-processing diff --git a/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-aws-lambda.md b/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-aws-lambda.md index bb3d31c312..e75728fcd4 100644 --- a/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-aws-lambda.md +++ b/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-aws-lambda.md @@ -1,4 +1,4 @@ ---- +--- title: Create, read, and edit Excel files in AWS Lambda | Syncfusion description: This page explains how to create, read, and edit Excel files in AWS Lambda using the .NET Excel Library. platform: document-processing diff --git a/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-app-service-linux.md b/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-app-service-linux.md index 5f864b40d0..76d8ee424b 100644 --- a/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-app-service-linux.md +++ b/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-app-service-linux.md @@ -1,4 +1,4 @@ ---- +--- title: Create, read, edit Excel in Azure App Service on Linux | Syncfusion description: Explains how to create, read, and edit Excel files in Azure App Service on Linux using Syncfusion XlsIO. platform: document-processing diff --git a/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-app-service-windows.md b/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-app-service-windows.md index e8c69c7a7a..014d0f0c81 100644 --- a/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-app-service-windows.md +++ b/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-app-service-windows.md @@ -1,4 +1,4 @@ ---- +--- title: Create, read, edit Excel in Azure App Service on Windows | Syncfusion description: Explains how to create, read, and edit Excel files in Azure App Service on Windows using Syncfusion XlsIO. platform: document-processing diff --git a/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-functions-v1.md b/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-functions-v1.md index 11ad8ff9cf..ebd5155bb1 100644 --- a/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-functions-v1.md +++ b/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-functions-v1.md @@ -1,4 +1,4 @@ ---- +--- title: Create, read, and edit Excel files in Azure Functions v1 | Syncfusion description: Explains how to create, read, and edit Excel files in Azure Functions v1 using Syncfusion XlsIO for easy spreadsheet automation. platform: document-processing diff --git a/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-functions-v4.md b/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-functions-v4.md index c3ad651637..2981d53b5f 100644 --- a/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-functions-v4.md +++ b/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-azure-functions-v4.md @@ -1,4 +1,4 @@ ---- +--- title: Create, read, and edit Excel files in Azure Functions v4 | Syncfusion description: Explains how to create, read, and edit Excel documents in Azure Functions v4 using Syncfusion XlsIO. platform: document-processing diff --git a/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-google-app-engine.md b/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-google-app-engine.md index 47ea275252..1548184f59 100644 --- a/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-google-app-engine.md +++ b/Document-Processing/Excel/Excel-Library/NET/create-read-edit-excel-files-in-google-app-engine.md @@ -1,4 +1,4 @@ ---- +--- title: Create, read, and edit Excel files in GCP | Syncfusion description: This page explains how to create, read, and edit Excel files in Google App Engine using the .NET Excel Library. platform: document-processing From 883025f08592c4328603a032ad1d7d4fac9c492f Mon Sep 17 00:00:00 2001 From: Dharanya Sakthivel Date: Thu, 13 Aug 2026 18:40:53 +0530 Subject: [PATCH 62/70] ES-1042923-RevampUG --- .../Word/Word-Library/NET/working-with-mail-merge.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md index 65e0245968..a25695e0c0 100644 --- a/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md +++ b/Document-Processing/Word/Word-Library/NET/working-with-mail-merge.md @@ -5,7 +5,7 @@ platform: document-processing control: DocIO documentation: UG --- -# Working with Mail merge +# Working with Mail merge in a Word document Mail merge is a process of merging data from a data source into a Word template document. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) class provides support to bind template document and data source. The [WMergeField](https://help.syncfusion.com/cr/document-processing/Syncfusion.DocIO.DLS.WMergeField.html) instance is replaced with the actual data retrieved from the data source for the given merge field name in a template document. From b95736d7426770a6bcc3b8763b6cdcb8f0cef266 Mon Sep 17 00:00:00 2001 From: KARTHIKASANTHANAKRISHNAN-SF4773 Date: Thu, 13 Aug 2026 20:21:32 +0530 Subject: [PATCH 63/70] DocsEncodingIssue --- .../NET/convert-excel-to-image-in-Linux.md | 2 +- .../NET/convert-excel-to-image-in-MAUI.md | 26 +++++++++---------- .../NET/convert-excel-to-image-in-Mac.md | 2 +- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Linux.md b/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Linux.md index a15592fb24..f5b156daab 100644 --- a/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Linux.md +++ b/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Linux.md @@ -171,7 +171,7 @@ using (ExcelEngine excelEngine = new ExcelEngine()) {% endtabcontents %} -You can download a complete working sample from this GitHub page. +You can download a complete working sample from this GitHub page. By executing the program, you will get the **Image** as follows. diff --git a/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-MAUI.md b/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-MAUI.md index ef9ef738e6..e4b8acd8f9 100644 --- a/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-MAUI.md +++ b/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-MAUI.md @@ -267,10 +267,10 @@ Refer the below helper files and add them into the mentioned project. These help
      Data Source

      		Examples

      		Sample
      - .NET MAUI Project + .NET MAUI Project - SaveService.cs + SaveService.cs Represents the base class for save operation. @@ -278,10 +278,10 @@ Refer the below helper files and add them into the mentioned project. These help
      - Windows + Windows - SaveWindows.cs + SaveWindows.cs Save implementation for Windows. @@ -289,10 +289,10 @@ Refer the below helper files and add them into the mentioned project. These help
      - Android + Android - SaveAndroid.cs + SaveAndroid.cs Save implementation for Android device. @@ -300,10 +300,10 @@ Refer the below helper files and add them into the mentioned project. These help
      - Mac Catalyst + Mac Catalyst - SaveMac.cs + SaveMac.cs Save implementation for Mac Catalyst device. @@ -311,10 +311,10 @@ Refer the below helper files and add them into the mentioned project. These help
      - iOS + iOS - SaveIOS.cs + SaveIOS.cs Save implementation for the iOS device. @@ -322,8 +322,8 @@ Refer the below helper files and add them into the mentioned project. These help
      - PreviewControllerDS.cs
      - QLPreviewItemFileSystem.cs + PreviewControllerDS.cs
      + QLPreviewItemFileSystem.cs       		Helper classes for viewing the Excel document on the iOS device. @@ -331,7 +331,7 @@ Refer the below helper files and add them into the mentioned project. These help
      -A complete working example of how to convert an Excel document to Image in .NET MAUI is present on this GitHub page. +A complete working example of how to convert an Excel document to Image in .NET MAUI is present on this GitHub page. By executing the program, you will get the **Image** as follows. diff --git a/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Mac.md b/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Mac.md index 9105889b0b..ab00edca5b 100644 --- a/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Mac.md +++ b/Document-Processing/Excel/Conversions/Excel-to-Image/NET/convert-excel-to-image-in-Mac.md @@ -155,7 +155,7 @@ using (ExcelEngine excelEngine = new ExcelEngine()) {% endtabcontents %} -You can download a complete working sample from this GitHub page. +You can download a complete working sample from this GitHub page. By executing the program, you will get the **Image** as follows. From dd376857170ce30279bf272f22843f0ae371367f Mon Sep 17 00:00:00 2001 From: KSilambharasanSF4548 <166014892+KSilambharasanSF4548@users.noreply.github.com> Date: Thu, 13 Aug 2026 20:08:06 +0530 Subject: [PATCH 64/70] Fixed coordinate changes --- .../PDF/PDF-Viewer/maui/Coordinates-Conversion.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Coordinates-Conversion.md b/Document-Processing/PDF/PDF-Viewer/maui/Coordinates-Conversion.md index 405f75e334..9214fa38d7 100644 --- a/Document-Processing/PDF/PDF-Viewer/maui/Coordinates-Conversion.md +++ b/Document-Processing/PDF/PDF-Viewer/maui/Coordinates-Conversion.md @@ -58,6 +58,7 @@ private void PdfViewer_Tapped(object sender, GestureEventArgs e) PDF page coordinates are represented in terms of a device-independent coordinate system called user space, which is independent of the output device that will be used for printing or display. The user space coordinates system is initialized to a default state for each page of a PDF document. The length of a unit is 1/72 inch, which is equivalent to one point (pt). As an example, the dimensions of a letter-sized paper in PDF page coordinates are shown in the diagram below. ![Page coordinates in .NET MAUI PDF Viewer](Images/Coordinates-Conversion/Page-Coordinates.png) + ## Scroll coordinates Scroll coordinates in the MAUI PDF Viewer denote pixel-based positions as pages are scrolled. They indicate precise locations within the entire document. The coordinate system originates from the top-left corner of the visible area. From 2de8814d7223059cf6671a61b320e80e88792ee5 Mon Sep 17 00:00:00 2001 From: KSilambharasanSF4548 <166014892+KSilambharasanSF4548@users.noreply.github.com> Date: Thu, 13 Aug 2026 20:09:31 +0530 Subject: [PATCH 65/70] Update StickyNoteEditorPlaceholder text --- Document-Processing/PDF/PDF-Viewer/maui/Localization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Localization.md b/Document-Processing/PDF/PDF-Viewer/maui/Localization.md index f6a43e9705..56b9a3c1f2 100644 --- a/Document-Processing/PDF/PDF-Viewer/maui/Localization.md +++ b/Document-Processing/PDF/PDF-Viewer/maui/Localization.md @@ -709,7 +709,7 @@ The following table contains the default name and value details used in the SfPd StickyNoteEditorPlaceholder -Write Your Notehttps://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui. +Write Your Note… StickyNoteIcons From 68693c3caf75ca00158fb19136e3ffa9f951cd50 Mon Sep 17 00:00:00 2001 From: KSilambharasanSF4548 <166014892+KSilambharasanSF4548@users.noreply.github.com> Date: Thu, 13 Aug 2026 20:13:50 +0530 Subject: [PATCH 66/70] Add table for keys and descriptions in Toolbar.md --- Document-Processing/PDF/PDF-Viewer/maui/Toolbar.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Toolbar.md b/Document-Processing/PDF/PDF-Viewer/maui/Toolbar.md index 062f8e5478..9edf8a4a32 100644 --- a/Document-Processing/PDF/PDF-Viewer/maui/Toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/maui/Toolbar.md @@ -119,6 +119,8 @@ The names of these toolbars and their description are listed in the following se ![Desktop Annotations Toolbar](Images/AnnotationsToolbar.png) + + From 5cf0faf9301de765188bf9ee7cebb971771bb6b4 Mon Sep 17 00:00:00 2001 From: sameerkhan001 Date: Fri, 14 Aug 2026 10:28:42 +0530 Subject: [PATCH 67/70] 1047244-d: Resolved the URL issues in UG PDF library --- Document-Processing/PDF/PDF-Library/NET/Working-with-Pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/PDF/PDF-Library/NET/Working-with-Pages.md b/Document-Processing/PDF/PDF-Library/NET/Working-with-Pages.md index 5ff53146ed..0e12f26e7d 100644 --- a/Document-Processing/PDF/PDF-Library/NET/Working-with-Pages.md +++ b/Document-Processing/PDF/PDF-Library/NET/Working-with-Pages.md @@ -1,4 +1,4 @@ ---- +--- title: Working with pages | Syncfusion description: Add, insert, reorder, remove, and split PDF pages with Syncfusion .NET PDF, plus page numbering, page actions, and empty page detection platform: document-processing From 4bffbaab8bbc3b92551885af10470e6e13b51962 Mon Sep 17 00:00:00 2001 From: sameerkhan001 Date: Fri, 14 Aug 2026 10:34:21 +0530 Subject: [PATCH 68/70] 1047244-h: Resolved the URL issue in UG PDF library --- Document-Processing/PDF/PDF-Library/NET/Working-with-Pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/PDF/PDF-Library/NET/Working-with-Pages.md b/Document-Processing/PDF/PDF-Library/NET/Working-with-Pages.md index 5ff53146ed..0e12f26e7d 100644 --- a/Document-Processing/PDF/PDF-Library/NET/Working-with-Pages.md +++ b/Document-Processing/PDF/PDF-Library/NET/Working-with-Pages.md @@ -1,4 +1,4 @@ ---- +--- title: Working with pages | Syncfusion description: Add, insert, reorder, remove, and split PDF pages with Syncfusion .NET PDF, plus page numbering, page actions, and empty page detection platform: document-processing From 6bb49f636dddd24242218dceffbd54fe628a4d67 Mon Sep 17 00:00:00 2001 From: GOPINATHSF4767 Date: Fri, 14 Aug 2026 12:48:46 +0530 Subject: [PATCH 69/70] Issue resolve --- Document-Processing-toc.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 164c54f69a..e25be2fe8a 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5238,7 +5238,7 @@
    • Word to PDF and Image Conversions
    • HTML and EPUB Conversions
    • Linux
      • -
    • Multithreading in Word Library
      • +
    • Multithreading in Word Library
    • Migration from Microsoft Office Automation to DocIO
      • From eab39aafb890c91d057dbf69d55f7db99df8a383 Mon Sep 17 00:00:00 2001 From: Silambharasan K Date: Fri, 14 Aug 2026 12:57:00 +0530 Subject: [PATCH 70/70] Changed to utf-8 without BOM --- .../PDF/PDF-Viewer/maui/Coordinates-Conversion.md | 2 +- Document-Processing/PDF/PDF-Viewer/maui/Localization.md | 2 +- Document-Processing/PDF/PDF-Viewer/maui/Toolbar.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Coordinates-Conversion.md b/Document-Processing/PDF/PDF-Viewer/maui/Coordinates-Conversion.md index 9214fa38d7..e8423aca71 100644 --- a/Document-Processing/PDF/PDF-Viewer/maui/Coordinates-Conversion.md +++ b/Document-Processing/PDF/PDF-Viewer/maui/Coordinates-Conversion.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Coordinate Conversion in .NET MAUI PDF Viewer | Syncfusion description: Learn how to convert between PDF page coordinates and viewer coordinates in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control. diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Localization.md b/Document-Processing/PDF/PDF-Viewer/maui/Localization.md index 56b9a3c1f2..6c606d592a 100644 --- a/Document-Processing/PDF/PDF-Viewer/maui/Localization.md +++ b/Document-Processing/PDF/PDF-Viewer/maui/Localization.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Localization in .NET MAUI PDF Viewer | Syncfusion description: Learn how to localize the static text in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control to other languages. diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Toolbar.md b/Document-Processing/PDF/PDF-Viewer/maui/Toolbar.md index 9edf8a4a32..d5c9ce44b0 100644 --- a/Document-Processing/PDF/PDF-Viewer/maui/Toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/maui/Toolbar.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Working with the Toolbar in .NET MAUI PDF Viewer | Syncfusion description: Learn how to use, customize, and extend the built-in toolbar in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
      Keys