From ac2ea07e0b165f4ab2b352efd1d2069566ac11ed Mon Sep 17 00:00:00 2001 From: sameerkhan001 Date: Wed, 17 Dec 2025 11:31:29 +0530 Subject: [PATCH 01/10] 999358-hotfix: Added proper link and code changes in JavaScript UG. --- .../PDF/PDF-Library/javascript/Annotations.md | 154 ++++- .../PDF/PDF-Library/javascript/Bookmarks.md | 53 +- .../javascript/Create-PDF-document-angular.md | 6 + .../Create-PDF-document-asp-net-core.md | 2 +- .../Create-PDF-document-asp-net-mvc.md | 6 +- .../Create-PDF-document-javascript.md | 11 +- .../javascript/Create-PDF-document-react.md | 5 +- .../Create-PDF-document-typescript.md | 21 +- .../javascript/Create-PDF-document-vue.md | 5 +- .../javascript/DigitalSignature.md | 172 +++--- .../PDF/PDF-Library/javascript/FormFields.md | 88 ++- .../PDF/PDF-Library/javascript/HyperLinks.md | 42 +- .../javascript/Image-Extraction.md | 94 +-- .../PDF/PDF-Library/javascript/Images.md | 12 + .../PDF/PDF-Library/javascript/Layers.md | 41 +- .../PDF/PDF-Library/javascript/Lists.md | 6 + .../PDF-Library/javascript/Merge-Document.md | 79 ++- .../javascript/Open-and-save-PDF-files.md | 4 +- .../PDF/PDF-Library/javascript/Overview.md | 14 +- .../PDF-Library/javascript/PDF-document.md | 80 +-- .../PDF/PDF-Library/javascript/PDF-pages.md | 249 ++++---- .../PDF/PDF-Library/javascript/Redaction.md | 80 ++- .../PDF/PDF-Library/javascript/Shapes.md | 546 ++++-------------- .../PDF-Library/javascript/Split-Documents.md | 11 +- .../PDF/PDF-Library/javascript/Templates.md | 58 +- .../PDF-Library/javascript/Text-Extraction.md | 105 ++-- .../PDF/PDF-Library/javascript/Text.md | 6 +- .../PDF/PDF-Library/javascript/Watermarks.md | 38 +- 28 files changed, 934 insertions(+), 1054 deletions(-) diff --git a/Document-Processing/PDF/PDF-Library/javascript/Annotations.md b/Document-Processing/PDF/PDF-Library/javascript/Annotations.md index 3e7366ed3..fdfb1fd30 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Annotations.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Annotations.md @@ -42,6 +42,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Creates a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -96,6 +97,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -153,6 +155,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Creates a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -205,6 +208,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -263,6 +267,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Creates a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -325,6 +330,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -388,6 +394,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Creates a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -548,6 +555,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -616,6 +624,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add a new page to the PDF @@ -694,6 +703,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -759,6 +769,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -814,6 +825,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -867,6 +879,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -921,6 +934,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -971,6 +985,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1008,6 +1023,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1053,6 +1069,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1100,6 +1117,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1152,8 +1170,7 @@ borderColor: { r: 255, g: 0, b: 0}, repeatText: true, overlayText: 'Sample Overlay', font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular), - textColor: { r: 0, g: 0, b: 0}, - appearanceFillColor: { r: 255, g: 255, b: 255} + textColor: { r: 0, g: 0, b: 0} }); // Add annotation to the page page.annotations.add(annotation); @@ -1164,6 +1181,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1176,8 +1194,7 @@ var annotation = new ej.pdf.PdfRedactionAnnotation( repeatText: true, overlayText: 'Sample Overlay', font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular), - textColor: { r: 0, g: 0, b: 0 }, - appearanceFillColor: { r: 255, g: 255, b: 255 } + textColor: { r: 0, g: 0, b: 0 } } ); // Add annotation to the page @@ -1207,8 +1224,7 @@ borderColor: { r: 255, g: 0, b: 0}, repeatText: true, overlayText: 'Sample Overlay', font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular), - textColor: { r: 0, g: 0, b: 0}, - appearanceFillColor: { r: 255, g: 255, b: 255} + textColor: { r: 0, g: 0, b: 0} }); // Add annotation to the page page.annotations.add(annotation); @@ -1219,6 +1235,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1231,8 +1248,7 @@ var annotation = new ej.pdf.PdfRedactionAnnotation( repeatText: true, overlayText: 'Sample Overlay', font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular), - textColor: { r: 0, g: 0, b: 0 }, - appearanceFillColor: { r: 255, g: 255, b: 255 } + textColor: { r: 0, g: 0, b: 0 } } ); // Add annotation to the page @@ -1270,6 +1286,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1311,6 +1328,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1358,6 +1376,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1421,6 +1440,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1487,6 +1507,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1546,6 +1567,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1609,6 +1631,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1677,6 +1700,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1747,6 +1771,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1808,6 +1833,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1873,6 +1899,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Adds a new page to the PDF @@ -1932,6 +1959,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -1970,10 +1998,74 @@ This example demonstrates how to access a measurement annotation from a PDF page Common types of measurement annotations include: -* Line - Represents a straight distance between two points. -* Circle - Used to measure circular dimensions. -* Square - Defines rectangular or square measurements. -* Angle - Displays angular measurements between two intersecting lines. +* Line - Represents a straight distance between two points.(distance) +* Circle - Used to measure circular dimensions.(Radius) +* Square - Defines rectangular or square measurements.(Area) +* Angle - Displays angular measurements between two intersecting lines.(degrees) + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfLineAnnotation, PdfAnnotationLineEndingStyle, PdfLineEndingStyle, PdfAnnotationCaption, PdfLineCaptionType, PdfMeasurementUnit} from '@syncfusion/ej2-pdf'; + +// Creates a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Creates a new line annotation. +let lineAnnotation: PdfLineAnnotation = new PdfLineAnnotation({ x: 80, y: 420 }, { x: 150, y: 420 }, { + text: 'Line Annotation', + author: 'Syncfusion', + color: { r: 255, g: 0, b: 0 }, + innerColor: { r: 255, g: 255, b: 0 }, + lineEndingStyle: new PdfAnnotationLineEndingStyle({ begin: PdfLineEndingStyle.circle, end: PdfLineEndingStyle.diamond }), + opacity: 0.5, + measurementUnit: PdfMeasurementUnit.centimeter +}); +// Assigns the leader line +lineAnnotation.leaderExt = 0; +lineAnnotation.leaderLine = 0; +// Assigns the line caption type +lineAnnotation.caption = new PdfAnnotationCaption({ cap: true, type: PdfLineCaptionType.inline }); +// Adds annotation to the page +page.annotations.add(lineAnnotation); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} + +// Creates a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Creates a new line annotation. +var lineAnnotation = new ej.pdf.PdfLineAnnotation({x:80,y:420},{x:150,y:420},{ +text:'Line Annotation', +author:'Syncfusion', +color:{r:255,g:0,b:0}, +innerColor:{r:255,g:255,b:0}, +lineEndingStyle:new ej.pdf.PdfAnnotationLineEndingStyle({begin:ej.pdf.PdfLineEndingStyle.circle,end:ej.pdf.PdfLineEndingStyle.diamond}), +opacity:0.5, +measurementUnit: PdfMeasurementUnit.centimeter +}); +// Assigns the leader line +lineAnnotation.leaderExt = 0; +lineAnnotation.leaderLine = 0; +// Assigns the line caption type +lineAnnotation.caption = new ej.pdf.PdfAnnotationCaption({cap:true,type:ej.pdf.PdfLineCaptionType.inline}); +// Adds annotation to the page +page.annotations.add(lineAnnotation); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a measurement annotation in an existing PDF document. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -1984,9 +2076,11 @@ let document: PdfDocument = new PdfDocument(data); // Access the first page let page: PdfPage = document.getPage(0); // Access the annotation at index 0 -let annotation: PdfLineAnnotation = page.annotations.at(0) PdfLineAnnotation; +let annotation: PdfLineAnnotation = page.annotations.at(0) as PdfLineAnnotation; // Sets the measurement unit of line measurement annoation as centimeter annotation.unit = PdfMeasurementUnit.centimeter; +// Sets the flag to have measurement dictionary of the line annotation. +annotation.measure = true; // Save the document document.save('Output.pdf'); // Close the document @@ -1994,6 +2088,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -2003,6 +2098,7 @@ var annotation = page.annotations.at(0); // Sets the measurement unit of line measurement annotation as centimeter if (annotation instanceof ej.pdf.PdfLineAnnotation) { annotation.unit = ej.pdf.PdfMeasurementUnit.centimeter; + annotation.measure = true; } // Save the document document.save('Output.pdf'); @@ -2028,8 +2124,7 @@ let page: PdfPage = document.getPage(0); let annotation: PdfPopupAnnotation = page.annotations.at(0) as PdfPopupAnnotation; // Modified its properties annotation.text = 'Popup annotation'; -annotation.color = { r: 0, g: 128, b: 255} -; +annotation.color = { r: 0, g: 128, b: 255}; annotation.opacity = 0.5; // Save the document document.save('Output.pdf'); @@ -2038,6 +2133,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Access the first page @@ -2074,6 +2170,8 @@ let page: PdfPage = document.getPage(0); let annotation: PdfAnnotation = page.annotations.at(0); // Remove an annotation from the collection page.annotations.remove(annotation); +// Remove an annotation with specific index +page.annotations.removeAt(1); // Save the document document.save('Output.pdf'); // Close the document @@ -2089,6 +2187,8 @@ var page = document.getPage(0); var annotation = page.annotations.at(0); // Remove an annotation from the collection page.annotations.remove(annotation); +// Remove an annotation with specific index +page.annotations.removeAt(1); // Save the document document.save('Output.pdf'); // Close the document @@ -2134,9 +2234,11 @@ document.destroy(); {% endhighlight %} {% endtabs %} +N> Setting `document.flatten = true;` flattens all interactive elements in the PDF, converting form fields and annotations into static content throughout the entire document. + ## Importing annotations -This example demonstrates how to import annotations into a PDF document using the PdfDocument. `importAnnotations` method. +This example demonstrates how to import annotations into a PDF document using the PdfDocument. `importAnnotations` method. The DataFormat enum specifies the format of the annotation data being imported, such as FDF, XFDF, JSON, or XML. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} @@ -2167,25 +2269,31 @@ pdfDocument.destroy(); ## Exporting annotations -This example demonstrates how to export annotations from a PDF document using the PdfDocument.exportAnnotations method. +This example demonstrates how to export annotations from a PDF document using the PdfDocument.exportAnnotations method. The DataFormat enum specifies the format of the annotation data being exported, such as FDF, XFDF, JSON, or XML. {% tabs %} {% highlight typescript tabtitle="TypeScript" %} -import {PdfDocument} from '@syncfusion/ej2-pdf'; +import {PdfDocument, PdfAnnotationExportSettings, DataFormat} from '@syncfusion/ej2-pdf'; // Load an existing PDF document let document: PdfDocument = new PdfDocument(data); -// Exports the annotations from the PDF document. -let data: Uint8Array = document.exportAnnotations(); -// Close the document +// Sets export data format as JSON for annotation export settings +let settings = new PdfAnnotationExportSettings(); +settings.dataFormat = DataFormat.json; +// Export annotations to JSON format +let jsonData = document.exportAnnotations('annotations.json', settings); +// Destroy the document document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); -// Export the annotations from the PDF document -var data = document.exportAnnotations(); +// Sets export data format as JSON for annotation export settings +var settings = new ej.pdf.PdfAnnotationExportSettings(); +settings.dataFormat = ej.pdf.DataFormat.json; +// Export annotations to JSON format +var jsonData = document.exportAnnotations('annotations.json', settings); // Close the document document.destroy(); diff --git a/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md b/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md index ed93592c3..969ac705c 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md @@ -34,6 +34,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Create a new PDF document var document = new ej.pdf.PdfDocument(); // Add page @@ -52,49 +53,6 @@ document.destroy(); {% endhighlight %} {% endtabs %} -## Adding Bookmarks in an existing PDF document - -This example demonstrates how to add bookmarks to an existing PDF document using the `PdfBookmark` class. This allows you to enhance navigation in already created PDF document. - -{% tabs %} -{% highlight javascript tabtitle="TypeScript" %} -import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf'; - -// Load an existing PDF document -let document: PdfDocument = new PdfDocument(data); -// Get page -let page: PdfPage = document.getPage(0); -// Get the bookmarks -let bookmarks: PdfBookmarkBase = document.bookmarks; -// Gets the bookmark at the specified index -let bookmark: PdfBookmark = bookmarks.at(0) as PdfBookmark; -// Set the destination -bookmark.destination = new PdfDestination(page, { x: 100, y: 200 }); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); - -{% endhighlight %} -{% highlight javascript tabtitle="JavaScript" %} -// Load an existing PDF document -var document = new ej.pdf.PdfDocument(data); -// Get page -var page = document.getPage(0); -// Get the bookmarks -var bookmarks = document.bookmarks; -// Get the bookmark at the specified index -var bookmark = bookmarks.at(0); -// Set the destination -bookmark.destination = new ej.pdf.PdfDestination(page, { x: 100, y: 200 }); -// Save the document -document.save('Output.pdf'); -// Close the document -document.destroy(); - -{% endhighlight %} -{% endtabs %} - ## Inserting Bookmarks in an existing PDF This example demonstrates how to insert bookmarks at a specific position in an existing PDF document using the `PdfBookmark` class. This feature allows precise control over bookmark order. @@ -109,7 +67,7 @@ let document: PdfDocument = new PdfDocument(data); let page: PdfPage = document.getPage(0) as PdfPage; // Get the bookmarks let bookmarks: PdfBookmarkBase = document.bookmarks; -// Add a new outline to the PDF document +// Add a new bookmark at the specified page index let bookmark: PdfBookmark = bookmarks.add('Introduction', 1); // Sets destination to the bookmark bookmark.destination = new PdfDestination(page, { x: 100, y: 200 }); @@ -120,13 +78,14 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Get the first page var page = document.getPage(0); // Get the bookmarks var bookmarks = document.bookmarks; -// Add a new outline to the PDF document +// Add a new bookmark at the specified page index var bookmark = bookmarks.add('Introduction', 1); // Set destination to the bookmark bookmark.destination = new ej.pdf.PdfDestination(page, { x: 100, y: 200 }); @@ -160,6 +119,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Get the first page @@ -199,6 +159,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Get the first page @@ -238,6 +199,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Get the bookmarks @@ -275,6 +237,7 @@ document.destroy(); {% endhighlight %} {% highlight javascript tabtitle="JavaScript" %} + // Load an existing PDF document var document = new ej.pdf.PdfDocument(data); // Get bookmarks diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md index c9e755322..b24952696 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md @@ -44,6 +44,12 @@ All the available JS 2 packages are published in `npmjs.com` registry. npm install @syncfusion/ej2-pdf --save ``` N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. +* Copy the contents of the openjpeg folder from ./node_modules/@syncfusion/ej2-pdf-data-extract/dist to the public directory using the command: +```bash +cp -R ./node_modules/@syncfusion/ej2-pdf-data-extract/dist/openjpeg public/js/openjpeg +``` +* Confirm that there is an 'openjpeg' directory within your public directory, if you extracting images from PDF. +* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. ## Create a PDF document using TypeScript diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md index 7fa08b1cb..50cab7ca0 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md @@ -39,7 +39,7 @@ N> Check out the following topics for including script references in an ASP.NET * [CDN](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#cdn-reference) * [NPM Package](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#node-package-manager-npm) * [CRG](https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator) -N> And ensure the application includes an `openjpeg` folder under `wwwroot` (or a publicly accessible static path). This folder must contain the `openjpeg.js` and `openjpeg.wasm` files, along with the PDF file to extract images. Keep these in the same static content area as `ej2.min.js`. +And ensure the application includes an `openjpeg` folder under `wwwroot` (or a publicly accessible static path). This folder must contain the `openjpeg.js` and `openjpeg.wasm` files, along with the PDF file to extract images. Keep these in the same static content area as `ej2.min.js`. Step 6: **Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md index ab4cfb54d..2e8888b1c 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md @@ -36,7 +36,11 @@ Step 5: **Add script reference** : Add the required scripts using the CDN inside {% endhighlight %} {% endtabs %} -N> And ensure the application includes an `openjpeg` folder under `Scripts` (or a publicly accessible static path). This folder must contain the `openjpeg.js` and `openjpeg.wasm` files, along with the PDF file to extract images. Keep these in the same static content area as `ej2.min.js`. +N> Check out the following topics for including script references in an ASP.NET MVC application to enable PDF creation using the Syncfusion® JavaScript PDF library: +* [CDN](https://ej2.syncfusion.com/aspnetmvc/documentation/common/adding-script-references) +* [NPM Package](https://ej2.syncfusion.com/aspnetmvc/documentation/common/adding-script-references#node-package-manager-npm) +* [CRG](https://ej2.syncfusion.com/aspnetmvc/documentation/common/custom-resource-generator) +And ensure the application includes an `openjpeg` folder under `Scripts` (or a publicly accessible static path). This folder must contain the `openjpeg.js` and `openjpeg.wasm` files, along with the PDF file to extract images. Keep these in the same static content area as `ej2.min.js`. Step 6: **Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md index a1c972f74..ba8083ce1 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md @@ -39,6 +39,11 @@ Step 3: Create a HTML page (index.html) in `my-app` location and add the CDN lin {% endhighlight %} {% endtabs %} +N> For the JavaScript platform, place the **openjpeg** folder in the same location as your `index.html` file. Ensure that your application includes an `openjpeg` folder under `Scripts` (or any publicly accessible static path). This folder must contain the following: +* `openjpeg.js` +* `openjpeg.wasm` +Along with the PDF file from which you want to extract images. Keep these files in the same static content area as `ej2.min.js` to ensure proper loading. + Step 4: **Create a PDF document** : Add the script in `index.html` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. {% tabs %} @@ -73,12 +78,6 @@ Step 4: **Create a PDF document** : Add the script in `index.html` by creating a {% endhighlight %} {% endtabs %} -N> For the JavaScript platform, place the **openjpeg** folder in the same location as your `index.html` file. Ensure that your application includes an `openjpeg` folder under `Scripts` (or any publicly accessible static path). This folder must contain the following: -* `openjpeg.js` -* `openjpeg.wasm` - -Along with the PDF file from which you want to extract images. Keep these files in the same static content area as `ej2.min.js` to ensure proper loading. - By executing the program, you will get the PDF document as follows. ![Output PDF document](Getting_started_images/Output.png) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md index 7316f44d8..ded0cbd8e 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md @@ -24,18 +24,17 @@ All the available JS 2 packages are published in `npmjs.com` registry. npm install @syncfusion/ej2-pdf --save ``` N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. - * Copy the contents of the openjpeg folder from ./node_modules/@syncfusion/ej2-pdf-data-extract/dist to the public directory using the command: ```bash cp -R ./node_modules/@syncfusion/ej2-pdf-data-extract/dist/openjpeg public/openjpeg ``` * Confirm that there is an 'openjpeg' directory within your public directory, if you extracting images from PDF. -* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. Additional information can be found in the [Troubleshooting](./troubleshooting/troubleshooting) section. +* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. **Create a PDF document** : Add the script in `App.jsx` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. {% tabs %} -{% highlight jsx tabtitle="~/App.jsx" %} +{% highlight html tabtitle="~/App.jsx" %} import React from 'react'; export default function App() { diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md index 10a2f269d..3c720dd51 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md @@ -14,6 +14,21 @@ The Syncfusion® TypeScript PDF library is used to create, read, a This guide explains how to integrate the TypeScript PDF library into an TypeScript application. +## Installing Syncfusion® JavaScript PDF package + +All the available JS 2 packages are published in `npmjs.com` registry. + +* To install PDF component, use the following command. + +```bash +npm install @syncfusion/ej2-pdf --save +``` +N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. +For the TypeScript platform, place the **openjpeg** folder in the same location as your `index.html` file. Ensure that your application includes an `openjpeg` folder under `Scripts` (or any publicly accessible static path). This folder must contain the following: +* `openjpeg.js` +* `openjpeg.wasm` +Along with the PDF file from which you want to extract images. + ## Dependencies The following list of dependencies are required to use the `TypeScript PDF library` component in your application. @@ -40,12 +55,6 @@ The following list of dependencies are required to use the `TypeScript PDF libra {% endhighlight %} {% endtabs %} -N> For the TypeScript platform, place the **openjpeg** folder in the same location as your `index.html` file. Ensure that your application includes an `openjpeg` folder under `Scripts` (or any publicly accessible static path). This folder must contain the following: -* `openjpeg.js` -* `openjpeg.wasm` - -Along with the PDF file from which you want to extract images. Keep these files in the same static content area as `ej2.min.js` to ensure proper loading. - * Include the following namespaces in `index.ts` file. {% tabs %} diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md index 49269bf01..e3d9d37f2 100644 --- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md @@ -48,18 +48,17 @@ All the available JS 2 packages are published in `npmjs.com` registry. npm install @syncfusion/ej2-pdf --save ``` N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. - * Copy the contents of the openjpeg folder from ./node_modules/@syncfusion/ej2-pdf-data-extract/dist to the public directory using the command: ```bash cp -R ./node_modules/@syncfusion/ej2-pdf-data-extract/dist/openjpeg public/js/openjpeg ``` * Confirm that there is an 'openjpeg' directory within your public directory, if you extracting images from PDF. -* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. Additional information can be found in the [Troubleshooting](./troubleshooting/troubleshooting) section. +* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. * **Create a PDF document** : Add the script in `App.vue` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. {% tabs %} -{% highlight vue tabtitle="~/App.vue" %} +{% highlight html tabtitle="~/App.vue" %}