Export html table with Arabic character

Question

I need to export my html table with arabic data to xls, pdf

this is my code in Plunker

The code in SO Snippet fails due to SO sandbox

I need an angular js, jquery or javascript solution.

[{"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>

Welcome to SO. Please visit the [help] to see what and how to ask. HINT: Post effort and code HERE - I included it even though SO breaks it — mplungjan, Apr 12 '17 at 13:05
This post may help you http://stackoverflow.com/questions/34049956/generate-pdf-from-html-using-pdfmake-in-angularjs/34162901#34162901 — Rani Radcliff, Apr 12 '17 at 13:41

Manikandan Velayutham · Accepted Answer · 2017-04-27T12:10:11.750

I was used like this. Refer below or http://embed.plnkr.co/4LmtmuIv6RYM1JCW2Aaj/ .. this may help you.

    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="jquery@*" 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>

Export html table with Arabic character

1 Answers1