Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,26 @@ domainurl: ##DomainURL##

The PDF Viewer control provides options to add, edit, and delete free text annotations.

## Enable or Disbale Free Text annotation

Enables or disables the free text annotation feature in the PDF Viewer. For more details, see [enableFreeText API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enablefreetext).

```html
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
```

```ts
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer({
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib',
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
enableFreeText: false
});
viewer.appendTo('#pdfViewer');
```

## Add a free text annotation to the PDF document

Free text annotations can be added to the PDF document using the annotation toolbar.
Expand Down Expand Up @@ -309,3 +329,27 @@ pdfviewer.appendTo('#PdfViewer');

{% endhighlight %}
{% endtabs %}

N> To know more about FreeTextSettings, you can refer [FreeTextSettings API documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#freetextsettings)

## Set default free text placeholder

The `isValidFreeText` property specifies whether newly added free text annotations display a placeholder. By default, `isValidFreeText` is `true`.
- `true`: Displays **Type here** as placeholder text.
- `false`: Leaves the annotation blank so that user-entered text remains visible.

For more information, see [isValidFreeText API documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#isvalidfreetext).

```ts
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer({
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib',
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
// Set to true to display "Type here" as default text
// Set to false to retain user-entered text
isValidFreeText: true
});
viewer.appendTo('#pdfViewer');
```
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,26 @@ The PDF Viewer control provides options to add, edit, and delete ink annotations

![Ink annotations overview](../images/ink_annotation.png)

## Enable or disable ink annotation

Enables or disables the ink annotation feature in the PDF Viewer; defaults to true. For details, see [enableInkAnnotation API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enableinkannotation).

```html
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
```

```ts
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer({
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
resourceUrl : "https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib",
enableInkAnnotation: false
});
viewer.appendTo('#pdfViewer');
```

## Add an ink annotation to the PDF document

Ink annotations can be added to the PDF document using the annotation toolbar.
Expand Down Expand Up @@ -269,4 +289,6 @@ ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearc
pdfviewer.appendTo('#PdfViewer');

{% endhighlight %}
{% endtabs %}
{% endtabs %}

N> To know more about FreeTextSettings, you can refer [inkAnnotationSettings API documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#inkannotationsettings)
Original file line number Diff line number Diff line change
Expand Up @@ -629,3 +629,27 @@ pdfviewer.appendTo('#PdfViewer');

{% endhighlight %}
{% endtabs %}

## Enable or disable import annotation measurement

Controls whether the PDF Viewer recalculates measurement values for imported measurement annotations. For details, see [enableImportAnnotationMeasurement API documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enableimportannotationmeasurement).

- true: Recalculates and displays measurement values using the viewer's current scale ratio and units.
- false: Preserves the values embedded in the imported annotations (no recalculation), which can appear as original comment text.

```html
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
```

```ts
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer({
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib',
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
// Enable or disable import annotation measurement customization
enableImportAnnotationMeasurement: false
});
viewer.appendTo('#pdfViewer');
```
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,27 @@ The PDF Viewer control provides options to add, edit, and delete shape annotatio
* Circle
* Polygon

## Enable or disable shape annotation support

Enables or disables the shape annotation feature in the PDF Viewer; defaults to true. For more information, see [enableShapeAnnotation API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enableshapeannotation)

```html
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
```

```ts
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer();
viewer.resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib',
viewer.documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
// Enable or disable shape annotation.
viewer.enableShapeAnnotation = false;
viewer.appendTo("#pdfViewer");
```

![Shape annotations overview](../images/shape_annot.png)

## Adding a shape annotation to the PDF document
Expand Down Expand Up @@ -514,6 +535,14 @@ Refer to the following code sample to set the default annotation settings.

## Set default properties during control initialization

The following properties can be used to set default shape annotation properties:

- **lineSettings**: Default LineSettingsModel. See [LineSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#linesettings)
- **arrowSettings**: Default ArrowSettingsModel. See [ArrowSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#arrowsettings)
- **rectangleSettings**: Default RectangleSettingsModel. See [RectangleSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#rectanglesettings)
- **circleSettings**: Default CircleSettingsModel. See [CircleSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#circlesettings)
- **polygonSettings**: Default PolygonSettingsModel. See [PolygonSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#polygonsettings)

Default properties for shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings.

{% tabs %}
Expand Down Expand Up @@ -551,4 +580,36 @@ pdfviewer.polygonSettings = {fillColor: 'pink', opacity: 0.6, strokeColor: 'yell
pdfviewer.appendTo('#PdfViewer');

{% endhighlight %}
{% endtabs %}
{% endtabs %}


## Enable or disable shape label visibility

Enables or disables the display of shape labels in the PDF Viewer; defaults to true. For more information, see [enableShapeLabel API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enableshapelabel)

```html
<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
```

```ts
// Enable or disable shape labels.
viewer.enableShapeLabel = true;
```

## Configure shape label settings

Defines the settings for shape labels using the [ShapeLabelSettingsModel] API. For more information, see [shapeLabelSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#shapelabelsettings)

```ts
// Change the shape label settings.
viewer.shapeLabelSettings = {
opacity: 1,
fillColor: '#9c2592',
borderColor: '#ff0000',
fontColor: '#000',
fontSize: 16,
labelHeight: 24.6,
labelMaxWidth: 151,
labelContent: 'XYZ'
};
```
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,49 @@ pdfviewer.appendTo('#PdfViewer');
{% endhighlight %}
{% endtabs %}

## Control editability of handwritten signatures after download

Use the isSignatureEditable property to control whether handwritten signatures remain editable after download. When set to false, signatures are flattened and cannot be edited after the file is downloaded. When set to true, signatures are preserved as editable. Defaults to false.

For details, refer to the isSignatureEditable API.

{% 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.1.17/dist/ej2-pdfviewer-lib";

// Keep handwritten signatures editable after download (set to false to prevent editing)
pdfviewer.isSignatureEditable = true;

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";

// Keep handwritten signatures editable after download (set to false to prevent editing)
pdfviewer.isSignatureEditable = true;

pdfviewer.appendTo('#PdfViewer');

{% endhighlight %}
{% endtabs %}

> API reference: For more information, see [isSignatureEditable API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#issignatureeditable)

## Add a handwritten signature programmatically to the PDF document

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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,45 @@ if (standardBusinessStamp) {
{% endhighlight %}
{% endtabs %}

## Enable or disable stamp annotations

Use the `enableStampAnnotations` API to enable or disable stamp annotation in the PDF Viewer loads. Defaults to true.

{% 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.1.17/dist/ej2-pdfviewer-lib";
// Enable or disable stamp annotations.
pdfviewer.enableStampAnnotations = false;

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";
// Enable or disable stamp annotations.
pdfviewer.enableStampAnnotations = false;

pdfviewer.appendTo('#PdfViewer');

{% endhighlight %}
{% endtabs %}

>API reference: For more information about enableStampAnnotations, see [enableStampAnnotations API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enablestampannotations)

## Add a custom stamp to the PDF document

* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
Expand Down Expand Up @@ -311,6 +350,8 @@ if (customStamp) {
{% endhighlight %}
{% endtabs %}

> API reference: For more information about customStamp, see [customStamp API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#stampsettings)

## Edit an existing stamp annotation programmatically

To modify an existing stamp annotation programmatically, use the editAnnotation() method.
Expand Down Expand Up @@ -417,4 +458,45 @@ pdfviewer.stampSettings = {opacity: 0.3, author: 'Guest User'}
pdfviewer.appendTo('#PdfViewer');

{% endhighlight %}
{% endtabs %}
{% endtabs %}

> API reference: For more information about stampSettings, see [stampSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#stampsettings)

## Configure custom stamp settings

Use the customStampSettings property (CustomStampSettingsModel) to configure default behavior and constraints for custom stamp annotations, including size, position, locking, print behavior, and enabling custom stamp mode.

{% 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.1.17/dist/ej2-pdfviewer-lib";
// Change the custom stamp settings.
pdfviewer.customStampSettings = { opacity: 1, author: 'XYZ', width: 100, height: 100, left: 200, top: 200, minHeight: 10, minWidth: 10, maxWidth: 100, maxHeight: 100, isLock: false, enableCustomStamp: true, allowedInteractions: ['None'], isPrint: true };

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";
// Change the custom stamp settings.
pdfviewer.customStampSettings = { opacity: 1, author: 'XYZ', width: 100, height: 100, left: 200, top: 200, minHeight: 10, minWidth: 10, maxWidth: 100, maxHeight: 100, isLock: false, enableCustomStamp: true, allowedInteractions: ['None'], isPrint: true };

pdfviewer.appendTo('#PdfViewer');

{% endhighlight %}
{% endtabs %}

> API reference: For more information about customStampSettings, see [customStampSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#customstampsettings)
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,8 @@ pdfviewer.appendTo('#PdfViewer');
{% endhighlight %}
{% endtabs %}

>API reference: For more information about stickyNotesSettings, see [stickyNotesSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#stickynotessettings)

## Disable sticky note annotations

The PDF Viewer control provides an option to disable sticky note annotations. The following example disables the feature.
Expand Down Expand Up @@ -249,4 +251,6 @@ pdfviewer.enableStickyNotesAnnotation = false;
pdfviewer.appendTo('#PdfViewer');

{% endhighlight %}
{% endtabs %}
{% endtabs %}

>API reference: For more information about enableStickyNotesAnnotation, see [enableStickyNotesAnnotation API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enablestickynotesannotation)
Loading