Skip to content

Commit 3ea7b75

Browse files
sameerkhan001sameerkhan001
committed
994201-dev: Updated 3 files.
1 parent bea1790 commit 3ea7b75

File tree

4 files changed

+58
-254
lines changed

4 files changed

+58
-254
lines changed

‎Document-Processing/PDF/PDF-Library/javascript/Working-with-PDF-Templates.md‎

Lines changed: 15 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,41 @@
11
---
2-
title: Working with EJ2 PDF templates | Syncfusion
3-
description: This section explains how to create a PDF template is a drawing surface, where contents can be added using EJ2 PDF library.
2+
title: Working with PDF file templates | Syncfusion
3+
description: This section explains how to create a PDF template is a drawing surface, where contents can be added using PDF library.
44
platform: document-processing
55
control: PDF
66
documentation: UG
77
---
8-
# Working with EJ2 PDF Templates
8+
# Working with PDF Templates
99

10-
A EJ2 PDF template is a drawing surface, where contents can be added. All the elements that can be added to a PdfPage is supported in PdfTemplate as well. The template in turn can be drawn over the page or can be positioned at any part of the page.
10+
A PDF template is a drawing surface, where contents can be added. All the elements that can be added to a PdfPage is supported in PdfTemplate as well. The template in turn can be drawn over the page or can be positioned at any part of the page.
1111

1212
## Creating a new PDF template
1313

1414
This example demonstrates how to create a new PDF template using the `PdfTemplate` class. A PDF template allows you to define reusable graphics or content that can be drawn on multiple pages or annotations within a PDF document.
1515

1616
{% tabs %}
17-
{% highlight ts tabtitle="index.ts" %}
17+
{% highlight c# tabtitle="TypeScript" %}
1818

19-
// Create and render button
20-
let button: Button = new Button();
21-
button.appendTo('#normalbtn');
19+
import { PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfTemplate, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf';
2220

23-
// Handle click event
24-
button.element.onclick = async () => {
25-
console.log('Start PDF Creation');
26-
createPdf();
27-
};
28-
29-
// Function to create PDF
30-
function createPdf() {
3121
// Create a new PDF document
3222
let document: PdfDocument = new PdfDocument();
33-
// Add a new section to the document
34-
let section: PdfSection = document.addSection();
35-
// Add a page to the section
36-
let page: PdfPage = section.addPage();
23+
// Add a page
24+
let page: PdfPage = document.addPage();
3725
// Create a new rubber stamp annotation
38-
const annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation(50, 100, 100, 50);
26+
const annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation ({x: 50, y: 100, width: 100, height: 50});
3927
// Get the normal appearance of the annotation
4028
let normalAppearance: PdfTemplate = annotation.appearance.normal;
4129
// Create new image object by using JPEG image data as Base64 string format
4230
let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
4331
// Draw the image as the custom appearance for the annotation
44-
normalAppearance.graphics.drawImage(image, 0, 0, 100, 50);
32+
normalAppearance.graphics.drawImage(image, {x: 10, y: 20});
4533
// Add annotation to the page
4634
page.annotations.add(annotation);
4735
// Save the document
4836
document.save('Output.pdf');
4937
// Close the document
5038
document.destroy();
51-
}
52-
53-
{% endhighlight %}
54-
{% highlight html tabtitle="index.html" %}
55-
56-
<div class="row">
57-
<button id="normalbtn">Create PDF</button>
58-
</div>
5939

6040
{% endhighlight %}
6141
{% endtabs %}
@@ -65,47 +45,28 @@ function createPdf() {
6545
This example demonstrates how to create templates from an existing PDF document using the `PdfTemplate` class. A PDF template allows you to extract and reuse content from a PDF page or annotation, enabling consistent design and repeated elements across multiple pages.
6646

6747
{% tabs %}
68-
{% highlight ts tabtitle="index.ts" %}
69-
70-
// Create and render button
71-
let button: Button = new Button();
72-
button.appendTo('#normalbtn');
48+
{% highlight c# tabtitle="TypeScript" %}
7349

74-
// Handle click event
75-
button.element.onclick = async () => {
76-
console.log('Start PDF Creation');
77-
createPdf();
78-
};
50+
import { PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfTemplate, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf';
7951

80-
// Function to create PDF
81-
function createPdf() {
8252
// Load an existing PDF document
8353
let document: PdfDocument = new PdfDocument(data, password);
8454
// Get the first page
8555
let page: PdfPage = document.getPage(0) as PdfPage;
8656
// Create a new rubber stamp annotation
87-
const annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation(50, 100, 100, 50);
57+
const annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation ({x: 50, y: 100, width: 100, height: 50});
8858
// Get the normal appearance of the annotation
8959
let normalAppearance: PdfTemplate = annotation.appearance.normal;
9060
// Create new image object by using JPEG image data as Base64 string format
9161
let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
9262
// Draw the image as the custom appearance for the annotation
93-
normalAppearance.graphics.drawImage(image, 0, 0, 100, 50);
63+
normalAppearance.graphics.drawImage(image, {x: 10, y: 20});
9464
// Add annotation to the page
9565
page.annotations.add(annotation);
9666
// Save the document
9767
document.save('Output.pdf');
9868
// Close the document
9969
document.destroy();
100-
}
10170

10271
{% endhighlight %}
103-
{% highlight html tabtitle="index.html" %}
104-
105-
<div class="row">
106-
<button id="normalbtn">Create PDF</button>
107-
</div>
108-
109-
{% endhighlight %}
110-
{% endtabs %}
111-
72+
{% endtabs %}

‎Document-Processing/PDF/PDF-Library/javascript/Working-with-PDF-document.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ This example shows how to configure custom page settings before adding a page to
1414
{% tabs %}
1515
{% highlight c# tabtitle="TypeScript" %}
1616

17-
import { PdfDocument, PdfPage, PdfPageSettings, PdfMargins, PdfPage, PdfPageOrientation, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
17+
import { PdfDocument, PdfPage, PdfPageSettings, PdfMargins, PdfPageOrientation, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
1818

1919
// Create a new PDF document
2020
let document: PdfDocument = new PdfDocument();

‎Document-Processing/PDF/PDF-Library/javascript/Working-with-Redaction.md‎

Lines changed: 23 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,35 @@
11
---
2-
title: Working with EJ2 Redaction |Syncfusion
3-
description: This section explains how to Redact the content from an existing PDF document by using Essential EJ2 PDF
2+
title: Working with Redaction |Syncfusion
3+
description: This section explains how to Redact the content from an existing PDF document by using Essential PDF
44
platform: document-processing
55
control: PDF
66
documentation: UG
77
---
8-
# Working with EJ2 PDF Redaction
8+
# Working with PDF Redaction
99

10-
Redacting a PDF is the process of permanently removing sensitive or confidential information from PDF documents. Syncfusion<sup>&reg;</sup> EJ2 PDF library provides an easy way to redact PDF documents.
10+
Redacting a PDF is the process of permanently removing sensitive or confidential information from PDF documents. Syncfusion<sup>&reg;</sup> PDF library provides an easy way to redact PDF documents.
1111

1212
## Removing sensitive content from the PDF document
1313

1414
Redaction permanently removes confidential or sensitive information from a PDF. The `PdfRedactionAnnotation` class allows you to define areas to redact, ensuring the underlying text or image data is completely deleted from the document.
1515

1616
{% tabs %}
17-
{% highlight ts tabtitle="index.ts" %}
17+
{% highlight c# tabtitle="TypeScript" %}
1818

19-
// Create and render button
20-
let button: Button = new Button();
21-
button.appendTo('#normalbtn');
19+
import { PdfDocument, PdfPage, PdfRedactionAnnotation } from '@syncfusion/ej2-pdf';
2220

23-
// Handle click event
24-
button.element.onclick = async () => {
25-
console.log('Start PDF Creation');
26-
createPdf();
27-
};
28-
29-
// Function to create PDF
30-
function createPdf() {
3121
// Load an existing PDF document
32-
let document: PdfDocument = new PdfDocument('Input.pdf');
22+
let document: PdfDocument = new PdfDocument(data, password);
3323
// Access the first page
3424
let page: PdfPage = document.getPage(0);
3525
// Create a new redaction annotation
36-
const annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation (50, 100, 100, 50);
26+
const annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation ({x: 50, y: 100, width: 100, height: 50});
3727
// Add annotation to the page
3828
page.annotations.add(annotation);
3929
// Save the document
4030
document.save('Output.pdf');
4131
// Close the document
4232
document.destroy();
43-
}
44-
45-
{% endhighlight %}
46-
{% highlight html tabtitle="index.html" %}
47-
48-
<div class="row">
49-
<button id="normalbtn">Create PDF</button>
50-
</div>
5133

5234
{% endhighlight %}
5335
{% endtabs %}
@@ -57,42 +39,28 @@ function createPdf() {
5739
You can overlay custom text on the redacted region to indicate the reason for redaction or provide context. For example, adding "Confidential" or "Redacted" helps users understand why the content was removed.
5840

5941
{% tabs %}
60-
{% highlight ts tabtitle="index.ts" %}
42+
{% highlight c# tabtitle="TypeScript" %}
6143

62-
// Create and render button
63-
let button: Button = new Button();
64-
button.appendTo('#normalbtn');
44+
import { PdfDocument, PdfPage, PdfRedactionAnnotation } from '@syncfusion/ej2-pdf';
6545

66-
// Handle click event
67-
button.element.onclick = async () => {
68-
console.log('Start PDF Creation');
69-
createPdf();
70-
};
71-
72-
// Function to create PDF
73-
function createPdf() {
7446
// Load an existing PDF document
75-
let document: PdfDocument = new PdfDocument('Input.pdf');
47+
let document: PdfDocument = new PdfDocument(data, password);
7648
// Access the first page
7749
let page: PdfPage = document.getPage(0);
7850
// Create a new redaction annotation
7951
const font: PdfFont = new PdfStandardFont(PdfFontFamily.timesRoman, 12);
80-
const annot: PdfRedactionAnnotation = new PdfRedactionAnnotation(100, 100, 100, 100, { borderColor: [255, 0, 0], repeatText: true,
81-
overlayText: 'Redacted', font: font, textColor: [0, 0, 0], appearanceFillColor: [255, 255, 255]});
52+
const annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation({x: 100, y: 100, width: 100, height: 100},{ borderColor: {r: 255, g: 0, b: 0},
53+
repeatText: true,
54+
overlayText: 'Sample Overlay',
55+
font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular),
56+
textColor: {r: 0, g: 0, b: 0},
57+
appearanceFillColor: {r: 255, g: 255, b: 255} });
8258
// Add annotation to the page
8359
page.annotations.add(annotation);
8460
// Save the document
8561
document.save('Output.pdf');
8662
// Close the document
8763
document.destroy();
88-
}
89-
90-
{% endhighlight %}
91-
{% highlight html tabtitle="index.html" %}
92-
93-
<div class="row">
94-
<button id="normalbtn">Create PDF</button>
95-
</div>
9664

9765
{% endhighlight %}
9866
{% endtabs %}
@@ -102,20 +70,10 @@ function createPdf() {
10270
You can apply a solid fill color to cover the redacted content. This is the most common approach for redaction.
10371

10472
{% tabs %}
105-
{% highlight ts tabtitle="index.ts" %}
73+
{% highlight c# tabtitle="TypeScript" %}
10674

107-
// Create and render button
108-
let button: Button = new Button();
109-
button.appendTo('#normalbtn');
75+
import { PdfDocument, PdfPage, PdfRedactionAnnotation } from '@syncfusion/ej2-pdf';
11076

111-
// Handle click event
112-
button.element.onclick = async () => {
113-
console.log('Start PDF Creation');
114-
createPdf();
115-
};
116-
117-
// Function to create PDF
118-
function createPdf() {
11977
// Create a new PDF document
12078
let document: PdfDocument = new PdfDocument();
12179
// Add a new section to the document
@@ -154,13 +112,6 @@ function createPdf() {
154112
document.save('Output.pdf');
155113
// Close the document
156114
document.destroy();
157-
}
158-
{% endhighlight %}
159-
{% highlight html tabtitle="index.html" %}
160-
161-
<div class="row">
162-
<button id="normalbtn">Create PDF</button>
163-
</div>
164115

165116
{% endhighlight %}
166117
{% endtabs %}
@@ -170,40 +121,22 @@ function createPdf() {
170121
Customize the appearance of the redacted area by applying specific fill colors. This helps maintain a consistent design or highlight redacted sections in a visually appealing way.
171122

172123
{% tabs %}
173-
{% highlight ts tabtitle="index.ts" %}
174-
175-
// Create and render button
176-
let button: Button = new Button();
177-
button.appendTo('#normalbtn');
124+
{% highlight c# tabtitle="TypeScript" %}
178125

179-
// Handle click event
180-
button.element.onclick = async () => {
181-
console.log('Start PDF Creation');
182-
createPdf();
183-
};
126+
import { PdfDocument, PdfPage, PdfRedactionAnnotation } from '@syncfusion/ej2-pdf';
184127

185-
// Function to create PDF
186-
function createPdf() {
187128
// Load an existing PDF document
188-
let document: PdfDocument = new PdfDocument('Input.pdf');
129+
let document: PdfDocument = new PdfDocument(data, password);
189130
// Access the first page
190131
let page: PdfPage = document.getPage(0);
191132
//Appearance Fill color
192-
annot = new PdfRedactionAnnotation({x: 100, y: 100, width: 100, height: 50});
133+
const annot = new PdfRedactionAnnotation({x: 100, y: 100, width: 100, height: 50});
193134
annot.appearanceFillColor = {r: 255, g: 255, b: 0};
194135
page.annotations.add(annot);
195136
// Save the document
196137
document.save('Output.pdf');
197138
// Close the document
198139
document.destroy();
199-
}
200-
201-
{% endhighlight %}
202-
{% highlight html tabtitle="index.html" %}
203-
204-
<div class="row">
205-
<button id="normalbtn">Create PDF</button>
206-
</div>
207140

208141
{% endhighlight %}
209142
{% endtabs %}

0 commit comments

Comments
 (0)