diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 30f0b87ca..9efcc40c1 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -2587,8 +2587,10 @@
  • Hyperlinks
  • Layers
  • Watermarks
    • +
  • Merge PDF
  • Split PDF
  • Text Extraction
    • +
  • Image Extraction
  • Redaction
    • @@ -6005,7 +6007,7 @@ Does XlsIO support reading Excel from Azure Blob Storage?
  • - Does XlsIO support auto-correcting formulas? + Does XlsIO support auto-correcting formulas?
  • How are spaces in cell values handled by XlsIO during calculation? diff --git a/Document-Processing/PDF/PDF-Library/javascript/Annotations.md b/Document-Processing/PDF/PDF-Library/javascript/Annotations.md index 845574b92..3e7366ed3 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Annotations.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Annotations.md @@ -233,7 +233,7 @@ This example demonstrates how to add a free text annotation to a PDF page using {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfFreeTextAnnotation, PdfTextAlignment, PdfAnnotationBorder, PdfBorderStyle, PdfFreeTextAnnotation, PdfLineEndingStyle, PdfStandardFont, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfFreeTextAnnotation, PdfTextAlignment, PdfAnnotationIntent, PdfAnnotationBorder, PdfBorderStyle, PdfLineEndingStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; // Creates a new PDF document let document: PdfDocument = new PdfDocument(); @@ -246,7 +246,7 @@ let freeText = new PdfFreeTextAnnotation({ x: 250, y: 260, width: 180, height: 8 annotationIntent: PdfAnnotationIntent.freeTextCallout, calloutLines: [{ x: 200, y: 320 }, { x: 260, y: 300 }, { x: 260, y: 300 }], lineEndingStyle: PdfLineEndingStyle.openArrow, - font: new PdfStandardFont(PdfFontFamily.helvetica, 9, PdfFontStyle.italic), + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular), textMarkUpColor: { r: 40, g: 40, b: 40 }, innerColor: { r: 240, g: 248, b: 255 }, borderColor: { r: 0, g: 0, b: 0 }, @@ -295,7 +295,7 @@ The following code snippet explains how to add a free text annotation in an exis {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfFreeTextAnnotation, PdfTextAlignment, PdfAnnotationBorder, PdfBorderStyle, PdfFreeTextAnnotation, PdfLineEndingStyle, PdfStandardFont, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfAnnotationIntent, PdfFreeTextAnnotation, PdfTextAlignment, PdfAnnotationBorder, PdfBorderStyle, PdfLineEndingStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); @@ -308,7 +308,7 @@ let freeText = new PdfFreeTextAnnotation({ x: 250, y: 260, width: 180, height: 8 annotationIntent: PdfAnnotationIntent.freeTextCallout, calloutLines: [{ x: 200, y: 320 }, { x: 260, y: 300 }, { x: 260, y: 300 }], lineEndingStyle: PdfLineEndingStyle.openArrow, - font: new PdfStandardFont(PdfFontFamily.helvetica, 9, PdfFontStyle.italic), + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); textMarkUpColor: { r: 40, g: 40, b: 40 }, innerColor: { r: 240, g: 248, b: 255 }, borderColor: { r: 0, g: 0, b: 0 }, @@ -1030,7 +1030,7 @@ This example demonstrates how to add a document link annotation to a PDF page us {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfDocumentLinkAnnotation, PdfDestinationMode, PdfBorderStyle} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfDocumentLinkAnnotation, PdfDestination, PdfAnnotationBorder, PdfDestinationMode, PdfBorderStyle} from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); @@ -1077,7 +1077,7 @@ The following code snippet explains how to add a document link annotation in an {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfDocumentLinkAnnotation, PdfDestinationMode, PdfBorderStyle} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfDocumentLinkAnnotation, PdfDestination, PdfAnnotationBorder, PdfDestinationMode, PdfBorderStyle} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); @@ -2014,7 +2014,7 @@ document.destroy(); ## Modifying the annotations -This example demonstrates how to modify an existing annotation in a PDF page using the PdfAnnotation class. Modifying annotations allows updating properties such as position, color, content, or appearance, enabling customization and refinement of the document’s interactive elements. +This example demonstrates how to modify an existing annotation in a PDF page using the PdfAnnotation class. Modifying annotations allows updating properties such as position, color, content, or appearance, enabling customization and refinement of the document's interactive elements. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -2171,7 +2171,7 @@ This example demonstrates how to export annotations from a PDF document using th {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, Uint8Array} from '@syncfusion/ej2-pdf'; +import {PdfDocument} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); diff --git a/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md b/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md index 86c026505..ed93592c3 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md @@ -182,7 +182,7 @@ This example demonstrates how to remove bookmarks from the document at the speci {% tabs %} {% highlight javascript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfBookmarkBase} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); @@ -221,7 +221,7 @@ This example demonstrates how to removes all the bookmarks from the collection u {% tabs %} {% highlight javascript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfBookmarkBase} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfBookmarkBase} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); 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 fe7792e20..c9e755322 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 @@ -16,7 +16,7 @@ This guide explains how to integrate the JavaScript PDF library into an Angular ## Setup Angular Environment -You can use the [`Angular CLI`](https://github.com/angular/angular-cli) to setup your Angular applications. +You can use the [Angular CLI](https://github.com/angular/angular-cli) to setup your Angular applications. To install the latest Angular CLI globally use the following command. ```bash @@ -66,7 +66,7 @@ N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-da {% tabs %} {% highlight ts tabtitle="~/app.component.ts" %} -import { PdfDocument, PdfPage, PdfStandardFont, PdfPen, PdfBrush } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfStandardFont, PdfBrush } from '@syncfusion/ej2-pdf'; {% endhighlight %} {% endtabs %} 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 4d853981e..e2c165983 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 @@ -35,13 +35,11 @@ Step 5: **Add script reference** : Add the required scripts using the CDN inside {% endhighlight %} {% endtabs %} -N> Check out the following topics for including script references in an ASP.NET Core application to enable PDF creation using the Syncfusion® JavaScript PDF library: +N> Check out the following topics for including script references in an ASP.NET Core application to enable PDF creation using the Syncfusion® JavaScript PDF library: * [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) -Would you like me to **reformat this into a proper Syncfusion documentation style note block** (with icons and emphasis), or **convert it into a step-by-step guide for adding script references**? - 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. @@ -58,7 +56,7 @@ Step 6: **Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml // Create a new PDF document let pdf = new ej.pdf.PdfDocument(); // Add a new page - let page: ej.pdf.PdfPage = document.addPage(); + let page: ej.pdf.PdfPage = pdf.addPage(); // Get graphics from the page let graphics: ej.pdf.PdfGraphics = page.graphics; // Set font 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 d2430d7e1..de5328b41 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 @@ -51,7 +51,7 @@ Step 6: **Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml // Create a new PDF document let pdf = new ej.pdf.PdfDocument(); // Add a new page - let page: ej.pdf.PdfPage = document.addPage(); + let page: ej.pdf.PdfPage = pdf.addPage(); // Get graphics from the page let graphics: ej.pdf.PdfGraphics = page.graphics; // Set font 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 da0ca7c1f..3b3c24b6e 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 @@ -70,7 +70,6 @@ Step 4: **Create a PDF document** : Add the script in `index.html` by creating a }); } - {% endhighlight %} {% endtabs %} 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 a8d92eea0..2f9bcbb7f 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 @@ -58,7 +58,7 @@ document.getElementById('normalButton').onclick = (): void => { // Create a new PDF document let pdf = new PdfDocument(); // Add a new page - let page: PdfPage = document.addPage(); + let page: PdfPage = pdf.addPage(); // Get graphics from the page let graphics: PdfGraphics = page.graphics; // Set font 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 1c98ce511..168eb1f2d 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 @@ -62,7 +62,7 @@ export default { // Create a new PDF document const pdf = new ej.pdf.PdfDocument(); // Add a new page - const page: ej.pdf.PdfPage = document.addPage(); + const page: ej.pdf.PdfPage = pdf.addPage(); // Get graphics from the page const graphics: ej.pdf.PdfGraphics = page.graphics; // Set font diff --git a/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md b/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md index 8fa1f4e21..77ebc784a 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md +++ b/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md @@ -360,7 +360,7 @@ 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, PdfForm, PdfSignatureField, DigestAlgorithm, PdfCertificateInformation, CryptographicStandard} from '@syncfusion/ej2-pdf'; // Load the document let document: PdfDocument = new PdfDocument(data); @@ -420,7 +420,7 @@ This example demonstrates how to retrieve the configuration options of a digital {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfForm, PdfSignature, PdfSignatureOptions, PdfSignatureField, CryptographicStandard} from '@syncfusion/ej2-pdf'; // Load the document let document: PdfDocument = new PdfDocument(data); diff --git a/Document-Processing/PDF/PDF-Library/javascript/FormFields.md b/Document-Processing/PDF/PDF-Library/javascript/FormFields.md index ef5c71ca5..6ae3f4355 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/FormFields.md +++ b/Document-Processing/PDF/PDF-Library/javascript/FormFields.md @@ -19,33 +19,30 @@ This example demonstrates how to add a text box field to a PDF document using th {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfTextBoxField, PdfStandardFont} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfTextBoxField, PdfInteractiveBorder, PdfBorderStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); //Add the PDF page. let page: PdfPage = document.addPage(); -// Access the PDF form from the document -let form: PdfForm = document.form; -// Create a new text box field -let field: PdfTextBoxField = new PdfTextBoxField(page, 'FirstName', {x: 10, y: 10, width: 100, height: 50}); -// Set the default text value for the text box -field.text = 'John'; -// Apply a standard font (Helvetica) with size 10 to the text box -field.font = new PdfStandardFont(PdfFontFamily.helvetica, 10); -// Set the background color of the text box to red -field.backColor = { r: 255, g: 0, b: 0 }; -// Set the border color of the text box to blue -field.borderColor = { r: 0, g: 0, b: 255 }; -// Add a tooltip to the text box for user guidance -field.toolTip = 'FirstName'; -// Set the text color inside the text box to green -field.color = { r: 0, g: 255, b: 0 }; -// Add the configured text box field to the PDF form -form.add(field); +// Add new textbox field into PDF form +document.form.add(new PdfTextBoxField( + page, + 'FirstName', + { x: 50, y: 600, width: 200, height: 22 }, + { + toolTip: 'Enter your first name', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 122, b: 204 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + text: 'John', + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular) + } +)); // Save the document -document.save('Output.pdf'); -// Close the document +document.save('output.pdf'); +// Destroy the document document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} @@ -53,24 +50,21 @@ document.destroy(); var document = new ej.pdf.PdfDocument(); // Add the PDF page. var page = document.addPage(); -// Access the PDF form from the document -var form = document.form; -// Create a new text box field -var field = new ej.pdf.PdfTextBoxField(page, 'FirstName', { x: 10, y: 10, width: 100, height: 50 }); -// Set the default text value for the text box -field.text = 'John'; -// Apply a standard font (Helvetica) with size 10 to the text box -field.font = new ej.pdf.PdfStandardFont(ej.pdf.PdfFontFamily.helvetica, 10); -// Set the background color of the text box to red -field.backColor = { r: 255, g: 0, b: 0 }; -// Set the border color of the text box to blue -field.borderColor = { r: 0, g: 0, b: 255 }; -// Add a tooltip to the text box for user guidance -field.toolTip = 'FirstName'; -// Set the text color inside the text box to green -field.color = { r: 0, g: 255, b: 0 }; -// Add the configured text box field to the PDF form -form.add(field); +// Add new textbox field into PDF form +document.form.add(new PdfTextBoxField( + page, + 'FirstName', + { x: 50, y: 600, width: 200, height: 22 }, + { + toolTip: 'Enter your first name', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 122, b: 204 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + text: 'John', + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular) + } +)); // Save the document document.save('Output.pdf'); // Close the document @@ -82,33 +76,30 @@ The following code snippet explains how to add a text box field in an existing P {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfTextBoxField, PdfStandardFont} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfTextBoxField, PdfInteractiveBorder, PdfBorderStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; -// Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); -// Access the first page +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +//Add the PDF page. let page: PdfPage = document.getPage(0); -// Access the PDF form from the document -let form: PdfForm = document.form; -// Create a new text box field -let field: PdfTextBoxField = new PdfTextBoxField(page, 'FirstName', {x: 10, y: 10, width: 100, height: 50}); -// Set the default text value for the text box -field.text = 'John'; -// Apply a standard font (Helvetica) with size 10 to the text box -field.font = new PdfStandardFont(PdfFontFamily.helvetica, 10); -// Set the background color of the text box to red -field.backColor = { r: 255, g: 0, b: 0 }; -// Set the border color of the text box to blue -field.borderColor = { r: 0, g: 0, b: 255 }; -// Add a tooltip to the text box for user guidance -field.toolTip = 'FirstName'; -// Set the text color inside the text box to green -field.color = { r: 0, g: 255, b: 0 }; -// Add the configured text box field to the PDF form -form.add(field); +// Add new textbox field into PDF form +document.form.add(new PdfTextBoxField( + page, + 'FirstName', + { x: 50, y: 600, width: 200, height: 22 }, + { + toolTip: 'Enter your first name', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 122, b: 204 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + text: 'John', + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular) + } +)); // Save the document -document.save('Output.pdf'); -// Close the document +document.save('output.pdf'); +// Destroy the document document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} @@ -116,24 +107,21 @@ document.destroy(); var document = new ej.pdf.PdfDocument(data); // Access the first page var page = document.getPage(0); -// Access the PDF form from the document -var form = document.form; -// Create a new text box field -var field = new ej.pdf.PdfTextBoxField(page, 'FirstName', { x: 10, y: 10, width: 100, height: 50 }); -// Set the default text value for the text box -field.text = 'John'; -// Apply a standard font (Helvetica) with size 10 to the text box -field.font = new ej.pdf.PdfStandardFont(ej.pdf.PdfFontFamily.helvetica, 10); -// Set the background color of the text box to red -field.backColor = { r: 255, g: 0, b: 0 }; -// Set the border color of the text box to blue -field.borderColor = { r: 0, g: 0, b: 255 }; -// Add a tooltip to the text box for user guidance -field.toolTip = 'FirstName'; -// Set the text color inside the text box to green -field.color = { r: 0, g: 255, b: 0 }; -// Add the configured text box field to the PDF form -form.add(field); +// Add new textbox field into PDF form +document.form.add(new ej.pdf.PdfTextBoxField( + page, + 'FirstName', + { x: 50, y: 600, width: 200, height: 22 }, + { + toolTip: 'Enter your first name', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 122, b: 204 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: ej.pdf.PdfBorderStyle.solid }), + text: 'John', + font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular) + } +)); // Save the document document.save('Output.pdf'); // Close the document @@ -147,29 +135,35 @@ This example demonstrates how to add a combo box field to a PDF document using t {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfComboBoxField} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfForm, PdfComboBoxField, PdfInteractiveBorder, PdfBorderStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; -// Create a new PDF document -let document: PdfDocument = new PdfDocument(); -// Add a page +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Add the first page of the document let page: PdfPage = document.addPage(); -// Access the PDF form -let form: PdfForm = document.form; -// Create a new combo box field -let field: PdfComboBoxField = new PdfComboBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 }); -// Add list items to the field -field.addItem(new PdfListFieldItem('English', 'English')); -field.addItem(new PdfListFieldItem('French', 'French')); -field.addItem(new PdfListFieldItem('German', 'German')); -// Set the selected index -field.selectedIndex = 2; -// Set the flag indicating whether the combo box allows multiple selections -field.multiSelect = true; -// Add the field into PDF form -form.add(field); +// Add new combobox field into PDF form +document.form.add(new PdfComboBoxField( + page, + 'Country', + { x: 50, y: 400, width: 180, height: 22 }, + { + items: [ + { text: 'United States', value: 'US' }, + { text: 'Canada', value: 'CA' }, + { text: 'Germany', value: 'DE' } + ], + toolTip: 'Choose a country', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + selectedIndex: 0, + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular) + } +)); // Save the document -document.save('Output.pdf'); -// Close the document +document.save('output.pdf'); +// Destroy the document document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} @@ -177,20 +171,26 @@ document.destroy(); var document = new ej.pdf.PdfDocument(); // Add a page var page = document.addPage(); -// Access the PDF form -var form = document.form; -// Create a new combo box field -var field = new ej.pdf.PdfComboBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 }); -// Add list items to the field -field.addItem(new ej.pdf.PdfListFieldItem('English', 'English')); -field.addItem(new ej.pdf.PdfListFieldItem('French', 'French')); -field.addItem(new ej.pdf.PdfListFieldItem('German', 'German')); -// Set the selected index -field.selectedIndex = 2; -// Set the flag indicating whether the combo box allows multiple selections -field.multiSelect = true; -// Add the field into PDF form -form.add(field); +// Add new combobox field into PDF form +document.form.add(new ej.pdf.PdfComboBoxField( + page, + 'Country', + { x: 50, y: 400, width: 180, height: 22 }, + { + items: [ + { text: 'United States', value: 'US' }, + { text: 'Canada', value: 'CA' }, + { text: 'Germany', value: 'DE' } + ], + toolTip: 'Choose a country', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: ej.pdf.PdfBorderStyle.solid }), + selectedIndex: 0, + font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular) + } +)); // Save the document document.save('Output.pdf'); // Close the document @@ -202,29 +202,35 @@ The following code snippet explains how to add a combo box field in an existing {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfComboBoxField} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfForm, PdfComboBoxField, PdfInteractiveBorder, PdfBorderStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); -// Access the first page +// 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 combo box field -let field: PdfComboBoxField = new PdfComboBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 }); -// Add list items to the field -field.addItem(new PdfListFieldItem('English', 'English')); -field.addItem(new PdfListFieldItem('French', 'French')); -field.addItem(new PdfListFieldItem('German', 'German')); -// Set the selected index -field.selectedIndex = 2; -// Set the flag indicating whether the combo box allows multiple selections -field.multiSelect = true; -// Add the field into PDF form -form.add(field); +// Add new combobox field into PDF form +document.form.add(new PdfComboBoxField( + page, + 'Country', + { x: 50, y: 400, width: 180, height: 22 }, + { + items: [ + { text: 'United States', value: 'US' }, + { text: 'Canada', value: 'CA' }, + { text: 'Germany', value: 'DE' } + ], + toolTip: 'Choose a country', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + selectedIndex: 0, + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular) + } +)); // Save the document -document.save('Output.pdf'); -// Close the document +document.save('output.pdf'); +// Destroy the document document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} @@ -232,20 +238,26 @@ document.destroy(); var document = new ej.pdf.PdfDocument(data); // Access the first page var page = document.getPage(0); -// Access the PDF form -var form = document.form; -// Create a new combo box field -var field = new ej.pdf.PdfComboBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 }); -// Add list items to the field -field.addItem(new ej.pdf.PdfListFieldItem('English', 'English')); -field.addItem(new ej.pdf.PdfListFieldItem('French', 'French')); -field.addItem(new ej.pdf.PdfListFieldItem('German', 'German')); -// Set the selected index -field.selectedIndex = 2; -// Set the flag indicating whether the combo box allows multiple selections -field.multiSelect = true; -// Add the field into PDF form -form.add(field); +// Add new combobox field into PDF form +document.form.add(new ej.pdf.PdfComboBoxField( + page, + 'Country', + { x: 50, y: 400, width: 180, height: 22 }, + { + items: [ + { text: 'United States', value: 'US' }, + { text: 'Canada', value: 'CA' }, + { text: 'Germany', value: 'DE' } + ], + toolTip: 'Choose a country', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: ej.pdf.PdfBorderStyle.solid }), + selectedIndex: 0, + font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular) + } +)); // Save the document document.save('Output.pdf'); // Close the document @@ -259,27 +271,30 @@ This example demonstrates how to add a radio button field to a PDF document usin {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfRadioButtonListField} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfRadioButtonListField} from '@syncfusion/ej2-pdf'; -// Create a new PDF document -let document: PdfDocument = new PdfDocument(); +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); // Add a page -let page: PdfPage = document.addPage(); -// Access the PDF form -let form: PdfForm = document.form; -// Create a new radio button list field -let field: PdfRadioButtonListField = new PdfRadioButtonListField(page, 'Age'); -// Create and add first item -let first: PdfRadioButtonListItem = field.add('1-9', { x: 100, y: 140, width: 20, height: 20 }); -// Create and add second item -let second: PdfRadioButtonListItem = field.add('10-49', { x: 100, y: 170, width: 20, height: 20 }, page); -// Set selected index of the radio button list field -field.selectedIndex = 0; -// Add the field into PDF form -form.add(field); +let page: PdfPage = document.addPage(); +// Add new radio button list field into PDF form +document.form.add(new PdfRadioButtonListField( + page, + 'AgeGroup', + { + items: [ + { name: '18-25', bounds: { x: 50, y: 480, width: 14, height: 14 } }, + { name: '26-35', bounds: { x: 50, y: 460, width: 14, height: 14 } }, + { name: '36-45', bounds: { x: 50, y: 440, width: 14, height: 14 } } + ], + toolTip: 'Select an age range', + selectedIndex: 1, + allowUnisonSelection: false + } +)); // Save the document -document.save('Output.pdf'); -// Close the document +document.save('output.pdf'); +// Destroy the document document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} @@ -287,18 +302,21 @@ document.destroy(); var document = new ej.pdf.PdfDocument(); // Add a page var page = document.addPage(); -// Access the PDF form -var form = document.form; -// Create a new radio button list field -var field = new ej.pdf.PdfRadioButtonListField(page, 'Age'); -// Create and add first item -var first = field.add('1-9', { x: 100, y: 140, width: 20, height: 20 }); -// Create and add second item -var second = field.add('10-49', { x: 100, y: 170, width: 20, height: 20 }, page); -// Set selected index of the radio button list field -field.selectedIndex = 0; -// Add the field into PDF form -form.add(field); +// Add new radio button list field into PDF form +document.form.add(new ej.pdf.PdfRadioButtonListField( + page, + 'AgeGroup', + { + items: [ + { name: '18-25', bounds: { x: 50, y: 480, width: 14, height: 14 } }, + { name: '26-35', bounds: { x: 50, y: 460, width: 14, height: 14 } }, + { name: '36-45', bounds: { x: 50, y: 440, width: 14, height: 14 } } + ], + toolTip: 'Select an age range', + selectedIndex: 1, + allowUnisonSelection: false + } +)); // Save the document document.save('Output.pdf'); // Close the document @@ -310,24 +328,27 @@ The following code snippet explains how to add a radio button field in an existi {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfRadioButtonListField} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfRadioButtonListField} 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); -// Access the PDF form -let form: PdfForm = document.form; -// Create a new radio button list field -let field: PdfRadioButtonListField = new PdfRadioButtonListField(page, 'Age'); -// Create and add first item -let first: PdfRadioButtonListItem = field.add('1-9', { x: 100, y: 140, width: 20, height: 20 }); -// Create and add second item -let second: PdfRadioButtonListItem = field.add('10-49', { x: 100, y: 170, width: 20, height: 20 }, page); -// Set selected index of the radio button list field -field.selectedIndex = 0; -// Add the field into PDF form -form.add(field); +// Add new radio button list field into PDF form +document.form.add(new PdfRadioButtonListField( + page, + 'AgeGroup', + { + items: [ + { name: '18-25', bounds: { x: 50, y: 480, width: 14, height: 14 } }, + { name: '26-35', bounds: { x: 50, y: 460, width: 14, height: 14 } }, + { name: '36-45', bounds: { x: 50, y: 440, width: 14, height: 14 } } + ], + toolTip: 'Select an age range', + selectedIndex: 1, + allowUnisonSelection: false + } +)); // Save the document document.save('Output.pdf'); // Close the document @@ -338,18 +359,21 @@ document.destroy(); var document = new ej.pdf.PdfDocument(data); // Access the first page var page = document.getPage(0); -// Access the PDF form -var form = document.form; -// Create a new radio button list field -var field = new ej.pdf.PdfRadioButtonListField(page, 'Age'); -// Create and add first item -var first = field.add('1-9', { x: 100, y: 140, width: 20, height: 20 }); -// Create and add second item -var second = field.add('10-49', { x: 100, y: 170, width: 20, height: 20 }, page); -// Set selected index of the radio button list field -field.selectedIndex = 0; -// Add the field into PDF form -form.add(field); +// Add new radio button list field into PDF form +document.form.add(new ej.pdf.PdfRadioButtonListField( + page, + 'AgeGroup', + { + items: [ + { name: '18-25', bounds: { x: 50, y: 480, width: 14, height: 14 } }, + { name: '26-35', bounds: { x: 50, y: 460, width: 14, height: 14 } }, + { name: '36-45', bounds: { x: 50, y: 440, width: 14, height: 14 } } + ], + toolTip: 'Select an age range', + selectedIndex: 1, + allowUnisonSelection: false + } +)); // Save the document document.save('Output.pdf'); // Close the document @@ -363,28 +387,36 @@ This example demonstrates how to add a list box field to a PDF document using th {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfListBoxField} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfListBoxField, PdfInteractiveBorder, PdfBorderStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); // Add a page let page: PdfPage = document.addPage(); -// Access the PDF form -let form: PdfForm = document.form; -// Create a new list box field -let field: PdfListBoxField = new PdfListBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 }); -// Add list items to the field -field.addItem(new PdfListFieldItem('English', 'English')); -field.addItem(new PdfListFieldItem('French', 'French')); -// Set the selected index -field.selectedIndex = 1; -// Set the flag indicating whether the list box allows multiple selections -field.multiSelect = true; -// Add the field into PDF form -form.add(field); +// Add new listbox field into PDF form +document.form.add(new PdfListBoxField( + page, + 'Languages', + { x: 50, y: 340, width: 180, height: 60 }, + { + items: [ + { text: 'English', value: 'en' }, + { text: 'French', value: 'fr' }, + { text: 'German', value: 'de' } + ], + toolTip: 'Select language(s)', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + selectedIndex: [0, 2], + multiSelect: true, + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular) + } +)); // Save the document -document.save('Output.pdf'); -// Close the document +document.save('output.pdf'); +// Destroy the document document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} @@ -392,19 +424,27 @@ document.destroy(); var document = new ej.pdf.PdfDocument(); // Add a page var page = document.addPage(); -// Access the PDF form -var form = document.form; -// Create a new list box field -var field = new ej.pdf.PdfListBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 }); -// Add list items to the field -field.addItem(new ej.pdf.PdfListFieldItem('English', 'English')); -field.addItem(new ej.pdf.PdfListFieldItem('French', 'French')); -// Set the selected index -field.selectedIndex = 1; -// Set the flag indicating whether the list box allows multiple selections -field.multiSelect = true; -// Add the field into PDF form -form.add(field); +// Add new listbox field into PDF form +document.form.add(new ej.pdf.PdfListBoxField( + page, + 'Languages', + { x: 50, y: 340, width: 180, height: 60 }, + { + items: [ + { text: 'English', value: 'en' }, + { text: 'French', value: 'fr' }, + { text: 'German', value: 'de' } + ], + toolTip: 'Select language(s)', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: ej.pdf.PdfBorderStyle.solid }), + selectedIndex: [0, 2], + multiSelect: true, + font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular) + } +)); // Save the document document.save('Output.pdf'); // Close the document @@ -416,25 +456,33 @@ The following code snippet explains how to add a list box field in an existing P {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfListBoxField} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfListBoxField, PdfInteractiveBorder, PdfBorderStyle, PdfFontFamily, PdfFontStyle} 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); -// Access the PDF form -let form: PdfForm = document.form; -// Create a new list box field -let field: PdfListBoxField = new PdfListBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 }); -// Add list items to the field -field.addItem(new PdfListFieldItem('English', 'English')); -field.addItem(new PdfListFieldItem('French', 'French')); -// Set the selected index -field.selectedIndex = 1; -// Set the flag indicating whether the list box allows multiple selections -field.multiSelect = true; -// Add the field into PDF form -form.add(field); +// Add new listbox field into PDF form +document.form.add(new PdfListBoxField( + page, + 'Languages', + { x: 50, y: 340, width: 180, height: 60 }, + { + items: [ + { text: 'English', value: 'en' }, + { text: 'French', value: 'fr' }, + { text: 'German', value: 'de' } + ], + toolTip: 'Select language(s)', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + selectedIndex: [0, 2], + multiSelect: true, + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular) + } +)); // Save the document document.save('Output.pdf'); // Close the document @@ -445,19 +493,27 @@ document.destroy(); var document = new ej.pdf.PdfDocument(data); // Access the first page var page = document.getPage(0); -// Access the PDF form -var form = document.form; -// Create a new list box field -var field = new ej.pdf.PdfListBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 }); -// Add list items to the field -field.addItem(new ej.pdf.PdfListFieldItem('English', 'English')); -field.addItem(new ej.pdf.PdfListFieldItem('French', 'French')); -// Set the selected index -field.selectedIndex = 1; -// Set the flag indicating whether the list box allows multiple selections -field.multiSelect = true; -// Add the field into PDF form -form.add(field); +// Add new listbox field into PDF form +document.form.add(new ej.pdf.PdfListBoxField( + page, + 'Languages', + { x: 50, y: 340, width: 180, height: 60 }, + { + items: [ + { text: 'English', value: 'en' }, + { text: 'French', value: 'fr' }, + { text: 'German', value: 'de' } + ], + toolTip: 'Select language(s)', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: ej.pdf.PdfBorderStyle.solid }), + selectedIndex: [0, 2], + multiSelect: true, + font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular) + } +)); // Save the document document.save('Output.pdf'); // Close the document @@ -471,22 +527,25 @@ This example demonstrates how to add a check box field to a PDF document using t {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfCheckBoxField} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfCheckBoxField, PdfInteractiveBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); // Add a page let page: PdfPage = document.addPage(); -// Access the PDF form -let form: PdfForm = document.form; -// Create a new check box field -let field: PdfCheckBoxField = new PdfCheckBoxField('CheckBox1', { x: 100, y: 40, width: 20, height: 20 }, page); -// Set the checked flag as true -field.checked = true; -// Set the tooltip value -field.toolTip = 'Checked'; -// Add the field into PDF form -form.add(field); +// Add new checkbox field into PDF form +document.form.add(new PdfCheckBoxField( + 'AcceptTerms', + { x: 50, y: 520, width: 14, height: 14 }, + page, + { + toolTip: 'Accept the terms and conditions', + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + checked: true + } +)); // Save the document document.save('Output.pdf'); // Close the document @@ -497,16 +556,19 @@ document.destroy(); var document = new ej.pdf.PdfDocument(); // Add a page var page = document.addPage(); -// Access the PDF form -var form = document.form; -// Create a new check box field -var field = new ej.pdf.PdfCheckBoxField('CheckBox1', { x: 100, y: 40, width: 20, height: 20 }, page); -// Set the checked flag as true -field.checked = true; -// Set the tooltip value -field.toolTip = 'Checked'; -// Add the field into PDF form -form.add(field); +// Add new checkbox field into PDF form +document.form.add(new ej.pdf.PdfCheckBoxField( + 'AcceptTerms', + { x: 50, y: 520, width: 14, height: 14 }, + page, + { + toolTip: 'Accept the terms and conditions', + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: ej.pdf.PdfBorderStyle.solid }), + checked: true + } +)); // Save the document document.save('Output.pdf'); // Close the document @@ -518,22 +580,25 @@ The following code snippet explains how to check Box field in an existing PDF do {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfCheckBoxField} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfCheckBoxField, PdfInteractiveBorder, PdfBorderStyle} 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); -// Access the PDF form -let form: PdfForm = document.form; -// Create a new check box field -let field: PdfCheckBoxField = new PdfCheckBoxField('CheckBox1', { x: 100, y: 40, width: 20, height: 20 }, page); -// Set the checked flag as true -field.checked = true; -// Set the tooltip value -field.toolTip = 'Checked'; -// Add the field into PDF form -form.add(field); +// Add new checkbox field into PDF form +document.form.add(new PdfCheckBoxField( + 'AcceptTerms', + { x: 50, y: 520, width: 14, height: 14 }, + page, + { + toolTip: 'Accept the terms and conditions', + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + checked: true + } +)); // Save the document document.save('Output.pdf'); // Close the document @@ -544,16 +609,19 @@ document.destroy(); var document = new ej.pdf.PdfDocument(data); // Access the first page var page = document.getPage(0); -// Access the PDF form -var form = document.form; -// Create a new check box field -var field = new ej.pdf.PdfCheckBoxField('CheckBox1', { x: 100, y: 40, width: 20, height: 20 }, page); -// Set the checked flag as true -field.checked = true; -// Set the tooltip value -field.toolTip = 'Checked'; -// Add the field into PDF form -form.add(field); +// Add new checkbox field into PDF form +document.form.add(new ej.pdf.PdfCheckBoxField( + 'AcceptTerms', + { x: 50, y: 520, width: 14, height: 14 }, + page, + { + toolTip: 'Accept the terms and conditions', + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: ej.pdf.PdfBorderStyle.solid }), + checked: true + } +)); // Save the document document.save('Output.pdf'); // Close the document @@ -567,7 +635,7 @@ This example demonstrates how to add a signature field to a PDF document using t {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, PdfInteractiveBorder} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfSignatureField, PdfInteractiveBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); @@ -630,7 +698,7 @@ The following code snippet explains how to add a signature filed in an existing {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, PdfInteractiveBorder} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfSignatureField, PdfInteractiveBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); @@ -695,7 +763,7 @@ This example demonstrates how to add a button field to a PDF document using the {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfButtonField, PdfHighlightMode, PdfBorderStyle, PdfInteractiveBorder} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfButtonField, PdfHighlightMode, PdfBorderStyle, PdfInteractiveBorder} from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); @@ -835,7 +903,7 @@ This example demonstrates how to fill a text box field in a PDF document using t {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfTextBoxField} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfTextBoxField, PdfTextAlignment} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); @@ -1041,7 +1109,7 @@ This example demonstrates how to fill a signature field in a PDF document using {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfForm, PdfSignatureField} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfSignatureField} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); @@ -1084,7 +1152,7 @@ This example demonstrates how to modify an existing form field in a PDF document {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfTextBoxField} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfPage, PdfTextBoxField, PdfTextAlignment} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); @@ -1290,7 +1358,7 @@ This example demonstrates how to export form data from a PDF document to an FDF {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, Uint8Array, PdfFormFieldExportSettings } from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfFormFieldExportSettings } from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); @@ -1325,7 +1393,7 @@ This example demonstrates how to export form data from a PDF document to an XFDF {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument, Uint8Array, PdfFormFieldExportSettings } from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfFormFieldExportSettings } from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); diff --git a/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md b/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md index 250bdd288..680392c90 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md +++ b/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md @@ -15,16 +15,16 @@ This example demonstrates how to create a web link annotation in a PDF document {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, PdfFontFamily, Size, PdfTextWebLinkAnnotation, PdfFontStyle } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, PdfFontFamily, PdfTextWebLinkAnnotation, PdfFontStyle } from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(); // Access the first page let page: PdfPage = document.addPage(); // Create a new PDF string format -const format: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top); +let format: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top); // Create a new standard font -const font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular); // Get the text size let size: Size = font.measureString('Syncfusion'); // Create a new text web link annotation @@ -44,7 +44,7 @@ var page = document.addPage(); // Create a new PDF string format var format = new ej.pdf.PdfStringFormat(ej.pdf.PdfTextAlignment.left, ej.pdf.PdfVerticalAlignment.top); // Create a new standard font -var font = new ej.pdf.PdfStandardFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); // Get the text size var size = font.measureString('Syncfusion'); // Create a new text web link annotation @@ -62,16 +62,16 @@ The following code snippet explains how to add a text web link annotation in an {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, PdfFontFamily, Size, PdfTextWebLinkAnnotation, PdfFontStyle } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, PdfFontFamily, PdfTextAlignment, PdfTextWebLinkAnnotation, PdfFontStyle } 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 string format -const format: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top); +let format: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top); // Create a new standard font -const font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular); // Get the text size let size: Size = font.measureString('Syncfusion'); // Create a new text web link annotation @@ -91,7 +91,7 @@ var page = document.getPage(0); // Create a new PDF string format var format = new ej.pdf.PdfStringFormat(ej.pdf.PdfTextAlignment.left, ej.pdf.PdfVerticalAlignment.top); // Create a new standard font -var font = new ej.pdf.PdfStandardFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); // Get the text size var size = font.measureString('Syncfusion'); // Create a new text web link annotation @@ -111,16 +111,16 @@ This example demonstrates how to create internal navigation within a PDF documen {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, Size, PdfDocumentLinkAnnotation, 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(); // Add a page let page: PdfPage = document.addPage(); // Create a new PDF string format -const format: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top); +let format: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top); // Create a new standard font -const font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); // Get the text size let size: Size = font.measureString('Syncfusion'); // Create a new text web link annotation @@ -182,7 +182,7 @@ The following code snippet demonstrates how to add internal document navigation {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfDocumentLinkAnnotation } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfDestination, PdfDocumentLinkAnnotation } from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); @@ -249,8 +249,8 @@ 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 -let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, 'image.png'); +// 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'); // Add annotation to the page page.annotations.add(annotation); // Save the document @@ -263,8 +263,8 @@ document.destroy(); var document = new ej.pdf.PdfDocument(); // Add a page var page = document.addPage(); -// Create a new file link annotation -var annotation = new ej.pdf.PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, 'image.png'); +// 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'); // Add annotation to the page page.annotations.add(annotation); // Save the document @@ -284,8 +284,8 @@ 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 -let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, 'image.png'); +// 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'); // Add annotation to the page page.annotations.add(annotation); // Save the document @@ -298,8 +298,8 @@ document.destroy(); var document = new ej.pdf.PdfDocument(data); // Get the first page var page = document.getPage(0); -// Create a new file link annotation -var annotation = new ej.pdf.PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, 'image.png'); +// 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'); // Add annotation to the page page.annotations.add(annotation); // Save the document diff --git a/Document-Processing/PDF/PDF-Library/javascript/Image-Extraction.md b/Document-Processing/PDF/PDF-Library/javascript/Image-Extraction.md new file mode 100644 index 000000000..266ebc651 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Image-Extraction.md @@ -0,0 +1,93 @@ +--- +title: Image Extraction in TypeScript PDF library | Syncfusion +description: This section explains how to extract images from PDF documents and retrieve their properties such as position and size using the JavaScript PDF library +platform: document-processing +control: PDF +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. + +N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. + +## 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. +{% 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: document.pageCount - 1 +}); +// Access the first extracted image and its raw data +let imageInfo: PdfEmbeddedImage = imageInfoCollection[0]; +let data: Uint8Array = imageInfo.data; +// 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 +}); +// Access the first extracted image and its raw data +var imageInfo = imageInfoCollection[0]; +var data = imageInfo.data; +// Destroy the 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 0567c00f3..07cc068eb 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Layers.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Layers.md @@ -71,7 +71,7 @@ This example demonstrates how to add an annotation to a specific layer in a PDF {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfLayerCollection, PdfLayer, PdfGraphics, PdfAnnotation, PdfPen } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfLayerCollection, PdfLayer, PdfAnnotation } from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); diff --git a/Document-Processing/PDF/PDF-Library/javascript/Lists.md b/Document-Processing/PDF/PDF-Library/javascript/Lists.md index 8de3211ff..f5d02b039 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Lists.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Lists.md @@ -16,7 +16,7 @@ This example demonstrates how to create an ordered list in a PDF document using {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfList, PdfStandardFont, PdfBrush, PdfStringFormat, PdfPen, PdfNumberStyle, PdfOrderedList, PdfListItemCollection } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfListItemCollection, PdfBrush, PdfStringFormat, PdfPen, PdfNumberStyle, PdfOrderedList, PdfListItemCollection } from '@syncfusion/ej2-pdf'; // Load an existing document let document: PdfDocument = new PdfDocument(data); @@ -24,30 +24,18 @@ let document: PdfDocument = new PdfDocument(data); let page: PdfPage = document.getPage(0); // Assign the array of string items let products: string[] = ['Excel', 'Power', 'Point', 'Word', 'PDF']; -// Create a new font for list -let itemFont: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10); -// Create a new brush for list -let itemBrush: PdfBrush = new PdfBrush({ r: 0, g: 255, b: 255 }); -// Create a new format for list -let itemFormat: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.center); -// Create a new pen for list -let itemPen: PdfPen = new PdfPen({ r: 0, g: 255, b: 0 }, 1); -// Initialize a PdfNumberStyle for items -let itemStyle: PdfNumberStyle = PdfNumberStyle.numeric; -// Initialize a delimiter for the items -let itemDelimiter: string = ')'; // Add the items to list item collection by passing the array of products let items: PdfListItemCollection = new PdfListItemCollection(products); // Initialize the instance of ordered list and pass the item collection and optional settings let list: PdfOrderedList = new PdfOrderedList(items, { - font: itemFont, - format: itemFormat, - pen: itemPen, - brush: itemBrush, + font: document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular), + format: new PdfStringFormat(PdfTextAlignment.center), + pen: new PdfPen({ r: 0, g: 255, b: 0 }, 1), + brush: new PdfBrush({ r: 0, g: 255, b: 255 }), indent: 30, textIndent: 50, - style: itemStyle, - delimiter: itemDelimiter + style: PdfNumberStyle.numeric, + delimiter: ')' }); // Draw the ordered list on the page list.draw(page, { x: 0, y: 20, width: 500, height: 700 }); @@ -63,30 +51,16 @@ var document = new ej.pdf.PdfDocument(data); var page = document.getPage(0); // Assign the array of string items var products = ['Excel', 'Power', 'Point', 'Word', 'PDF']; -// Create a new font for list -var itemFont = new ej.pdf.PdfStandardFont(ej.pdf.PdfFontFamily.helvetica, 10); -// Create a new brush for list -var itemBrush = new ej.pdf.PdfBrush({ r: 0, g: 255, b: 255 }); -// Create a new format for list -var itemFormat = new ej.pdf.PdfStringFormat(ej.pdf.PdfTextAlignment.center); -// Create a new pen for list -var itemPen = new ej.pdf.PdfPen({ r: 0, g: 255, b: 0 }, 1); -// Initialize a PdfNumberStyle for items -var itemStyle = ej.pdf.PdfNumberStyle.numeric; -// Initialize a delimiter for the items -var itemDelimiter = ')'; -// Add the items to list item collection by passing the array of products -var items = new ej.pdf.PdfListItemCollection(products); // Initialize the instance of ordered list and pass the item collection and optional settings -var list = new ej.pdf.PdfOrderedList(items, { - font: itemFont, - format: itemFormat, - pen: itemPen, - brush: itemBrush, +var list: PdfOrderedList = new PdfOrderedList(items, { + font: document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular), + format: new ej.pdf.PdfStringFormat(PdfTextAlignment.center), + pen: new ej.pdf.PdfPen({ r: 0, g: 255, b: 0 }, 1), + brush: new ej.pdf.PdfBrush({ r: 0, g: 255, b: 255 }), indent: 30, textIndent: 50, - style: itemStyle, - delimiter: itemDelimiter + style: ej.pdf.PdfNumberStyle.numeric, + delimiter: ')' }); // Draw the ordered list on the page list.draw(page, { x: 0, y: 20, width: 500, height: 700 }); @@ -111,30 +85,18 @@ let document: PdfDocument = new PdfDocument(data); let page: PdfPage = document.getPage(0); // Define the items in the unordered list let products: string[] = ['Excel', 'Power', 'Point', 'Word', 'PDF']; -// Create a new font for list -let itemFont: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10); -// Create a new brush for list -let itemBrush: PdfBrush = new PdfBrush({ r: 0, g: 255, b: 255 }); -// Create a new format for list -let itemFormat: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.center); -// Create a new pen for list -let itemPen: PdfPen = new PdfPen({ r: 0, g: 255, b: 0 }, 1); -// Initialise a PdfUnorderedListStyle -let itemStyle: PdfUnorderedListStyle = PdfUnorderedListStyle.square; -// Initialize a delimiter for the items -let itemDelimiter: string = ')'; // Add the items to list item collection by passing the array of products let items: PdfListItemCollection = new PdfListItemCollection(products); // Initialize the instance of the unordered list and pass the list item collection and settings let list: PdfUnorderedList = new PdfUnorderedList(items, { - font: itemFont, - format: itemFormat, - pen: itemPen, - brush: itemBrush, + font: document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular), + format: new PdfStringFormat(PdfTextAlignment.center), + pen: new PdfPen({ r: 0, g: 255, b: 0 }, 1), + brush: new PdfBrush({ r: 0, g: 255, b: 255 }), indent: 30, textIndent: 50, - style: itemStyle, - delimiter: itemDelimiter + style: PdfNumberStyle.numeric, + delimiter: ')' }); // Draw the unordered list on the page list.draw(page, { x: 0, y: 20, width: 500, height: 700 }); @@ -150,30 +112,16 @@ var document = new ej.pdf.PdfDocument(data); var page = document.getPage(0); // Define the items in the unordered list var products = ['Excel', 'Power', 'Point', 'Word', 'PDF']; -// Create a new font for list -var itemFont = new ej.pdf.PdfStandardFont(ej.pdf.PdfFontFamily.helvetica, 10); -// Create a new brush for list -var itemBrush = new ej.pdf.PdfBrush({ r: 0, g: 255, b: 255 }); -// Create a new format for list -var itemFormat = new ej.pdf.PdfStringFormat(ej.pdf.PdfTextAlignment.center); -// Create a new pen for list -var itemPen = new ej.pdf.PdfPen({ r: 0, g: 255, b: 0 }, 1); -// Initialise a PdfUnorderedListStyle -var itemStyle = ej.pdf.PdfUnorderedListStyle.square; -// Initialize a delimiter for the items -var itemDelimiter = ')'; -// Add the items to list item collection by passing the array of products -var items = new ej.pdf.PdfListItemCollection(products); // Initialize the instance of the unordered list and pass the list item collection and settings var list = new ej.pdf.PdfUnorderedList(items, { - font: itemFont, - format: itemFormat, - pen: itemPen, - brush: itemBrush, + font: document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular), + format: new ej.pdf.PdfStringFormat(PdfTextAlignment.center), + pen: new ej.pdf.PdfPen({ r: 0, g: 255, b: 0 }, 1), + brush: new ej.pdf.PdfBrush({ r: 0, g: 255, b: 255 }), indent: 30, textIndent: 50, - style: itemStyle, - delimiter: itemDelimiter + style: ej.pdf.PdfNumberStyle.numeric, + delimiter: ')' }); // Draw the unordered list on the page list.draw(page, { x: 0, y: 20, width: 500, height: 700 }); diff --git a/Document-Processing/PDF/PDF-Library/javascript/Merge-Document.md b/Document-Processing/PDF/PDF-Library/javascript/Merge-Document.md new file mode 100644 index 000000000..60df64b9c --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Merge-Document.md @@ -0,0 +1,146 @@ +--- +title: Merge in TypeScript PDF library | Syncfusion +description: This section explains how to merge multiple PDF documents into a single file and import pages from one document to another using the JavaScript PDF library. +platform: document-processing +control: PDF +documentation: UG +--- +# Merge in TypeScript PDF library + +The PDF provides support to merge multiple PDF documents into a single file and import pages from one document to another. + +## Merging multiple documents + +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. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, 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); +// 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); +// 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; +// 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. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +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); +// 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); +// Save the output PDF +destination.save('Output.pdf'); +// Destroy the documents to free resources +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 +var sourceDocument = 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); +// Save the output PDF +destination.save('Output.pdf'); +// Destroy the documents to free resources +destination.destroy(); +sourceDocument.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. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, 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); +// 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.importPage(pageToImport, sourceDocument, options); +// Save the output PDF +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 +var sourceDocument = new ej.pdf.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 ej.pdf.PdfPageImportOptions(); +// Sets the target page index to import +options.targetIndex = 5; +// Import the page into the destination document at the specified index +destination.importPage(pageToImport, sourceDocument, options); +// Save the output PDF +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/Open-and-save-PDF-files.md b/Document-Processing/PDF/PDF-Library/javascript/Open-and-save-PDF-files.md index e4fc235a3..c6e44386b 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 @@ -27,7 +27,7 @@ var document = new ej.pdf.PdfDocument(data); {% endhighlight %} {% endtabs %} -The PdfDocument constructor can accept PDF data in either Base64 string or Uint8Array format. Here’s a quick example for both approaches: +The PdfDocument constructor can accept PDF data in either Base64 string or Uint8Array format. Here's a quick example for both approaches: ### Using Base64 String diff --git a/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md b/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md index 7964d1c2c..63655370a 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md +++ b/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md @@ -15,42 +15,40 @@ This example shows how to configure custom page settings before adding a page to {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfPageSettings, PdfMargins, PdfPageOrientation, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf'; +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 instance - let pageSettings: PdfPageSettings = new PdfPageSettings(); - // Sets the margins - pageSettings.margins = new PdfMargins(40); - // Sets the page size - pageSettings.size ={width: 595, height: 842}; - // Sets the page orientation - pageSettings.orientation = PdfPageOrientation.landscape; - // Add a page - let page: PdfPage = document.addPage(pageSettings); - // 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(); +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Create a new PDF page settings instance +let pageSettings: PdfPageSettings = new PdfPageSettings({ + orientation: PdfPageOrientation.landscape, + size: { width: 842, height: 595 }, + margins: new PdfMargins(40), + rotation: PdfRotationAngle.angle0 +}); +// Add a page +let page: PdfPage = document.addPage(pageSettings); +// 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 instance -var pageSettings = new ej.pdf.PdfPageSettings(); -// Sets the margins -pageSettings.margins = new ej.pdf.PdfMargins(40); -// Sets the page size -pageSettings.size = { width: 595, height: 842 }; -// Sets the page orientation -pageSettings.orientation = ej.pdf.PdfPageOrientation.landscape; +var 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.angle0 +}); // Add a page var page = document.addPage(pageSettings); // Get graphics from the page @@ -72,19 +70,19 @@ This example demonstrates how to create a section in a PDF document with custom {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfPageSettings, PdfMargins, PdfPageOrientation, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; +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(); -// Define page settings -let settings: PdfPageSettings = new PdfPageSettings(); -settings.rotation = PdfRotationAngle.angle180; -settings.orientation = PdfPageOrientation.landscape; -settings.margins = new PdfMargins(40); -settings.size = { width: 595, height: 842} -; +// 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(settings); +let section: PdfSection = document.addSection(pageSettings); // Add a page let page: PdfPage = section.addPage(); // Get graphics from the page @@ -101,14 +99,15 @@ document.destroy(); {% highlight javascript tabtitle="JavaScript" %} // Create a new PDF document var document = new ej.pdf.PdfDocument(); -// Define page settings -var settings = new ej.pdf.PdfPageSettings(); -settings.rotation = ej.pdf.PdfRotationAngle.angle180; -settings.orientation = ej.pdf.PdfPageOrientation.landscape; -settings.margins = new ej.pdf.PdfMargins(40); -settings.size = { width: 595, height: 842 }; +// 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(settings); +var section = document.addSection(pageSettings); // Add a page var page = section.addPage(); // Get graphics from the page @@ -126,7 +125,7 @@ document.destroy(); ## Working with document properties -This example demonstrates how to create a PDF document, set its metadata properties such as title, author, subject, keywords, creator, producer, language, and dates, and then retrieve these properties using the `PdfDocumentInformation` class. +This example demonstrates how to create a PDF document, get and set its metadata properties such as title, author, subject, keywords, creator, producer, language, and dates, and then retrieve these properties using the `PdfDocumentInformation` class. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -134,19 +133,40 @@ import { PdfDocument, PdfPage, PdfDocumentInformation, PdfStandardFont, PdfFontF // Create a PDF document let document: PdfDocument = new PdfDocument(); -// Access the document information (metadata) -let documentProperties: PdfDocumentInformation = document.setDocumentInformation(); -// Set document properties -documentProperties.title = "Sample PDF Document"; // Title of the PDF -documentProperties.author = "John Doe"; // Author name -documentProperties.subject = "PDF Metadata Example"; // Subject of the document -documentProperties.keywords = "PDF, Metadata, Example"; // Keywords for search -documentProperties.creator = "JavaScript PDF Library"; // Application that created the PDF -documentProperties.producer = "JavaScript PDF Engine"; // PDF producer -documentProperties.language = "en-US"; // Language of the document -documentProperties.creationDate = new Date(); // Creation date -documentProperties.modificationDate = new Date(); // Last modified date - // Add a page + +// Set or update document properties +document.setDocumentInformation({ +title: "Sample PDF Document", // Title of the PDF +author: "John Doe", // Author name +subject: "PDF Metadata Example", // Subject of the document +keywords: "PDF, Metadata, Example", // Keywords for search +creator: "JavaScript PDF Library", // Application that created the PDF +producer: "JavaScript PDF Engine", // PDF producer +language: "en-US", // Language of the document +creationDate: new Date(), // Creation date +modificationDate: new Date() // Last modified date +}); +// Access the document information +let documentProperties: PdfDocumentInformation = document.getDocumentInformation(); +// Gets the title of the PDF document +let title = documentProperties.title; +// Gets the author of the PDF document +let author = documentProperties.author; +// Gets the subject of the PDF document +let subject = documentProperties.subject; +// Gets the keywords of the PDF document +let keywords = documentProperties.keywords; +// Gets the creator of the PDF document +let creator = documentProperties.creator; +// Gets the producer of the PDF document +let producer = documentProperties.producer; +// Gets the language of the PDF document +let language = documentProperties.language; +// Gets the creation date of the PDF document +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; @@ -162,18 +182,38 @@ document.destroy(); {% highlight javascript tabtitle="JavaScript" %} // Create a PDF document var document = new ej.pdf.PdfDocument(); -// Access the document information (metadata) -var documentProperties = document.setDocumentInformation(); -// Set document properties -documentProperties.title = "Sample PDF Document"; // Title of the PDF -documentProperties.author = "John Doe"; // Author name -documentProperties.subject = "PDF Metadata Example"; // Subject of the document -documentProperties.keywords = "PDF, Metadata, Example"; // Keywords for search -documentProperties.creator = "JavaScript PDF Library"; // Application that created the PDF -documentProperties.producer = "JavaScript PDF Engine"; // PDF producer -documentProperties.language = "en-US"; // Language of the document -documentProperties.creationDate = new Date(); // Creation date -documentProperties.modificationDate = new Date(); // Last modified date +// Set or update document properties +document.setDocumentInformation({ +title: "Sample PDF Document", // Title of the PDF +author: "John Doe", // Author name +subject: "PDF Metadata Example", // Subject of the document +keywords: "PDF, Metadata, Example", // Keywords for search +creator: "JavaScript PDF Library", // Application that created the PDF +producer: "JavaScript PDF Engine", // PDF producer +language: "en-US", // Language of the document +creationDate: new Date(), // Creation date +modificationDate: new Date() // Last modified date +}); +// Access the document information +var documentProperties: PdfDocumentInformation = document.getDocumentInformation(); +// Gets the title of the PDF document +var title = documentProperties.title; +// Gets the author of the PDF document +var author = documentProperties.author; +// Gets the subject of the PDF document +var subject = documentProperties.subject; +// Gets the keywords of the PDF document +var keywords = documentProperties.keywords; +// Gets the creator of the PDF document +var creator = documentProperties.creator; +// Gets the producer of the PDF document +var producer = documentProperties.producer; +// Gets the language of the PDF document +var language = documentProperties.language; +// Gets the creation date of the PDF document +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 @@ -195,7 +235,7 @@ The `isIncrementalUpdate` property allows you to check if the PDF document suppo {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfGraphics, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; // Create a PDF document let document: PdfDocument = new PdfDocument(); @@ -232,4 +272,4 @@ document.save('Output.pdf'); // Close the document document.destroy(); {% endhighlight %} -{% endtabs %} +{% 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 3c059ccae..0836d7101 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md +++ b/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md @@ -56,7 +56,7 @@ The `PdfPageSettings` class is used to define properties such as margins, orient {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfStandardFont, PdfGraphics, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); @@ -95,6 +95,8 @@ document.destroy(); {% endhighlight %} {% endtabs %} +N> The creation default margin is set to 40 points, ensuring uniform spacing between the content and the page edges. This margin allows sufficient space for better readability and helps prevent content from being truncated during printing or viewing. + ## Adding sections with different page settings This example demonstrates how to add sections with different page settings in a PDF document. It shows how to configure rotation, orientation, margins, and page size using `PdfPageSettings`. The `PdfSection` class is used to apply unique page customizations within a single PDF document. @@ -171,7 +173,7 @@ This example demonstrates how to retrieve the total number of pages in a PDF doc {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument } from '@syncfusion/ej2-pdf'; +import { PdfDocument} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); @@ -260,17 +262,15 @@ This example demonstrates how to remove a page from a PDF document using the `re {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage } 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); -// Removes the first page -document.removePage(0); -or -// Removes the page +// Removes the last page +let page: PdfPage = document.getPage(document.pageCount - 1); document.removePage(page); +// Removes the first page by specifying index +document.removePage(0); // Save the document document.save('output.pdf'); // Destroy the document @@ -279,13 +279,11 @@ document.destroy(); {% highlight javascript tabtitle="JavaScript" %} // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); -// Access the first page -var page: PdfPage = document.getPage(0); -// Removes the first page -document.removePage(0); -or -// Removes the page +// Removes the last page +var page = document.getPage(document.pageCount - 1); document.removePage(page); +// Removes the first page by specifying index +document.removePage(0); // Save the document document.save('output.pdf'); // Destroy the document @@ -299,14 +297,14 @@ This example demonstrates how to rotate a PDF page using the `rotation` property {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPageSettings, PdfPage, PdfStandardFont, PdfRotationAngle, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); +// Define page settings with rotate +let settings: PdfPageSettings = new PdfPageSettings({rotation: PdfRotationAngle.angle180}); // Add page -let page: PdfPage = document.addPage(); -// Rotate the PDF document -page.rotation = PdfRotationAngle.angle90; +let page: PdfPage = document.addPage(settings); // Get graphics from the page let graphics: PdfGraphics = page.graphics; // Set font @@ -321,10 +319,10 @@ document.destroy(); {% highlight javascript tabtitle="JavaScript" %} // Create a new PDF document var document = new ej.pdf.PdfDocument(); +// Define page settings with rotate +var settings = new ej.pdf.PdfPageSettings({rotation: PdfRotationAngle.angle180}); // Add page -var page = document.addPage(); -// Rotate the PDF document -page.rotation = PdfRotationAngle.angle90; +var page = document.addPage(settings); // Get graphics from the page var graphics = page.graphics; // Set font @@ -344,7 +342,7 @@ This example demonstrates how to rotate an existing PDF page using the `rotation {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage } from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); @@ -371,31 +369,47 @@ document.destroy(); {% endhighlight %} {% endtabs %} -## Splitting a PDF file to individual pages +## Insert a Duplicate Page at a Specific Index -This example demonstrates how to split a PDF file into individual pages by importing a specific page from the source document using the `importPage` method of the `PdfDocument` class. The method takes the zero-based index of the page to be copied and adds it as a new page in the target document. +Duplicates a page from a source PDF and inserts it into the destination document at the specified index using `PdfPageImportOptions.targetIndex`. This is useful for reusing or cloning content across documents or within the same document. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPageImportOptions} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); -// Copy the second page and add it as third page -document.importPage(1); -// Save the output PDF -document.save('Output.pdf'); -// Destroy the documents +// Options to customize the support of import PDF pages. +let options: PdfPageImportOptions = new PdfPageImportOptions(); +// Sets the target page index to import +options.targetIndex = 1; +// Sets the rotation angle of the page to import +options.rotation = PdfRotationAngle.angle180; +// Sets the boolean value indicating whether to optimize resources while importing pages or not +options.optimizeResources = true; +// Copy the first page and add it as second page with page rotation +document.importPage(0, options); +// 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); -// Copy the second page and add it as third page -document.importPage(1); -// Save the output PDF -document.save('Output.pdf'); -// Destroy the documents +let document = new ej.pdf.PdfDocument(data); +// Options to customize the support of import PDF pages. +let options = new ej.pdf.PdfPageImportOptions(); +// Sets the target page index to import +options.targetIndex = 1; +// Sets the rotation angle of the page to import +options.rotation = ej.pdf.PdfRotationAngle.angle180; +// Sets the boolean value indicating whether to optimize resources while importing pages or not +options.optimizeResources = true; +// Copy the first page and add it as second page with page rotation +document.importPage(0, options); +// Save the document +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/Redaction.md b/Document-Processing/PDF/PDF-Library/javascript/Redaction.md index 19c740442..c651ff8dd 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Redaction.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Redaction.md @@ -9,12 +9,12 @@ 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. + ## 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. -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'; @@ -63,7 +63,7 @@ You can apply a solid fill color to cover the redacted content. This is the most {% tabs %} {% highlight typescript tabtitle="TypeScript" %} import { PdfDocument } from '@syncfusion/ej2-pdf'; -import { PdfRedactor, PdfRedactor, PdfRedactionRegion} from '@syncfusion/ej2-pdf-data-extract'; +import { PdfRedactor, PdfRedactionRegion} from '@syncfusion/ej2-pdf-data-extract'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); @@ -110,8 +110,8 @@ Customize the appearance of the redacted area by applying specific fill colors. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage } from '@syncfusion/ej2-pdf'; -import { PdfRedactionAnnotation } from '@syncfusion/ej2-pdf-data-extract'; +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); diff --git a/Document-Processing/PDF/PDF-Library/javascript/Shapes.md b/Document-Processing/PDF/PDF-Library/javascript/Shapes.md index e34bdb819..64dd54cfa 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Shapes.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Shapes.md @@ -29,7 +29,7 @@ This example demonstrates how to draw a polygon shape in a PDF document using th {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); @@ -117,7 +117,7 @@ This example demonstrates how to draw a straight line in a PDF document using th {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); @@ -301,7 +301,7 @@ This example demonstrates how to draw a text in a PDF document using the `drawSt {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfStandardFont, PdfBrush } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfGraphics, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; // Create a new PDF document let document: PdfDocument = new PdfDocument(); diff --git a/Document-Processing/PDF/PDF-Library/javascript/Templates.md b/Document-Processing/PDF/PDF-Library/javascript/Templates.md index f5aca316d..c0d63d908 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Templates.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Templates.md @@ -15,25 +15,23 @@ This example demonstrates how to create a new PDF template using the `PdfTemplat {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfTemplate, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfTemplate, PdfImage, PdfBitmap } 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 rubber stamp annotation -let annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation({ x: 50, y: 100, width: 100, height: 50 }); -// Get the normal appearance of the annotation -let normalAppearance: PdfTemplate = annotation.appearance.normal; +// 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 as the custom appearance for the annotation -normalAppearance.graphics.drawImage(image, { x: 10, y: 20}); -// Add annotation to the page -page.annotations.add(annotation); +// 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'); -// Close the document +document.save('output.pdf'); +// Destroy the document document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} @@ -41,19 +39,17 @@ document.destroy(); var document = new ej.pdf.PdfDocument(); // Add a page var page = document.addPage(); -// Create a new rubber stamp annotation -var annotation = new ej.pdf.PdfRubberStampAnnotation({ x: 50, y: 100, width: 100, height: 50 }); -// Get the normal appearance of the annotation -var normalAppearance = annotation.appearance.normal; +// 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 as the custom appearance for the annotation -normalAppearance.graphics.drawImage(image, { x: 10, y: 20 }); -// Add annotation to the page -page.annotations.add(annotation); +// 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'); -// Close the document +document.save('output.pdf'); +// Destroy the document document.destroy(); {% endhighlight %} @@ -65,25 +61,23 @@ This example demonstrates how to create templates from an existing PDF document {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfTemplate, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf'; +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 new rubber stamp annotation -let annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation({ x: 50, y: 100, width: 100, height: 50 }); -// Get the normal appearance of the annotation -let normalAppearance: PdfTemplate = annotation.appearance.normal; +// 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 as the custom appearance for the annotation -normalAppearance.graphics.drawImage(image, { x: 10, y: 20}); -// Add annotation to the page -page.annotations.add(annotation); +// 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'); -// Close the document +document.save('output.pdf'); +// Destroy the document document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} @@ -91,19 +85,17 @@ document.destroy(); var document = new ej.pdf.PdfDocument(data); // Get the first page var page = document.getPage(0); -// Create a new rubber stamp annotation -var annotation = new ej.pdf.PdfRubberStampAnnotation({ x: 50, y: 100, width: 100, height: 50 }); -// Get the normal appearance of the annotation -var normalAppearance = annotation.appearance.normal; +// 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 as the custom appearance for the annotation -normalAppearance.graphics.drawImage(image, { x: 10, y: 20 }); -// Add annotation to the page -page.annotations.add(annotation); +// 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'); -// Close the document +document.save('output.pdf'); +// Destroy the document document.destroy(); {% endhighlight %} diff --git a/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md b/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md index e0e1e1034..2f4a035f8 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md @@ -162,7 +162,7 @@ This example demonstrates how to extract words from a PDF document using the `ex {% tabs %} {% highlight typescript tabtitle="TypeScript" %} import { PdfDocument } from '@syncfusion/ej2-pdf'; -import { PdfDataExtractor, TextLine, TextWord, TextGlyph } from '@syncfusion/ej2-pdf-data-extract'; +import { PdfDataExtractor, TextLine, TextWord } from '@syncfusion/ej2-pdf-data-extract'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); @@ -251,94 +251,95 @@ document.destroy(); ### Working with characters -This example demonstrates how to access individual characters from a PDF document using the `TextGlyph` class. +You can retrieve a single character and its properties, including bounds, font name, font size, and text color, using the `extractTextLines` method. Refer to the code sample below. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} import { PdfDocument } from '@syncfusion/ej2-pdf'; -import { PdfDataExtractor, TextLine, TextWord, TextGlyph } from '@syncfusion/ej2-pdf-data-extract'; +import { PdfDataExtractor, TextLine, TextWord } from '@syncfusion/ej2-pdf-data-extract'; -// Load an existing PDF document +// Load the 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 +// Extract text lines only from the first page (index 0) +let lineCollection: TextLine[] = extractor.extractTextLines({ + startPageIndex: 0, + endPageIndex: 0 +}); +// Get the first line +let line: TextLine = lineCollection[0]; +// Get the collection of words in the first line +let textWordCollection: TextWord[] = line.words; +// Get the first word +let textWord: TextWord = textWordCollection[0]; +// Get glyph details of the first word +let textGlyphCollection: TextGlyph[] = textWord.glyphs; +// Get the first glyph +let textGlyph: TextGlyph = textGlyphCollection[0]; +// ---- Glyph properties ---- +// Bounds of the character (x, y, width, height) +let glyphBounds = { + x: textGlyph.bounds[0], + y: textGlyph.bounds[1], + width: textGlyph.bounds[2], + height: textGlyph.bounds[3] +}; +// Font name of the character +let glyphFontName: string = textGlyph.fontName; +// Font size of the character +let glyphFontSize: number = textGlyph.fontSize; +// Font style of the character (e.g., PdfFontStyle.regular/bold/italic) +let glyphFontStyle: PdfFontStyle = textGlyph.fontStyle; +// The character itself +let glyphText: string = textGlyph.text; +// The color of the character (typically RGB) +let glyphColor = textGlyph.textColor; +// Save and close document.save('Output.pdf'); -// Close the document document.destroy(); + {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} -// Load an existing PDF document +// Load the existing PDF document var document = new ej.pdf.PdfDocument(data); // Create a PdfDataExtractor instance for the given PDF document -var extractor = new ej.pdfdataextract.PdfDataExtractor(document); -// Extract text lines from all pages in the document -var textCollection = extractor.extractTextLines({ +var extractor = new ej.pdf.PdfDataExtractor(document); +// Extract text lines only from the first page (index 0) +var lineCollection = extractor.extractTextLines({ startPageIndex: 0, - endPageIndex: document.pageCount - 1 + endPageIndex: 0 }); -var page; -// Iterate through each extracted text line -for (var i = 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 - var wordCollection = textCollection[i].words; - // Iterate through each word in the line - 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 - ); - } - } - } -} -// Save the document +// Get the first line +var line = lineCollection[0]; +// Get the collection of words in the first line +var textWordCollection = line.words; +// Get the first word +var textWord = textWordCollection[0]; +// Get glyph details of the first word +var textGlyphCollection = textWord.glyphs; +// Get the first glyph +var textGlyph = textGlyphCollection[0]; +// ---- Glyph properties ---- +// Bounds of the character (x, y, width, height) +var glyphBounds = { + x: textGlyph.bounds[0], + y: textGlyph.bounds[1], + width: textGlyph.bounds[2], + height: textGlyph.bounds[3] +}; +// Font name of the character +var glyphFontName = textGlyph.fontName; +// Font size of the character +var glyphFontSize = textGlyph.fontSize; +// Font style of the character (e.g., PdfFontStyle.regular/bold/italic) +var glyphFontStyle = textGlyph.fontStyle; +// The character itself +var glyphText = textGlyph.text; +// The color of the character (typically RGB) +var glyphColor = textGlyph.textColor; +// Save and close 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/Text.md b/Document-Processing/PDF/PDF-Library/javascript/Text.md index 149e360c6..a338d0076 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Text.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Text.md @@ -17,20 +17,20 @@ This example demonstrates how to draw text in a new PDF document using the `draw {% highlight typescript tabtitle="TypeScript" %} import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; - // Create a 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(); +// Create a 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 PDF document @@ -58,26 +58,26 @@ This example demonstrates the importance of saving and restoring the graphics st {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; +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; - // Save the current graphics state and apply transformations - graphics.save(); - graphics.translateTransform({x: 100, y: 50}); - graphics.rotateTransform(45); - // 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(); +// 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; +// Save the current graphics state and apply transformations +graphics.save(); +graphics.translateTransform({ x: 100, y: 50}); +graphics.rotateTransform(45); +// 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 @@ -263,18 +263,17 @@ This example demonstrates how to draw text in a PDF document using different tex {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfStandardFont, PdfStringFormat, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfStandardFont, PdfTextAlignment, PdfVerticalAlignment, PdfStringFormat, 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(); // Create a string format object to define text layout -let format = new PdfStringFormat(); -format.alignment = PdfTextAlignment.right; // Align text to the right +let format = new PdfStringFormat(PdfTextAlignment.right, PdfVerticalAlignment.bottom); format.wordSpacing = 2; // Set word spacing format.characterSpacing = 1; // Set character spacing - // Set font +// Set font let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); // Draw text page.graphics.drawString('Syncfusion JavaScript PDF library', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); @@ -289,8 +288,7 @@ var document = new ej.pdf.PdfDocument(); // Add a page var page = document.addPage(); // Create a string format object to define text layout -var format = new ej.pdf.PdfStringFormat(); -format.alignment = ej.pdf.PdfTextAlignment.right; // Align text to the right +var format = new ej.pdf.PdfStringFormat(ej.pdf.PdfTextAlignment.right, ej.pdf.PdfVerticalAlignment.bottom); format.wordSpacing = 2; // Set word spacing format.characterSpacing = 1; // Set character spacing // Set font @@ -353,4 +351,4 @@ document.save('Output.pdf'); // Close the document document.destroy(); {% endhighlight %} -{% endtabs %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Watermarks.md b/Document-Processing/PDF/PDF-Library/javascript/Watermarks.md index a263a252d..657f350b9 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Watermarks.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Watermarks.md @@ -15,7 +15,7 @@ This example demonstrates how to add a text watermark using standard fonts in a {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import { PdfDocument, PdfPage, PdfGraphics, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush} from '@syncfusion/ej2-pdf'; +import { PdfDocument, PdfPage, PdfGraphics, PdfStandardFont, PdfGraphicsState, PdfFontFamily, PdfFontStyle, PdfBrush} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(); @@ -24,7 +24,7 @@ let page: PdfPage = document.addPage(); // Gets the graphics of the PDF page let graphics: PdfGraphics = page.graphics; // Create a new font -let font: PdfFont = document.embedFont(PdfFontFamily.helvetica, 20, PdfFontStyle.regular); +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 20, PdfFontStyle.regular); // Save the graphics state let state: PdfGraphicsState = graphics.save(); // Set graphics transparency