angularjs - page - kendo pdf export angular



Formage de données angulaires avant l'exportation en pdf (1)

Jetez un oeil à exportOptions . Ce n'est pas si bien documenté, donc vous devrez plonger dans dataTables.buttons.js si vous avez besoin de plus de détails. Mais fondamentalement, vous avez un ensemble de rappels de formatage pour chaque section de la table:

exportOptions: {
  format: {
    header: function( data, column ) {
      ...
    },
    footer: function( data, column ) {
      ...  
    },
    body: function( data, row, column, node ) {
      ...
    }
  }    
}    

Utilisez ces rappels pour exclure le balisage ou d'une autre manière modifier le contenu. Je ne suis pas tout à fait sûr de ce que signifie " Le pdf exporté contient le texte des info-bulles ", mais je suppose que vous voulez supprimer le .tooltipstext <span> ? data hold <div class="tooltips">sr <span class="tooltipstext">Poistion</span></div> donc vous pouvez le supprimer avec jQuery comme ceci:

{
  extend: 'pdfHtml5',
  title: 'My list',
  exportOptions: {
    format: {
      header: function ( data, column ) {
        return $(data).find('.tooltipstext').remove().end().text();
       }
    }
  }
}

Maintenant, l'en-tête de la colonne PDF ne contiendra que sr .

Il est plus difficile d'inclure des glyphicons dans l'exportation. Vous devrez reconstruire vfs_fonts.js et inclure glyphicons-halflings-regular.ttf . Voici un guide pour le faire

https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts---client-side

Je n'ai jamais essayé cela moi-même, donc je ne peux pas dire s'il y a des pièges

var app = angular.module('myApp', ['datatables', 'datatables.buttons']);
app.controller('MyCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder) {

  $scope.list = [{
      "eid": "10",
      "type": "1",
      "sales": "20",
      "status": "1"
    }, {
      "eid": "20",
      "type": "2",
      "sales": "40",
      "status": "0"
    }, {
      "eid": "30",
      "type": "1",
      "sales": "20",
      "status": "1"
    }
  ];

  $scope.vm = {};

  $scope.vm.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('order', [0, 'asc'])
    .withButtons([
      {
        extend: 'collection',
        text: 'Export',
        buttons: [{
            extend: 'copyHtml5',
            title: 'Mylist'
          },
          {
            extend: 'pdfHtml5',
            title: 'My list'
          }
        ]
      }
    ]);

});
/* Tooltip container */
.tooltips {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltips .tooltipstext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltips:hover .tooltipstext {
    visibility: visible;
}
<html>
        <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
          <script src="https://phpflow.com/demo/angular_datatable_demo/angular-datatables.min.js"></script>
          <script src="https://phpflow.com/demo/angular_datatable_demo/jquery.dataTables.min.js"></script>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
          <link rel="stylesheet" href="https://phpflow.com/demo/angular_datatable_demo/datatables.bootstrap.css"> 
                      <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css"> 

      <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<script src="http://l-lin.github.io/angular-datatables/archives/dist/plugins/buttons/angular-datatables.buttons.min.js"></script>

      </head>
        <div class="container">
        <div ng-app="myApp" ng-controller="MyCtrl">

        <table  class="table table-striped table-bordered" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs" datatable="ng">
           <thead>
              <tr>
        	    <th><div class="tooltips">sr <span class="tooltipstext">Poistion</span>
</div>   </th>

        	 <th>Employee ID</th>
        	<th>Type</th>
        	<th>sales</th>
          <th>sales_completed</th>

        </thead>
            <tbody>
          
           <tr ng-repeat="data in list">
              <td> {{ $index+1 }} </td>
             
              <td> {{ data.eid }} </td>
              <td> {{ data.type==2? "admin" : "employee"}} </td>
              <td> {{ data.sales }} </td>
            
              <td> 
              
              <span ng-show="{{ data.status }}=='1'"> <div class="tooltips"><i class="glyphicon glyphicon-ok"></i><span class="tooltipstext">Yes</span></div></span>
              <span ng-show="{{ data.status }}=='0'"> <div class="tooltips"><i class="glyphicon glyphicon-remove"></i><span class="tooltipstext">NO</span></div></span>
  
               </td>
                </tr>
        </tbody>
  
        </table>
        </div>

J'utilise le plugin angulaire-datable , avec des boutons d'exportation. J'essaye d'exporter une table comme pdf qui contient des bouts d'outil et le glyphicon. Je fais face à 2 problèmes tout en exportant la table.

Problème 1

<th>
    <div class="tooltips">sr <span class="tooltipstext">Poistion</span></div> </th>

Le pdf exporté contient le texte des info-bulles

Problème 2

<span ng-show="{{ data.status }}=='1'"> <div class="tooltips"><i class="glyphicon glyphicon-ok"></i><span class="tooltipstext">Yes</span></div></span>

<span ng-show="{{ data.status }}=='0'"> <div class="tooltips"><i class="glyphicon glyphicon-remove"></i><span class="tooltipstext">NO</span></div></span>

La table n'exporte pas le glyphicon

Comment puis-je formater la table de manière à exclure le texte des astuces et à afficher le glyphicon dans le pdf exporté?





angular-datatables