как экспортировать html-данные в pdf в angularjs

это мой html-код, где я отображал все json данные из .js файла, но получал

TypeError: Невозможно преобразовать undefined или null в объект в Function.keys() в DocMeasure.measureNode(pdfmake.js: 15647) в DocMeasure.measureDocument(pdfmake.js: 15635) в LayoutBuilder.tryLayoutDocument(pdfmake.js: 15088) в LayoutBuilder.layoutDocument(pdfmake.js: 15076) в PdfPrinter.createPdfKitDocument(pdfmake.js: 2130) в Document._createDoc (pdfmake.js: 82) в Document.getDataUrl(pdfmake.js: 177) в Document.open(pdfmake.js: 109) при l. $ Scope.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>

Ответ 1

Вы можете использовать pdfmake, чтобы экспортировать pdf

DEMO

var app = angular.module("app", []);

 app.controller("listController", ["$scope",
   function($scope) {
     $scope.data=  [{"agence":"CTM","secteur":"Safi","statutImp":"operationnel"}];
     
     $scope.export = function(){
        html2canvas(document.getElementById('exportthis'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500,
                    }]
                };
                pdfMake.createPdf(docDefinition).download("test.pdf");
            }
        });
     }
   }
 ]);

<!doctype html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="listController">
    <div id="exportthis">
      {{data}}
    </div>
    <button ng-click="export()">export</button>
  </div>
</body>

</html>

Ответ 2

Вот код для экспорта таблицы HTML в 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/>

Ответ 3

Я использовал это:

https://github.com/MrRio/jsPDF

и затем вы можете использовать его в своем контроллере следующим образом:

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

            };

Ответ 4

ДЛЯ УГЛОВЫХ

ШАГ 1: npm install jspdf-autotable

или в index.html в <head></head> add: <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.js">

ШАГ 2: в Angular-cli.json добавьте:

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

ШАГ 3: app.component.ts или любой другой компонент, находящийся под импортом

import {Component} из '@angular/core';

declare var jsPDF: any;

ШАГ 4: Для теста, помещенного в ваш компонент:

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");
  }

}

подробнее?

Ответ 5

Лучший и выполнимый способ - использовать функцию window.print(). Который не требует никакой библиотеки

Pros

1. Никакой внешней библиотеки не требуется.

2. Мы можем печатать только отдельные части тела.

3. Никаких конфликтов и проблем.

4.Core html/js функциональность

---Simple добавить код ниже

CSS для

@media print {
        body * {
            visibility: hidden; // part to hide at the time of print
            -webkit-print-color-adjust: exact !important; // not necessary use         
               if colors not visible
        }

        #printBtn {
            visibility: hidden !important; // To hide 
        }

        #page-wrapper * {
            visibility: visible; // Print only required part
            text-align: left;
            -webkit-print-color-adjust: exact !important;
        }
    }

JS-код - вызов функции ниже по нажатию кнопки

$scope.printWindow = function () {
  window.print()
}

Примечание: используйте! Важное в каждом объекте CSS

Пример -

.legend  {
  background: #9DD2E2 !important;
}