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,40 @@ domainurl: ##DomainURL##

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

## Enable or Disable 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/javascript/documentation/api/pdfviewer/index-default#enablefreetext).

{% tabs %}
{% highlight ts tabtitle="Standalone" %}

// Render the PDF viewer control
var viewer = 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',
enableFreeText: false
});
ej.pdfviewer.PdfViewer.Inject(
ej.pdfviewer.Toolbar,
ej.pdfviewer.Magnification,
ej.pdfviewer.BookmarkView,
ej.pdfviewer.ThumbnailView,
ej.pdfviewer.TextSelection,
ej.pdfviewer.TextSearch,
ej.pdfviewer.Print,
ej.pdfviewer.Navigation,
ej.pdfviewer.LinkAnnotation,
ej.pdfviewer.Annotation,
ej.pdfviewer.FormFields,
ej.pdfviewer.FormDesigner,
ej.pdfviewer.PageOrganizer
);

viewer.appendTo('#pdfViewer');

{% endhighlight %}
{% endtabs %}

## 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 @@ -74,7 +108,7 @@ if (addFreeTextAnnotationButton) {

## 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.
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():

Expand Down Expand Up @@ -296,3 +330,45 @@ pdfviewer.appendTo('#PdfViewer');

{% endhighlight %}
{% endtabs %}

N> To know more about FreeTextSettings, you can refer [FreeTextSettings API documentation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#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/index-default#isvalidfreetext).

{% tabs %}
{% highlight ts tabtitle="Standalone" %}

// Initialize the PDF Viewer
var viewer = new ej.pdfviewer.PdfViewer({
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib',
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
isValidFreeText: true, // Enables "Type here" as default text
});

// Inject required modules
ej.pdfviewer.PdfViewer.Inject(
ej.pdfviewer.Toolbar,
ej.pdfviewer.Magnification,
ej.pdfviewer.Navigation,
ej.pdfviewer.LinkAnnotation,
ej.pdfviewer.ThumbnailView,
ej.pdfviewer.BookmarkView,
ej.pdfviewer.TextSelection,
ej.pdfviewer.TextSearch,
ej.pdfviewer.Print,
ej.pdfviewer.Annotation,
ej.pdfviewer.FormFields,
ej.pdfviewer.FormDesigner
);

// Render the viewer
viewer.appendTo('#pdfViewer');

{% endhighlight %}
{% endtabs %}
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,42 @@ 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/javascript/documentation/api/pdfviewer/index-default#enableinkannotation).

{% tabs %}
{% highlight ts tabtitle="Standalone" %}

// Inject required modules
ej.pdfviewer.PdfViewer.Inject(
ej.pdfviewer.Toolbar,
ej.pdfviewer.Magnification,
ej.pdfviewer.Navigation,
ej.pdfviewer.LinkAnnotation,
ej.pdfviewer.ThumbnailView,
ej.pdfviewer.BookmarkView,
ej.pdfviewer.TextSelection,
ej.pdfviewer.TextSearch,
ej.pdfviewer.Print,
ej.pdfviewer.Annotation,
ej.pdfviewer.FormFields,
ej.pdfviewer.FormDesigner
);

// Initialize the PDF Viewer
var viewer = 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",
enableInkAnnotation: false // Disables ink annotation feature
});

// Render the viewer
viewer.appendTo('#pdfViewer');

{% endhighlight %}
{% endtabs %}

## 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 @@ -75,7 +111,7 @@ if (addInkAnnotation) {

## 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.
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():

Expand Down Expand Up @@ -267,4 +303,6 @@ pdfviewer.inkAnnotationSettings = {author: 'Syncfusion', strokeColor: 'green', t
pdfviewer.appendTo('#PdfViewer');

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

N> To know more about FreeTextSettings, you can refer [inkAnnotationSettings API documentation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#inkannotationsettings)
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ if (distanceMode) {

## 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.
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():

Expand Down Expand Up @@ -579,3 +579,43 @@ 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/javascript/documentation/api/pdfviewer/index-default#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.

{% tabs %}
{% highlight ts tabtitle="Standalone" %}

// Inject required modules
ej.pdfviewer.PdfViewer.Inject(
ej.pdfviewer.Toolbar,
ej.pdfviewer.Magnification,
ej.pdfviewer.Navigation,
ej.pdfviewer.LinkAnnotation,
ej.pdfviewer.ThumbnailView,
ej.pdfviewer.BookmarkView,
ej.pdfviewer.TextSelection,
ej.pdfviewer.TextSearch,
ej.pdfviewer.Print,
ej.pdfviewer.Annotation,
ej.pdfviewer.FormFields,
ej.pdfviewer.FormDesigner
);

// Initialize the PDF Viewer
var viewer = 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",
// Enable or disable import annotation measurement customization
enableImportAnnotationMeasurement: false
});

// Render the viewer
viewer.appendTo('#pdfViewer');

{% endhighlight %}
{% endtabs %}
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,42 @@ 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/javascript/documentation/api/pdfviewer/index-default#enableshapeannotation)

{% tabs %}
{% highlight ts tabtitle="Standalone" %}

// Inject required modules
ej.pdfviewer.PdfViewer.Inject(
ej.pdfviewer.Toolbar,
ej.pdfviewer.Magnification,
ej.pdfviewer.Navigation,
ej.pdfviewer.LinkAnnotation,
ej.pdfviewer.ThumbnailView,
ej.pdfviewer.BookmarkView,
ej.pdfviewer.TextSelection,
ej.pdfviewer.TextSearch,
ej.pdfviewer.Print,
ej.pdfviewer.Annotation,
ej.pdfviewer.FormFields,
ej.pdfviewer.FormDesigner
);

// Initialize the PDF Viewer
var viewer = new ej.pdfviewer.PdfViewer({
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
enableShapeAnnotation: false // Disables shape annotation feature
});

// Render the viewer
viewer.appendTo('#pdfViewer');

{% endhighlight %}
{% endtabs %}

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

## Adding a shape annotation to the PDF document
Expand Down Expand Up @@ -84,7 +120,7 @@ if (circleAnnotationButton) {

## 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.
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():

Expand Down Expand Up @@ -496,6 +532,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/javascript/documentation/api/pdfviewer/index-default#linesettings)
- **arrowSettings**: Default ArrowSettingsModel. See [ArrowSettings API Documentation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#arrowsettings)
- **rectangleSettings**: Default RectangleSettingsModel. See [RectangleSettings API Documentation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#rectanglesettings)
- **circleSettings**: Default CircleSettingsModel. See [CircleSettings API Documentation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#circlesettings)
- **polygonSettings**: Default PolygonSettingsModel. See [PolygonSettings API Documentation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#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 @@ -531,4 +575,31 @@ ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearc
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/javascript/documentation/api/pdfviewer/index-default#enableshapelabel)

```js
// 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/javascript/documentation/api/pdfviewer/index-default#shapelabelsettings)

```js
// 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 @@ -106,9 +106,78 @@ pdfviewer.appendTo('#PdfViewer');
{% endhighlight %}
{% endtabs %}

## Control ability to edit 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" %}

// 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 PDF Viewer
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",
isSignatureEditable: true // Allows handwritten signatures to remain editable after download
});

// Render the viewer
pdfviewer.appendTo('#PdfViewer');

{% endhighlight %}
{% highlight ts tabtitle="Server-Backed" %}

// 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 PDF Viewer
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/",
isSignatureEditable: true // Allows handwritten signatures to remain editable after download
});

// Render the viewer
pdfviewer.appendTo('#PdfViewer');

{% endhighlight %}
{% endtabs %}

> API reference: For more information, see [isSignatureEditable API Documentation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#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.
With the PDF Viewer library, you can programmatically add a handwritten signature to the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method.

Here is an example of adding a handwritten signature programmatically using addAnnotation():

Expand Down
Loading