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
1 change: 1 addition & 0 deletions Document-Processing-toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -3459,6 +3459,7 @@
<li><a href="/document-processing/pdf/pdf-library/javascript/Shapes">Shapes</a></li>
<li><a href="/document-processing/pdf/pdf-library/javascript/Annotations">Annotations</a></li>
<li><a href="/document-processing/pdf/pdf-library/javascript/FormFields">Form Fields</a></li>
<li><a href="/document-processing/pdf/pdf-library/javascript/Encryption">Encryption</a></li>
<li><a href="/document-processing/pdf/pdf-library/javascript/DigitalSignature">Digital Signature</a></li>
<li><a href="/document-processing/pdf/pdf-library/javascript/Bookmarks">Bookmarks</a></li>
<li><a href="/document-processing/pdf/pdf-library/javascript/HyperLinks">Hyperlinks</a></li>
Expand Down
54 changes: 54 additions & 0 deletions Document-Processing/PDF/PDF-Library/javascript/Annotations.md
Original file line number Diff line number Diff line change
Expand Up @@ -1019,6 +1019,60 @@ document.destroy();
{% endhighlight %}
{% endtabs %}

## Cloud Border Style Annotation

A cloud border style can be applied to rectangle, polygon, circle, ellipse and freeText annotations in an existing PDF document by using the [PdfBorderEffect](https://ej2.syncfusion.com/documentation/api/pdf/pdfbordereffect) class. Set the `intensity` property to control the intensity of the cloud effect and set the `style` property to `PdfBorderEffectStyle.cloudy`.

The following code example demonstrates how to apply a cloud border style to an existing rectangle annotation in a PDF document.

{% tabs %}
{% highlight typescript tabtitle="TypeScript" %}

import {PdfBorderEffect, PdfBorderEffectStyle, PdfDocument, PdfPage, PdfRectangleAnnotation} from '@syncfusion/ej2-pdf';

// Load an existing PDF document
let document: PdfDocument = new PdfDocument(data, password);
// Get the first page
let page: PdfPage = document.getPage(0) as PdfPage;
// Get the first rectangle annotation of the page
let annotation: PdfRectangleAnnotation = page.annotations.at(0) as PdfRectangleAnnotation;
// Initialize a new instance of the `PdfBorderEffect` class
let borderEffect: PdfBorderEffect = new PdfBorderEffect();
// Set the intensity of the annotation border
borderEffect.intensity = 2;
// Set the cloud style of the annotation border
borderEffect.style = PdfBorderEffectStyle.cloudy;
// Set the border effect to the annotation
annotation.borderEffect = borderEffect;
// Save the document
document.save('Output.pdf');
// Destroy the document
document.destroy();

{% endhighlight %}
{% highlight javascript tabtitle="JavaScript" %}

// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data, password);
// Get the first page
var page = document.getPage(0);
// Get the first rectangle annotation of the page
var annotation = page.annotations.at(0);
// Initialize a new instance of the PdfBorderEffect class
var borderEffect = new ej.pdf.PdfBorderEffect();
// Set the intensity of the annotation border
borderEffect.intensity = 2;
// Set the cloud style of the annotation border
borderEffect.style = ej.pdf.PdfBorderEffectStyle.cloudy;
// Set the border effect to the annotation
annotation.borderEffect = borderEffect;
// Save the document
document.save('Output.pdf');
// Destroy the document
document.destroy();

{% endhighlight %}
{% endtabs %}

## Custom appearance in stamp annotation

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ The [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-

This guide explains how to integrate the [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) into an Angular application that runs in the browser. The generated PDF is downloaded directly from the browser; no server-side PDF rendering is involved.

## Video Tutorial

Watch the following video to learn how to create a PDF file in an Angular application using the JavaScript PDF Library.

{% youtube "https://www.youtube.com/watch?v=cJHZz4k6fZM" %}

## Prerequisites

Before you begin, make sure you have the following installed:
Expand Down
Loading