angularjs – 如何将数据表导出为角度的csv文件

发布时间：2020-12-17 17:32:11 所属栏目：安全来源：网络整理

导读：我在我的 angularjs应用程序中有一个数据表,我想将其导出到csv文件.i在互联网上搜索了很多,我找到了这个指令,但这只有当按钮在桌子旁边时才有用. 需要帮助来编辑它… app.directive('exportToCsv',function(){return { restrict: 'A',link: function (scope,

我在我的 angularjs应用程序中有一个数据表,我想将其导出到csv文件.i在互联网上搜索了很多,我找到了这个指令,但这只有当按钮在桌子旁边时才有用.
需要帮助来编辑它…

app.directive('exportToCsv',function(){
return {
    restrict: 'A',link: function (scope,element,attrs) {
        var el = element[0];
        element.bind('click',function(e){
            var table = e.target.nextElementSibling;//need to access to this element directly
            var csvString = '';
            for(var i=0; i<table.rows.length;i++){
                var rowData = table.rows[i].cells;
                for(var j=0; j<rowData.length;j++){
                    csvString = csvString + rowData[j].innerHTML + ",";
                }
                csvString = csvString.substring(0,csvString.length - 1);
                csvString = csvString + "n";
            }
            csvString = csvString.substring(0,csvString.length - 1);
            var a = $('<a/>',{
                style:'display:none',href:'data:application/octet-stream;base64,'+btoa(csvString),download:'emailStatistics.csv'
            }).appendTo('body')
            a[0].click()
            a.remove();
        });
    }
}
});

解决方法

我建议你使用这个链接 here提供的UI网格

以下代码将允许您导出为PDF或CSV

var app = angular.module('app',['ngAnimate','ngTouch','ui.grid','ui.grid.selection','ui.grid.exporter','ui.grid.moveColumns']);

app.controller('MainCtrl',['$scope','$http',function ($scope,$http) {
  $scope.gridOptions = {
    columnDefs: [
      { field: 'name' },{ field: 'gender',cellFilter: 'mapGender',exporterPdfAlign: 'right' },{ field: 'company',visible: false }
    ],exporterLinkLabel: 'get your csv here',exporterPdfDefaultStyle: {fontSize: 9},exporterPdfTableStyle: {margin: [30,30,30]},exporterPdfTableHeaderStyle: {fontSize: 10,bold: true,italics: true,color: 'red'},exporterPdfOrientation: 'portrait',exporterPdfPageSize: 'LETTER',exporterPdfMaxGridWidth: 500,exporterHeaderFilter: function( displayName ) { 
      if( displayName === 'Name' ) { 
        return 'Person Name'; 
      } else { 
        return displayName;
      } 
    },exporterFieldCallback: function( grid,row,col,input ) {
      if( col.name == 'gender' ){
        switch( input ){
          case 1:
            return 'female';
            break;
          case 2:
            return 'male';
            break;
          default:
            return 'unknown';
            break;
        }
      } else {
        return input;
      }
    },onRegisterApi: function(gridApi){ 
      $scope.gridApi = gridApi;
    }
  };

  $http.get('/data/100.json')
    .success(function(data) {
      data.forEach( function( row,index ) {
        if( row.gender === 'female' ){
          row.gender = 1;
        } else {
          row.gender = 2;
        }
      });
      $scope.gridOptions.data = data;
    });



  $scope.export = function(){
    if ($scope.export_format == 'csv') {
      var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
      $scope.gridApi.exporter.csvExport( $scope.export_row_type,$scope.export_column_type,myElement );
    } else if ($scope.export_format == 'pdf') {
      $scope.gridApi.exporter.pdfExport( $scope.export_row_type,$scope.export_column_type );
    };
  };
}])

.filter('mapGender',function() {
  return function( input ) {
    switch( input ){
      case 1:
        return 'female';
        break;
      case 2:
        return 'male';
        break;
      default:
        return 'unknown';
        break;
    }
  };
});

HTML看起来像

<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter ui-grid-move-columns class="grid"></div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!