Как сгенерированная таблица выполняется с помощью pdf в угловом формате? [Дубликат]

Если вы также хотите работать с произвольным json, включая вложенные списки и dicts, и хорошо обрабатывать недопустимые пути поиска, вот мое решение:

from functools import reduce


def get_furthest(s, path):
    '''
    Gets the furthest value along a given key path in a subscriptable structure.

    subscriptable, list -> any
    :param s: the subscriptable structure to examine
    :param path: the lookup path to follow
    :return: a tuple of the value at the furthest valid key, and whether the full path is valid
    '''

    def step_key(acc, key):
        s = acc[0]
        if isinstance(s, str):
            return (s, False)
        try:
            return (s[key], acc[1])
        except LookupError:
            return (s, False)

    return reduce(step_key, path, (s, True))


def get_val(s, path):
    val, successful = get_furthest(s, path)
    if successful:
        return val
    else:
        raise LookupError('Invalid lookup path: {}'.format(path))


def set_val(s, path, value):
    get_val(s, path[:-1])[path[-1]] = value
8
задан Avnesh Shakya 30 December 2016 в 13:13
поделиться

4 ответа

Вы можете использовать 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>

16
ответ дан Sajeetharan 17 August 2018 в 15:31
поделиться
  • 1
    Да ! спасибо sajeetharan, что он работает отлично, но когда я заменяю код, что-то вроде этого не получается – Rajesh gatla 30 December 2016 в 13:12
  • 2
    function ($ scope) {$ scope.data = [{firstName: & quot; rajeh & quot;, lastName: & quot; gatla & quot ;, пол: "mgale", мобильный: "8143445171"}, {firstName: "sathi" lastName: & quot; wesd & quot ;, пол: "madfgle", мобильный: "8143445171"}, {firstName: "gjds", lastName: "hs", gender: "madfhsdfle", mobile: "8143445171" }, {firstName: & quot; dfdff ", lastName:" gahgsftla ", пол:" mdfsdsale ", mobile:" 8143445171 "}, {firstName:" dsfsd ", lastName:" gatWERWDla ", gender: & quot; «madfshfle», mobile: «8143445171», {firstName: «dfagdsew», lastName: «gatlgfha», gender: «mdfgdfale», mobile: «8143445171»}]; – Rajesh gatla 30 December 2016 в 13:12
  • 3
    & Lt; TBODY & GT; & lt; tr ng-repeat = "emp в сотрудниках" & gt; & gt; & Lt; & тд GT; {{emp.firstName}} & л; / & тд GT; & Lt; & тд GT; {{emp.lastName}} & л; / & тд GT; & Lt; & тд GT; {{emp.gender}} & л; / & тд GT; & Lt; & тд GT; {{emp.mobile}} & л; / & тд GT; & Л; / тр & GT; & Lt; / TBODY & GT; – Rajesh gatla 30 December 2016 в 13:12
  • 4
    @Rajesh вот демонстрация plnkr.co/edit/KdDvNUB99yFh2nvmzHJa?p=preview – Sajeetharan 31 December 2016 в 05:04
  • 5
    в демо экспортированный pdf-файл не очень чистый – ANinJa 9 September 2017 в 08:39

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

6
ответ дан Chandra Kudumula 17 August 2018 в 15:31
поделиться
  • 1
    это помогло мне поблагодарить вас в тоннах – Rajesh gatla 25 March 2017 в 06:02
  • 2
    Как иметь более 4 столбцов в pdf-экспорте? – jain 25 April 2017 в 14:13
  • 3
    Я думаю, что эта библиотека экспортирует только таблицу, даже не один заголовок или что-то еще, я искал выставление счетов. – ANinJa 9 September 2017 в 08:36
  • 4
    почему он не работает в ионной – Umapathi 14 April 2018 в 09:37

ДЛЯ ANGULAR

ШАГ 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 add:

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

}

подробнее?

0
ответ дан Diego Venâncio 17 August 2018 в 15:31
поделиться
  • 1
    Я сделал то же самое в моем проекте с угловым 5, и я получаю ERROR ReferenceError: jsPDF не определен в DashboardComponent.downloadPdf – Anuj 21 March 2018 в 11:07

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

https://github.com/MrRio/jsPDF

, а затем вы можете использовать в своем контроллере, например это:

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

            };
2
ответ дан Farzad YZ 17 August 2018 в 15:31
поделиться
Другие вопросы по тегам:

Похожие вопросы: