Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
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