comment exporter des données html au format pdf en angularjs

c'est mon code html où j'ai rendu tous les json données de .js fichier mais se

TypeError: Impossible de convertir le indéfini ou null pour objet
à une Fonction.les touches ()
au DocMeasure.measureNode (pdfmake.js:15647)
au DocMeasure.measureDocument (pdfmake.js:15635)
au LayoutBuilder.tryLayoutDocument (pdfmake.js:15088)
au LayoutBuilder.layoutDocument (pdfmake.js:15076)
au PdfPrinter.createPdfKitDocument (pdfmake.js:2130)
au Document._createDoc (pdfmake.js:82)
au Document.getDataUrl (pdfmake.js:177)
au Document.ouvert (pdfmake.js:109)
à l.$la portée.openPdf (app.js:29) 

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="pdfmake.js"></script>
  <script type="text/javascript" src="vfs_fonts.js"></script>
  <script type="text/javascript" src="app.js"></script>
  <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="raj.js"></script>
    <script type="text/javascript" src="jspdf.js"></script>



</head>

<body ng-app="pdfDemo">
  <div ng-controller="pdfCtrl">
          <div id="pdfContent">
                  <table id="example-table">
                            <thead>
                            <th>firstName</th>
                            <th>lastName</th>
                            <th>Gender</th>
                            <th>Mobile</th>

                            </thead>
                            <tbody>
                            <tr ng-repeat="emp in employees">
                            <td>{{emp.firstName}}</td>
                            <td>{{emp.lastName}}</td>
                            <td>{{emp.gender}}</td>
                            <td>{{emp.mobile}}</td>
                            </tr>

                            </tbody>

                  </table>
          </div>
    <button ng-click="openPdf()">Open Pdf</button>
    <button ng-click="downloadPdf()">Download Pdf</button>
  </div>

</body>

</html>

OriginalL'auteur Rajesh gatla | 2016-12-30

  1. 8

    Voici le code à l'exportation HTML tableau EXcel, CSV, Pdf, Doc

    https://plnkr.co/edit/HmKBjYmJNjp8mPzIlg52?p=preview

      <body ng-controller="MainCtrl">
<p>Export HTML Table to Excel, Pdf, CSV and Doc</p>

<table class="export-table" style="width: 100%; margin-top: 20px">
      <thead>
          <tr>
              <th>Employee ID</th>
              <th>Last Name</th>
              <th>First Name</th>
              <th>Salary</th>
          </tr>
      </thead>
      <tbody>
          <tr ng-repeat="item in reportData">
              <td>{{item.EmployeeID}}</td>
              <td>{{item.LastName}}</td>
              <td>{{item.FirstName}}</td>
              <td>{{item.Salary}}</td>
          </tr>
      </tbody>
</table>
<hr>
<a href="#" data-ng-click="exportAction('csv')"> Export CSV</a><br/><br/>
<a href="#" data-ng-click="exportAction('excel')"> Export Excel</a><br/><br/>
<a href="#" data-ng-click="exportAction('doc')"> Export Doc</a><br/><br/>
<a href="#" data-ng-click="exportAction('pdf')"> Export Pdf</a><br/><br/>

    il a travaillé pour moi merci u en tonnes
    Comment avoir plus de 4 colonnes à exporter en pdf?
    je pense que cette bibliothèque seulement les exportations de table, pas même un seul en-tête ou quelque chose, j'ai été à la recherche pour la facturation.
    pourquoi il ne travaille pas dans ionique

    OriginalL'auteur Chandra Kudumula

  2. 1

    J'ai utilisé ceci:

    https://github.com/MrRio/jsPDF

    et puis vous pouvez utiliser dans votre contrôleur comme ceci:

     $scope.HTMLclick = function () {
                var pdf = new jsPDF();
                pdf.addHTML(($("#pdfContent")[0]), { pagesplit: true }, function () {
                    pdf.save('myfilename' + '.pdf');
                });

            };

    OriginalL'auteur federico scamuzzi

  3. 1

    ANGULAIRE

    ÉTAPE 1: npm install jspdf-autotable

    ou dans index.html en <head></head> ajouter: <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.js">

    ÉTAPE 2:dans Angulaires-cli.json ajouter:

    "scripts": [
    "../node_modules/jspdf/dist/jspdf.min.js",
    "../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
],

    ÉTAPE 3: app.composante.ts ou de toute autre composante aff ci-dessous les importations

    importer { Component } '@angulaire de base";

    declare var jsPDF: any;

    ÉTAPE 4: Pour le test de mettre dans votre composante:

    export class AppComponent {
  title = 'app works!';

  public columns: string[] = ['Name', 'Phone', 'Whatsapp'];
  public data: string[] = ['Diego Venâncio', '79999565796', '79912345678'];

  constructor() {
    var doc = new jsPDF('p', 'pt');
    doc.autoTable(columns, data);
    doc.save("table.pdf");
  }

    }

    plus de détails?

    J'ai fait la même chose dans mon angulaire 5 projet et j'obtiens l'ERREUR ReferenceError: jsPDF n'est pas défini à DashboardComponent.downloadPdf

    OriginalL'auteur Diego Venâncio