Skip to content

Commit 4d46afe

Browse files
sameerkhan001sameerkhan001
committed
994201-dev: Added Overall UG documentation.
1 parent 77f9b7a commit 4d46afe

17 files changed

+646
-91
lines changed

‎Document-Processing-toc.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2545,7 +2545,17 @@
25452545
<a href="/document-processing/pdf/pdf-library/javascript/Overview">JavaScript</a>
25462546
<ul>
25472547
<li><a href="/document-processing/pdf/pdf-library/javascript/Overview">Overview</a></li>
2548-
<li><a href="/document-processing/pdf/pdf-library/javascript/Getting-started">Getting Started</a></li>
2548+
<li>Getting Started
2549+
<ul>
2550+
<li><a href="/document-processing/pdf/pdf-library/javascript/Create-PDF-document-asp-net-core">ASP.NET Core</a></li>
2551+
<li><a href="/document-processing/pdf/pdf-library/javascript/Create-PDF-document-asp-net-mvc">ASP.NET MVC</a></li>
2552+
<li><a href="/document-processing/pdf/pdf-library/javascript/Create-PDF-document-angular">Angular</a></li>
2553+
<li><a href="/document-processing/pdf/pdf-library/javascript/Create-PDF-document-react">React</a></li>
2554+
<li><a href="/document-processing/pdf/pdf-library/javascript/Create-PDF-document-vue">Vue</a></li>
2555+
<li><a href="/document-processing/pdf/pdf-library/javascript/Create-PDF-document-javascript">JavaScript</a></li>
2556+
<li><a href="/document-processing/pdf/pdf-library/javascript/Create-PDF-document-typescript">TypeScript</a></li>
2557+
</ul>
2558+
</li>
25492559
<li><a href="/document-processing/pdf/pdf-library/javascript/Open-and-save-PDF-files">Loading and Saving</a></li>
25502560
<li><a href="/document-processing/pdf/pdf-library/javascript/Working-with-PDF-document">Working with document</a></li>
25512561
<li><a href="/document-processing/pdf/pdf-library/javascript/Working-with-PDF-Pages">Working with pages</a></li>

‎Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
layout: post
3+
title: Create or Generate PDF file in Angular | Syncfusion
4+
description: Learn how to create a PDF file in Angular with easy steps using Syncfusion TypeScript PDF library without depending on Adobe
5+
platform: document-processing
6+
control: PDF
7+
documentation: ug
8+
keywords: angular create pdf, angular generate pdf, angular pdf library, ej2 pdf angular, TypeScript
9+
---
10+
11+
# Create or Generate PDF file in Angular application
12+
13+
The Syncfusion<sup>&reg;</sup> TypeScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, fill forms, and secure PDF files.
14+
15+
This guide explains how to integrate the TypeScript PDF library into an Angular application.
16+
17+
## Setup Angular Environment
18+
19+
You can use the [`Angular CLI`](https://github.com/angular/angular-cli) to setup your Angular applications.
20+
To install the latest Angular CLI globally use the following command.
21+
22+
```bash
23+
npm install -g @angular/cli
24+
```
25+
26+
N> Use the command **npm install --save @angular/cli@12.0.2** to install the Angular CLI version 12.0.2
27+
28+
## Create an Angular Application
29+
30+
Start a new Angular application using the Angular CLI command as follows.
31+
32+
```bash
33+
ng new my-app
34+
cd my-app
35+
```
36+
## Create a PDF document using TypeScript
37+
38+
* Add a simple button to `main.ts` and attach a click handler that uses the TypeScript PDF API to create a new PDF document.
39+
40+
{% tabs %}
41+
{% highlight ts tabtitle="main.ts" %}
42+
43+
<html>
44+
<head>
45+
<title>PDF creation example</title>
46+
</head>
47+
<body>
48+
<button id="normalButton">Create PDF document</button>
49+
</body>
50+
</html>
51+
52+
{% endhighlight %}
53+
{% endtabs %}
54+
55+
* Include the following namespaces in `app.component.ts` file.
56+
57+
{% tabs %}
58+
{% highlight c# tabtitle="~/app.component.ts" %}
59+
60+
import { NgModule } from '@angular/core';
61+
import { PdfDocument, PdfPage, PdfStandardFont, PdfPen, PdfBrush } from '@syncfusion/ej2-pdf';
62+
63+
{% endhighlight %}
64+
{% endtabs %}
65+
66+
* Include the following code example in the click event of the button in `app.component.ts` to generate a PDF document.
67+
68+
{% tabs %}
69+
{% highlight html tabtitle="app.component.ts" %}
70+
71+
document.getElementById('normalButton').onclick = (): void => {
72+
// Create a new PDF document
73+
var pdf = new PdfDocument();
74+
// Add a new page
75+
var page = pdf.addPage();
76+
// Get graphics from the page
77+
let graphics = page.graphics;
78+
// Set font
79+
var font = pdf.embedFont(ej.pdf.PdfFontFamily.helvetica, 36, pdf.PdfFontStyle.regular);
80+
// Create a new black brush
81+
var brush = new pdf.PdfBrush({r: 0, g: 0, b: 0});
82+
// Draw text
83+
graphics.drawString('Hello World!!!', font, {x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60}, brush);
84+
// Save and download PDF
85+
pdf.save('Output.pdf');
86+
// Destroy the PDF document instance
87+
pdf.destroy();
88+
});
89+
};
90+
91+
{% endhighlight %}
92+
{% endtabs %}
93+
94+
## Run the application
95+
96+
Use the following command to run the application in browser.
97+
98+
```javascript
99+
ng serve --open
100+
```
101+
102+
By executing the program, you will get the PDF document as follows.
103+
104+
![Output PDF document](Getting_started_images/Output.png)
105+
106+

‎Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
layout: post
3+
title: Create or Generate PDF file in ASP.NET Core | Syncfusion
4+
description: Learn how to create or generate a PDF file in ASP.NET Core applications with easy steps using Syncfusion JavaScript PDF library without depending on Adobe.
5+
platform: document-processing
6+
control: PDF
7+
documentation: ug
8+
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
9+
---
10+
11+
# Create or Generate PDF file in ASP.NET Core
12+
13+
The Syncfusion<sup>&reg;</sup> JavaScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, forms, and secure PDF files.
14+
15+
This guide explains how to integrate the JavaScript PDF library into an ASP.NET Core application.
16+
17+
## Integrate PDF library into an ASP.NET Core application
18+
19+
1. Start Visual Studio and select **Create a new project**.
20+
2. In the **Create a new project** dialog, select **ASP.NET Core Web App**.
21+
![ASP.NET Core PDF creation1](Getting_started_images/Asp-net-core-creation1.png)
22+
3. In the **Configure your new project** dialog, enter the project name and select **Next**.
23+
![ASP.NET Core PDF creation2](Getting_started_images/Asp-net-core-creation2.png)
24+
4. In the **Additional information** dialog, select a .NET LTS version (for example, **.NET 8.0 (Long-term Support)**) and then select **Create**.
25+
![ASP.NET Core PDF creation3](Getting_started_images/Asp-net-core-creation3.png)
26+
27+
5. **Add script reference** : Add the required scripts using the CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` as follows:
28+
29+
{% tabs %}
30+
{% highlight c# tabtitle="~/_Layout.cshtml" %}
31+
32+
<head>
33+
...
34+
<!-- Syncfusion JavaScript PDF Library (CDN) -->
35+
<script src="https://cdn.syncfusion.com/ej2/31.2.15/dist/ej2.min.js"></script>
36+
</head>
37+
38+
{% endhighlight %}
39+
{% endtabs %}
40+
41+
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.
42+
43+
{% tabs %}
44+
{% highlight c# tabtitle="~/Index.cshtml" %}
45+
46+
<div class="container py-4">
47+
<h1 class="h4 mb-3">Create PDF document</h1>
48+
<p class="text-muted">Click the button to generate and download a PDF.</p>
49+
<button id="btnCreatePdf" class="btn btn-primary">Generate PDF document</button>
50+
</div>
51+
52+
@section Scripts {
53+
<script>
54+
document.getElementById('btnCreatePdf').addEventListener('click', function () {
55+
// Create a new PDF document
56+
var pdf = new ej.pdf.PdfDocument();
57+
// Add a new page
58+
var page = pdf.addPage();
59+
// Get graphics from the page
60+
let graphics = page.graphics;
61+
// Set font
62+
var font = pdf.embedFont(ej.pdf.PdfFontFamily.helvetica, 36, ej.pdf.PdfFontStyle.regular);
63+
// Create a new black brush
64+
var brush = new ej.pdf.PdfBrush({r: 0, g: 0, b: 0});
65+
// Draw text
66+
graphics.drawString('Hello World!!!', font, {x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60}, brush);
67+
// Save and download PDF
68+
pdf.save('Output.pdf');
69+
// Destroy the PDF document instance
70+
pdf.destroy();
71+
});
72+
</script>
73+
}
74+
75+
{% endhighlight %}
76+
{% endtabs %}
77+
78+
7. **Build the project** : Click on Build > Build Solution or press Ctrl + Shift + B to build the project.
79+
80+
8. **Run the project** : Click the Start button (green arrow) or press F5 to run the app.
81+
82+
By executing the program, you will generate the following PDF document.
83+
84+
![ASP.NET Core PDF output](Getting_started_images/Output.png)

‎Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
layout: post
3+
title: Create or Generate PDF file in ASP.NET Core MVC | Syncfusion
4+
description: Learn how to create a PDF file in ASP.NET Core MVC with easy steps using Syncfusion JavaScript PDF library without depending on Adobe
5+
platform: document-processing
6+
control: PDF
7+
documentation: ug
8+
keywords: MVC, javascript, pdf
9+
---
10+
11+
# Create or Generate PDF file in ASP.NET Core MVC
12+
13+
The Syncfusion<sup>&reg;</sup> JavaScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, fill forms, and secure PDF files.
14+
15+
This guide explains how to integrate the JavaScript PDF library into an ASP.NET Core MVC application.
16+
17+
## Integrate PDF library into an ASP.NET MVC application
18+
19+
1. Start Visual Studio and select **Create a new project**.
20+
2. Create a new ASP.NET MVC Web Application project.
21+
![ASP.NET Core MVC PDF creation1](Getting_started_images/Asp-net-mvc-creation1.png)
22+
3. Choose the target framework.
23+
![ASP.NET Core MVC PDF creation2](Getting_started_images/Asp-net-mvc-creation2.png)
24+
4. Select Web Application pattern (MVC) for the project and then select **Create** button.
25+
![ASP.NET Core MVC PDF creation3](Getting_started_images/Asp-net-mvc-creation3.png)
26+
27+
5. **Add script reference** : Add the required scripts using the CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` as follows:
28+
29+
{% tabs %}
30+
{% highlight c# tabtitle="~/_Layout.cshtml" %}
31+
32+
<head>
33+
...
34+
<!-- Syncfusion JavaScript PDF Library (CDN) -->
35+
<script src="https://cdn.syncfusion.com/ej2/31.2.15/dist/ej2.min.js"></script>
36+
</head>
37+
38+
{% endhighlight %}
39+
{% endtabs %}
40+
41+
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.
42+
43+
{% tabs %}
44+
{% highlight c# tabtitle="~/Index.cshtml" %}
45+
46+
<div class="container py-4">
47+
<h1 class="h4 mb-3">Create PDF document</h1>
48+
<p class="text-muted">Click the button to generate and download a PDF.</p>
49+
<button id="btnCreatePdf" class="btn btn-primary">Generate PDF document</button>
50+
</div>
51+
52+
@section Scripts {
53+
<script>
54+
document.getElementById('btnCreatePdf').addEventListener('click', function () {
55+
// Create a new PDF document
56+
var pdf = new ej.pdf.PdfDocument();
57+
// Add a new page
58+
var page = pdf.addPage();
59+
// Get graphics from the page
60+
let graphics = page.graphics;
61+
// Set font
62+
var font = pdf.embedFont(ej.pdf.PdfFontFamily.helvetica, 36, ej.pdf.PdfFontStyle.regular);
63+
// Create a new black brush
64+
var brush = new ej.pdf.PdfBrush({r: 0, g: 0, b: 0});
65+
// Draw text
66+
graphics.drawString('Hello World!!!', font, {x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60}, brush);
67+
// Save and download PDF
68+
pdf.save('Output.pdf');
69+
// Destroy the PDF document instance
70+
pdf.destroy();
71+
});
72+
</script>
73+
}
74+
75+
{% endhighlight %}
76+
{% endtabs %}
77+
78+
7. **Build the project** : Click on Build > Build Solution or press Ctrl + Shift + B to build the project.
79+
80+
8. **Run the project** : Click the Start button (green arrow) or press F5 to run the app.
81+
82+
By executing the program, you will generate the following PDF document.
83+
84+
![ASP.NET Core MVC PDF output](Getting_started_images/Output.png)

‎Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
layout: post
3+
title: Create or Generate PDF file in JavaScript | Syncfusion
4+
description: Learn how to create a PDF file in JavaScript with easy steps using Syncfusion JavaScript PDF library without depending on Adobe
5+
platform: document-processing
6+
control: PDF
7+
documentation: ug
8+
keywords: javascript, pdf, script
9+
---
10+
11+
# Create or Generate PDF file in JavaScript
12+
13+
The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers.
14+
15+
## Component Initialization with CDN link for script and style reference
16+
17+
**Step 1:** Create an app folder `my-app` for the Essential JS 2 JavaScript components.
18+
19+
**Step 2:** The Essential JS 2 component's global scripts and styles are already hosted in the below CDN link formats.
20+
21+
**Syntax:**
22+
> Script: `https://cdn.syncfusion.com/ej2/{Version}/dist/{PACKAGE_NAME}.min.js`
23+
>
24+
> Styles: `https://cdn.syncfusion.com/ej2/{Version}/{PACKAGE_NAME}/styles/material.css`
25+
26+
**Example:**
27+
> Script: [`https://cdn.syncfusion.com/ej2/31.2.15/dist/ej2.min.js`](https://cdn.syncfusion.com/ej2/31.2.15/dist/ej2.min.js)
28+
>
29+
> Styles: [`https://cdn.syncfusion.com/ej2/31.2.15/ej2-base/styles/material.css`](https://cdn.syncfusion.com/ej2/31.2.15/ej2-base/styles/material.css)
30+
31+
**Step 3:** Create a HTML page (index.html) in `my-app` location and add the CDN link references.
32+
33+
{% tabs %}
34+
{% highlight ts tabtitle="index.html" %}
35+
36+
<head>
37+
...
38+
<!-- Syncfusion JavaScript PDF Library (CDN) -->
39+
<script src="https://cdn.syncfusion.com/ej2/31.2.15/dist/ej2.min.js"></script>
40+
</head>
41+
42+
{% endhighlight %}
43+
{% endtabs %}
44+
45+
**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.
46+
47+
{% tabs %}
48+
{% highlight c# tabtitle="~/Index.html" %}
49+
50+
<div class="container py-4">
51+
<h1 class="h4 mb-3">Create PDF document</h1>
52+
<p class="text-muted">Click the button to generate and download a PDF.</p>
53+
<button id="btnCreatePdf" class="btn btn-primary">Generate PDF document</button>
54+
</div>
55+
56+
@section Scripts {
57+
<script>
58+
document.getElementById('btnCreatePdf').addEventListener('click', function () {
59+
// Create a new PDF document
60+
var pdf = new ej.pdf.PdfDocument();
61+
// Add a new page
62+
var page = pdf.addPage();
63+
// Get graphics from the page
64+
let graphics = page.graphics;
65+
// Set font
66+
var font = pdf.embedFont(ej.pdf.PdfFontFamily.helvetica, 36, ej.pdf.PdfFontStyle.regular);
67+
// Create a new black brush
68+
var brush = new ej.pdf.PdfBrush({r: 0, g: 0, b: 0});
69+
// Draw text
70+
graphics.drawString('Hello World!!!', font, {x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60}, brush);
71+
// Save and download PDF
72+
pdf.save('Output.pdf');
73+
// Destroy the PDF document instance
74+
pdf.destroy();
75+
});
76+
</script>
77+
}
78+
79+
{% endhighlight %}
80+
{% endtabs %}
81+
82+
By executing the program, you will get the PDF document as follows.
83+
84+
![Output PDF document](Getting_started_images/Output.png)
85+

0 commit comments

Comments
 (0)