Angular 12 jsPDF HTML Table JSON to PDF Document in Browser Using TypeScript Full Project For Beginners

 

 

 

 

app.component.ts

 

 

import { Component } from '@angular/core';
declare let jsPDF;

@Component({
  selector: 'my-app',
  template: `<h1>JSON to PDF app</h1>
    <div class="container" id="div1">
      <button id="create" (click)="convert()">Create file</button>
    </div> `,
})
export class AppComponent {
  convert() {
    var item = {
      Name: 'XYZ',
      Age: '22',
      Gender: 'Male',
    };
    var doc = new jsPDF();
    var col = ['Details', 'Values'];
    var rows = [];

    for (var key in item) {
      var temp = [key, item[key]];
      rows.push(temp);
    }

    doc.autoTable(col, rows);

    doc.save('Test.pdf');
  }
}

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

 

 

index.html

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>JSON to PDF</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>

    <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
    <script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.16/jspdf.plugin.autotable.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

Leave a Reply