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 96de970ec8..91e287afb9 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
@@ -1,73 +1,120 @@
---
layout: post
-title: Create or Generate PDF file in Angular | Syncfusion
-description: Learn how to create a PDF file in Angular with easy steps using JavaScript PDF Library without depending on Adobe
+title: Create or Generate a PDF File in an Angular Application | Syncfusion
+description: Learn how to create a PDF file in an Angular application with easy steps using the JavaScript PDF Library without depending on Adobe.
platform: document-processing
control: PDF
documentation: ug
-keywords: angular create pdf, angular generate pdf, angular pdf library, ej2 pdf angular, JavaScript
+keywords: angular create pdf, angular generate pdf, angular pdf library, ej2 pdf angular, javascript
+canonical_url: https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/create-pdf-document-angular
---
-# Create or Generate PDF file in Angular application
+# Create or Generate a PDF File in an Angular Application
-The [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) is used to create, read, and edit PDF documents. The [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) also offers functionality to merge, split, stamp, fill forms, and secure PDF files.
+The [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) is used to create, read, and edit PDF documents. The [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) also offers functionality to merge, split, stamp, fill PDF forms, and secure PDF files.
-This guide explains how to integrate the [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) into an Angular application.
+This guide explains how to integrate the [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) into an Angular application that runs in the browser. The generated PDF is downloaded directly from the browser; no server-side PDF rendering is involved.
-## Setup Angular Environment
+## Prerequisites
-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.
+Before you begin, make sure you have the following installed:
+
+- Angular 20 or later.
+- Node.js 18 or later.
+- npm 9 or later, or Yarn 1.22 or later.
+- Visual Studio Code or another code editor.
+- A supported browser such as the latest versions of Microsoft Edge, Google Chrome, or Mozilla Firefox.
+
+To verify your Node.js and npm versions, run the following commands:
```bash
-npm install -g @angular/cli
+node --version
+npm --version
```
-N> To install a specific Angular CLI version, use: **npm install --save @angular/cli@12.0.2**
+## Project Setup
+
+This guide includes all the steps needed to create and run the sample in an Angular application. You can either create a new project or use an existing one.
+
+### Option A: Create a New Angular Project
+
+If you do not have an Angular project, create one by using the Angular CLI:
+
+```bash
+npm install -g @angular/cli
+ng new my-pdf-app
+cd my-pdf-app
+```
-## Create an Angular Application
+### Option B: Use an Existing Angular Project
-Start a new Angular application using the Angular CLI command as follows.
+If you already have an Angular project, open its root folder and continue with the package installation steps:
```bash
-ng new my-app
-cd my-app
+cd path/to/your-existing-app
```
-## Installing JavaScript PDF package
+## Installing the JavaScript PDF Library package
-All Syncfusion® JS 2 packages are published in `npmjs.com` registry.
+All Syncfusion® JS 2 packages are published in `npmjs.com` registry. The `npm install` command below resolves `@syncfusion/ej2-pdf` to the latest stable version that is compatible with Angular 20 or later.
-* To install PDF component, use the following command.
+* To install the [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library), use the following command.
```bash
npm install @syncfusion/ej2-pdf --save
```
-N> For image and data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
-* Copy the `ej2-pdf-lib` folder from the @syncfusion/ej2-pdf-data-extract package into your project's **public, dist, or assets** directory (where your static files are served).
-* Make sure the `ej2-pdf-lib` folder exists in your final build output if you need to extract images or data from PDF files.
-* Ensure your server serves .wasm files with the **Content-Type: application/wasm** MIME type.
-(Angular’s development server already handles this; configure production servers manually.)
-* This setup is not required for **basic PDF creation**.
-## Create a PDF document
+* If you prefer Yarn, use the following command.
+
+```bash
+yarn add @syncfusion/ej2-pdf
+```
+
+N> For image and data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. Note the following:
+- Copy the `ej2-pdf-lib` folder from the `@syncfusion/ej2-pdf-data-extract` package into your project's **public**, **dist**, or **assets** directory (wherever your static files are served).
+- Make sure the `ej2-pdf-lib` folder exists in your final build output if you need to extract images or data from PDF files.
+- Ensure your server serves `.wasm` files with the **Content-Type: application/wasm** MIME type. Angular's development server already handles this; configure production servers manually.
+- This setup is not required for **basic PDF creation**.
+
+## Add the Syncfusion License Key
+
+If your project requires a Syncfusion license, register the license key before using the PDF API. Add the license registration code in your startup file, such as `main.ts`.
-* Add a simple button to `app.component.html` and attach a click handler that uses the TypeScript PDF API to create a new PDF document.
+```ts
+import { registerLicense } from '@syncfusion/ej2-base';
+
+registerLicense('YOUR_LICENSE_KEY');
+```
+
+Replace `YOUR_LICENSE_KEY` with the key from your Syncfusion account. For more information, see the [Syncfusion licensing documentation](https://help.syncfusion.com/document-processing/licensing/overview).
+
+## Browser and Environment Compatibility
+
+| Environment | Supported version |
+| --- | --- |
+| Angular | 20 or later |
+| Node.js | 18.x or later |
+| TypeScript | Installed with Angular |
+| Visual Studio Code | Latest version recommended |
+| Chrome | Latest two major versions |
+| Edge | Latest two major versions |
+| Firefox | Latest two major versions |
+
+> For server-side rendering or Angular Universal, create the PDF document only in browser execution paths. The sample in this guide uses a click handler that runs in the browser, so no additional lifecycle handling is required.
+
+## Create a PDF Document
+
+Add a button to the Angular template and attach a click handler that uses the [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) to create a new PDF document.
+
+* Add the following button to `app.component.html`.
{% tabs %}
{% highlight html tabtitle="app.component.html" %}
-
-
- PDF creation example
-
-
-
-
-
+
{% endhighlight %}
{% endtabs %}
-* Include the following namespaces in `app.component.ts` file.
+* Include the following namespaces in `app.component.ts`.
{% tabs %}
{% highlight ts tabtitle="~/app.component.ts" %}
@@ -75,7 +122,7 @@ import { PdfDocument, PdfGraphics, PdfPage, PdfFontFamily, PdfFontStyle, PdfFont
{% endhighlight %}
{% endtabs %}
-* Include the following code example in the click event of the button in `app.component.ts` to generate a PDF document.
+* Include the following code in the click event of the button in `app.component.ts` to generate a PDF document.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -100,14 +147,44 @@ document.getElementById('normalButton').onclick = (): void => {
{% endhighlight %}
{% endtabs %}
-## Run the application
+## Code Explanation
+
+- `PdfDocument` — creates a new PDF document instance.
+- `addPage()` — appends a blank page to the document and returns the `PdfPage` object.
+- `page.graphics` — returns the `PdfGraphics` drawing surface for the page.
+- `embedFont(family, size, style)` — embeds one of the standard PDF font families (here, Helvetica 36pt regular) and returns a `PdfFont` object.
+- `new PdfBrush({ r, g, b })` — creates a solid color brush from an RGB object (each channel `0`-`255`); here, black.
+- `drawString(text, font, layoutRect, brush)` — draws the text inside the rectangle defined by `x`, `y`, `width`, and `height`.
+- `save('Output.pdf')` — saves the PDF and triggers a browser download with the specified file name. The file is sent to the browser's default downloads folder.
+- `destroy()` — releases native resources held by the document.
-Use the following command to run the application in browser.
+## Run the Application
+
+Use the following command to run the application in the browser:
```bash
ng serve --open
```
-By executing the program, you will get the PDF document as follows.
+When you click **Create PDF document**, the PDF file is generated in the browser and downloaded as `Output.pdf` to your default downloads folder.
+
+
+
+## Troubleshooting
+
+| Problem | Cause | Resolution |
+|---|---|---|
+| `TS2304: Cannot find name 'PdfDocument'` (or similar) | The import line is missing or the package is not installed | Confirm `npm install @syncfusion/ej2-pdf` ran successfully and that the import is in `app.component.ts` |
+| `Error: Cannot find module '@syncfusion/ej2-pdf'` | The package is not installed | Run `npm install @syncfusion/ej2-pdf --save` |
+| Button click does nothing | The button ID does not match the ID used in `getElementById` | Confirm the button's `id` is `normalButton` |
+| PDF file does not download | The browser blocks the download | Check the browser's download settings and the downloads folder |
+| Build fails with TypeScript errors | The Angular TypeScript version is incompatible with the PDF package | Update Angular to 20 or later and run `npm install` again |
+| `registerLicense` warning at runtime | The license key is missing or invalid | Confirm the key is set in `main.ts` and is the correct key for your Syncfusion account |
+
+## Additional Resources
-
\ No newline at end of file
+- [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library)
+- [JavaScript PDF Library documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview)
+- [JavaScript PDF Library API reference](https://ej2.syncfusion.com/documentation/api/pdf)
+- [JavaScript PDF Library examples](https://document.syncfusion.com/demos/pdf/angular/#/fluent2/pdf/default)
+- [Syncfusion licensing documentation](https://help.syncfusion.com/document-processing/licensing/overview)
\ No newline at end of file
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 211af02fc7..1fb228f4f7 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
@@ -1,30 +1,52 @@
---
layout: post
-title: Create or Generate PDF in ASP.NET Core | Syncfusion
-description: Learn how to create or generate a PDF file in ASP.NET Core applications with easy steps using JavaScript PDF Library without depending on Adobe.
+title: Create or Generate a PDF in ASP.NET Core | Syncfusion
+description: Learn how to create or generate a PDF file in an ASP.NET Core application with easy steps using the JavaScript PDF Library without depending on Adobe.
platform: document-processing
control: PDF
documentation: ug
keywords: .net core create pdf, edit pdf, merge, pdf form, fill form, digital sign, table, javascript, dotnet core pdf, asp generate pdf, aspx generate pdf
+canonical_url: https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/create-pdf-document-asp-net-core
---
-# Create or Generate PDF in ASP.NET Core
+# Create or Generate a PDF in ASP.NET Core
The [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) is used to create, read, and edit PDF documents. The [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) also offers functionality to merge, split, stamp, fill forms, and secure PDF files.
-This guide explains how to integrate the [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) into an ASP.NET Core application.
+This guide explains how to integrate the [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) into an ASP.NET Core application. The PDF is generated **client-side in the browser** using the Syncfusion JavaScript PDF Library loaded from a CDN; ASP.NET Core is used to host the page that triggers the download.
+
+## Prerequisites
+
+Before you begin, make sure you have the following installed:
+
+- Visual Studio 2022 (any edition) with the **ASP.NET and web development** workload.
+- .NET SDK 8.0 (LTS) or 9.0.
+- An active internet connection (the sample loads the JavaScript PDF Library from the Syncfusion CDN).
+- A supported browser such as the latest versions of Microsoft Edge, Google Chrome, or Mozilla Firefox.
+
+To verify your .NET SDK version, run:
+
+```bash
+dotnet --version
+```
## Integrate the PDF Library into an ASP.NET Core application
Step 1: Start Visual Studio and select **Create a new project**.
+
Step 2: In the **Create a new project** dialog, select **ASP.NET Core Web App**.
+

+
Step 3: In the **Configure your new project** dialog, enter the project name and select **Next**.
+

-Step 4: In the **Additional information** dialog, select a .NET LTS version (for example, **.NET 8.0 (Long-term Support)**) and then select **Create**.
+
+Step 4: In the **Additional information** dialog, select a .NET LTS version (for example, **.NET 8.0 (Long-term support)**) and then select **Create**.
+

-Step 5: **Add script reference**: Add the required scripts using the CDN inside the `` of `~/Views/Shared/_Layout.cshtml` as follows:
+Step 5: Add the script reference: open `~/Views/Shared/_Layout.cshtml` and add the Syncfusion CDN reference inside the `` element. Also confirm that the layout contains `@await RenderSectionAsync("Scripts", required: false)` so the `@section Scripts` block in Step 6 can render.
{% tabs %}
{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
@@ -32,17 +54,19 @@ Step 5: **Add script reference**: Add the required scripts using the CDN inside
+
+ @RenderBody()
+ @await RenderSectionAsync("Scripts", required: false)
+
{% endhighlight %}
{% endtabs %}
N> Check out the following topics for including script references in an ASP.NET Core application to enable PDF creation using the [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/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)
-For image and data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
-Ensure that your application includes an `ej2-pdf-lib` folder within a publicly accessible static directory (such as wwwroot, public, or dist). This folder must contain the required `.js` and `.wasm` files needed for image and data extraction.
+- [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)
-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.
+Step 6: Create a PDF document: open `~/Views/Home/Index.cshtml` and add a button plus a click handler that uses the [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) to generate a PDF in the browser.
{% tabs %}
{% highlight cshtml tabtitle="~/Views/Home/Index.cshtml" %}
@@ -54,32 +78,70 @@ Step 6: **Create a PDF document**: Add the script in `~/Views/Home/Index.cshtml`
@section Scripts {
}
{% endhighlight %}
{% endtabs %}
-step 7: **Build the project**: Click on Build > Build Solution or press Ctrl + Shift + B to build the project.
+## Code Explanation
+
+- `ej.pdf.PdfDocument` — creates a new PDF document instance.
+- `addPage()` — appends a blank page to the document and returns the `PdfPage` object.
+- `page.graphics` — returns the `PdfGraphics` drawing surface for the page.
+- `embedFont(family, size, style)` — embeds one of the standard PDF font families (here, Helvetica 36pt regular) and returns a `PdfStandardFont` object.
+- `new ej.pdf.PdfBrush({ r, g, b })` — creates a solid color brush from an RGB object (each channel `0`-`255`); here, black.
+- `drawString(text, font, layoutRect, brush)` — draws the text inside the rectangle defined by `x`, `y`, `width`, and `height`.
+- `graphics.clientSize.width` — the writable width of the page in points.
+- `save('output.pdf')` — saves the PDF and **triggers a client-side browser download** with the specified file name. The file is sent to the browser's default downloads folder; nothing is written to the server.
+- `destroy()` — releases native resources held by the document.
+
+## Build and Run the Application
+
+Step 7: Build the project: click **Build** > **Build Solution** or press **Ctrl + Shift + B** to build the project.
+
+Step 8: Run the project: click the **Start** button (green arrow) or press **F5** to run the app. Visual Studio launches the app in your default browser.
+
+After running the application, click **Generate PDF document**. The browser downloads `output.pdf`, which contains a single page with the text "Hello World!!!" drawn at the top-left.
+
+
+
+## Additional Configuration
+
+N> For image and data extraction features, install the `@syncfusion/ej2-pdf-data-extract` package as an add-on (NPM approach), then copy the `ej2-pdf-lib` folder from `node_modules/@syncfusion/ej2-pdf-data-extract/dist/ej2-pdf-lib` into a publicly accessible location under `wwwroot/` (for example, `wwwroot/lib/ej2-pdf-lib/`). The folder must contain the required `.js` and `.wasm` files. This setup is not required for **basic PDF creation** as shown in this guide.
+
+## Troubleshooting
-Step 8: **Run the project**: Click the Start button (green arrow) or press F5 to run the app.
+| Problem | Cause | Resolution |
+|---|---|---|
+| `ej is not defined` in the browser console | The CDN script tag is missing or blocked | Confirm the `
+
+ @RenderBody()
+ @await RenderSectionAsync("Scripts", required: false)
+
{% endhighlight %}
{% endtabs %}
-N> Check out the following topics for including script references in an ASP.NET MVC application to enable PDF creation using the [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/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)
-For image and data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
-Ensure that your application includes an `ej2-pdf-lib` folder within a publicly accessible static directory (such as wwwroot, public, or dist). This folder must contain the required `.js` and `.wasm` files needed for image and data extraction.
+N> Check out the following topics for including script references in an ASP.NET Core MVC application to enable PDF creation using the [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/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)
+
+N> The `31.2.15` CDN version is compatible with the .NET 8 and .NET 9 target frameworks. If you use a different Syncfusion version in your application, replace the CDN URL with the matching version.
+
+## Generate the PDF
-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.
+Step 6: Create a PDF document: open `~/Views/Home/Index.cshtml` and add a button plus a click handler that uses the [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) to generate a PDF in the browser.
{% tabs %}
{% highlight cshtml tabtitle="~/Index.cshtml" %}
@@ -55,32 +87,81 @@ Step 6: **Create a PDF document**: Add the script in `~/Views/Home/Index.cshtml`
@section Scripts {
}
{% endhighlight %}
{% endtabs %}
-Step 7: **Build the project**: Click on Build > Build Solution or press Ctrl + Shift + B to build the project.
+## Code Explanation
-Step 8: **Run the project**: Click the Start button (green arrow) or press F5 to run the app.
+- `ej.pdf.PdfDocument` — creates a new PDF document instance.
+- `addPage()` — appends a blank page to the document and returns the `PdfPage` object.
+- `page.graphics` — returns the `PdfGraphics` drawing surface for the page.
+- `embedFont(family, size, style)` — embeds one of the standard PDF font families (here, Helvetica 36pt regular) and returns a `PdfStandardFont` object.
+- `new ej.pdf.PdfBrush({ r, g, b })` — creates a solid color brush from an RGB object (each channel `0`-`255`); here, black.
+- `drawString(text, font, layoutRect, brush)` — draws the text inside the rectangle defined by `x`, `y`, `width`, and `height`. The rectangle object has the shape `{ x, y, width, height }`.
+- `graphics.clientSize.width` — the writable width of the page in points.
+- `save('output.pdf')` — saves the PDF and **triggers a client-side browser download** with the specified file name. The file is sent to the browser's default downloads folder; nothing is written to the server. The call is synchronous in the browser build.
+- `destroy()` — releases native resources held by the document. It is safe to call immediately after `save()` because the download is initiated before the document is destroyed.
-When you run the application and click the button, it generates the following PDF document.
+## Build and Run the Application
+
+Step 7: Build the project: click **Build** > **Build Solution** or press **Ctrl + Shift + B** to build the project.
+
+Step 8: Run the project: click the **Start** button (green arrow) or press **F5** to run the app. Visual Studio launches the app in your default browser.
+
+After running the application, click **Generate PDF document**. The browser downloads `output.pdf`, which contains a single page with the text "Hello World!!!" drawn at the top-left.

+
+## Additional Configuration (Optional)
+
+N> The following steps are required **only** if you need image or data extraction features. They are not required for the basic PDF creation shown in this guide.
+
+If you need image and data extraction, install the data-extraction add-on and copy the `ej2-pdf-lib` folder into your project.
+
+1. Install the add-on package:
+
+ ```bash
+ npm install @syncfusion/ej2-pdf-data-extract --save
+ ```
+
+2. Copy the `ej2-pdf-lib` folder from `node_modules/@syncfusion/ej2-pdf-data-extract/dist/ej2-pdf-lib` into `wwwroot/lib/ej2-pdf-lib/`. The folder must contain the required `.js` and `.wasm` files.
+
+3. Confirm that the `ej2-pdf-lib` folder is reachable at runtime (for example, at `https://localhost:xxxx/lib/ej2-pdf-lib/`).
+
+## Troubleshooting
+
+| Problem | Cause | Resolution |
+|---|---|---|
+| `ej is not defined` in the browser console | The CDN script tag is missing or blocked | Confirm the `
@@ -36,43 +56,131 @@ Step 3: Create a HTML page (index.html) in `my-app` location and add the CDN lin
{% endhighlight %}
{% endtabs %}
-N> For image and data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
-Ensure that your application includes an `ej2-pdf-lib` folder within a publicly accessible static directory (such as wwwroot, public, or dist). This folder must contain the required `.js` and `.wasm` files needed for image and data extraction.
-
-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.
+Step 3: Create a complete `index.html` inside `my-app` with the following content. The CDN reference is loaded in the `` and the PDF generation script is placed at the end of `` so the button exists before the click handler is attached.
{% tabs %}
-{% highlight javascript tabtitle="index.html" %}
-
-}
+
+
{% endhighlight %}
{% endtabs %}
-By executing the program, you will get the PDF document as follows.
+N> The script tag is placed at the end of `` so that `document.getElementById('createPdf')` finds the button. If you prefer to put the script in ``, wrap the listener registration in a `DOMContentLoaded` event.
+
+## Code Explanation
+
+- `ej.pdf.PdfDocument` — creates a new PDF document instance.
+- `addPage()` — appends a blank page to the document and returns the `PdfPage` object.
+- `page.graphics` — returns the `PdfGraphics` drawing surface for the page.
+- `embedFont(family, size, style)` — embeds one of the standard PDF font families (here, Helvetica 36pt regular) and returns a `PdfStandardFont` object.
+- `new ej.pdf.PdfBrush({ r, g, b })` — creates a solid color brush from an RGB object (each channel `0`-`255`); here, black.
+- `drawString(text, font, layoutRect, brush)` — draws the text inside the rectangle defined by `x`, `y`, `width`, and `height`. The layout rect is `{ x, y, width, height }`.
+- `graphics.clientSize.width` — the writable width of the page in points.
+- `save('Output.pdf')` — saves the PDF and **triggers a client-side browser download** with the specified file name. The file is sent to the browser's default downloads folder; nothing is written to the server.
+- `destroy()` — releases native resources held by the document.
+
+## Run the Sample
+
+Step 4: Open a terminal in the `my-app` folder and start a static file server.
+
+Using `npx serve` (no install required):
+
+```bash
+npx serve
+```
+
+Or using Python 3:
+
+```bash
+python -m http.server 8000
+```
+
+Step 5: Open the served URL in your browser. For `npx serve`, the default URL is `http://localhost:3000`. For Python, the default URL is `http://localhost:8000`.
+
+Click **Generate PDF document**. The browser downloads `Output.pdf`, which contains a single page with the text "Hello World!!!" drawn at the top-left.
+
+
+
+## Additional Configuration (Optional)
+
+N> The following steps are required **only** if you need image or data extraction features. They are not required for the basic PDF creation shown in this guide.
+
+If you need image and data extraction, install the data-extraction add-on and copy the `ej2-pdf-lib` folder into the served directory.
+
+1. Install the add-on package:
+
+ ```bash
+ npm install @syncfusion/ej2-pdf-data-extract --save
+ ```
+
+2. Copy the `ej2-pdf-lib` folder from `node_modules/@syncfusion/ej2-pdf-data-extract/dist/ej2-pdf-lib` into the same folder as `index.html`. The folder must contain the required `.js` and `.wasm` files.
+
+3. Confirm that the `ej2-pdf-lib` folder is reachable from the served page (for example, at `http://localhost:3000/ej2-pdf-lib/`).
+
+## License Registration
+
+N> This guide uses the CDN distribution of the JavaScript PDF Library. No client-side `registerLicense` call is required when loading the library from the Syncfusion CDN; licensing is handled at the account level. If you switch to the NPM-based packages, add a `registerLicense('YOUR_LICENSE_KEY')` call in your entry script.
+
+## Troubleshooting
+
+| Problem | Cause | Resolution |
+|---|---|---|
+| `ej is not defined` in the browser console | The CDN script tag is missing or blocked | Confirm the `` reference is reachable and not blocked by an ad blocker or network policy |
+| `@section Scripts` appears as plain text on the page | The file is a static `.html`, not an ASP.NET view | Replace the Razor block with a plain `
{% endhighlight %}
@@ -62,22 +148,22 @@ import { PdfDocument, PdfGraphics, PdfPage, PdfFont, PdfFontFamily, PdfFontStyle
{% endhighlight %}
{% endtabs %}
-* Include the following code example in the click event of the button in `index.ts` to generate a PDF document
+* Include the following code example in the click event of the button in `index.ts` to generate a PDF document
{% tabs %}
{% highlight typescript tabtitle="index.ts" %}
document.getElementById('normalButton').onclick = (): void => {
// Create a new PDF document
- let pdf = new PdfDocument();
+ const pdf = new PdfDocument();
// Add a new page
- let page: PdfPage = pdf.addPage();
+ const page: PdfPage = pdf.addPage();
// Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
+ const graphics: PdfGraphics = page.graphics;
// Set font
- let font: PdfFont = pdf.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular);
+ const font: PdfFont = pdf.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular);
// Create a new black brush
- let brush = new PdfBrush({r: 0, g: 0, b: 0});
+ const brush = new PdfBrush({r: 0, g: 0, b: 0});
// Draw text
graphics.drawString('Hello World!!!', font, {x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60}, brush);
// Save and download PDF
@@ -89,14 +175,54 @@ document.getElementById('normalButton').onclick = (): void => {
{% endhighlight %}
{% endtabs %}
-* **Run the application**
+## Code Explanation
+
+- `registerLicense(key)` — registers the Syncfusion license key at application startup. Required for commercial usage.
+- `PdfDocument` — creates a new PDF document instance.
+- `addPage()` — appends a blank page to the document and returns the `PdfPage` object.
+- `page.graphics` — returns the `PdfGraphics` drawing surface for the page.
+- `embedFont(family, size, style)` — embeds one of the standard PDF font families (here, Helvetica 36pt regular) and returns a `PdfFont` object.
+- `new PdfBrush({ r, g, b })` — creates a solid color brush from an RGB object (each channel `0`-`255`); here, black.
+- `drawString(text, font, layoutRect, brush)` — draws the text inside the rectangle defined by `x`, `y`, `width`, and `height`.
+- `graphics.clientSize.width` — the writable width of the page in points.
+- `save('output.pdf')` — saves the PDF and triggers a browser download with the specified file name. The file is sent to the browser's default downloads folder.
+- `destroy()` — releases native resources held by the document.
-The quickstart project is configured to compile and run in the browser. Use the following command to start the application:
+## Run the application
+
+The quickstart project is configured to compile and run in the browser. Use the following command from the project root to start the application:
```bash
npm start
```
+Vite serves the application at `http://localhost:5173`. Open this URL in a browser and click **Create PDF document** to download the generated file as `output.pdf`.
+
+The generated PDF contains a single page with the text "Hello World!!!" drawn at the top-left.
+
By executing the program, you will get the PDF document as follows.
-
\ No newline at end of file
+
+
+N> The first run may take a few seconds while Vite optimizes dependencies. Subsequent runs are faster.
+
+## Troubleshooting
+
+| Problem | Cause | Resolution |
+|---|---|---|
+| `Error: Cannot find module '@syncfusion/ej2-pdf'` | The package is not installed | Run `npm install @syncfusion/ej2-pdf --save` |
+| `TS2304: Cannot find name 'PdfDocument'` (or similar) | The import line is missing | Confirm the `import` block at the top of `index.ts` is present |
+| Button click does nothing | The button ID does not match | Confirm the button's `id` is `normalButton` |
+| `Failed to resolve import "@syncfusion/ej2-pdf"` | The bundler cannot resolve the package | Confirm `node_modules/` exists and that you ran `npm install` |
+| `ReferenceError: document is not defined` | The code ran in a Node-only context (e.g., SSR) | This sample is browser-only; run it in a browser via `npm start` |
+| `Cannot GET /` | The dev server is not running | Run `npm start` and wait for "Local: http://localhost:5173/" |
+| PDF does not download | The browser blocks the download | Check the browser's download settings and downloads folder |
+| `registerLicense` warning at runtime | The license key is missing or invalid | Confirm the key is set in `index.ts` and is the correct key for your Syncfusion account |
+
+## See Also
+
+- [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library)
+- [JavaScript PDF Library documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview)
+- [JavaScript PDF Library API reference](https://ej2.syncfusion.com/documentation/api/pdf)
+- [JavaScript PDF Library examples](https://document.syncfusion.com/demos/pdf/javascript/#/fluent2/pdf/default)
+- [Syncfusion licensing documentation](https://help.syncfusion.com/document-processing/licensing/overview)
\ No newline at end of file
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 a66fb8ec30..7ac50e00c8 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
@@ -1,109 +1,248 @@
---
layout: post
-title: Create or Generate PDF file in Vue | Syncfusion
-description: Learn how to create a PDF file in Vue with easy steps using JavaScript PDF Library without depending on Adobe
+title: Create or Generate a PDF File in a Vue Application | Syncfusion
+description: Learn how to create a PDF file in a Vue application with easy steps using the JavaScript PDF Library without requiring Adobe Acrobat.
control: PDF
platform: document-processing
documentation: ug
-keywords: pdf, script, vue, javascript
+keywords: pdf, vue, vue 3, vue 2, javascript
+canonical_url: https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/create-pdf-document-vue
---
-# Create or Generate PDF file in Vue application
+# Create or Generate a PDF File in a Vue Application
-The [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) is used to create, read, and edit PDF documents. The [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) also offers functionality to merge, split, stamp, fill forms, and secure PDF files.
+The [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) is used to create, read, and edit PDF documents. The [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) also offers functionality to merge, split, stamp, fill PDF forms, and secure PDF files.
-This guide explains how to integrate the [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) into an Vue application.
+This guide explains how to integrate the [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library) into a Vue application that runs in the browser. The generated PDF is downloaded directly from the browser; no server-side PDF rendering is required.
-## Setting up the Vue 2 project
+> Vue 2 reached end-of-life on December 31, 2023. This guide leads with **Vue 3** (recommended) and provides a separate Vue 2 path for legacy projects.
-To generate a Vue 2 project using Vue-CLI, use the [Vue create](https://cli.vuejs.org/#getting-started) command. Follow these steps to install Vue CLI and create a new project:
+## Prerequisites
+
+Before you begin, make sure you have the following installed:
+
+- Node.js 18 or later.
+- npm 9 or later, or Yarn 1.22 or later.
+- Visual Studio Code, Code Studio, or another code editor.
+- A supported browser such as the latest versions of Microsoft Edge, Google Chrome, or Mozilla Firefox.
+
+To verify your Node.js and npm versions, run:
```bash
-npm install -g @vue/cli
-vue create quickstart
-cd quickstart
+node --version
+npm --version
+```
+
+## Create a Vue 3 Project (Recommended)
+
+Create a new Vue 3 project using the official scaffolding tool. This guide uses [Vite](https://vitejs.dev/) as the bundler.
+
+```bash
+npm create vue@latest my-pdf-app
+cd my-pdf-app
+npm install
+```
+
+When prompted, choose the default options (TypeScript is optional; this guide uses plain JavaScript).
+
+The final project structure is:
+
+```text
+my-pdf-app/
+├── public/
+├── src/
+│ ├── App.vue
+│ ├── main.js
+│ └── components/
+├── index.html
+└── package.json
```
-or
+## Create a Vue 2 Project (Legacy)
+
+N> Vue 2 reached end-of-life on December 31, 2023. Use Vue 2 only for legacy projects.
+
+To create a Vue 2 project using the legacy Vue CLI:
```bash
-yarn global add @vue/cli
+npm install -g @vue/cli
vue create quickstart
cd quickstart
```
-When creating a new project, choose the option `Default ([Vue 2] babel, es-lint)` from the menu.
+When prompted, choose `Default ([Vue 2] babel, es-lint)`.

-Once the `quick start` project is set up with default settings, proceed to add Syncfusion® components to the project.
+## Install the JavaScript PDF Library
-* **Installing JavaScript PDF package**
-
-All Syncfusion JS 2 packages are published in `npmjs.com` registry.
+All Syncfusion® JS 2 packages are published in the `npmjs.com` registry. The `npm install` command below resolves `@syncfusion/ej2-pdf` to the latest stable version compatible with Vue 2.7+ or Vue 3.4+.
* To install the [JavaScript PDF Library](https://www.syncfusion.com/document-sdk/javascript-pdf-library), use the following command.
```bash
npm install @syncfusion/ej2-pdf --save
```
-or
+
+* If you prefer Yarn, use the following command.
+
```bash
yarn add @syncfusion/ej2-pdf
```
-N> For image and data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
-* Copy the `ej2-pdf-lib` folder from the @syncfusion/ej2-pdf-data-extract package into your project's **public, dist, or assets** directory (where your static files are served).
-* Make sure the `ej2-pdf-lib` folder exists in your final build output if you need to extract images or data from PDF files.
-* Ensure your server serves .wasm files with the **Content-Type: application/wasm** MIME type.
-* This setup is not required for **basic PDF creation**.
+N> For image and data extraction features, install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. Note the following:
+- Copy the `ej2-pdf-lib` folder from the `@syncfusion/ej2-pdf-data-extract` package into your project's `public/`, `dist/`, or `assets/` directory (wherever your static files are served).
+- Make sure the `ej2-pdf-lib` folder exists in your final build output if you need to extract images or data from PDF files.
+- Ensure your server serves `.wasm` files with the **Content-Type: application/wasm** MIME type. Vite and Vue CLI dev servers already handle this; configure production servers manually.
+- This setup is not required for **basic PDF creation**.
+
+### Transitive Dependencies
+
+The following packages are included automatically by `@syncfusion/ej2-pdf` and do not need to be installed separately:
+
+- `@syncfusion/ej2-base` — common utilities used by the library.
+- `@syncfusion/ej2-compression` — compression support used by PDF features.
-* **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.
+## License Registration
+
+If your project requires a Syncfusion license, register the license key before using the PDF API. Add the following code at the top of `src/App.vue`'s `
+
+
+
+
+
+
{% endhighlight %}
{% endtabs %}
-## Run the project
+N> This sample uses **named imports** from the npm package (`import { PdfDocument, ... } from '@syncfusion/ej2-pdf'`). The npm package does not expose a global `ej` namespace; using `ej.pdf.PdfDocument` without an import will throw `ReferenceError: ej is not defined` in a Vite or Vue CLI build. If you prefer the UMD-style global, load `ej2.min.js` from the Syncfusion CDN in `index.html` (or `public/index.html`) instead of importing the npm package.
+
+N> A click handler is used in this example, so no additional setup is required. The PDF classes load when the import runs at module evaluation time, which happens before any user interaction.
-To run the project, use the following command:
+## Code Explanation
+
+- `registerLicense(key)` — registers the Syncfusion license key at application startup. Required for commercial usage.
+- `PdfDocument` — creates a new PDF document instance.
+- `addPage()` — appends a blank page to the document and returns the `PdfPage` object.
+- `page.graphics` — returns the `PdfGraphics` drawing surface for the page.
+- `embedFont(family, size, style)` — embeds one of the standard PDF font families (here, Helvetica 36pt regular) and returns a `PdfFont` object.
+- `new PdfBrush({ r, g, b })` — creates a solid color brush from an RGB object (each channel `0`-`255`); here, black.
+- `drawString(text, font, layoutRect, brush)` — draws the text inside the rectangle defined by `x`, `y`, `width`, and `height`.
+- `graphics.clientSize.width` — the writable width of the page in points.
+- `save('Output.pdf')` — saves the PDF and triggers a browser download with the specified file name. The file is sent to the browser's default downloads folder.
+- `destroy()` — releases native resources held by the document.
+
+## Run the Application
+
+### Vue 3 (Vite)
+
+Open a terminal in the project root and start the Vite development server:
```bash
-npm run serve
+npm run dev
```
-or
+
+Vite serves the application at `http://localhost:5173`. Open this URL in a browser and click **Create PDF document** to download the generated file as `Output.pdf`.
+
+### Vue 2 (Vue CLI)
+
+Open a terminal in the project root and start the Vue CLI development server:
```bash
-yarn run serve
+npm run serve
```
-By executing the program, you will generate the following PDF document.
+Vue CLI serves the application at `http://localhost:8080`. Open this URL in a browser and click **Create PDF document** to download the generated file as `Output.pdf`.
+
+The generated PDF contains a single page with the text "Hello World!!!" drawn at the top-left.

+
+## Troubleshooting
+
+| Problem | Cause | Resolution |
+|---|---|---|
+| `ReferenceError: ej is not defined` | The code uses the global `ej.pdf` namespace but the npm package does not expose it | Switch to named imports: `import { PdfDocument, ... } from '@syncfusion/ej2-pdf'` |
+| `SyntaxError: Unexpected token ':'` in `App.vue` | TypeScript type annotations were left in a plain `