與阿拉伯字符

我需要我的HTML表導出用阿拉伯語數據爲XLS，PDF與阿拉伯字符

導出HTML表這是我在Plunker

代碼SO片段中的代碼失敗，因爲SO沙箱

我需要一個角度js，jquery或javascript解決方案。

[{"code":"1","libelleAr":"الصنف :أ الصنف الفرعي :أ1","libelleFr":"CAT : A /SCAT : A1","nbre":143211},{"code":"1","libelleAr":"الصنف :أ الصنف الفرعي :أ1","libelleFr":"CAT : A /SCAT : A1","nbre":11513},{"code":"5","libelleAr":"الصنف ج","libelleFr":"Categorie: C","nbre":13153},{"code":"X","libelleAr":"غير مصنّفون","libelleFr":"Non renseignée","nbre":1201},{"code":"1","libelleAr":"العملة الوحدة 1","libelleFr":"Unite 1","nbre":12152},{"code":"3","libelleAr":"الصنف :أ الصنف الفرعي :أ3","libelleFr":"CAT : A /SCAT : A3","nbre":24021},{"code":"2","libelleAr":"العملة الوحدة 3","libelleFr":"Unite 3","nbre":15111},{"code":"2","libelleAr":"العملة الوحدة 1","libelleFr":"Unite 1","nbre":43115},{"code":"4","libelleAr":"الصنف ب","libelleFr":"Categorie: B","nbre":51431},{"code":"1","libelleAr":"الصنف د","libelleFr":"Categorie: D","nbre":14151}]

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
    <script type="text/javascript"> 
 
    var myAppModule = angular.module('myApp', []); 
 
    myAppModule.controller('myCtrl', function($scope, $http) { 
 

 
     $http.get("par_categorie.json") 
 
     .then(function(response) { 
 
      $scope.items = response.data; 
 
     }); 
 
     $scope.exportData = function() { 
 
     $('#customers').tableExport({ 
 
      type: 'json', 
 
      escape: 'false' 
 
     }); 
 
     }; 
 

 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 
    <div class="container"> 
 

 

 
     <br/> 
 

 
     <button>XLS</button> 
 
     <button>PDF</button> 
 
     <button>PRINT</button> <br/> 
 
     <br/> 
 
     <table border="1" id="customers" class="table table-striped"> 
 
     <thead> 
 
      <tr> 
 
      <th>Code</th> 
 
      <th>LibelleAr</th> 
 
      <th>Nbre</th> 
 

 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="item in items"> 
 
      <td>{{item.code}}</td> 
 
      <td>{{item.libelleAr}}</td> 
 
      <td>{{item.nbre}}</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-04-12 Anys Chaâbani

歡迎SO。請訪問[幫助]，看看有什麼和如何問。建議：後期努力和代碼在這裏 - 我包括它，即使它打破它 – mplungjan

謝謝 http://plnkr.co/edit/TcyzSIej8FCVOTCVYNz2?p=preview –

這篇文章可能會幫助你http://stackoverflow.com/questions/ 34049956 /生成-PDF-從-HTML的使用-pdfmake合angularjs/34162901＃34162901 –

我已經習慣這樣。請參閱下面或http://embed.plnkr.co/4LmtmuIv6RYM1JCW2Aaj/ .. 這可能會幫助你。

var app = angular.module('myApp', []); 
 
    app.controller('myCtrl', function ($scope,$http,$timeout, Excel) { 
 
    $scope.items = [{"code":"1","libelleAr":"الصنف :أ الصنف الفرعي :أ1","libelleFr":"CAT : A /SCAT : A1","nbre":143211},{"code":"1","libelleAr":"الصنف :أ الصنف الفرعي :أ1","libelleFr":"CAT : A /SCAT : A1","nbre":11513},{"code":"5","libelleAr":"الصنف ج","libelleFr":"Categorie: C","nbre":13153},{"code":"X","libelleAr":"غير مصنّفون","libelleFr":"Non renseignée","nbre":1201},{"code":"1","libelleAr":"العملة الوحدة 1","libelleFr":"Unite 1","nbre":12152},{"code":"3","libelleAr":"الصنف :أ الصنف الفرعي :أ3","libelleFr":"CAT : A /SCAT : A3","nbre":24021},{"code":"2","libelleAr":"العملة الوحدة 3","libelleFr":"Unite 3","nbre":15111},{"code":"2","libelleAr":"العملة الوحدة 1","libelleFr":"Unite 1","nbre":43115},{"code":"4","libelleAr":"الصنف ب","libelleFr":"Categorie: B","nbre":51431},{"code":"1","libelleAr":"الصنف د","libelleFr":"Categorie: D","nbre":14151}]; 
 
     // $http.get("cate.json").then(function (response) {$scope.items = response.data;}); 
 
     $scope.exportData = function() { 
 
      $('#customers').tableExport({ type: 'json', escape: 'false' }); 
 
     }; 
 
     
 
      $scope.exportToExcel=function(tableId){ // ex: '#my-table' 
 
      var exportHref=Excel.tableToExcel(tableId,'WireWorkbenchDataExport'); 
 
      $timeout(function(){location.href=exportHref;},100); // trigger download 
 
     } 
 
     
 
     $scope.exportToPdf = function(){ 
 
      html2canvas(document.getElementById('customers'), { 
 
       onrendered: function (canvas) { 
 
        var data = canvas.toDataURL(); 
 
        var docDefinition = {content: [{ 
 
          image: data, 
 
          width: 500,}] 
 
        }; 
 
pdfMake.createPdf(docDefinition).download("example.pdf"); 
 
// pdfMake.createPdf(docDefinition).download("test.pdf"); 
 
    //    pdfMake.createPdf(docDefinition).open(); 
 
       } 
 
      }); 
 
     } 
 
    }); 
 
    app.factory('Excel',function($window){ 
 
     var uri='data:application/vnd.ms-excel;base64,', 
 
     template='<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>', 
 
     base64=function(s){return $window.btoa(unescape(encodeURIComponent(s)));}, 
 
     format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];})}; 
 
     return { 
 
      tableToExcel:function(tableId,worksheetName){ 
 
       var table=$(tableId), 
 
       ctx={worksheet:worksheetName,table:table.html()}, 
 
       href=uri+base64(format(template,ctx)); 
 
       return href; 
 
      } 
 
     }; 
 
    });

<!DOCTYPE html> 
 
<html lang="ar"> 
 

 
<head> 
 
    <meta> 
 
    <script data-require="[email protected]*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.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="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
    
 
    
 
</head> 
 

 
<body> 
 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 
     {{arbi}} 
 
     <div class="container"> 
 
      
 

 
     <br/> 
 
     
 
     <button ng-click="exportToExcel('#customers')">XLS</button> 
 
     <button ng-click="exportToPdf()">PDF</button> 
 
     <button >PRINT</button> <br/> 
 
     <br/> 
 
     <table border="1" id="customers" class="table table-striped"> 
 
      <thead> 
 
       <tr> 
 
        <th>Code</th> 
 
        <th>LibelleAr</th> 
 
        <th>Nbre</th> 
 

 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr ng-repeat="item in items"> 
 
        <td>{{item.code}}</td> 
 
        <td>{{item.libelleAr}}</td> 
 
        <td>{{item.nbre}}</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div> 
 

 
</body> 
 

 
</html>

來源

2017-04-12 14:04:52

與阿拉伯字符

回答

相關問題