From 45515259c72eb3cf211adbf3833c5334f69b8069 Mon Sep 17 00:00:00 2001 From: sameerkhan001 Date: Tue, 16 Dec 2025 18:34:16 +0530 Subject: [PATCH 01/10] 999358-ug: Added proper code example and content. --- .../javascript/Create-PDF-document-angular.md | 6 ++ .../Create-PDF-document-asp-net-core.md | 2 +- .../Create-PDF-document-asp-net-mvc.md | 6 +- .../Create-PDF-document-javascript.md | 11 ++- .../javascript/Create-PDF-document-react.md | 3 +- .../Create-PDF-document-typescript.md | 21 +++-- .../javascript/Create-PDF-document-vue.md | 3 +- .../PDF/PDF-Library/javascript/Redaction.md | 80 ++++++++++++------- 8 files changed, 86 insertions(+), 46 deletions(-) diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md index c9e755322..b24952696 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md @@ -44,6 +44,12 @@ All the available JS 2 packages are published in `npmjs.com` registry. npm install @syncfusion/ej2-pdf --save ``` N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. +* Copy the contents of the openjpeg folder from ./node_modules/@syncfusion/ej2-pdf-data-extract/dist to the public directory using the command: +```bash +cp -R ./node_modules/@syncfusion/ej2-pdf-data-extract/dist/openjpeg public/js/openjpeg +``` +* Confirm that there is an 'openjpeg' directory within your public directory, if you extracting images from PDF. +* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. ## Create a PDF document using TypeScript diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md index 7fa08b1cb..50cab7ca0 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md @@ -39,7 +39,7 @@ N> Check out the following topics for including script references in an ASP.NET * [CDN](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#cdn-reference) * [NPM Package](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#node-package-manager-npm) * [CRG](https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator) -N> And ensure the application includes an `openjpeg` folder under `wwwroot` (or a publicly accessible static path). This folder must contain the `openjpeg.js` and `openjpeg.wasm` files, along with the PDF file to extract images. Keep these in the same static content area as `ej2.min.js`. +And ensure the application includes an `openjpeg` folder under `wwwroot` (or a publicly accessible static path). This folder must contain the `openjpeg.js` and `openjpeg.wasm` files, along with the PDF file to extract images. Keep these in the same static content area as `ej2.min.js`. Step 6: **Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md index ab4cfb54d..2e8888b1c 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md @@ -36,7 +36,11 @@ Step 5: **Add script reference** : Add the required scripts using the CDN inside {% endhighlight %} {% endtabs %} -N> And ensure the application includes an `openjpeg` folder under `Scripts` (or a publicly accessible static path). This folder must contain the `openjpeg.js` and `openjpeg.wasm` files, along with the PDF file to extract images. Keep these in the same static content area as `ej2.min.js`. +N> Check out the following topics for including script references in an ASP.NET MVC application to enable PDF creation using the Syncfusion® JavaScript PDF library: +* [CDN](https://ej2.syncfusion.com/aspnetmvc/documentation/common/adding-script-references) +* [NPM Package](https://ej2.syncfusion.com/aspnetmvc/documentation/common/adding-script-references#node-package-manager-npm) +* [CRG](https://ej2.syncfusion.com/aspnetmvc/documentation/common/custom-resource-generator) +And ensure the application includes an `openjpeg` folder under `Scripts` (or a publicly accessible static path). This folder must contain the `openjpeg.js` and `openjpeg.wasm` files, along with the PDF file to extract images. Keep these in the same static content area as `ej2.min.js`. Step 6: **Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md index a1c972f74..ba8083ce1 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md @@ -39,6 +39,11 @@ Step 3: Create a HTML page (index.html) in `my-app` location and add the CDN lin {% endhighlight %} {% endtabs %} +N> For the JavaScript platform, place the **openjpeg** folder in the same location as your `index.html` file. Ensure that your application includes an `openjpeg` folder under `Scripts` (or any publicly accessible static path). This folder must contain the following: +* `openjpeg.js` +* `openjpeg.wasm` +Along with the PDF file from which you want to extract images. Keep these files in the same static content area as `ej2.min.js` to ensure proper loading. + Step 4: **Create a PDF document** : Add the script in `index.html` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. {% tabs %} @@ -73,12 +78,6 @@ Step 4: **Create a PDF document** : Add the script in `index.html` by creating a {% endhighlight %} {% endtabs %} -N> For the JavaScript platform, place the **openjpeg** folder in the same location as your `index.html` file. Ensure that your application includes an `openjpeg` folder under `Scripts` (or any publicly accessible static path). This folder must contain the following: -* `openjpeg.js` -* `openjpeg.wasm` - -Along with the PDF file from which you want to extract images. Keep these files in the same static content area as `ej2.min.js` to ensure proper loading. - By executing the program, you will get the PDF document as follows. ![Output PDF document](Getting_started_images/Output.png) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md index 7316f44d8..f0e0a605b 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md @@ -24,13 +24,12 @@ All the available JS 2 packages are published in `npmjs.com` registry. npm install @syncfusion/ej2-pdf --save ``` N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. - * Copy the contents of the openjpeg folder from ./node_modules/@syncfusion/ej2-pdf-data-extract/dist to the public directory using the command: ```bash cp -R ./node_modules/@syncfusion/ej2-pdf-data-extract/dist/openjpeg public/openjpeg ``` * Confirm that there is an 'openjpeg' directory within your public directory, if you extracting images from PDF. -* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. Additional information can be found in the [Troubleshooting](./troubleshooting/troubleshooting) section. +* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. **Create a PDF document** : Add the script in `App.jsx` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md index 10a2f269d..3c720dd51 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md @@ -14,6 +14,21 @@ The Syncfusion® TypeScript PDF library is used to create, read, a This guide explains how to integrate the TypeScript PDF library into an TypeScript application. +## Installing Syncfusion® JavaScript PDF package + +All the available JS 2 packages are published in `npmjs.com` registry. + +* To install PDF component, use the following command. + +```bash +npm install @syncfusion/ej2-pdf --save +``` +N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. +For the TypeScript platform, place the **openjpeg** folder in the same location as your `index.html` file. Ensure that your application includes an `openjpeg` folder under `Scripts` (or any publicly accessible static path). This folder must contain the following: +* `openjpeg.js` +* `openjpeg.wasm` +Along with the PDF file from which you want to extract images. + ## Dependencies The following list of dependencies are required to use the `TypeScript PDF library` component in your application. @@ -40,12 +55,6 @@ The following list of dependencies are required to use the `TypeScript PDF libra {% endhighlight %} {% endtabs %} -N> For the TypeScript platform, place the **openjpeg** folder in the same location as your `index.html` file. Ensure that your application includes an `openjpeg` folder under `Scripts` (or any publicly accessible static path). This folder must contain the following: -* `openjpeg.js` -* `openjpeg.wasm` - -Along with the PDF file from which you want to extract images. Keep these files in the same static content area as `ej2.min.js` to ensure proper loading. - * Include the following namespaces in `index.ts` file. {% tabs %} diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md index 49269bf01..0d31abe76 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md @@ -48,13 +48,12 @@ All the available JS 2 packages are published in `npmjs.com` registry. npm install @syncfusion/ej2-pdf --save ``` N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. - * Copy the contents of the openjpeg folder from ./node_modules/@syncfusion/ej2-pdf-data-extract/dist to the public directory using the command: ```bash cp -R ./node_modules/@syncfusion/ej2-pdf-data-extract/dist/openjpeg public/js/openjpeg ``` * Confirm that there is an 'openjpeg' directory within your public directory, if you extracting images from PDF. -* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. Additional information can be found in the [Troubleshooting](./troubleshooting/troubleshooting) section. +* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. * **Create a PDF document** : Add the script in `App.vue` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. diff --git a/Document-Processing/PDF/PDF-Library/javascript/Redaction.md b/Document-Processing/PDF/PDF-Library/javascript/Redaction.md index c651ff8dd..90622241f 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Redaction.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Redaction.md @@ -9,11 +9,11 @@ documentation: UG Redacting a PDF is the process of permanently removing sensitive or confidential information from PDF documents. Syncfusion® PDF library provides an easy way to redact PDF documents. -N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. +N> For redaction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. Please verify the platform's actual root directory where the `openjpeg` file is extracted. Depending on the platform, the root path may vary. Check which root folder is being used by reviewing the path referenced in the [Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/create-pdf-document-asp-net-core) page. ## Removing sensitive content from the PDF document -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. +Redaction permanently removes confidential or sensitive information from a PDF. The `PdfRedactor` and `PdfRedactionRegion` classes allow you to mark specific areas and apply irreversible redaction to the document. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -27,7 +27,6 @@ let redactor: PdfRedactor = new PdfRedactor(document); // Add redactions to the collection let redactions: PdfRedactionRegion[] = []; redactions.push(new PdfRedactionRegion(0, {x: 10, y: 10, width: 100, height: 50})); -redactions.push(new PdfRedactionRegion(2, {x: 10, y: 10, width: 100, height: 50}, true, {r: 255, g: 0, b: 0})); redactor.add(redactions); // Apply redactions on the PDF document redactor.redact(); @@ -45,7 +44,6 @@ var redactor = new ej.pdfdataextract.PdfRedactor(document); // Add redactions to the collection var redactions = []; redactions.push(new PdfRedactionRegion(0, {x: 10, y: 10, width: 100, height: 50})); -redactions.push(new PdfRedactionRegion(2, {x: 10, y: 10, width: 100, height: 50}, true, {r: 255, g: 0, b: 0})); redactor.add(redactions); // Apply redactions on the PDF document redactor.redact(); @@ -67,6 +65,8 @@ import { PdfRedactor, PdfRedactionRegion} from '@syncfusion/ej2-pdf-data-extract // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); +// Add redactions to the collection +let redactions: PdfRedactionRegion[] = []; // Initialize a new instance of the `PdfRedactor` class let redactor: PdfRedactor = new PdfRedactor(document); // Initialize a new instance of the `PdfRedactionRegion` class. @@ -86,6 +86,8 @@ document.destroy(); {% highlight javascript tabtitle="JavaScript" %} // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); +// Add redactions to the collection +var redactions = []; // Initialize a new instance of the `PdfRedactor` class var redactor = new ej.pdfdataextract.PdfRedactor(document); // Initialize a new instance of the `PdfRedactionRegion` class. @@ -104,9 +106,9 @@ document.destroy(); {% endhighlight %} {% endtabs %} -## Redaction appearance fill color +## Text appearance on the redacted area -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. +Customize the redacted region by drawing text or graphics over it, using `PdfRedactionRegion` and `PdfRedactor` to define the area and apply a custom visual appearance to the redaction. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -114,17 +116,27 @@ import { PdfDocument } from '@syncfusion/ej2-pdf'; import { PdfRedactor, PdfRedactionRegion } from '@syncfusion/ej2-pdf-data-extract'; // Load an existing PDF document -let document: PdfDocument = new PdfDocument(data, password); +let document = new PdfDocument(data); // Add redactions to the collection -let redactions: PdfRedactionRegion[] = []; -// Initialize a new instance of the `PdfRedactor` class -let redactor: PdfRedactor = new PdfRedactor(document); -// Initialize a new instance of the `PdfRedactionRegion` class. -let redaction: PdfRedactionRegion = new PdfRedactionRegion(0, {x: 40, y: 41.809, width: 80, height: 90}); -// Sets the fill color used to fill the redacted area. -redaction.fillColor = {r: 255, g: 0, b: 0}; +let redactions = []; +let region = { x: 40, y: 43.620000000000005, width: 80, height: 20 }; +// Initialize a new redaction region with custom appearance +let redaction = new PdfRedactionRegion(0, { x: 0, y: 0, width: 80, height: 20 }, true); +let font = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +redaction.appearance.normal.graphics.drawString( + 'Redacted Text', + font, + { x: 0, y: 0, width: 80, height: 20 }, + new PdfBrush({ r: 255, g: 0, b: 0 }) +); redactions.push(redaction); -// Add redactions with specified options. +// Add another redaction region (example region coordinates) +redaction = new PdfRedactionRegion(0, { x: 0, y: 0, width: 80, height: 20 }, true); +region = { x: 40, y: 43.620000000000005, width: 80, height: 20 }; +redactions.push(redaction); +// Initialize a new instance of the PdfRedactor class +let redactor = new PdfRedactor(document); +// Add redactions with specified options redactor.add(redactions); // Apply redactions on the PDF document redactor.redact(); @@ -132,26 +144,38 @@ redactor.redact(); 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); -// Add redactions to the collection + +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Prepare redactions collection var redactions = []; -// Initialize a new instance of the `PdfRedactor` class -var redactor = new ej.pdfdataextract.PdfRedactor(document); -// Initialize a new instance of the `PdfRedactionRegion` class. -var redaction = new ej.pdfdataextract.PdfRedactionRegion(0, {x: 40, y: 41.809, width: 80, height: 90}); -// Sets the fill color used to fill the redacted area. -redaction.fillColor = {r: 255, g: 0, b: 0}; +// Example region coordinates (page 0) +var region = { x: 40, y: 43.62, width: 80, height: 20 }; +// Create a redaction region with a custom appearance (draw "Redacted Text" in red) +var redaction = new ej.pdf.PdfRedactionRegion(0, { x: 0, y: 0, width: 80, height: 20 }, true); +var font = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Draw custom appearance on the redaction overlay +redaction.appearance.normal.graphics.drawString( + 'Redacted Text', + font, + { x: 0, y: 0, width: 80, height: 20 }, + new ej.pdf.PdfBrush({ r: 255, g: 0, b: 0 }) +); redactions.push(redaction); -// Add redactions with specified options. +// Add another redaction region using the specified coordinates on page 0 +redaction = new ej.pdf.PdfRedactionRegion(0, { x: region.x, y: region.y, width: region.width, height: region.height }, true); +redactions.push(redaction); +// Initialize redactor +var redactor = new ej.pdf.PdfRedactor(document); +// Add redactions and apply them redactor.add(redactions); -// Apply redactions on the PDF document redactor.redact(); -// Save the document +// Save and dispose document.save('output.pdf'); -// Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} \ No newline at end of file From 12d72fcb764530f2f309f9267d358882e22bfb36 Mon Sep 17 00:00:00 2001 From: sameerkhan001 Date: Tue, 16 Dec 2025 22:51:12 +0530 Subject: [PATCH 02/10] 999358-ug: Partially completed the md files. --- .../PDF/PDF-Library/javascript/Annotations.md | 85 +++++++-- .../PDF/PDF-Library/javascript/Bookmarks.md | 53 +----- .../javascript/DigitalSignature.md | 172 ++++++++++-------- .../PDF/PDF-Library/javascript/FormFields.md | 88 ++++++++- .../PDF/PDF-Library/javascript/HyperLinks.md | 42 +++-- .../javascript/Image-Extraction.md | 94 +++++----- .../PDF/PDF-Library/javascript/Layers.md | 41 +++-- .../PDF-Library/javascript/Merge-Document.md | 79 +++++--- .../PDF-Library/javascript/Split-Documents.md | 11 +- .../PDF-Library/javascript/Text-Extraction.md | 105 ++++++----- .../PDF/PDF-Library/javascript/Watermarks.md | 38 ++-- 11 files changed, 500 insertions(+), 308 deletions(-) diff --git a/Document-Processing/PDF/PDF-Library/javascript/Annotations.md b/Document-Processing/PDF/PDF-Library/javascript/Annotations.md index 3e7366ed3..aaa482521 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Annotations.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Annotations.md @@ -42,6 +42,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Creates a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -96,6 +97,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -153,6 +155,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Creates a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -205,6 +208,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -263,6 +267,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Creates a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -325,6 +330,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -388,6 +394,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Creates a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -548,6 +555,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -616,6 +624,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add a new page to the PDF @@ -694,6 +703,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -759,6 +769,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -814,6 +825,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -867,6 +879,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -921,6 +934,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -971,6 +985,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1008,6 +1023,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1053,6 +1069,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1100,6 +1117,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1152,8 +1170,7 @@ borderColor: { r: 255, g: 0, b: 0}, repeatText: true, overlayText: 'Sample Overlay', font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular), - textColor: { r: 0, g: 0, b: 0}, - appearanceFillColor: { r: 255, g: 255, b: 255} + textColor: { r: 0, g: 0, b: 0} }); // Add annotation to the page page.annotations.add(annotation); @@ -1164,6 +1181,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1176,8 +1194,7 @@ var annotation = new ej.pdf.PdfRedactionAnnotation( repeatText: true, overlayText: 'Sample Overlay', font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular), - textColor: { r: 0, g: 0, b: 0 }, - appearanceFillColor: { r: 255, g: 255, b: 255 } + textColor: { r: 0, g: 0, b: 0 } } ); // Add annotation to the page @@ -1207,8 +1224,7 @@ borderColor: { r: 255, g: 0, b: 0}, repeatText: true, overlayText: 'Sample Overlay', font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular), - textColor: { r: 0, g: 0, b: 0}, - appearanceFillColor: { r: 255, g: 255, b: 255} + textColor: { r: 0, g: 0, b: 0} }); // Add annotation to the page page.annotations.add(annotation); @@ -1219,6 +1235,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1231,8 +1248,7 @@ var annotation = new ej.pdf.PdfRedactionAnnotation( repeatText: true, overlayText: 'Sample Overlay', font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular), - textColor: { r: 0, g: 0, b: 0 }, - appearanceFillColor: { r: 255, g: 255, b: 255 } + textColor: { r: 0, g: 0, b: 0 } } ); // Add annotation to the page @@ -1270,6 +1286,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1311,6 +1328,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1358,6 +1376,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1421,6 +1440,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1487,6 +1507,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1546,6 +1567,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1609,6 +1631,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1677,6 +1700,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1747,6 +1771,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1808,6 +1833,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1873,6 +1899,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1932,6 +1959,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1984,9 +2012,11 @@ let document: PdfDocument = new PdfDocument(data); // Access the first page let page: PdfPage = document.getPage(0); // Access the annotation at index 0 -let annotation: PdfLineAnnotation = page.annotations.at(0) PdfLineAnnotation; +let annotation: PdfLineAnnotation = page.annotations.at(0) as PdfLineAnnotation; // Sets the measurement unit of line measurement annoation as centimeter annotation.unit = PdfMeasurementUnit.centimeter; +// Sets the flag to have measurement dictionary of the line annotation. +annotation.measure = true; // Save the document document.save('Output.pdf'); // Close the document @@ -1994,6 +2024,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -2003,6 +2034,7 @@ var annotation = page.annotations.at(0); // Sets the measurement unit of line measurement annotation as centimeter if (annotation instanceof ej.pdf.PdfLineAnnotation) { annotation.unit = ej.pdf.PdfMeasurementUnit.centimeter; + annotation.measure = true; } // Save the document document.save('Output.pdf'); @@ -2028,8 +2060,7 @@ let page: PdfPage = document.getPage(0); let annotation: PdfPopupAnnotation = page.annotations.at(0) as PdfPopupAnnotation; // Modified its properties annotation.text = 'Popup annotation'; -annotation.color = { r: 0, g: 128, b: 255} -; +annotation.color = { r: 0, g: 128, b: 255}; annotation.opacity = 0.5; // Save the document document.save('Output.pdf'); @@ -2038,6 +2069,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -2074,6 +2106,8 @@ let page: PdfPage = document.getPage(0); let annotation: PdfAnnotation = page.annotations.at(0); // Remove an annotation from the collection page.annotations.remove(annotation); +// Remove an annotation with specific index +page.annotations.removeAt(1); // Save the document document.save('Output.pdf'); // Close the document @@ -2089,6 +2123,8 @@ var page = document.getPage(0); var annotation = page.annotations.at(0); // Remove an annotation from the collection page.annotations.remove(annotation); +// Remove an annotation with specific index +page.annotations.removeAt(1); // Save the document document.save('Output.pdf'); // Close the document @@ -2134,9 +2170,16 @@ document.destroy(); {% endhighlight %} {% endtabs %} +N> Setting `document.flatten = true;` flattens all interactive elements in the PDF, converting form fields and annotations into static content throughout the entire document. + ## Importing annotations -This example demonstrates how to import annotations into a PDF document using the PdfDocument. `importAnnotations` method. +This example demonstrates how to import annotations into a PDF document using the PdfDocument. `importAnnotations` method. The DataFormat enum specifies the format of the annotation data you are importing or exporting: + +* fdf (Forms Data Format): Compact, PDF specific key/value representation. +* xfdf (XML Forms Data Format): XML-based FDF for wider tool interoperability. +* json: Human readable and easy to parse in web apps/services. +* xml: Generic XML structure suitable for systems that prefer XML processing. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -2171,21 +2214,27 @@ This example demonstrates how to export annotations from a PDF document using th {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfAnnotationExportSettings, DataFormat} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); -// Exports the annotations from the PDF document. -let data: Uint8Array = document.exportAnnotations(); -// Close the document +// Sets export data format as JSON for annotation export settings +let settings = new PdfAnnotationExportSettings(); +settings.dataFormat = DataFormat.json; +// Export annotations to JSON format +let jsonData = document.exportAnnotations('annotations.json', settings); +// Destroy the document document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); -// Export the annotations from the PDF document -var data = document.exportAnnotations(); +// Sets export data format as JSON for annotation export settings +var settings = new ej.pdf.PdfAnnotationExportSettings(); +settings.dataFormat = ej.pdf.DataFormat.json; +// Export annotations to JSON format +var jsonData = document.exportAnnotations('annotations.json', settings); // Close the document document.destroy(); diff --git a/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md b/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md index ed93592c3..969ac705c 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md @@ -34,6 +34,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add page @@ -52,49 +53,6 @@ document.destroy(); {% endhighlight %} {% endtabs %} -## Adding Bookmarks in an existing PDF document - -This example demonstrates how to add bookmarks to an existing PDF document using the `PdfBookmark` class. This allows you to enhance navigation in already created PDF document. - -{% tabs %} -{% highlight javascript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf'; - -// Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); -// Get page -let page: PdfPage = document.getPage(0); -// Get the bookmarks -let bookmarks: PdfBookmarkBase = document.bookmarks; -// Gets the bookmark at the specified index -let bookmark: PdfBookmark = bookmarks.at(0) as PdfBookmark; -// Set the destination -bookmark.destination = new PdfDestination(page, { x: 100, y: 200 }); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); - -{% endhighlight %} -{% highlight javascript tabtitle="JavaScript" %} -// Load an existing PDF document -var document = new ej.pdf.PdfDocument(data); -// Get page -var page = document.getPage(0); -// Get the bookmarks -var bookmarks = document.bookmarks; -// Get the bookmark at the specified index -var bookmark = bookmarks.at(0); -// Set the destination -bookmark.destination = new ej.pdf.PdfDestination(page, { x: 100, y: 200 }); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); - -{% endhighlight %} -{% endtabs %} - ## Inserting Bookmarks in an existing PDF This example demonstrates how to insert bookmarks at a specific position in an existing PDF document using the `PdfBookmark` class. This feature allows precise control over bookmark order. @@ -109,7 +67,7 @@ let document: PdfDocument = new PdfDocument(data); let page: PdfPage = document.getPage(0) as PdfPage; // Get the bookmarks let bookmarks: PdfBookmarkBase = document.bookmarks; -// Add a new outline to the PDF document +// Add a new bookmark at the specified page index let bookmark: PdfBookmark = bookmarks.add('Introduction', 1); // Sets destination to the bookmark bookmark.destination = new PdfDestination(page, { x: 100, y: 200 }); @@ -120,13 +78,14 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Get the first page var page = document.getPage(0); // Get the bookmarks var bookmarks = document.bookmarks; -// Add a new outline to the PDF document +// Add a new bookmark at the specified page index var bookmark = bookmarks.add('Introduction', 1); // Set destination to the bookmark bookmark.destination = new ej.pdf.PdfDestination(page, { x: 100, y: 200 }); @@ -160,6 +119,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Get the first page @@ -199,6 +159,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Get the first page @@ -238,6 +199,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Get the bookmarks @@ -275,6 +237,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Get bookmarks diff --git a/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md b/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md index 77ebc784a..86d5f2aa9 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md +++ b/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md @@ -47,8 +47,10 @@ form.add(field); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load the document var document = new ej.pdf.PdfDocument(); // Get the first page of the document @@ -67,6 +69,7 @@ form.add(field); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -106,8 +109,10 @@ form.add(field); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load the document var document = new ej.pdf.PdfDocument(data); // Get the first page of the document @@ -138,6 +143,7 @@ form.add(field); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -181,8 +187,10 @@ form.add(field); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load the document var document = new ej.pdf.PdfDocument(data); // Gets the first page of the document @@ -212,6 +220,7 @@ form.add(field); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -259,8 +268,10 @@ form.add(field); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load the document var document = new ej.pdf.PdfDocument(data); // Gets the first page of the document @@ -291,6 +302,7 @@ form.add(field); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -300,7 +312,7 @@ This example demonstrates how to retrieve the signed date of a PDF signature usi {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfForm, PdfSignatureField} from '@syncfusion/ej2-pdf'; // Load the document let document: PdfDocument = new PdfDocument(data); @@ -308,49 +320,33 @@ let document: PdfDocument = new PdfDocument(data); let page: PdfPage = document.getPage(0); // Access the PDF form let form: PdfForm = document.form; -// Create a new signature field -let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 }); -// Create a new signature using PFX data and private key -let sign: PdfSignature = PdfSignature.create( - { - cryptographicStandard: CryptographicStandard.cms, - digestAlgorithm: DigestAlgorithm.sha256 - }, - certData, - password -); -// Set the signature to the field -field.setSignature(sign); +// Access the loaded signature field +let field: PdfSignatureField = document.form.fieldAt(0) as PdfSignatureField; +// Get the signed +let signature = field.getSignature(); // Get the signed date -sign.getSignedDate(); -// Add the field into PDF form -form.add(field); -// Save the document -document.save('output.pdf'); +let date = signature.getSignedDate; // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load the document var document = new ej.pdf.PdfDocument(data); // Get the first page of the document var page = document.getPage(0); // Access the PDF form var form = document.form; -// Create a new signature field -var field = new ej.pdf.PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 }); -// Create a new signature using PFX data and private key -var sign = ej.pdf.PdfSignature.create({ cryptographicStandard: ej.pdf.CryptographicStandard.cms, digestAlgorithm: ej.pdf.DigestAlgorithm.sha256 }, certData, password); -// Set the signature to the field -field.setSignature(sign); +// Access the loaded signature field +var field = document.form.fieldAt(0) as ej.pdf.PdfSignatureField; +// Get the signed +var signature = field.getSignature(); // Get the signed date -sign.getSignedDate(); -// Add the field into PDF form -form.add(field); -// Save the document -document.save('output.pdf'); +var date = signature.getSignedDate; // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -360,57 +356,53 @@ This example demonstrates how to retrieve the certificate information of a PDF s {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, PdfCertificateInformation, CryptographicStandard} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfSignatureField, PdfCertificateInformation} from '@syncfusion/ej2-pdf'; // Load the document let document: PdfDocument = new PdfDocument(data); // Get the first page of the document let page: PdfPage = document.getPage(0); -// Access the PDF form -let form: PdfForm = document.form; -// Create a new signature field -let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 }); -// Create a new signature using PFX data and private key -let sign: PdfSignature = PdfSignature.create( - { - cryptographicStandard: CryptographicStandard.cms, - digestAlgorithm: DigestAlgorithm.sha256 - }, - certData, - password -); -// Set the signature to the field -field.setSignature(sign); +// Access the loaded signature field +let field = document.form.fieldAt(0) as PdfSignatureField; +// Get the signed +let signature = field.getSignature(); // Get the certificate information of the signature -let certificateInfo: PdfCertificateInformation = sign.getCertificateInformation(); -// Add the field into PDF form -form.add(field); -// Save the document -document.save('output.pdf'); +let certificateInfo: PdfCertificateInformation = signature.getCertificateInformation(); +// Get the issuer name of the certificate +let issuerName = certificateInfo.issuerName; +// Get the serial number of the certificate +let serialNumber = certificateInfo.serialNumber; +// Get the subject name of the certificate +let subjectName = certificateInfo.subjectName; +// Get the start date from which the certificate is valid +let validFrom = certificateInfo.validFrom; // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load the document var document = new ej.pdf.PdfDocument(data); // Get the first page of the document var page = document.getPage(0); -// Access the PDF form -var form = document.form; -// Create a new signature field -var field = new ej.pdf.PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 }); -// Create a new signature using PFX data and private key -var sign = ej.pdf.PdfSignature.create({ cryptographicStandard: ej.pdf.CryptographicStandard.cms, digestAlgorithm: ej.pdf.DigestAlgorithm.sha256 }, certData, password); -// Set the signature to the field -field.setSignature(sign); +// Access the loaded signature field +var field = document.form.fieldAt(0) as PdfSignatureField; +// Get the signed +var signature = field.getSignature(); // Get the certificate information of the signature -var certificateInfo = sign.getCertificateInformation(); -// Add the field into PDF form -form.add(field); -// Save the document -document.save('output.pdf'); +var certificateInfo = signature.getCertificateInformation(); +// Get the issuer name of the certificate +var issuerName = certificateInfo.issuerName; +// Get the serial number of the certificate +var serialNumber = certificateInfo.serialNumber; +// Get the subject name of the certificate +var subjectName = certificateInfo.subjectName; +// Get the start date from which the certificate is valid +var validFrom = certificateInfo.validFrom; // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -434,12 +426,30 @@ let field: PdfSignatureField = form.fieldAt(0) as PdfSignatureField; let signature: PdfSignature = field.getSignature(); // Get the signature options let options: PdfSignatureOptions = signature.getSignatureOptions(); -// Get the cryptographic standard of the signature -let cryptographicStandard: CryptographicStandard = options.cryptographicStandard; +// Get the cryptographic standard +let cryptographicStandard = options.cryptographicStandard; +// Get the digest algorithm +let digestAlgorithm = options.digestAlgorithm; +// Get the signer contact information +let contactInfo = options.contactInfo; +// Get the reason for signing +let reason = options.reason; +// Get the physical signing location +let locationInfo = options.locationInfo; +// Get the certification flag +let certify = options.certify; +// Get the certification permissions +let documentPermissions = options.documentPermissions; +// Get// Get the signature name +let signedName = options.signedName; +// Get the lock status of the signature +let isLocked = options.isLocked // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load the document var document = new ej.pdf.PdfDocument(data); // Get the first page of the document @@ -452,10 +462,27 @@ var field = form.fieldAt(0); var signature = field.getSignature(); // Get the signature options var options = signature.getSignatureOptions(); -// Get the cryptographic standard of the signature +// Get the cryptographic standard var cryptographicStandard = options.cryptographicStandard; +// Get the digest algorithm +var digestAlgorithm = options.digestAlgorithm; +// Get the signer contact information +var contactInfo = options.contactInfo; +// Get the reason for signing +var reason = options.reason; +// Get the physical signing location +var locationInfo = options.locationInfo; +// Get the certification flag +var certify = options.certify; +// Get the certification permissions +var documentPermissions = options.documentPermissions; +// Get// Get the signature name +var signedName = options.signedName; +// Get the lock status of the signature +var isLocked = options.isLocked // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -502,12 +529,12 @@ field.setSignature(signature); // Add the field into PDF form form.add(field); // Save the document data -let data: Uint8Array = document.save(); +let finalData: Uint8Array = document.save(); // Destroy the document document.destroy(); // Replace the empty signature with externally signed hash and certificates let signedDocumentData: Uint8Array = PdfSignature.replaceEmptySignature( - data, + finalData, 'Signature', signedData, DigestAlgorithm.sha256, @@ -515,8 +542,10 @@ let signedDocumentData: Uint8Array = PdfSignature.replaceEmptySignature( ); // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load the document var document = new ej.pdf.PdfDocument(data); // Get the first page of the document @@ -546,12 +575,12 @@ field.setSignature(signature); // Add the field into PDF form form.add(field); // Save the document data -var data = document.save(); +var finalData = document.save(); // Destroy the document document.destroy(); // Replace the empty signature with externally signed hash and certificates var signedDocumentData = ej.pdf.PdfSignature.replaceEmptySignature( - data, + finalData, 'Signature', signedData, ej.pdf.DigestAlgorithm.sha256, @@ -559,5 +588,6 @@ var signedDocumentData = ej.pdf.PdfSignature.replaceEmptySignature( ); // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/FormFields.md b/Document-Processing/PDF/PDF-Library/javascript/FormFields.md index 6ae3f4355..5145d5bf1 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/FormFields.md +++ b/Document-Processing/PDF/PDF-Library/javascript/FormFields.md @@ -44,8 +44,10 @@ document.form.add(new PdfTextBoxField( document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add the PDF page. @@ -69,6 +71,7 @@ document.form.add(new PdfTextBoxField( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -79,7 +82,7 @@ The following code snippet explains how to add a text box field in an existing P import {PdfDocument, PdfPage, PdfTextBoxField, PdfInteractiveBorder, PdfBorderStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; // Create a new PDF document -let document: PdfDocument = new PdfDocument(); +let document: PdfDocument = new PdfDocument(data); //Add the PDF page. let page: PdfPage = document.getPage(0); // Add new textbox field into PDF form @@ -101,8 +104,10 @@ document.form.add(new PdfTextBoxField( 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); // Access the first page @@ -126,6 +131,7 @@ document.form.add(new ej.pdf.PdfTextBoxField( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -165,8 +171,10 @@ document.form.add(new PdfComboBoxField( document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add a page @@ -195,6 +203,7 @@ document.form.add(new ej.pdf.PdfComboBoxField( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -232,8 +241,10 @@ document.form.add(new PdfComboBoxField( 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); // Access the first page @@ -262,6 +273,7 @@ document.form.add(new ej.pdf.PdfComboBoxField( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -296,8 +308,10 @@ document.form.add(new PdfRadioButtonListField( document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add a page @@ -321,6 +335,7 @@ document.form.add(new ej.pdf.PdfRadioButtonListField( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -353,8 +368,10 @@ document.form.add(new PdfRadioButtonListField( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -378,6 +395,7 @@ document.form.add(new ej.pdf.PdfRadioButtonListField( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -418,8 +436,10 @@ document.form.add(new PdfListBoxField( document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add a page @@ -449,6 +469,7 @@ document.form.add(new ej.pdf.PdfListBoxField( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -487,8 +508,10 @@ document.form.add(new PdfListBoxField( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -518,6 +541,7 @@ document.form.add(new ej.pdf.PdfListBoxField( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -550,8 +574,10 @@ document.form.add(new PdfCheckBoxField( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add a page @@ -573,6 +599,7 @@ document.form.add(new ej.pdf.PdfCheckBoxField( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -603,8 +630,10 @@ document.form.add(new PdfCheckBoxField( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -626,6 +655,7 @@ document.form.add(new ej.pdf.PdfCheckBoxField( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -663,8 +693,10 @@ document.form.add( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add a page @@ -691,6 +723,7 @@ document.form.add( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -726,8 +759,10 @@ document.form.add( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -754,6 +789,7 @@ document.form.add( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -793,8 +829,10 @@ document.form.add( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add a page @@ -823,6 +861,7 @@ document.form.add( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -860,8 +899,10 @@ document.form.add( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -890,6 +931,7 @@ document.form.add( document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -919,8 +961,10 @@ field.textAlignment = PdfTextAlignment.center; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -935,6 +979,7 @@ field.textAlignment = ej.pdf.PdfTextAlignment.center; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -960,8 +1005,10 @@ field.multiSelect = true; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -976,6 +1023,7 @@ field.multiSelect = true; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -1001,8 +1049,10 @@ field.toolTip = 'Radio button'; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1017,6 +1067,7 @@ field.toolTip = 'Radio button'; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -1042,8 +1093,10 @@ field.toolTip = 'ListBox Fields'; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1058,6 +1111,7 @@ field.toolTip = 'ListBox Fields'; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -1083,8 +1137,10 @@ field.toolTip = 'CheckBox Fields'; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1099,6 +1155,7 @@ field.toolTip = 'CheckBox Fields'; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -1125,8 +1182,10 @@ field.toolTip = 'CheckBox Fields'; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1141,6 +1200,7 @@ field.toolTip = 'CheckBox Fields'; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -1170,8 +1230,10 @@ field.defaultValue = 'Syncfusion'; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1188,12 +1250,13 @@ field.defaultValue = 'Syncfusion'; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} ## Removing the form fields from existing PDF document -This example demonstrates how to remove items from an existing form field in a PDF document using the `removeItemAt()` method of the `PdfField` class. The following code snippet illustrates how to access a form field and remove its first item. +This example demonstrates how to remove items from an existing form field in a PDF document using the `remove()` method of the `PdfField` class. The following code snippet illustrates how to access a form field and remove its first item. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -1209,8 +1272,10 @@ field.removeItemAt(0); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the form field at index 0 @@ -1221,6 +1286,7 @@ field.removeItemAt(0); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -1242,8 +1308,10 @@ field.flatten = true; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Get the first field @@ -1254,9 +1322,12 @@ field.flatten = true; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} +N> Setting `document.flatten = true;` flattens all interactive elements in the PDF, converting form fields and annotations into static content throughout the entire document. + ## Marking form fields as Read-Only This example demonstrates how to mark form fields as read-only by accessing them from the PdfFormFieldCollection and setting their ReadOnly property to true. @@ -1290,7 +1361,7 @@ document.destroy(); {% endhighlight %} {% endtabs %} -## Importing form fields +## Importing form fields data ### Importing FDF file to PDF @@ -1337,8 +1408,10 @@ document.importFormData('formData.xfdf', DataFormat.xfdf); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Imports form data from to the PDF document. @@ -1347,10 +1420,11 @@ document.importFormData('formData.xfdf', ej.pdf.DataFormat.xfdf); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} -## Exporting form fields +## Exporting form fields data ### Export PDF file to FDF @@ -1371,8 +1445,10 @@ let fdf: Uint8Array = document.exportFormData(settings); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Sets the form field data export settings with output data format. @@ -1384,6 +1460,7 @@ var fdf = document.exportFormData(settings); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -1406,8 +1483,10 @@ let xfdf: Uint8Array = document.exportFormData(settings); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Sets the form field data export settings with output data format. @@ -1419,5 +1498,6 @@ var xfdf = document.exportFormData(settings); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md b/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md index 680392c90..f3314e708 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md +++ b/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md @@ -28,15 +28,17 @@ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 36, PdfF // Get the text size let size: Size = font.measureString('Syncfusion'); // Create a new text web link annotation -let annotation: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0}, { r: 165, g: 42, b: 42}, 1); +let annotation: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0}, { r: 165, g: 42, b: 42 }, 1); // Add annotation to the page page.annotations.add(annotation); // Save the document document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(); // Access the first page @@ -55,6 +57,7 @@ page.annotations.add(annotation); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -75,15 +78,17 @@ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 36, PdfF // Get the text size let size: Size = font.measureString('Syncfusion'); // Create a new text web link annotation -let annotation: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0}, { r: 165, g: 42, b: 42}, 1); +let annotation: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0}, { r: 165, g: 42, b: 42 }, 1); // Add annotation to the page page.annotations.add(annotation); // Save the document document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -102,6 +107,7 @@ page.annotations.add(annotation); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -111,7 +117,7 @@ This example demonstrates how to create internal navigation within a PDF documen {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, PdfDocumentLinkAnnotation, PdfTextAlignment, PdfFontFamily, PdfFontStyle, PdfDestination, PdfDestinationMode, } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, PdfDocumentLinkAnnotation, PdfTextAlignment, PdfFontFamily, PdfFontStyle, PdfDestination, PdfDestinationMode } from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); @@ -124,7 +130,7 @@ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfF // Get the text size let size: Size = font.measureString('Syncfusion'); // Create a new text web link annotation -let annotation: PdfDocumentLinkAnnotation = new PdfDocumentLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0}, { r: 165, g: 42, b: 42}, 1); +let annotation: PdfDocumentLinkAnnotation = new PdfDocumentLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0}, { r: 165, g: 42, b: 42 }, 1); // Initializes a new instance of the `PdfDestination` class. let destination: PdfDestination = new PdfDestination(); // Sets the zoom factor. @@ -143,8 +149,10 @@ annotation.destination = destination; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add a page @@ -175,6 +183,7 @@ annotation.destination = destination; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -208,8 +217,10 @@ annotation.destination = destination; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Get the page @@ -234,6 +245,7 @@ annotation.destination = destination; document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -249,28 +261,31 @@ import { PdfDocument, PdfPage, PdfFileLinkAnnotation } from '@syncfusion/ej2-pdf let document: PdfDocument = new PdfDocument(); // Add a page let page: PdfPage = document.addPage(); -// Create a new file link annotation(base64 / uint8array) -let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, '/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Create a new file link annotation +let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, 'image.png'); // Add annotation to the page page.annotations.add(annotation); // Save the document document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add a page var page = document.addPage(); -// Create a new file link annotation(base64 / uint8array) -var annotation = new ej.pdf.PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, '/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Create a new file link annotation +var annotation = new ej.pdf.PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, 'image.png'); // Add annotation to the page page.annotations.add(annotation); // Save the document document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -284,27 +299,30 @@ import { PdfDocument, PdfPage, PdfFileLinkAnnotation } from '@syncfusion/ej2-pdf let document: PdfDocument = new PdfDocument(data); // Get the first page let page: PdfPage = document.getPage(0) as PdfPage; -// Create a new file link annotation(base64 / uint8array) -let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, '/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Create a new file link annotation +let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, 'image.png'); // Add annotation to the page page.annotations.add(annotation); // Save the document document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Get the first page var page = document.getPage(0); -// Create a new file link annotation(base64 / uint8array) -var annotation = new ej.pdf.PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, '/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Create a new file link annotation +var annotation = new ej.pdf.PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, 'image.png'); // Add annotation to the page page.annotations.add(annotation); // Save the document document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Image-Extraction.md b/Document-Processing/PDF/PDF-Library/javascript/Image-Extraction.md index 266ebc651..677f2dc5b 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Image-Extraction.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Image-Extraction.md @@ -7,13 +7,14 @@ documentation: UG --- # Image Extraction in TypeScript PDF library -The PDF provides support to extract images from PDF documents and retrieve their properties such as position, size, and format. +The PDF provides support to extract images from PDF documents and retrieve their properties such as bounds, index and raw byte data. -N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. +N> For redaction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. Please verify the platform's actual root directory where the `openjpeg` file is extracted. Depending on the platform, the root path may vary. Check which root folder is being used by reviewing the path referenced in the [Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/create-pdf-document-asp-net-core) page. ## Extract Images from a PDF -This example demonstrates how to extract all embedded images from a PDF document using the `PdfDataExtractor` class. The extracted images are returned as a collection of `PdfEmbeddedImage` objects. +This code demonstrates how to extract embedded images and their metadata from a PDF using `PdfDataExtractor`. It loads a PDF, retrieves all `PdfEmbeddedImage` entries across pages, accesses the first image's raw byte data, and reads its propertiesn format, page index, occurrence index, bounds, interpolation status, and masking flags before saving/disposing resources by destroying the document. + {% tabs %} {% highlight typescript tabtitle="TypeScript" %} import { PdfDocument } from '@syncfusion/ej2-pdf'; @@ -30,11 +31,32 @@ let imageInfoCollection: PdfEmbeddedImage[] = extractor.extractImages({ }); // Access the first extracted image and its raw data let imageInfo: PdfEmbeddedImage = imageInfoCollection[0]; -let data: Uint8Array = imageInfo.data; -// Destroy the document +// Get the raw byte data of the extracted image +let imageData: Uint8Array = imageInfo.data; +// Gets the image format. +let type = imageInfo.type; +// Gets the page index of the image +let pageIndex = imageInfo.pageIndex; +// Gets the index of the image occurrence within the PDF page +let index = imageInfo.index; +// Gets the bounds of the image +let bounds = imageInfo.bounds; +// Gets the XObject resource name for this image +let name: string = imageInfo.resourceName; +// Gets the boolean flag indicating whether the image is interpolated or not +let isImageInterpolated = imageInfo.isImageInterpolated; +// Gets the boolean flag indicating whether the image is masked or not +let isImageMasked = imageInfo.isImageMasked; +// Gets the boolean flag indicating whether the image is soft masked or not +let IsSoftMasked: boolean = imageInfo.isSoftMasked; +// Gets the image physical dimension +let physicalDimension: Size = imageInfo.physicalDimension; +// Destroy the PDF document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Initialize a new instance of the `PdfDataExtractor` class @@ -46,48 +68,28 @@ var imageInfoCollection = extractor.extractImages({ }); // Access the first extracted image and its raw data var imageInfo = imageInfoCollection[0]; -var data = imageInfo.data; -// Destroy the document +// Get the raw byte data of the extracted image +var imageData = imageInfo.data; +// Gets the image format. +var type = imageInfo.type; +// Gets the page index of the image. +var pageIndex = imageInfo.pageIndex; +// Gets the index of the image occurrence within the PDF page +var index = imageInfo.index; +// Gets the bounds of the image. +var bounds = imageInfo.bounds; +// Gets the XObject resource name for this image +var name = imageInfo.resourceName; +// Gets the boolean flag indicating whether the image is interpolated or not +var isImageInterpolated = imageInfo.isImageInterpolated; +//// Gets the boolean flag indicating whether the image is masked or not +var isImageMasked = imageInfo.isImageMasked; +// Gets the boolean flag indicating whether the image is soft masked or not +var IsSoftMasked = imageInfo.isSoftMasked; +// Gets the image physical dimension +var physicalDimension = imageInfo.physicalDimension; +// Destroy the PDF document document.destroy(); -{% endhighlight %} -{% endtabs %} - -## Image informations -This section explains how to extract image properties such as bounds, image index from a PDF page using the `PdfEmbeddedImage` class. - -{% tabs %} -{% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument } from '@syncfusion/ej2-pdf'; -import {PdfDataExtractor, PdfEmbeddedImage} from '@syncfusion/ej2-pdf-data-extract'; - -// Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); -// Initialize a new instance of the `PdfDataExtractor` class -let extractor: PdfDataExtractor = new PdfDataExtractor(document); -// Extract collection of `PdfEmbeddedImage` from the PDF document -let imageInfoCollection: PdfEmbeddedImage[] = extractor.extractImages({ - startPageIndex: 0, - endPageIndex: 0 -}); -// Extracts all the images information from first page -let imageInfo: PdfEmbeddedImage = imageInfoCollection[0]; -// Destroy the document -document.destroy(); -{% endhighlight %} -{% highlight javascript tabtitle="JavaScript" %} -// Load an existing PDF document -var document = new ej.pdf.PdfDocument(data); -// Initialize a new instance of the `PdfDataExtractor` class -var extractor= new ej.pdf.PdfDataExtractor(document); -// Extract collection of `PdfEmbeddedImage` from the PDF document -var imageInfoCollection = extractor.extractImages({ - startPageIndex: 0, - endPageIndex: document.pageCount - 1 -}); -// Extracts all the images information from first page -var imageInfo = imageInfoCollection[0]; -// Destroy the document -document.destroy(); {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Layers.md b/Document-Processing/PDF/PDF-Library/javascript/Layers.md index 07cc068eb..495c79e4f 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Layers.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Layers.md @@ -8,7 +8,7 @@ documentation: UG # Layers in JavaScript PDF library -Layers, also known as Option Content refers to sections of content in a PDF document that can be selectively viewed or hidden by document authors or consumers. This capability is useful in items such as CAD drawings, layered artwork, maps, and multi-language documents. +Layers, also known as Option Content refers to sections of content in a PDF document that can be selectively viewed or hidden by document authors or consumers. JavaScript PDF provides support to create, add and merge the layers into PDF document. @@ -40,8 +40,10 @@ graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 }); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add a page @@ -62,6 +64,7 @@ graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 }); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -176,30 +179,41 @@ This example demonstrates how to remove layers from an existing PDF document usi {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfLayerCollection } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfLayerCollection, PdfLayer } from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); // Get the layer collection. let layers: PdfLayerCollection = document.layers; -//Remove the layer -layers.removeAt(0); +// Retrieve the first layer from the layers collection +let layer: PdfLayer = layers.at(0); +// Remove the layer from layer collection with instance +layers.remove(layer); +// Remove an layer from specific index +layers.removeAt(1); // Save the document document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Get the layer collection. var layers = document.layers; -// Remove the layer -layers.removeAt(0); +// Retrieve the first layer from the layers collection +var layer = layers.at(0); +// Remove the layer from layer collection with instance +layers.remove(layer); +// Remove an layer from specific index +layers.removeAt(1); // Save the document document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -213,10 +227,8 @@ import { PdfDocument, PdfLayerCollection, PdfLayer, PdfGraphics, PdfPen } from ' // Create a new PDF document let document: PdfDocument = new PdfDocument(); -// Add a new section to the document -let section: PdfSection = document.addSection(); -// Add a page to the section -let page: PdfPage = section.addPage(); +// Add a page +let page: PdfPage = document.addPage(); // Access the collection of layers in the PDF document let layers: PdfLayerCollection = document.layers; // Add a new layer named 'Layer1' to the PDF document @@ -235,14 +247,14 @@ graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 }); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); -// Add a new section to the document -var section = document.addSection(); -// Add a page to the section -var page = section.addPage(); +// Add a page +var page = document.addPage(); // Access the collection of layers in the PDF document var layers = document.layers; // Add a new layer named 'Layer1' to the PDF document @@ -261,5 +273,6 @@ graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 }); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Merge-Document.md b/Document-Processing/PDF/PDF-Library/javascript/Merge-Document.md index 60df64b9c..f1c4dca5f 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Merge-Document.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Merge-Document.md @@ -9,9 +9,9 @@ documentation: UG The PDF provides support to merge multiple PDF documents into a single file and import pages from one document to another. -## Merging multiple documents +## Importing pages -This section explains how to import a range of pages from a source PDF into a destination document using the `importPageRange` method. This is useful for merging multiple pages or entire documents efficiently. +This section explains how to import a range of pages from a source PDF into a destination document using the `importPageRange` method. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -21,43 +21,34 @@ import { PdfDocument, PdfPage, PdfPageImportOptions} from '@syncfusion/ej2-pdf'; let destination: PdfDocument = new PdfDocument(data1); // Load another existing PDF document let sourceDocument: PdfDocument = new PdfDocument(data2); -// Access first page of the source document -let pageToImport: PdfPage = sourceDocument.getPage(0); -// Options to customize the support of import PDF pages. -let options: PdfPageImportOptions = new PdfPageImportOptions(); -// Sets the target page index to import -options.targetIndex = 5; // Import the page into the destination document at the specified index destination.importPageRange(sourceDocument, 0, sourceDocument.pageCount-1); // Save the output PDF destination.save('Output.pdf'); // Destroy the documents destination.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document -var destination= new PdfDocument(data1); +var destination= new ej.pdf.PdfDocument(data1); // Load another existing PDF document -var sourceDocument = new PdfDocument(data2); -// Access first page of the source document -var pageToImport = sourceDocument.getPage(0); -// Options to customize the support of import PDF pages. -var options = new PdfPageImportOptions(); -// Sets the target page index to import -options.targetIndex = 5; +var sourceDocument = new ej.pdf.PdfDocument(data2); // Import the page into the destination document at the specified index destination.importPageRange(sourceDocument, 0, sourceDocument.pageCount-1); // Save the output PDF destination.save('Output.pdf'); // Destroy the documents destination.destroy(); + {% endhighlight %} {% endtabs %} ## Importing pages from multiple documents -This section demonstrates how to import multiple pages from a source PDF into a destination document at a specified position using the `importPageRange` method and PdfPageImportOptions. This is useful for merging selected page ranges from different PDFs into one document. +This section demonstrates how to import multiple pages from a source PDF into a destination document at a specified position using the `importPageRange` method and `PdfPageImportOptions`. This is useful for merging selected page ranges from different PDFs into one document. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -66,41 +57,62 @@ import { PdfDocument, PdfPageImportOptions} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let destination: PdfDocument = new PdfDocument(data1); // Load another existing PDF document -let sourceDocument: PdfDocument = new PdfDocument(data2); +let sourceDocument1: PdfDocument = new PdfDocument(data2); // Options to customize the import of PDF pages let options: PdfPageImportOptions = new PdfPageImportOptions(); // Sets the target page index to insert the imported pages options.targetIndex = 3; // Import 5 pages from page index 2 to 6 into the destination document and insert them at index 3 -destination.importPageRange(sourceDocument, 2, 6, options); +destination.importPageRange(sourceDocument1, 2, 6, options); +// Load another existing PDF document +let sourceDocument2: PdfDocument = new PdfDocument(data3); +// Options to customize the import of PDF pages +options = new PdfPageImportOptions(); +// Sets the target page index to insert the imported pages +options.targetIndex = 7; +// Import 4 pages from page index 0 to 3 into the destination document and insert them at index 7 +destination.importPageRange(sourceDocument2, 0, 3, options); // Save the output PDF destination.save('Output.pdf'); // Destroy the documents to free resources destination.destroy(); -sourceDocument.destroy(); +sourceDocument1.destroy(); +sourceDocument2.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var destination = new ej.pdf.PdfDocument(data1); // Load another existing PDF document -var sourceDocument = new ej.pdf.PdfDocument(data2); +var sourceDocument1 = new ej.pdf.PdfDocument(data2); // Options to customize the import of PDF pages var options = new ej.pdf.PdfPageImportOptions(); // Sets the target page index to insert the imported pages options.targetIndex = 3; // Import 5 pages from page index 2 to 6 into the destination document and insert them at index 3 -destination.importPageRange(sourceDocument, 2, 6, options); +destination.importPageRange(sourceDocument1, 2, 6, options); +// Load another existing PDF document +var sourceDocument2 = new ej.pdf.PdfDocument(data3); +// Options to customize the import of PDF pages +options = new ej.pdf.PdfPageImportOptions(); +// Sets the target page index to insert the imported pages +options.targetIndex = 7; +// Import 4 pages from page index 0 to 3 into the destination document and insert them at index 7 +destination.importPageRange(sourceDocument2, 0, 3, options); // Save the output PDF destination.save('Output.pdf'); // Destroy the documents to free resources destination.destroy(); -sourceDocument.destroy(); +sourceDocument1.destroy(); +sourceDocument2.destroy(); + {% endhighlight %} {% endtabs %} ## Optimizing PDF resources when merging PDF documents -Imports a page from a source PDF into a destination document at a specific index with rotation and resource optimization using `PdfPageImportOptions` class. +Imports a page from a source PDF into a destination document at a specific index with group form fiels, rotation and resource optimization using `PdfPageImportOptions` class. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -114,8 +126,12 @@ let sourceDocument: PdfDocument = new PdfDocument(data2); let pageToImport: PdfPage = sourceDocument.getPage(0); // Options to customize the support of import PDF pages. let options: PdfPageImportOptions = new PdfPageImportOptions(); -// Sets the target page index to import -options.targetIndex = 5; +// Sets the rotation angle +options.rotation = PdfRotationAngle.angle270; +// Enables resource optimization when importing pages +options.optimizeResources = true; +// Groups form fields together while importing pages +options.groupFormFields = true; // Import the page into the destination document at the specified index destination.importPage(pageToImport, sourceDocument, options); // Save the output PDF @@ -123,8 +139,10 @@ destination.save('Output.pdf'); // Destroy the documents destination.destroy(); sourceDocument.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var destination = new ej.pdf.PdfDocument(data1); // Load another existing PDF document @@ -133,8 +151,12 @@ var sourceDocument = new ej.pdf.PdfDocument(data2); var pageToImport = sourceDocument.getPage(0); // Options to customize the support of import PDF pages. var options = new ej.pdf.PdfPageImportOptions(); -// Sets the target page index to import -options.targetIndex = 5; +// Sets the rotation angle +options.rotation = PdfRotationAngle.angle270; +// Enables resource optimization when importing pages +options.optimizeResources = true; +// Groups form fields together while importing pages +options.groupFormFields = true; // Import the page into the destination document at the specified index destination.importPage(pageToImport, sourceDocument, options); // Save the output PDF @@ -142,5 +164,6 @@ destination.save('Output.pdf'); // Destroy the documents destination.destroy(); sourceDocument.destroy(); + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Split-Documents.md b/Document-Processing/PDF/PDF-Library/javascript/Split-Documents.md index 3990ef82d..c63cdc020 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Split-Documents.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Split-Documents.md @@ -8,7 +8,7 @@ documentation: UG # Split in JavaScript PDF library -The PDF library supports Splitting PDF file into single-page or multiple-page PDF documents. +The PDF library supports splitting PDF file into single-page or multiple-page PDF documents. ## Splitting a PDF file into individual @@ -29,8 +29,10 @@ function documentSplitEvent(sender: PdfDocument, args: PdfDocumentSplitEventArgs } // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); document.splitEvent = documentSplitEvent; @@ -42,6 +44,7 @@ function documentSplitEvent(sender, args): void { } // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -64,8 +67,10 @@ function documentSplitEvent(sender: PdfDocument, args: PdfDocumentSplitEventArgs } // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); document.splitEvent = documentSplitEvent; @@ -77,6 +82,7 @@ function documentSplitEvent(sender, args): void { } // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -99,8 +105,10 @@ function documentSplitEvent(sender: PdfDocument, args: PdfDocumentSplitEventArgs } // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); document.splitEvent = documentSplitEvent; @@ -112,5 +120,6 @@ function documentSplitEvent(sender, args): void { } // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md b/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md index 2f4a035f8..1094c9d54 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md @@ -9,12 +9,12 @@ documentation: UG The PDF allows you to extract the text from a particular page or the entire PDF document. +N> For redaction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. Please verify the platform's actual root directory where the `openjpeg` file is extracted. Depending on the platform, the root path may vary. Check which root folder is being used by reviewing the path referenced in the [Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/create-pdf-document-asp-net-core) page. + ## Working with basic text extraction This example demonstrates how to extract text from a PDF page using the `PdfDataExtractor` class. Basic text extraction allows retrieving plain text content from a PDF document. -N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. - {% tabs %} {% highlight typescript tabtitle="TypeScript" %} import { PdfDocument } from '@syncfusion/ej2-pdf'; @@ -30,8 +30,10 @@ let text: string = extractor.extractText(); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Initialize a new instance of the PdfDataExtractor class @@ -65,8 +67,10 @@ let text: string = extractor.extractText({ startPageIndex: 0, endPageIndex: docu document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Initialize a new instance of the PdfDataExtractor class @@ -135,18 +139,38 @@ let document: PdfDocument = new PdfDocument(data); let extractor: PdfDataExtractor = new PdfDataExtractor(document); // Extracts text from the PDF Page based on its line let textCollection: TextLine[] = extractor.extractTextLines({ startPageIndex: 0, endPageIndex: document.pageCount - 1}); +// Gets the bounds of the text line +let lineBounds = textLine[0].bounds; +// Gets the single line of extracted text from the PDF page +let line = textLine[0].text; +// Gets the page index of the text line extracted +let pageIndex = textLine[0].pageIndex; // Save the document document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Initialize a new instance of the PdfDataExtractor class var extractor = new ej.pdfdataextract.PdfDataExtractor(document); // Extracts text from the PDF Page based on its line -var textCollection = extractor.extractTextLines({ startPageIndex: 0, endPageIndex: document.pageCount - 1 }); +var textLine = extractor.extractTextLines({ startPageIndex: 0, endPageIndex: document.pageCount - 1 }); +// Gets the bounds of the text line +var lineBounds = textLine[0].bounds; +// Gets the single line of extracted text from the PDF page +var line = textLine[0].text; +// Gets the page index of the text line extracted +var pageIndex = textLine[0].pageIndex; +// Gets the bounds of the text line. +var lineBounds = textLine.bounds; +// Gets the single line of extracted text from the PDF page. +var line = textLine.text; +// Gets the page index of the text line extracted. +var pageIndex = textLine.pageIndex; // Save the document document.save('Output.pdf'); // Close the document @@ -165,48 +189,29 @@ import { PdfDocument } from '@syncfusion/ej2-pdf'; import { PdfDataExtractor, TextLine, TextWord } from '@syncfusion/ej2-pdf-data-extract'; // Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); -// Create a PdfDataExtractor instance for the given PDF document -let extractor: PdfDataExtractor = new PdfDataExtractor(document); -// Extract text lines from all pages in the document -let textCollection: TextLine[] = extractor.extractTextLines({ - startPageIndex: 0, - endPageIndex: document.pageCount - 1 - }); -let page: PdfPage; -// Iterate through each extracted text line -for (let i: number = 0; i < textCollection.length; i++) -{ - // Get the page corresponding to the current text line - page = document.getPage(textCollection[i].pageIndex); - // Retrieve all words from the current text line - let wordCollection: TextWord[] = textCollection[i].words; - // Iterate through each word in the line - for (let j: number = 0; j < wordCollection.length; j++) - { - let word: TextWord = wordCollection[j]; - if (word) - { - // Iterate through each glyph (character shape) in the word - for (let k: number = 0; k < word.glyphs.length; k++) - { - let glyph: TextGlyph = word.glyphs[k]; - // Draw a rectangle around the glyph's bounding box on the page - page.graphics.drawRectangle( - glyph.bounds[0], // X-coordinate - glyph.bounds[1], // Y-coordinate - glyph.bounds[2], // Width - glyph.bounds[3], // Height - new PdfPen([238, 130, 238], 1) // Violet-colored pen with thickness 1 - ); - } - } - } -} -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); +let destination: PdfDocument = new PdfDocument(data1); +// Load another existing PDF document +let sourceDocument1: PdfDocument = new PdfDocument(data2); +// Options to customize the import of PDF pages +let options: PdfPageImportOptions = new PdfPageImportOptions(); +// Sets the target page index to insert the imported pages +options.targetIndex = 3; +// Import 5 pages from page index 2 to 6 into the destination document and insert them at index 3 +destination.importPageRange(sourceDocument1, 2, 6, options); +// Load another existing PDF document +let sourceDocument2: PdfDocument = new PdfDocument(data3); +// Options to customize the import of PDF pages +options = new PdfPageImportOptions(); +// Sets the target page index to insert the imported pages +options.targetIndex = 7; +// Import 4 pages from page index 0 to 3 into the destination document and insert them at index 7 +destination.importPageRange(sourceDocument2, 0, 3, options); +// Save the output PDF +destination.save('Output.pdf'); +// Destroy the documents to free resources +destination.destroy(); +sourceDocument1.destroy(); +sourceDocument2.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} // Load an existing PDF document @@ -229,15 +234,7 @@ for (var i = 0; i < textCollection.length; i++) { for (var j = 0; j < wordCollection.length; j++) { var word = wordCollection[j]; if (word) { - // Iterate through each glyph (character shape) in the word - for (var k = 0; k < word.glyphs.length; k++) { - var glyph = word.glyphs[k]; - // Draw a rectangle around the glyph's bounding box on the page - page.graphics.drawRectangle( - { x: glyph.bounds[0], y: glyph.bounds[1], width: glyph.bounds[2], height: glyph.bounds[3] }, - new ej.pdf.PdfPen({ r: 238, g: 130, b: 238 }, 1) // Violet-colored pen with thickness 1 - ); - } + } } } diff --git a/Document-Processing/PDF/PDF-Library/javascript/Watermarks.md b/Document-Processing/PDF/PDF-Library/javascript/Watermarks.md index 657f350b9..3e0528602 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Watermarks.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Watermarks.md @@ -31,7 +31,6 @@ let state: PdfGraphicsState = graphics.save(); graphics.setTransparency(0.25); // Set the rotate transform graphics.rotateTransform(-45); -graphics.drawImage // Draw the string graphics.drawString('Created by Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); // Restore the graphics state @@ -40,8 +39,10 @@ graphics.restore(state); 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(); // Access first page @@ -56,7 +57,6 @@ var state = graphics.save(); graphics.setTransparency(0.25); // Set the rotate transform graphics.rotateTransform(-45); -graphics.drawImage // Draw the string graphics.drawString('Created by Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new ej.pdf.({r: 0, g: 0, b: 255})); // Restore the graphics state @@ -65,6 +65,7 @@ graphics.restore(state); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -97,8 +98,10 @@ graphics.restore(state); 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); // Access first page @@ -122,12 +125,13 @@ graphics.restore(state); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} ## Adding image watermark in PDF document -This example demonstrates how to add a image watermark using standard fonts in a PDF document by utilizing the `drawImage` method of the `PdfGraphics` class along with predefined font types from the `PdfStandardFont` class. The transparency can be applied to the images using `setTransparency` method. +This example demonstrates how to add a image watermark using standard fonts in a PDF document by utilizing the `drawImage` method of the `PdfGraphics` class. The transparency can be applied to the images using `setTransparency` method. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -320,36 +324,40 @@ Remove a watermark annotation from the page's annotation collection using the `P {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfAnnotationCollection, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfAnnotation} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); // Access first page let page: PdfPage = document.getPage(0); -// Check if the first annotation is a watermark, then remove it -let annotation: PdfAnnotationCollection = page.annotations[0]; -if (annotation instanceof PdfWatermarkAnnotation) { - // Remove the watermark annotation - page.annotations.removeAt(0); -} +// Get the first annotation is a watermark +let annotation: PdfAnnotation = page.annotations.at(0); +// Remove an annotation +page.annotations.remove(annotation); +// Remove an annotation from the collection +page.annotations.removeAt(1); // 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); // Access first page var page = document.getPage(0); -// Check if the first annotation is a watermark, then remove it -var annotation = page.annotations[0]; -if (annotation instanceof ej.pdf.PdfWatermarkAnnotation){ -page.annotations.removeAt(0); -} +// Get the first annotation is a watermark +var annotation = page.annotations.at(0); +// Remove an annotation +page.annotations.remove(annotation); +// Remove an annotation from specific index +page.annotations.removeAt(1); // Save the document document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} \ No newline at end of file From 07681d98793a34744873c4cd981e4ba37fb4722c Mon Sep 17 00:00:00 2001 From: sameerkhan001 Date: Wed, 17 Dec 2025 10:36:41 +0530 Subject: [PATCH 03/10] 999358-ug: Added proper changes. --- .../PDF/PDF-Library/javascript/Annotations.md | 81 ++- .../PDF/PDF-Library/javascript/Images.md | 12 + .../PDF/PDF-Library/javascript/Lists.md | 6 + .../javascript/Open-and-save-PDF-files.md | 4 +- .../PDF-Library/javascript/PDF-document.md | 80 +-- .../PDF/PDF-Library/javascript/PDF-pages.md | 249 ++++---- .../PDF/PDF-Library/javascript/Shapes.md | 546 ++++-------------- .../PDF/PDF-Library/javascript/Templates.md | 58 +- .../PDF/PDF-Library/javascript/Text.md | 6 +- 9 files changed, 345 insertions(+), 697 deletions(-) diff --git a/Document-Processing/PDF/PDF-Library/javascript/Annotations.md b/Document-Processing/PDF/PDF-Library/javascript/Annotations.md index aaa482521..fdfb1fd30 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Annotations.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Annotations.md @@ -1998,10 +1998,74 @@ This example demonstrates how to access a measurement annotation from a PDF page Common types of measurement annotations include: -* Line - Represents a straight distance between two points. -* Circle - Used to measure circular dimensions. -* Square - Defines rectangular or square measurements. -* Angle - Displays angular measurements between two intersecting lines. +* Line - Represents a straight distance between two points.(distance) +* Circle - Used to measure circular dimensions.(Radius) +* Square - Defines rectangular or square measurements.(Area) +* Angle - Displays angular measurements between two intersecting lines.(degrees) + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfLineAnnotation, PdfAnnotationLineEndingStyle, PdfLineEndingStyle, PdfAnnotationCaption, PdfLineCaptionType, PdfMeasurementUnit} from '@syncfusion/ej2-pdf'; + +// Creates a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Creates a new line annotation. +let lineAnnotation: PdfLineAnnotation = new PdfLineAnnotation({ x: 80, y: 420 }, { x: 150, y: 420 }, { + text: 'Line Annotation', + author: 'Syncfusion', + color: { r: 255, g: 0, b: 0 }, + innerColor: { r: 255, g: 255, b: 0 }, + lineEndingStyle: new PdfAnnotationLineEndingStyle({ begin: PdfLineEndingStyle.circle, end: PdfLineEndingStyle.diamond }), + opacity: 0.5, + measurementUnit: PdfMeasurementUnit.centimeter +}); +// Assigns the leader line +lineAnnotation.leaderExt = 0; +lineAnnotation.leaderLine = 0; +// Assigns the line caption type +lineAnnotation.caption = new PdfAnnotationCaption({ cap: true, type: PdfLineCaptionType.inline }); +// Adds annotation to the page +page.annotations.add(lineAnnotation); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} + +// Creates a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Creates a new line annotation. +var lineAnnotation = new ej.pdf.PdfLineAnnotation({x:80,y:420},{x:150,y:420},{ +text:'Line Annotation', +author:'Syncfusion', +color:{r:255,g:0,b:0}, +innerColor:{r:255,g:255,b:0}, +lineEndingStyle:new ej.pdf.PdfAnnotationLineEndingStyle({begin:ej.pdf.PdfLineEndingStyle.circle,end:ej.pdf.PdfLineEndingStyle.diamond}), +opacity:0.5, +measurementUnit: PdfMeasurementUnit.centimeter +}); +// Assigns the leader line +lineAnnotation.leaderExt = 0; +lineAnnotation.leaderLine = 0; +// Assigns the line caption type +lineAnnotation.caption = new ej.pdf.PdfAnnotationCaption({cap:true,type:ej.pdf.PdfLineCaptionType.inline}); +// Adds annotation to the page +page.annotations.add(lineAnnotation); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a measurement annotation in an existing PDF document. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -2174,12 +2238,7 @@ N> Setting `document.flatten = true;` flattens all interactive elements in the P ## Importing annotations -This example demonstrates how to import annotations into a PDF document using the PdfDocument. `importAnnotations` method. The DataFormat enum specifies the format of the annotation data you are importing or exporting: - -* fdf (Forms Data Format): Compact, PDF specific key/value representation. -* xfdf (XML Forms Data Format): XML-based FDF for wider tool interoperability. -* json: Human readable and easy to parse in web apps/services. -* xml: Generic XML structure suitable for systems that prefer XML processing. +This example demonstrates how to import annotations into a PDF document using the PdfDocument. `importAnnotations` method. The DataFormat enum specifies the format of the annotation data being imported, such as FDF, XFDF, JSON, or XML. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -2210,7 +2269,7 @@ pdfDocument.destroy(); ## Exporting annotations -This example demonstrates how to export annotations from a PDF document using the PdfDocument.exportAnnotations method. +This example demonstrates how to export annotations from a PDF document using the PdfDocument.exportAnnotations method. The DataFormat enum specifies the format of the annotation data being exported, such as FDF, XFDF, JSON, or XML. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} diff --git a/Document-Processing/PDF/PDF-Library/javascript/Images.md b/Document-Processing/PDF/PDF-Library/javascript/Images.md index f4117c592..999733c25 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Images.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Images.md @@ -34,8 +34,10 @@ image.draw(graphics, { x: 10, y: 10}); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add a page @@ -50,6 +52,7 @@ image.draw(graphics, { x: 10, y: 10 }); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -75,8 +78,10 @@ image.draw(graphics, { x: 10, y: 10}); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access first page @@ -91,6 +96,7 @@ image.draw(graphics, {x: 10, y: 10}); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -121,8 +127,10 @@ graphics.restore(state); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add a page @@ -142,6 +150,7 @@ graphics.restore(state); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -177,8 +186,10 @@ graphics.restore(state); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add a page @@ -203,5 +214,6 @@ graphics.restore(state); document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Lists.md b/Document-Processing/PDF/PDF-Library/javascript/Lists.md index f5d02b039..dd86af9dc 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Lists.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Lists.md @@ -43,8 +43,10 @@ list.draw(page, { x: 0, y: 20, width: 500, height: 700 }); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -68,6 +70,7 @@ list.draw(page, { x: 0, y: 20, width: 500, height: 700 }); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -104,8 +107,10 @@ list.draw(page, { x: 0, y: 20, width: 500, height: 700 }); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load the existing document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -129,5 +134,6 @@ list.draw(page, { x: 0, y: 20, width: 500, height: 700 }); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Open-and-save-PDF-files.md b/Document-Processing/PDF/PDF-Library/javascript/Open-and-save-PDF-files.md index c6e44386b..419592739 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Open-and-save-PDF-files.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Open-and-save-PDF-files.md @@ -72,11 +72,11 @@ Open an encrypted PDF document using the `PdfDocument` class by providing the co {% tabs %} {% highlight typescript tabtitle="TypeScript" %} // Load an existing PDF document with password -let document: PdfDocument = new PdfDocument(data, "password"); +let document: PdfDocument = new PdfDocument(data, 'password'); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} // Load an existing PDF document with password -var document = new ej.pdf.PdfDocument(data, "password"); +var document = new ej.pdf.PdfDocument(data, 'password'); {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md b/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md index 63655370a..9033ea0f6 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md +++ b/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md @@ -40,6 +40,7 @@ document.save('Output.pdf'); document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Create a new PDF page settings instance @@ -61,65 +62,7 @@ graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 document.save('Output.pdf'); // Close the document document.destroy(); -{% endhighlight %} -{% endtabs %} - -## Creating sections in a PDF - -This example demonstrates how to create a section in a PDF document with custom page settings. It shows how to configure rotation, orientation, margins, and page size using `PdfPageSettings`. The `PdfSection` class is used to apply different page customizations within a single PDF document. -{% tabs %} -{% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfPageSettings, PdfRotationAngle, PdfMargins, PdfPageOrientation, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; - -// Create a new PDF document -let document: PdfDocument = new PdfDocument(); -// Create a new PDF page settings with custom options -let pageSettings = new PdfPageSettings({ - orientation: PdfPageOrientation.landscape, - size: { width: 842, height: 595 }, - margins: new PdfMargins(40), - rotation: PdfRotationAngle.angle90 -}); -// Add a section to the document with the specified settings -let section: PdfSection = document.addSection(pageSettings); -// Add a page -let page: PdfPage = section.addPage(); -// Get graphics from the page -let graphics: PdfGraphics = page.graphics; -// Set font -let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); -// Draw text -graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% highlight javascript tabtitle="JavaScript" %} -// Create a new PDF document -var document = new ej.pdf.PdfDocument(); -// Create a new PDF page settings with custom options -let pageSettings = new ej.pdf.PdfPageSettings({ - orientation: ej.pdf.PdfPageOrientation.landscape, - size: { width: 842, height: 595 }, - margins: new ej.pdf.PdfMargins(40), - rotation: ej.pdf.PdfRotationAngle.angle90 -}); -// Add a section to the document with the specified settings -var section = document.addSection(pageSettings); -// Add a page -var page = section.addPage(); -// Get graphics from the page -var graphics = page.graphics; -// Set font -var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); -// Draw text -graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); {% endhighlight %} {% endtabs %} @@ -166,20 +109,14 @@ let language = documentProperties.language; let creationDate = documentProperties.creationDate; // Gets the modification date of the PDF document let modificationDate = documentProperties.modificationDate; -// Add a page -let page: PdfPage = document.addPage(); -// Get graphics from the page -let graphics: PdfGraphics = page.graphics; -// Set font -let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); -// Draw text -graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); // Save the document document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a PDF document var document = new ej.pdf.PdfDocument(); // Set or update document properties @@ -214,14 +151,6 @@ var language = documentProperties.language; var creationDate = documentProperties.creationDate; // Gets the modification date of the PDF document var modificationDate = documentProperties.modificationDate; -// Add a page -var page = document.addPage(); -// Get graphics from the page -var graphics = page.graphics; -// Set font -var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); -// Draw text -graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); // Save the document document.save('Output.pdf'); // Close the document @@ -253,8 +182,10 @@ graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a PDF document var document = new ej.pdf.PdfDocument(); // Disable incremental update to rewrite the entire file @@ -271,5 +202,6 @@ graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md b/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md index 0836d7101..7d8b5d844 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md +++ b/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md @@ -9,6 +9,8 @@ documentation: UG The PDF provides support to add, remove and rearrange pages in PDF documents, enabling complete control over page management for creating dynamic and customized PDFs. +N> The PDF page is created using the default settings, which include A4 page size, portrait orientation, and 40 point page margins. + ## Adding a new page to the document The following code sample demonstrates how to add a `PdfPage` to a PDF document. When multiple pages are added, each new page is appended to the end of the document. @@ -21,32 +23,23 @@ import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, Pdf let document: PdfDocument = new PdfDocument(); // Add a page let page: PdfPage = document.addPage(); -// Get graphics from the page -let graphics: PdfGraphics = page.graphics; -// Set font -let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); -// Draw text -graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); // Save the document document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a PDF document var document = new ej.pdf.PdfDocument(); // Add a page var page = document.addPage(); -// Get graphics from the page -var graphics = page.graphics; -// Set font -var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); -// Draw text -graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); // Save the document document.save('Output.pdf'); // Close the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -61,15 +54,9 @@ import { PdfDocument, PdfPage, PdfStandardFont, PdfGraphics, PdfFontFamily, PdfF // Create a new PDF document let document: PdfDocument = new PdfDocument(); // Define page settings with margins -let settings: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(40)}); +let settings: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(50)}); // Add a page let page: PdfPage = document.addPage(settings); -// Get graphics from the page -let graphics: PdfGraphics = page.graphics; -// Set font -let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); -// Draw text -graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); // Save the document document.save('Output.pdf'); // Close the document @@ -79,15 +66,9 @@ document.destroy(); // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Define page settings with margins -var settings = new ej.pdf.PdfPageSettings({margins: new PdfMargins(40)}); +var settings = new ej.pdf.PdfPageSettings({margins: new PdfMargins(50)}); // Add a page var page = document.addPage(settings); -// Get graphics from the page -var graphics = page.graphics; -// Set font -var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); -// Draw text -graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); // Save the document document.save('Output.pdf'); // Close the document @@ -103,67 +84,129 @@ This example demonstrates how to add sections with different page settings in a {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfGraphics, PdfBrush, PdfStringFormat, PdfPageSettings, PdfPageOrientation, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); -// Define page settings with margins -let settings: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(40), size: { width: 595, height: 842}, orientation: PdfPageOrientation.landscape}); -// Add section1 -let section: PdfSection = document.addSection(settings); -// Add a page -let page: PdfPage = section.addPage(); -// Get graphics from the page -let graphics: PdfGraphics = page.graphics; -// Set font -let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); -// Draw text -graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); -// Define page settings with margins -let settings1: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(40), size: { width: 595, height: 842}, orientation: PdfPageOrientation.landscape}); -// Add section1 -let section1: PdfSection = document.addSection(settings1); -// Add a page -let page1: PdfPage = section1.addPage(); -// Get graphics from the page -let graphics1 = page1.graphics; -// Draw text -graphics1.drawString('Hello World', font, { x: 40, y: 60, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); -// Save the PDF document +// Settings A4 Portrait with 40pt margins +const settingsA4Portrait: PdfPageSettings = new PdfPageSettings({ + margins: new PdfMargins(40), + size: { width: 595, height: 842 }, // A4: 595x842 pt + orientation: PdfPageOrientation.portrait +}); +// Settings A5 Portrait with 30pt margins (different settings) +const settingsA5Portrait: PdfPageSettings = new PdfPageSettings({ + margins: new PdfMargins(30), + size: { width: 420, height: 595 }, // A5: 420x595 pt + orientation: PdfPageOrientation.portrait +}); +// SECTION 1: First page draw rectangle (A4 portrait) +const section1: PdfSection = document.addSection(settingsA4Portrait); +const page1: PdfPage = section1.addPage(); +const g1: PdfGraphics = page1.graphics; +const rectPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); // black 1pt outline +g1.drawRectangle({ x: 60, y: 80, width: 200, height: 120 }, rectPen); +// SECTION 1: Second page draw rectangle (A4 landscape) +const section2: PdfSection = document.addSection(settingsA4Portrait); +const page2: PdfPage = section2.addPage(); +const g2: PdfGraphics = page2.graphics; +g2.drawRectangle({ x: 80, y: 100, width: 250, height: 150 }, rectPen); +//Prepare font once for text pages +const font: PdfStandardFont = document.embedFont( + PdfFontFamily.helvetica, + 14, + PdfFontStyle.regular +); +const textBrush = new PdfBrush({ r: 0, g: 0, b: 0 }); // black text +// SECTION 3: Third page draw string (A5 portrait, 30pt margins) +const section3: PdfSection = document.addSection(settingsA5Portrait); +const page3: PdfPage = section3.addPage(); +const g3: PdfGraphics = page3.graphics; +g3.drawString( + 'Hello from A5 Portrait with 30pt margins!', + font, + { x: 40, y: 70, width: 300, height: 50 }, + textBrush, + new PdfStringFormat(PdfTextAlignment.left) +); +// SECTION 4: Fourth page draw string (A5 portrait, 30pt margins) +const section4: PdfSection = document.addSection(settingsA5Portrait); +const page4: PdfPage = section4.addPage(); +const g4: PdfGraphics = page4.graphics; +g4.drawString( + 'Hello from A5 Portrait with 30pt margins!', + font, + { x: 60, y: 90, width: 400, height: 50 }, + textBrush, + new PdfStringFormat(PdfTextAlignment.left) +); +// Save the PDF document.save('Output.pdf'); -// Close and dispose the document +// Close the dcument document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); -// Create a new PDF page settings instance -// Define page settings with margins -var settings: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(40), size: { width: 595, height: 842}, orientation: PdfPageOrientation.landscape}); -// Add section1 -var section: PdfSection = document.addSection(settings); -// Add a page -var page: PdfPage = section.addPage(); -// Get graphics from the page -var graphics = page.graphics; -// Set font -var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); -// Draw text -graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); -// Define page settings with margins -var settings1: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(40), size: { width: 595, height: 842}, orientation: PdfPageOrientation.landscape}); -// Add section1 -var section1: PdfSection = document.addSection(settings1); -// Add a page -var page1: PdfPage = section1.addPage(); -// Get graphics from the page -var graphics1 = page1.graphics; -// Draw text -graphics1.drawString('Hello World', font, { x: 40, y: 60, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); -// Save the PDF document -document.save('Output.pdf'); -// Close and dispose the document +// Settings A4 Portrait with 40pt margins +var settingsA4Portrait = new ej.pdf.PdfPageSettings({ + margins: new ej.pdf.PdfMargins(40), + size: { width: 595, height: 842 }, + orientation: ej.pdf.PdfPageOrientation.portrait +}); +// Settings A5 Portrait with 30pt margins +var settingsA5Portrait = new ej.pdf.PdfPageSettings({ + margins: new ej.pdf.PdfMargins(30), + size: { width: 420, height: 595 }, + orientation: ej.pdf.PdfPageOrientation.portrait +}); +// SECTION 1 First page (A4 portrait) draw rectangle +var section1 = document.addSection(settingsA4Portrait); +var page1 = section1.addPage(); +var g1 = page1.graphics; +var rectPen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +g1.drawRectangle({ x: 60, y: 80, width: 200, height: 120 }, rectPen); +// SECTION 2 Second page (A4 portrait again) draw rectangle +var section2 = document.addSection(settingsA4Portrait); +var page2 = section2.addPage(); +var g2 = page2.graphics; +g2.drawRectangle({ x: 80, y: 100, width: 250, height: 150 }, rectPen); +// Prepare font once for text pages +var font = document.embedFont( + ej.pdf.PdfFontFamily.helvetica, + 14, + ej.pdf.PdfFontStyle.regular +); +var textBrush = new ej.pdf.PdfBrush({ r: 0, g: 0, b: 0 }); +// SECTION 3 Third page draw string (A5 portrait) +var section3 = document.addSection(settingsA5Portrait); +var page3 = section3.addPage(); +var g3 = page3.graphics; +g3.drawString( + "Hello from A5 Portrait with 30pt margins!", + font, + { x: 40, y: 70, width: 300, height: 50 }, + textBrush, + new ej.pdf.PdfStringFormat(ej.pdf.PdfTextAlignment.left) +); +// SECTION 4 Fourth page draw string (A5 portrait) +var section4 = document.addSection(settingsA5Portrait); +var page4 = section4.addPage(); +var g4 = page4.graphics; +gg4.drawString( + "Hello from A5 Portrait with 30pt margins!", + font, + { x: 60, y: 90, width: 400, height: 50 }, + textBrush, + new ej.pdf.PdfStringFormat(ej.pdf.PdfTextAlignment.left) +); +// Save PDF +document.save("Output.pdf"); +// Close PDF document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -181,8 +224,10 @@ let document: PdfDocument = new PdfDocument(data); let count: number = document.pageCount; // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Gets the page count @@ -192,41 +237,6 @@ document.destroy(); {% endhighlight %} {% endtabs %} -## Importing pages from an existing document - -This example demonstrates how to import pages from an existing PDF document into a new PDF document using the `importPageRange` method of the `PdfDocument` class. This method allows you to specify a start and end index to copy a range of pages from the source document into the target document. - -{% tabs %} -{% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument } from '@syncfusion/ej2-pdf'; - -// Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); -// Define start and end page indices -let startIndex = 0; -let endIndex = document.pageCount - 1; -// Import all pages from the loaded document into the new document -document.importPageRange(document, startIndex, endIndex); -// Save the new document -document.save('Output.pdf'); -// Close the loaded document -document.destroy(); -{% endhighlight %} -{% highlight javascript tabtitle="JavaScript" %} -// Load an existing PDF document -var document = new ej.pdf.PdfDocument(data); -// Define start and end page indices -var startIndex = 0; -var endIndex = document.pageCount - 1; -// Import all pages from the loaded document into the new document -document.importPageRange(document, startIndex, endIndex); -// Save the new document -document.save('Output.pdf'); -// Close the loaded document -document.destroy(); -{% endhighlight %} -{% endtabs %} - ## Rearranging pages in an existing document This example demonstrates how to rearrange the pages in an existing PDF document using the `reorderPages` method of the `PdfDocument` class. The method accepts an array of page indices that defines the new order of pages within the document. @@ -243,8 +253,10 @@ document.reorderPages([3, 2, 1]); 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); // Reorders the pages in the PDF document @@ -253,6 +265,7 @@ document.reorderPages([3, 2, 1]); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -275,8 +288,10 @@ document.removePage(0); 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); // Removes the last page @@ -288,6 +303,7 @@ document.removePage(0); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -315,8 +331,10 @@ graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 let data = document.save('Output.pdf'); // Close and dispose the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Define page settings with rotate @@ -333,6 +351,7 @@ graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 var data = document.save('Output.pdf'); // Close and dispose the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -354,8 +373,10 @@ page.rotation = PdfRotationAngle.angle180; 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); // Access first page @@ -366,6 +387,7 @@ page.rotation = ej.pdf.PdfRotationAngle.angle180; document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} @@ -393,8 +415,10 @@ document.importPage(0, options); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document let document = new ej.pdf.PdfDocument(data); // Options to customize the support of import PDF pages. @@ -411,5 +435,6 @@ document.importPage(0, options); document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Shapes.md b/Document-Processing/PDF/PDF-Library/javascript/Shapes.md index 64dd54cfa..aa5424fe6 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Shapes.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Shapes.md @@ -10,107 +10,19 @@ documentation: UG The PDF has support for adding the below shapes. * Line -* Curve -* Path -* Text * Rectangle +* Rounded rectangle +* Ellipse +* Polygone * Pie * Arc * Bezier -* Ellipse +* Path ## Adding Shapes to a PDF document JavaScript PDF supports adding shapes with different types of brushes like solid bush, gradient brush, tiling brush, and image brush along with various color spaces and transparency levels. -### Polygon - -This example demonstrates how to draw a polygon shape in a PDF document using the `drawPolygon` method of the `PdfGraphics` class. - -{% tabs %} -{% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; - -// Create a new PDF document -let document: PdfDocument = new PdfDocument(); -// Add a page -let page: PdfPage = document.addPage(); -// Get graphics from the page -let graphics: PdfGraphics = page.graphics; -// Create a new pen -let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Define the polygon points -let points: Point[] = [{x: 10, y: 100}, { x: 10, y: 200}, { x: 100, y: 100}, { x: 100, y: 200}, { x: 55, y: 150}]; -// Draw the polygon on the page graphics -graphics.drawPolygon(points, pen); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% highlight javascript tabtitle="JavaScript" %} -// Create a new PDF document -var document = new ej.pdf.PdfDocument(); -// Add a page -var page = document.addPage(); -// Get graphics from the page -var graphics = page.graphics; -// Create a new pen -var pen = new ej.pdf.PdfPen({r:0,g:0,b:0},1); -// Define the polygon points -var points=[{x:10,y:100}, {x:10,y:200}, {x:100,y:100}, {x:100,y:200}, {x:55,y:150}]; -// Draw the polygon on the page graphics -graphics.drawPolygon(points,pen); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% endtabs %} - -The following code snippet explains how to draw a polygon in an existing PDF document. - -{% tabs %} -{% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf'; - -// Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); -// Access the first page -let page: PdfPage = document.getPage(0); -// Get graphics from the page -let graphics: PdfGraphics = page.graphics; -// Create a new pen -let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Define the polygon points -let points: Point[] = [{x: 10, y: 100}, { x: 10, y: 200}, { x: 100, y: 100}, { x: 100, y: 200}, { x: 55, y: 150}]; -// Draw the polygon on the page graphics -graphics.drawPolygon(points, pen); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% highlight javascript tabtitle="JavaScript" %} -// Create a new PDF document -var document = new ej.pdf.PdfDocument(data); -// Add a page -var page = document.getPage(0); -// Get graphics from the page -var graphics = page.graphics; -// Create a new pen -var pen = new ej.pdf.PdfPen({r:0,g:0,b:0},1); -// Define the polygon points -var points=[{x:10,y:100}, {x:10,y:200}, {x:100,y:100}, {x:100,y:200}, {x:55,y:150}]; -// Draw the polygon on the page graphics -graphics.drawPolygon(points,pen); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% endtabs %} - ### Line This example demonstrates how to draw a straight line in a PDF document using the `drawLine` method of the `PdfGraphics` class. @@ -152,69 +64,24 @@ document.destroy(); {% endhighlight %} {% endtabs %} -The following code snippet explains how to draw a line in an existing PDF document. - -{% tabs %} -{% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf'; - -// Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); -// Access the first page -let page: PdfPage = document.getPage(0); -// Get graphics from the page -let graphics: PdfGraphics = page.graphics; -// Create a new pen -let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw a line on the page graphics -graphics.drawLine(pen, { x: 10, y: 200}, { x: 100, y: 100}); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% highlight javascript tabtitle="JavaScript" %} -// Create a new PDF document -var document = new ej.pdf.PdfDocument(data); -// Add a page -var page = document.getPage(0); -// Get graphics from the page -var graphics = page.graphics; -// Create a new pen -var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw a line on the page graphics -graphics.drawLine(pen, { x: 10, y: 200 }, { x: 100, y: 100 }); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% endtabs %} - -### Path +### Rectangle -This example demonstrates how to draw a path in a PDF document using the `drawPath` method of the `PdfGraphics` class. +This example demonstrates how to draw a rectangle in a PDF document using the `drawRectangle` method of the `PdfGraphics` class. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfPen, PdfPath } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); // Add a page let page: PdfPage = document.addPage(); -// Create a new path -let path: PdfPath = new PdfPath(); // Gets the graphics of the PDF page let graphics: PdfGraphics = page.graphics; -// Create a new pen +// Create a new pen. let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Add lines to the path -path.addLine({ x: 10, y: 50}, { x: 200, y: 250}); -path.addLine({ x: 10, y: 150}, { x: 220, y: 250}); -path.addLine({ x: 10, y: 200}, { x: 240, y: 250}); -// Draw the path on the page graphics -graphics.drawPath(path, pen); +// Draw a rectangle on the page graphics. +graphics.drawRectangle({ x: 10, y: 20, width: 100, height: 200}, pen); // Save the document document.save('Output.pdf'); // Close the document @@ -225,18 +92,12 @@ document.destroy(); var document = new ej.pdf.PdfDocument(); // Add a page var page = document.addPage(); -// Create a new path -var path = new ej.pdf.PdfPath(); // Gets the graphics of the PDF page var graphics = page.graphics; -// Create a new pen +// Create a new pen. var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Add lines to the path -path.addLine({ x: 10, y: 50 }, { x: 200, y: 250 }); -path.addLine({ x: 10, y: 150 }, { x: 220, y: 250 }); -path.addLine({ x: 10, y: 200 }, { x: 240, y: 250 }); -// Draw the path on the page graphics -graphics.drawPath(path, pen); +// Draw a rectangle on the page graphics. +graphics.drawRectangle({ x: 10, y: 20, width: 100, height: 200 }, pen); // Save the document document.save('Output.pdf'); // Close the document @@ -244,140 +105,67 @@ document.destroy(); {% endhighlight %} {% endtabs %} -The following code snippet explains how to draw path in an existing PDF document. +### Rounded rectangle + +This example demonstrates how to draw a rounded rectangle in a PDF document using the `drawRoundedRectangle` method of the `PdfGraphics` class. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfPen, PdfPath } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfGraphics, PdfPen, PdfBrush, drawRoundedRectangle } from '@syncfusion/ej2-pdf'; // Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); +let document: PdfDocument = new PdfDocument(); // Access the first page -let page: PdfPage = document.getPage(0); -// Create a new path -let path: PdfPath = new PdfPath(); -// Gets the graphics of the PDF page +let page: PdfPage = document.addPage(); +// Get the graphics of the PDF page let graphics: PdfGraphics = page.graphics; -// Create a new pen +// Create a new pen (black, 1pt) let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Add lines to the path -path.addLine({ x: 10, y: 50}, { x: 200, y: 250}); -path.addLine({ x: 10, y: 150}, { x: 220, y: 250}); -path.addLine({ x: 10, y: 200}, { x: 240, y: 250}); -// Draw the path on the page graphics -graphics.drawPath(path, pen); +// Create a new brush (blue fill) +let brush: PdfBrush = new PdfBrush({ r: 0, g: 0, b: 255 }); +// Draw a rounded rectangle on the page graphics +graphics.drawRoundedRectangle( + { x: 10, y: 20, width: 100, height: 200 }, + 5, + pen, + brush +); // Save the document -document.save('Output.pdf'); -// Close the document +document.save('output.pdf'); +// Destroy the document document.destroy(); -{% endhighlight %} -{% highlight javascript tabtitle="JavaScript" %} -// Create a new PDF document -var document = new ej.pdf.PdfDocument(data); -// Add a page -var page = document.getPage(0); -// Create a new path -var path = new ej.pdf.PdfPath(); -// Gets the graphics of the PDF page -var graphics = page.graphics; -// Create a new pen -var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Add lines to the path -path.addLine({ x: 10, y: 50 }, { x: 200, y: 250 }); -path.addLine({ x: 10, y: 150 }, { x: 220, y: 250 }); -path.addLine({ x: 10, y: 200 }, { x: 240, y: 250 }); -// Draw the path on the page graphics -graphics.drawPath(path, pen); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% endtabs %} - -### Text -This example demonstrates how to draw a text in a PDF document using the `drawString` method of the `PdfGraphics` class. - -{% tabs %} -{% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfGraphics, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; - -// Create a new PDF document -let document: PdfDocument = new PdfDocument(); -// Add a page -let page: PdfPage = document.addPage(); -// Get graphics from the page -let graphics: PdfGraphics = page.graphics; -// Set font -let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); -// Draw text -graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} -// Create a new PDF document + +// Create a PDF document var document = new ej.pdf.PdfDocument(); -// Add a page +// Access the first page var page = document.addPage(); -// Get graphics from the page +// Get the graphics of the PDF page var graphics = page.graphics; -// Set font -var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); -// Draw text -graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Create a new pen +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Create a new brush +var brush = new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 }); +// Draw a rounded rectangle on the page graphics +graphics.drawRoundedRectangle( + { x: 10, y: 20, width: 100, height: 200 }, + 5, + pen, + brush +); // Save the document -document.save('Output.pdf'); -// Close the document +document.save('output.pdf'); +// Destroy the document document.destroy(); -{% endhighlight %} -{% endtabs %} -The following code snippet explains how to draw text in an existing PDF document. - -{% tabs %} -{% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfStandardFont, PdfBrush } from '@syncfusion/ej2-pdf'; - -// Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); -// Access the first page -let page: PdfPage = document.getPage(0); -// Get graphics from the page -let graphics: PdfGraphics = page.graphics; -// Set font -let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); -// Draw text -graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% highlight javascript tabtitle="JavaScript" %} -// Create a new PDF document -var document = new ej.pdf.PdfDocument(data); -// Add a page -var page = document.getPage(0); -// Get graphics from the page -var graphics = page.graphics; -// Set font -var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); -// Draw text -graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); {% endhighlight %} {% endtabs %} -### Rectangle +### Ellipse -This example demonstrates how to draw a rectangle in a PDF document using the `drawRectangle` method of the `PdfGraphics` class. +This example demonstrates how to draw a ellipse in a PDF document using the `drawEllipse` method of the `PdfGraphics` class. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -389,10 +177,10 @@ let document: PdfDocument = new PdfDocument(); let page: PdfPage = document.addPage(); // Gets the graphics of the PDF page let graphics: PdfGraphics = page.graphics; -// Create a new pen. +// Create a new pen let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw a rectangle on the page graphics. -graphics.drawRectangle({ x: 10, y: 20, width: 100, height: 200}, pen); +// Draw an ellipse on the page graphics +graphics.drawEllipse({ x: 10, y: 20, width: 100, height: 200}, pen); // Save the document document.save('Output.pdf'); // Close the document @@ -405,49 +193,10 @@ var document = new ej.pdf.PdfDocument(); var page = document.addPage(); // Gets the graphics of the PDF page var graphics = page.graphics; -// Create a new pen. -var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw a rectangle on the page graphics. -graphics.drawRectangle({ x: 10, y: 20, width: 100, height: 200 }, pen); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% endtabs %} - -The following code snippet explains how to draw rectangle in an existing PDF document. - -{% tabs %} -{% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; - -// Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); -// Access the first page -let page: PdfPage = document.getPage(0); -// Gets the graphics of the PDF page -let graphics: PdfGraphics = page.graphics; -// Create a new pen. -let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw a rectangle on the page graphics. -graphics.drawRectangle({ x: 10, y: 20, width: 100, height: 200}, pen); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% highlight javascript tabtitle="JavaScript" %} -// Create a new PDF document -var document = new ej.pdf.PdfDocument(data); -// Add a page -var page = document.getPage(0); -// Gets the graphics of the PDF page -var graphics = page.graphics; -// Create a new pen. +// Create a new pen var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw a rectangle on the page graphics. -graphics.drawRectangle({ x: 10, y: 20, width: 100, height: 200 }, pen); +// Draw an ellipse on the page graphics +graphics.drawEllipse({ x: 10, y: 20, width: 100, height: 200 }, pen); // Save the document document.save('Output.pdf'); // Close the document @@ -455,9 +204,9 @@ document.destroy(); {% endhighlight %} {% endtabs %} -### Pie +### Polygon -This example demonstrates how to draw a pie in a PDF document using the `drawPie` method of the `PdfGraphics` class. +This example demonstrates how to draw a polygon shape in a PDF document using the `drawPolygon` method of the `PdfGraphics` class. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -467,12 +216,14 @@ import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; let document: PdfDocument = new PdfDocument(); // Add a page let page: PdfPage = document.addPage(); -// Gets the graphics of the PDF page +// Get graphics from the page let graphics: PdfGraphics = page.graphics; // Create a new pen let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw a pie slice on the page graphics -graphics.drawPie({ x: 10, y: 50, width: 200, height: 200}, 180, 60, pen); +// Define the polygon points +let points: Point[] = [{x: 10, y: 100}, { x: 10, y: 200}, { x: 100, y: 100}, { x: 100, y: 200}, { x: 55, y: 150}]; +// Draw the polygon on the page graphics +graphics.drawPolygon(points, pen); // Save the document document.save('Output.pdf'); // Close the document @@ -483,12 +234,14 @@ document.destroy(); var document = new ej.pdf.PdfDocument(); // Add a page var page = document.addPage(); -// Gets the graphics of the PDF page +// Get graphics from the page var graphics = page.graphics; // Create a new pen -var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw a pie slice on the page graphics -graphics.drawPie({ x: 10, y: 50, width: 200, height: 200 }, 180, 60, pen); +var pen = new ej.pdf.PdfPen({r:0,g:0,b:0},1); +// Define the polygon points +var points=[{x:10,y:100}, {x:10,y:200}, {x:100,y:100}, {x:100,y:200}, {x:55,y:150}]; +// Draw the polygon on the page graphics +graphics.drawPolygon(points,pen); // Save the document document.save('Output.pdf'); // Close the document @@ -496,16 +249,18 @@ document.destroy(); {% endhighlight %} {% endtabs %} -The following code snippet explains how to draw pie in an existing PDF document. +### Pie + +This example demonstrates how to draw a pie in a PDF document using the `drawPie` method of the `PdfGraphics` class. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; -// Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); -// Access the first page -let page: PdfPage = document.getPage(0); +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); // Gets the graphics of the PDF page let graphics: PdfGraphics = page.graphics; // Create a new pen @@ -519,9 +274,9 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} // Create a new PDF document -var document = new ej.pdf.PdfDocument(data); +var document = new ej.pdf.PdfDocument(); // Add a page -var page = document.getPage(0); +var page = document.addPage(); // Gets the graphics of the PDF page var graphics = page.graphics; // Create a new pen @@ -576,45 +331,6 @@ document.destroy(); {% endhighlight %} {% endtabs %} -The following code snippet explains how to draw arc in an existing PDF document. - -{% tabs %} -{% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; - -// Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); -// Access the first page -let page: PdfPage = document.getPage(0); -// Gets the graphics of the PDF page -let graphics: PdfGraphics = page.graphics; -// Create a new pen -let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw a aec slice on the page graphics -graphics.drawArc({ x: 10, y: 20, width: 100, height: 200}, 20, 30, pen); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% highlight javascript tabtitle="JavaScript" %} -// Create a new PDF document -var document = new ej.pdf.PdfDocument(data); -// Add a page -var page = document.getPage(0); -// Gets the graphics of the PDF page -var graphics = page.graphics; -// Create a new pen -var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw an arc slice on the page graphics -graphics.drawArc({ x: 10, y: 20, width: 100, height: 200 }, 20, 30, pen); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% endtabs %} - ### Bezier This example demonstrates how to draw a bezier in a PDF document using the `drawBezier` method of the `PdfGraphics` class. @@ -656,63 +372,30 @@ document.destroy(); {% endhighlight %} {% endtabs %} -The following code snippet explains how to draw bezier in an existing PDF document. - -{% tabs %} -{% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; - -// Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); -// Access the first page -let page: PdfPage = document.getPage(0); -// Gets the graphics of the PDF page -let graphics: PdfGraphics = page.graphics; -// Create a new pen -let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw a Bezier curve on the page graphics -graphics.drawBezier({ x: 50, y: 100}, { x: 200, y: 50}, { x: 100, y: 150}, { x: 150, y: 100}, pen); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% highlight javascript tabtitle="JavaScript" %} -// Create a new PDF document -var document = new ej.pdf.PdfDocument(data); -// Add a page -var page = document.getPage(0); -// Gets the graphics of the PDF page -var graphics = page.graphics; -// Create a new pen -var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw a Bezier curve on the page graphics -graphics.drawBezier({ x: 50, y: 100 }, { x: 200, y: 50 }, { x: 100, y: 150 }, { x: 150, y: 100 }, pen); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% endtabs %} - -### Ellipse +### Path -This example demonstrates how to draw a ellipse in a PDF document using the `drawEllipse` method of the `PdfGraphics` class. +This example demonstrates how to draw a path in a PDF document using the `drawPath` method of the `PdfGraphics` class. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfPen, PdfPath } from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); // Add a page let page: PdfPage = document.addPage(); +// Create a new path +let path: PdfPath = new PdfPath(); // Gets the graphics of the PDF page let graphics: PdfGraphics = page.graphics; // Create a new pen let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw an ellipse on the page graphics -graphics.drawEllipse({ x: 10, y: 20, width: 100, height: 200}, pen); +// Add lines to the path +path.addLine({ x: 10, y: 50}, { x: 200, y: 250}); +path.addLine({ x: 10, y: 150}, { x: 220, y: 250}); +path.addLine({ x: 10, y: 200}, { x: 240, y: 250}); +// Draw the path on the page graphics +graphics.drawPath(path, pen); // Save the document document.save('Output.pdf'); // Close the document @@ -723,51 +406,18 @@ document.destroy(); var document = new ej.pdf.PdfDocument(); // Add a page var page = document.addPage(); +// Create a new path +var path = new ej.pdf.PdfPath(); // Gets the graphics of the PDF page var graphics = page.graphics; // Create a new pen var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw an ellipse on the page graphics -graphics.drawEllipse({ x: 10, y: 20, width: 100, height: 200 }, pen); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% endtabs %} - -The following code snippet explains how to draw ellipse in an existing PDF document. - -{% tabs %} -{% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; - -// Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); -// Access the first page -let page: PdfPage = document.getPage(0); -// Gets the graphics of the PDF page -let graphics: PdfGraphics = page.graphics; -// Create a new pen -let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw an ellipse on the page graphics -graphics.drawEllipse({ x: 10, y: 20, width: 100, height: 200}, pen); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); -{% endhighlight %} -{% highlight javascript tabtitle="JavaScript" %} -// Create a new PDF document -var document = new ej.pdf.PdfDocument(data); -// Add a page -var page = document.getPage(0); -// Gets the graphics of the PDF page -var graphics = page.graphics; -// Create a new pen -var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); -// Draw an ellipse on the page graphics -graphics.drawEllipse({ x: 10, y: 20, width: 100, height: 200 }, pen); +// Add lines to the path +path.addLine({ x: 10, y: 50 }, { x: 200, y: 250 }); +path.addLine({ x: 10, y: 150 }, { x: 220, y: 250 }); +path.addLine({ x: 10, y: 200 }, { x: 240, y: 250 }); +// Draw the path on the page graphics +graphics.drawPath(path, pen); // Save the document document.save('Output.pdf'); // Close the document diff --git a/Document-Processing/PDF/PDF-Library/javascript/Templates.md b/Document-Processing/PDF/PDF-Library/javascript/Templates.md index c0d63d908..3efbd1ccf 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Templates.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Templates.md @@ -15,7 +15,7 @@ This example demonstrates how to create a new PDF template using the `PdfTemplat {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfTemplate, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfTemplate, PdfImage, PdfBitmap, PdfStandardFont, PdfBrush, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); @@ -27,14 +27,20 @@ let template: PdfTemplate = new PdfTemplate({ x: 100, y: 100, width: 400, height let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); // Draw the image into the template graphics template.graphics.drawImage(image, { x: 0, y: 0, width: 100, height: 50 }); +// Create a new font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 20, PdfFontStyle.regular); +// Draw the text into template graphics. +template.graphics.drawString('Created by Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); // Draw template to the page page.graphics.drawTemplate(template, { x: 0, y: 0, width: 100, height: 50 }); // Save the document document.save('output.pdf'); // Destroy the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add a page @@ -45,52 +51,10 @@ var template = new ej.pdf.PdfTemplate({ x: 100, y: 100, width: 400, height: 200 var image = new ej.pdf.PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); // Draw the image into the template graphics template.graphics.drawImage(image, { x: 0, y: 0, width: 100, height: 50 }); -// Draw template to the page -page.graphics.drawTemplate(template, { x: 0, y: 0, width: 100, height: 50 }); -// Save the document -document.save('output.pdf'); -// Destroy the document -document.destroy(); - -{% endhighlight %} -{% endtabs %} - -## Creating templates from existing PDF document - -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. - -{% tabs %} -{% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfTemplate, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf'; - -// Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); -// Get the first page -let page: PdfPage = document.getPage(0) as PdfPage; -// Create a template -let template: PdfTemplate = new PdfTemplate({ x: 100, y: 100, width: 400, height: 200 }); -// Create new image object by using JPEG image data as Base64 string format -let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); -// Draw the image into the template graphics -template.graphics.drawImage(image, { x: 0, y: 0, width: 100, height: 50 }); -// Draw template to the page -page.graphics.drawTemplate(template, { x: 0, y: 0, width: 100, height: 50 }); -// 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); -// Get the first page -var page = document.getPage(0); -// Create a template -var template = new ej.pdf.PdfTemplate({ x: 100, y: 100, width: 400, height: 200 }); -// Create new image object by using JPEG image data as Base64 string format -var image = new ej.pdf.PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); -// Draw the image into the template graphics -template.graphics.drawImage(image, { x: 0, y: 0, width: 100, height: 50 }); +// Create a new font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 20, ej.pdf.PdfFontStyle.regular); +// Draw the text into template graphics. +template.graphics.drawString('Created by Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new ej.pdf.PdfBrush({r: 0, g: 0, b: 255})); // Draw template to the page page.graphics.drawTemplate(template, { x: 0, y: 0, width: 100, height: 50 }); // Save the document diff --git a/Document-Processing/PDF/PDF-Library/javascript/Text.md b/Document-Processing/PDF/PDF-Library/javascript/Text.md index a338d0076..4020641b6 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Text.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Text.md @@ -195,7 +195,7 @@ import { PdfDocument, PdfPage, PdfTrueTypeFont, PdfBrush } from '@syncfusion/ej2 let document: PdfDocument = new PdfDocument(); // Add a page let page: PdfPage = document.addPage(); -// Set font +// Embed a TTF font into the PDF let font: PdfTrueTypeFont = document.embedFont(data, 10); // Draw text page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); @@ -209,7 +209,7 @@ document.destroy(); var document = new ej.pdf.PdfDocument(); // Add a page var page = document.addPage(); -// Set font +// Embed a TTF font into the PDF var font = document.embedFont(data, 10); // Draw text page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); @@ -302,7 +302,7 @@ document.destroy(); {% endhighlight %} {% endtabs %} -## LineLimit, ClipPath, NoClip properties in PdfStringFormat +## LineLimit, NoClip properties in PdfStringFormat **LineLimit:** When LineLimit is enabled, the provided string will be laid out within the specified bounds. If the LineLimit property is disabled, the layout will continue to fill any remaining space. The default value of the LineLimit property is true. From a990c7a9e681d2c02b72e8a1a720ebc6280ff3a9 Mon Sep 17 00:00:00 2001 From: sameerkhan001 Date: Wed, 17 Dec 2025 10:39:01 +0530 Subject: [PATCH 04/10] 999358-ug: Resolved Failures. --- .../PDF/PDF-Library/javascript/Image-Extraction.md | 2 +- .../PDF/PDF-Library/javascript/Merge-Document.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/PDF/PDF-Library/javascript/Image-Extraction.md b/Document-Processing/PDF/PDF-Library/javascript/Image-Extraction.md index 677f2dc5b..a63c88564 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Image-Extraction.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Image-Extraction.md @@ -13,7 +13,7 @@ N> For redaction features, you need to install the `@syncfusion/ej2-pdf-data-ext ## Extract Images from a PDF -This code demonstrates how to extract embedded images and their metadata from a PDF using `PdfDataExtractor`. It loads a PDF, retrieves all `PdfEmbeddedImage` entries across pages, accesses the first image's raw byte data, and reads its propertiesn format, page index, occurrence index, bounds, interpolation status, and masking flags before saving/disposing resources by destroying the document. +This code demonstrates how to extract embedded images and their metadata from a PDF using `PdfDataExtractor`. It loads a PDF, retrieves all `PdfEmbeddedImage` entries across pages, accesses the first image's raw byte data, and reads its properties format, page index, occurrence index, bounds, interpolation status, and masking flags before saving/disposing resources by destroying the document. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} diff --git a/Document-Processing/PDF/PDF-Library/javascript/Merge-Document.md b/Document-Processing/PDF/PDF-Library/javascript/Merge-Document.md index f1c4dca5f..c130416b1 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Merge-Document.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Merge-Document.md @@ -112,7 +112,7 @@ sourceDocument2.destroy(); ## Optimizing PDF resources when merging PDF documents -Imports a page from a source PDF into a destination document at a specific index with group form fiels, rotation and resource optimization using `PdfPageImportOptions` class. +Imports a page from a source PDF into a destination document at a specific index with group form fields, rotation and resource optimization using `PdfPageImportOptions` class. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} From 4dc8600396096d5b6cdf2268bcafc23bd25faf46 Mon Sep 17 00:00:00 2001 From: sameerkhan001 Date: Wed, 17 Dec 2025 11:25:41 +0530 Subject: [PATCH 05/10] 999358-ug: Resolved CI failures. --- .../PDF/PDF-Library/javascript/Create-PDF-document-react.md | 2 +- .../PDF/PDF-Library/javascript/Create-PDF-document-vue.md | 2 +- Document-Processing/PDF/PDF-Library/javascript/Shapes.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md index f0e0a605b..ded0cbd8e 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md @@ -34,7 +34,7 @@ cp -R ./node_modules/@syncfusion/ej2-pdf-data-extract/dist/openjpeg public/openj **Create a PDF document** : Add the script in `App.jsx` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. {% tabs %} -{% highlight jsx tabtitle="~/App.jsx" %} +{% highlight html tabtitle="~/App.jsx" %} import React from 'react'; export default function App() { diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md index 0d31abe76..e3d9d37f2 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md @@ -58,7 +58,7 @@ cp -R ./node_modules/@syncfusion/ej2-pdf-data-extract/dist/openjpeg public/js/op * **Create a PDF document** : Add the script in `App.vue` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. {% tabs %} -{% highlight vue tabtitle="~/App.vue" %} +{% highlight html tabtitle="~/App.vue" %}