angularjs - पीडीएफ को निर्यात करने से पहले कोणीय डेटासेट बनाना



pdf datatables (1)

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>

मैं एक्सेल बटन के साथ एन्जिल-डेटाटेबल प्लगइन का उपयोग कर रहा हूं। मैं एक टेबल को पीडीएफ के रूप में निर्यात करने की कोशिश कर रहा हूं जिसमें टूल टिप और ग्लाइफ़िकॉन शामिल हैं। मैं तालिका निर्यात करते समय 2 समस्याओं का सामना कर रहा हूं।

समस्या 1

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

निर्यात पीडीएफ में टूलटिप्स पाठ होता है

समस्या 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>

तालिका ग्लाइफिकॉन निर्यात नहीं कर रही है

मैं टेबल को कैसे स्वरूपित कर सकता हूं ताकि उपकरण युक्तियाँ पाठ को बाहर रखा जाए और निर्यात किए गए पीडीएफ में ग्लाइफीकॉन दिखाया जाए?

https://code.i-harness.com


exportOptions पर एक नज़र exportOptions यह बहुत अच्छी तरह से प्रलेखित नहीं है, इसलिए आपको dataTables.buttons.js में डाइव करना होगा यदि आपको अधिक विवरण चाहिए। लेकिन मूल रूप से आपके पास तालिका के प्रत्येक अनुभाग के लिए फ़ॉर्मेटर कॉलबैक का एक सेट है:

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

मार्कअप को बाहर करने के लिए या अन्य तरीकों से सामग्री को संशोधित करने के लिए इन कॉलबैक का उपयोग करें। मुझे पूरा यकीन नहीं है कि " निर्यात किए गए पीडीएफ में टूलटिप्स टेक्स्ट शामिल हैं ", लेकिन मुझे लगता है कि आप .tooltipstext <span> मिटा .tooltipstext चाहते हैं? data पकड़ <div class="tooltips">sr <span class="tooltipstext">Poistion</span></div> ताकि आप इसे इस तरह jQuery के साथ निकाल सकते हैं:

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

अब पीडीएफ कॉलम हैडर में केवल sr शामिल होगा

निर्यात में ग्लाइफ़िकॉन को शामिल करना अधिक कठिन है। आपको vfs_fonts.js को पुन: निर्माण करने की आवश्यकता होगी और इसमें glyphicons-halflings-regular.ttf । यह एक मार्गदर्शिका है जो इसे कैसे करें

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

मैंने कभी खुद का प्रयास नहीं किया है, इसलिए मैं नहीं कह सकता कि क्या कोई नुकसान है





angular-datatables