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();
        });
    }
}
});

以下代码将允许您导出为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></div>

对我来说,棘手的部分是现有的数据库模式经常更改,导入文件列都必须与现有的数据库模式进行匹配,因为它们可能不是列对应的一对一匹配. (有一个查找表,提供表模式,我将使用列名)

我正在探索不同的方法来处理这个问题,需要一些专家的意见.是否有任何现有的控制或框架,我可以用来做任何这些？

到目前为止,我探讨了FileUpload .NET控件,以及一些第三方上传控件来完成上传,例如SlickUpload,但是上传的文件应该是< 500MB 下一部分是读取我的csv / excel并解析它以显示给用户,以便它们可以与我们的数据库模式匹配.我看到CSVReader和其他人,但为了excel它更困难,因为我将需要支持不同的版本.

基本上执行此导入的用户将从此导入文件插入和/或更新多个表.还有其他更先进的要求,如记录匹配,但是导入记录的预览,但我希望了解如何做到这一点.

更新：我最终使用csvReader与LumenWorks.Framework上传csv文件.

它是纯C#,它可以导入任何平面文件,CSV,它也处理Excel.导入是完全可配置的 – 您可以定义要跳过的分隔符,行和/或列等等 – 很多选项.

我已经成功地在各种项目中使用它,它的工作非常完美 – 强烈推荐.