angular

Angular 9 Tutorial to Convert HTML to PDF Using jsPDF & html2canvas Library Full Project For Beginners

Get Started

In order to get started you need to execute the below command to create new angular project

ng new html-to-pdf

Now you need to install the below libraries using the npm command as shown below

npm i html2canvas

npm i jspdf

Now create the app.component.html file and add the code in it.

app.component.html

<h1>HTML to PDF in Angular 9</h1>
<button (click)="generatePDF()">Generate PDF</button>

<table id="contentToConvert" border="1" width="100%">
  <tbody>
    <tr>
      <th>ID</th>
      <th>Article</th>
      <th>Technology</th>
      <th>Author</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Star Rating In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
    <tr>
      <td>2</td>
      <td>TypeAhead With Custom Result Template In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Circular Progress Bar In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Display Loader/Spinner On Each HTTP Calls In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Form Validation In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Building Responsive Carousel Slider In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
    <tr>
      <td>7</td>
      <td>How To Implement Lazy Loading Module In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Separate Development And Production URL In Angular 9</td>
      <td>Angular</td>
      <td>Yasin</td>
    </tr>
  </tbody>
</table>

Open the app.component.ts file and add the code in it.

RECENT POSTS

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *