个人中心
gpt4 book ai didi

javascript - 导出带有阿拉伯字符的 html 表

转载 作者：行者123 更新时间：2023-11-28 04:45:54 26 4
gpt4 key购买 nike

我需要将包含阿拉伯语数据的 html 表导出为 xls、pdf

这是我在 Plunker 中的代码

SO Snippet 中的代码由于 SO 沙箱而失败

我需要一个 Angular 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>

最佳答案

我就是这样被利用的。请参阅下文或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="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>

关于javascript - 导出带有阿拉伯字符的 html 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43370361/

26 4 0
文章推荐： javascript - 无法从 Firefox 中的加载项访问浏览器本地存储
文章推荐： javascript - 如何设置按钮处理程序来删除父表行？
文章推荐： c++ - 我如何在 QML 中设置样式表？(只有 QML 没有 C++)
文章推荐： c++ - Visual Studio 堆分析不再有效
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com