How to export Angular page content to PDF with Kendo UI

If you've found yourself looking for an easy solution to smoothly export the HTML content from your Angular application to a PDF, then this is the appropriate post for you. We may need to export HTML content to PDF for several reasons, ranging from sharing it with others without necessarily accessing the internet to saving it just for documentation purposes.

Building a solution for a component like this could be time-consuming if you are building all by yourself. In this post, I will show you how to easily achieve this by leveraging the PDF export component provided by Kendo UI.

We will build an Angular application with some dummy content and add a Kendo UI button to export the content directly to PDF as shown here:

Install Angular CLI

Before creating an Angular application, you need to first install the Angular CLI if it doesn’t already exist on your machine. Open up a terminal and run the following command for that purpose:

npm install -g @angular/cli 

This will add the Angular CLI globally on your machine.

Creating Angular Application

You can now proceed to create a new app for the purpose of this post by running the command below to generate an application with the name kendo-angular-export-pdf:

ng new kendo-angular-export-pdf

Once the installation process is complete, change directory into the newly created project as shown below and start the application:

// change directory
cd kendo-angular-export-pdf
   
// start the application
ng serve

You may experience an error with the message below in your console:

ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: Expression expected.

This is a known issue on GitHub and it’s due to lack of compatibility between the current version of TypeScript on your machine and rxjs. The quick way to fix this is to delete the node_modules folder. Now, open the package.json file and within the dependencies object, edit the rxjs by removing ^ :

 "dependencies": {
   ...
   "rxjs": "6.0.0", // remove the `^`
   "zone.js": "^0.8.26"
 },

Save the file and run the npm install command again. Once the installation process is complete, you can now proceed to start the application with ng serve.

This will compile your application and start the development server. To view the default page of this Angular application, navigate to http://localhost:4200 from your favorite browser and you will see this:

Add PDF Export Component from Kendo UI

Next, we’ll need to add the PDF export component before we start using it in our application. To achieve that, we’ll use the ng add command to require and install the package as shown here:

ng add @progress/kendo-angular-pdf-export

This will import and add both PDFExportModule and BrowserAnimationsModule to the app.module.ts file:

// ./src/app/app/module.ts
   
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { PDFExportModule } from '@progress/kendo-angular-pdf-export';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   
   
@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   PDFExportModule,
   BrowserAnimationsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Use the Kendo PDF Export Component

After installing the PDF export package, you can now proceed to export content within our Angular application to PDF by placing it within the <kendo-pdf-export> component. Open ./src/app/app.component.html and replace its content with:

// ./src/app/app.component.html
   
<div class="pageWrapper">
 <div class="content">
   <kendo-pdf-export #pdf>
     <div class="size-a4">
       <p> Build Better JavaScript Apps Faster The ultimate collection of JavaScript UI components with libraries for jQuery,
         Angular, React, and Vue. Quickly build eye-catching and high-performance responsive web applications—regardless
         of your JavaScript framework choice.
       </p>
       <p> Build Better JavaScript Apps Faster The ultimate collection of JavaScript UI components with libraries for jQuery,
         Angular, React, and Vue. Quickly build eye-catching and high-performance responsive web applications—regardless
         of your JavaScript framework choice.
       </p>
     </div>
   </kendo-pdf-export>
   
   <div>
     <button kendo-button (click)="pdf.saveAs('demo-content.pdf')">
       Export As PDF
     </button>
   </div>
 </div>
</div>

Here, we have added dummy content and wrapped it with the <kendo-pdf-export></kendo-pdf-export> component. Next we added a button and attached a click event to it. Once the button is clicked, we called the saveAs() method in order to save the generated file. The file will be saved as the name passed as an argument to the saveAs() method.

Finally, to give the page some default styling, add the following content to ./src/app/app.component.css file:

// ./src/app/app.component.css
   
.pageWrapper {
 margin-top: 50px;
}
button {
   padding: 15px;
}
kendo-pdf-export {
 font-family: "DejaVu Sans", "Arial", sans-serif;
 font-size: 16px;
}
.content {
 width: 800px;
 margin: 0 auto;
 line-height: 20px;
}

Now proceed to start the application again by running ng serve from the terminal within the application’s directory. Once

the application is built and served on http://localhost:4200 you will see this:

The content displayed here is from our Angular application. To test the HTML content export functionality, click on the Kendo button with the text Export As PDF. Now open the downloaded PDF file:

Cool, right? This is the content of our page exported to PDF without much hassle. But with a close look at the PDF file, you will agree with me that something isn’t right. The content doesn’t look properly organized. We’ll change that by adding a little bit of margin in the next section.

Add Paper Size and Margin

The Kendo PDF export component API makes a provision for us to easily customize and specify the paper size of the PDF document. At the moment, it is set to the default auto which means that the paper size is determined by the content.

Let’s replace the content of ./src/app/app.component.html with:

// ./src/app/app.component.html
   
<div class="pageWrapper">
 <div class="content">
   <kendo-pdf-export #pdf paperSize="A4" margin="2cm">
     <div class="size-a4">
       <p> Build Better JavaScript Apps Faster The ultimate collection of JavaScript UI components with libraries for jQuery,
         Angular, React, and Vue. Quickly build eye-catching and high-performance responsive web applications—regardless
         of your JavaScript framework choice.
       </p>
       <p> Build Better JavaScript Apps Faster The ultimate collection of JavaScript UI components with libraries for jQuery,
         Angular, React, and Vue. Quickly build eye-catching and high-performance responsive web applications—regardless
         of your JavaScript framework choice.
       </p>
     </div>
   </kendo-pdf-export>
   
   <div>
     <button kendo-button (click)="pdf.saveAs('demo-content.pdf')">
       Export As PDF
     </button>
   </div>
 </div>
</div>

We have added two data attributes to the <kendo-pdf-export>, which are:

  • paperSize: We set this to A4.
  • margin: We set this to 2cm.

Check the page again and click on the Export As PDF button. Now proceed to open your downloaded PDF file and you will notice that it looks much better as shown below:

Conclusion

The Kendo PDF export component as shown here is a solution for exporting and handling HTML content to PDF. This comes in handy whenever you need to quickly save a page as a PDF document from your Angular application.

We have barely scratched the surface here, because there is so much more functionality provided by the Kendo UI team when exporting HTML content to PDF. Feel free to explore the API by checking the link here for more details.

Hopefully you have learned a lot from this post. Check the source code here on GitHub.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about Angular

Angular 8 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

The Complete Node.js Developer Course (3rd Edition)

The Web Developer Bootcamp

Best 50 Angular Interview Questions for Frontend Developers in 2019

How to build a CRUD Web App with Angular 8.0

React vs Angular: An In-depth Comparison

React vs Angular vs Vue.js by Example

Microfrontends — Connecting JavaScript frameworks together (React, Angular, Vue etc)

Building CRUD Mobile App using Ionic 4, Angular 8

How to Build Mobile Apps with Angular, Ionic 4, and Spring Boot

Ionic 4 & Angular Tutorial For Beginners - Crash Course

#angular #html #web-development

What is GEEK

Buddha Community

How to export Angular page content to PDF with Kendo UI
Christa  Stehr

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager
Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Cayla  Erdman

Cayla Erdman

1594369800

Introduction to Structured Query Language SQL pdf

SQL stands for Structured Query Language. SQL is a scripting language expected to store, control, and inquiry information put away in social databases. The main manifestation of SQL showed up in 1974, when a gathering in IBM built up the principal model of a social database. The primary business social database was discharged by Relational Software later turning out to be Oracle.

Models for SQL exist. In any case, the SQL that can be utilized on every last one of the major RDBMS today is in various flavors. This is because of two reasons:

1. The SQL order standard is genuinely intricate, and it isn’t handy to actualize the whole standard.

2. Every database seller needs an approach to separate its item from others.

Right now, contrasts are noted where fitting.

#programming books #beginning sql pdf #commands sql #download free sql full book pdf #introduction to sql pdf #introduction to sql ppt #introduction to sql #practical sql pdf #sql commands pdf with examples free download #sql commands #sql free bool download #sql guide #sql language #sql pdf #sql ppt #sql programming language #sql tutorial for beginners #sql tutorial pdf #sql #structured query language pdf #structured query language ppt #structured query language

Roberta  Ward

Roberta Ward

1593184320

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular.

Angular is a Typescript-based open-source front-end web application platform. The Angular Team at Google and a community of individuals and corporations lead it. Angular lets you extend HTML’s syntax to express your apps’ components clearly. The angular resolves challenges while developing a single page and cross-platform applications. So, here the meaning of the single-page applications in angular is that the index.html file serves the app. And, the index.html file links other files to it.

We build angular applications with basic concepts which are NgModules. It provides a compilation context for components. At the beginning of an angular project, the command-line interface provides a built-in component which is the root component. But, NgModule can add a number of additional components. These can be created through a template or loaded from a router. This is what a compilation context about.

What is a Component in Angular?

Components are key features in Angular. It controls a patch of the screen called a view. A couple of components that we create on our own helps to build a whole application. In the end, the root component or the app component holds our entire application. The component has its business logic that it does to support the view inside the class. The class interacts with the view through an API of properties and methods. All the components added by us in the application are not linked to the index.html. But, they link to the app.component.html through the selectors. A component can be a component and not only a typescript class by adding a decorator @Component. Then, for further access, a class can import it. The decorator contains some metadata like selector, template, and style. Here’s an example of how a component decorator looks like:

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})

Role of App Module

Modules are the package of functionalities of our app. It gives Angular the information about which features does my app has and what feature it uses. It is an empty Typescript class, but we transform it by adding a decorator @NgModule. So, we have four properties that we set up on the object pass to @NgModule. The four properties are declarations, imports, providers, and bootstrap. All the built-in new components add up to the declarations array in @NgModule.

@NgModule({
declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  HttpClientModule,
  AppRoutingModule,
  FormsModule
],
bootstrap: [AppComponent]
})

What is Data Binding?

Data Binding is the communication between the Typescript code of the component and the template. So, we have different kinds of data binding given below:

  • When there is a requirement to output data from our Typescript code in the HTML template. String interpolation handles this purpose like {{data}} in HTML file. Property Binding is also used for this purpose like [property] = “data”.
  • When we want to trigger any event like clicking a button. Event Binding works while we react to user events like (event) = “expression”.
  • When we can react to user events and output something at the same time. Two-way Binding is used like [(ngModel)] = “data”.

image for understanding data binding

#angular #javascript #tech blogs #user interface (ui) #angular #angular fundamentals #angular tutorial #basics of angular

Halem  Rostt

Halem Rostt

1580517240

Step by step on How to Export PDF in Angular

Exporting an HTML element is like a snapshot for sharing some information in the form of documents, and it may be used for reporting too. So, if you need to save as a PDF or want to take a print-out of any other HTML elements like Table, Div or any Grid in Angular, you can do that easily.

Follow the steps for an example of how to do a  PDF Export.

Step 1

Create an Angular application using CLI or any other method you want.

Step 2

Open this application code in any editor like Visual Studio Code.

Step 3

For demo grid data, declare a variable with some sample data.

Data = [  
    { Id: 101, Name: 'Nitin', Salary: 1234 },  
    { Id: 102, Name: 'Sonu', Salary: 1234 },  
    { Id: 103, Name: 'Mohit', Salary: 1234 },  
    { Id: 104, Name: 'Rahul', Salary: 1234 },  
    { Id: 105, Name: 'Kunal', Salary: 1234 }  
  ];  

Step 4

Bind that data with an HTML table or any element, this must how you want your PDF Document. In my app.component.html, I just replaced the default HTML with the following HTML code. In this code, I bind that data variable from my component to this table.

<h1>This is an Angular App!</h1>    
<div>    
    <table>    
        <tr>    
            <th>Id</th>    
            <th>Name</th>    
            <th>Salary</th>    
        </tr>    
        <tr *ngFor="let item of Data">    
            <th>{{item.Id}}</th>    
            <th>{{item.Name}}</th>    
            <th>{{item.Salary}}</th>    
        </tr>    
    </table>    
</div>     

Now serve your Angular App in the browser using “ng serve --o”, this will be the default output.

This is image title

I know this is not the output that you want to download, so use the formatting and modify this as you need. In my Demo App, I’ll use bootstrap just for a simple table format.

Step 5

Add Bootstrap using CLI in your project and apply the “table table-dark” class on that HTML table. Use the following CLI command to add bootstrap in your project,

“npm install bootstrap –save”

Step 6

After adding bootstrap in your application, apply the required bootstrap classes like this,

<div class="container">  
    <table class="table table-dark">  
        <tr>  
            <th>Id</th>  
            <th>Name</th>  
            <th>Salary</th>  
        </tr>  
        <tr *ngFor="let item of Data">  
            <th>{{item.Id}}</th>  
            <th>{{item.Name}}</th>  
            <th>{{item.Salary}}</th>  
        </tr>  
    </table>  

And now output must be like this,

This is image title

Step 7

Add a button to download this table as a pdf.

<input type="button" value="Download PDF" class="btn btn-success" (click)="SavePDF()">  

Also, add a click event handler for this button in your app.component.ts like,

public SavePDF():void{  
  
  }  

Step 8

Now Add jspdf and @types/jspdf in your application using the following command,

_“_npm install jspdf --save”

and

_“_npm install @types/jspdf --save-dev”

Step 9

Give a ref name and id to that HTML element you need to export as PDF and get the ref of that HTML element in your component using @ViewChild, like,

<div class="container" id="content" #content>  
  
 @ViewChild('content') content:ElementRef;  

Step 10

Now at this last step, you have to write the following code in your button click handler function, where we create a jspdf variable as doc and configured it with some required permeates like Doc width, margin, and content,

import * as jsPDF from 'jspdf';  
public SavePDF(): void {  
    let content=this.content.nativeElement;  
    let doc = new jsPDF();  
    let _elementHandlers =  
    {  
      '#editor':function(element,renderer){  
        return true;  
      }  
    };  
    doc.fromHTML(content.innerHTML,15,15,{  
  
      'width':190,  
      'elementHandlers':_elementHandlers  
    });  
  
    doc.save('test.pdf');  
  }  

Now serve your application “ng serve --o” and your output must be like this,

This is image title

Click on the Download PDF button and get the file.

This is image title

Full Code

App.component.html

<div class="container">  
    <h1>This is an Angular App!</h1>  
    <input type="button" value="Download PDF" class="btn btn-success" (click)="SavePDF()">  
    <br/><br/>  
    <div class="container" id="content" #content>  
        <table class="table table-dark">  
            <tr>  
                <th>Id</th>  
                <th>Name</th>  
                <th>Salary</th>  
            </tr>  
            <tr *ngFor="let item of Data">  
                <th>{{item.Id}}</th>  
                <th>{{item.Name}}</th>  
                <th>{{item.Salary}}</th>  
            </tr>  
        </table>  
    </div>  
</div>  

App.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';  
import * as jsPDF from 'jspdf';  
  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
  
export class AppComponent {  
  title = 'app';  
  Data = [  
    { Id: 101, Name: 'Nitin', Salary: 1234 },  
    { Id: 102, Name: 'Sonu', Salary: 1234 },  
    { Id: 103, Name: 'Mohit', Salary: 1234 },  
    { Id: 104, Name: 'Rahul', Salary: 1234 },  
    { Id: 105, Name: 'Kunal', Salary: 1234 }  
  ];  
  
  @ViewChild('content') content: ElementRef;  
  public SavePDF(): void {  
    let content=this.content.nativeElement;  
    let doc = new jsPDF();  
    let _elementHandlers =  
    {  
      '#editor':function(element,renderer){  
        return true;  
      }  
    };  
    doc.fromHTML(content.innerHTML,15,15,{  
  
      'width':190,  
      'elementHandlers':_elementHandlers  
    });  
  
    doc.save('test.pdf');  
  }  
}  

I hope it’ll work for you, keep sharing, thank you!

#angular #html #pdf #export #javascript

How to export Angular page content to PDF with Kendo UI

If you've found yourself looking for an easy solution to smoothly export the HTML content from your Angular application to a PDF, then this is the appropriate post for you. We may need to export HTML content to PDF for several reasons, ranging from sharing it with others without necessarily accessing the internet to saving it just for documentation purposes.

Building a solution for a component like this could be time-consuming if you are building all by yourself. In this post, I will show you how to easily achieve this by leveraging the PDF export component provided by Kendo UI.

We will build an Angular application with some dummy content and add a Kendo UI button to export the content directly to PDF as shown here:

Install Angular CLI

Before creating an Angular application, you need to first install the Angular CLI if it doesn’t already exist on your machine. Open up a terminal and run the following command for that purpose:

npm install -g @angular/cli 

This will add the Angular CLI globally on your machine.

Creating Angular Application

You can now proceed to create a new app for the purpose of this post by running the command below to generate an application with the name kendo-angular-export-pdf:

ng new kendo-angular-export-pdf

Once the installation process is complete, change directory into the newly created project as shown below and start the application:

// change directory
cd kendo-angular-export-pdf
   
// start the application
ng serve

You may experience an error with the message below in your console:

ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: Expression expected.

This is a known issue on GitHub and it’s due to lack of compatibility between the current version of TypeScript on your machine and rxjs. The quick way to fix this is to delete the node_modules folder. Now, open the package.json file and within the dependencies object, edit the rxjs by removing ^ :

 "dependencies": {
   ...
   "rxjs": "6.0.0", // remove the `^`
   "zone.js": "^0.8.26"
 },

Save the file and run the npm install command again. Once the installation process is complete, you can now proceed to start the application with ng serve.

This will compile your application and start the development server. To view the default page of this Angular application, navigate to http://localhost:4200 from your favorite browser and you will see this:

Add PDF Export Component from Kendo UI

Next, we’ll need to add the PDF export component before we start using it in our application. To achieve that, we’ll use the ng add command to require and install the package as shown here:

ng add @progress/kendo-angular-pdf-export

This will import and add both PDFExportModule and BrowserAnimationsModule to the app.module.ts file:

// ./src/app/app/module.ts
   
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { PDFExportModule } from '@progress/kendo-angular-pdf-export';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   
   
@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   PDFExportModule,
   BrowserAnimationsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Use the Kendo PDF Export Component

After installing the PDF export package, you can now proceed to export content within our Angular application to PDF by placing it within the <kendo-pdf-export> component. Open ./src/app/app.component.html and replace its content with:

// ./src/app/app.component.html
   
<div class="pageWrapper">
 <div class="content">
   <kendo-pdf-export #pdf>
     <div class="size-a4">
       <p> Build Better JavaScript Apps Faster The ultimate collection of JavaScript UI components with libraries for jQuery,
         Angular, React, and Vue. Quickly build eye-catching and high-performance responsive web applications—regardless
         of your JavaScript framework choice.
       </p>
       <p> Build Better JavaScript Apps Faster The ultimate collection of JavaScript UI components with libraries for jQuery,
         Angular, React, and Vue. Quickly build eye-catching and high-performance responsive web applications—regardless
         of your JavaScript framework choice.
       </p>
     </div>
   </kendo-pdf-export>
   
   <div>
     <button kendo-button (click)="pdf.saveAs('demo-content.pdf')">
       Export As PDF
     </button>
   </div>
 </div>
</div>

Here, we have added dummy content and wrapped it with the <kendo-pdf-export></kendo-pdf-export> component. Next we added a button and attached a click event to it. Once the button is clicked, we called the saveAs() method in order to save the generated file. The file will be saved as the name passed as an argument to the saveAs() method.

Finally, to give the page some default styling, add the following content to ./src/app/app.component.css file:

// ./src/app/app.component.css
   
.pageWrapper {
 margin-top: 50px;
}
button {
   padding: 15px;
}
kendo-pdf-export {
 font-family: "DejaVu Sans", "Arial", sans-serif;
 font-size: 16px;
}
.content {
 width: 800px;
 margin: 0 auto;
 line-height: 20px;
}

Now proceed to start the application again by running ng serve from the terminal within the application’s directory. Once

the application is built and served on http://localhost:4200 you will see this:

The content displayed here is from our Angular application. To test the HTML content export functionality, click on the Kendo button with the text Export As PDF. Now open the downloaded PDF file:

Cool, right? This is the content of our page exported to PDF without much hassle. But with a close look at the PDF file, you will agree with me that something isn’t right. The content doesn’t look properly organized. We’ll change that by adding a little bit of margin in the next section.

Add Paper Size and Margin

The Kendo PDF export component API makes a provision for us to easily customize and specify the paper size of the PDF document. At the moment, it is set to the default auto which means that the paper size is determined by the content.

Let’s replace the content of ./src/app/app.component.html with:

// ./src/app/app.component.html
   
<div class="pageWrapper">
 <div class="content">
   <kendo-pdf-export #pdf paperSize="A4" margin="2cm">
     <div class="size-a4">
       <p> Build Better JavaScript Apps Faster The ultimate collection of JavaScript UI components with libraries for jQuery,
         Angular, React, and Vue. Quickly build eye-catching and high-performance responsive web applications—regardless
         of your JavaScript framework choice.
       </p>
       <p> Build Better JavaScript Apps Faster The ultimate collection of JavaScript UI components with libraries for jQuery,
         Angular, React, and Vue. Quickly build eye-catching and high-performance responsive web applications—regardless
         of your JavaScript framework choice.
       </p>
     </div>
   </kendo-pdf-export>
   
   <div>
     <button kendo-button (click)="pdf.saveAs('demo-content.pdf')">
       Export As PDF
     </button>
   </div>
 </div>
</div>

We have added two data attributes to the <kendo-pdf-export>, which are:

  • paperSize: We set this to A4.
  • margin: We set this to 2cm.

Check the page again and click on the Export As PDF button. Now proceed to open your downloaded PDF file and you will notice that it looks much better as shown below:

Conclusion

The Kendo PDF export component as shown here is a solution for exporting and handling HTML content to PDF. This comes in handy whenever you need to quickly save a page as a PDF document from your Angular application.

We have barely scratched the surface here, because there is so much more functionality provided by the Kendo UI team when exporting HTML content to PDF. Feel free to explore the API by checking the link here for more details.

Hopefully you have learned a lot from this post. Check the source code here on GitHub.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about Angular

Angular 8 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

The Complete Node.js Developer Course (3rd Edition)

The Web Developer Bootcamp

Best 50 Angular Interview Questions for Frontend Developers in 2019

How to build a CRUD Web App with Angular 8.0

React vs Angular: An In-depth Comparison

React vs Angular vs Vue.js by Example

Microfrontends — Connecting JavaScript frameworks together (React, Angular, Vue etc)

Building CRUD Mobile App using Ionic 4, Angular 8

How to Build Mobile Apps with Angular, Ionic 4, and Spring Boot

Ionic 4 & Angular Tutorial For Beginners - Crash Course

#angular #html #web-development