angualr项目table表格中 Excel表格数据导入导出

新的公司项目里有一个Excel数据表格导入到h5项目的table里，导出Excel的我倒是做过很多，导入的做的蛮少的，百度也没有找到一个很合适的demo，其实做出来感觉很简单。

1，首先是导出Excel，写一个button导出按钮

$scope.getExcel=function(){
		$http.post("order/excel",$rootScope.posts,{
            responseType: "blob"
        }).success(function(data){
			var blob = new Blob([data], {
                type: "application/vnd.ms-excel"
            });
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.download ="";
            a.href = URL.createObjectURL(blob);
            a.click();
		});
	};

　　在这里posts可以根据自己传递的列表id不同的数量导出不同的数据 我写了一个全选的方法 下面是html 和js

        

          

            

              
                全选
              
            
            

            
轨迹
          
        
        

          

            

              
            
            

            

              

                轨迹
                
            
          
          

            
没有任何数据
          
        
        

          

            
数据读取中...
          
        
      

　　js

  $rootScope.allCheckState=false;
        $rootScope.allCheckFn=function(list,state){
           if(list instanceof Array){
               list.forEach(function(item){
                   item.check=state;
                  //  console.log(item);
               })
           }
        }

　　angualr 自带的ng-true-value很好用，接下来是导入 自己建一个model框 点击导入跳出一个form表单

下面是html代码

  

    
导入出库订单
  
  

		

      
		
	
	

		确认
	

　　记得要加上enctype属性 点击提交提交整个form  因为异步加载的问题获取里面的dom节点我用的jq获取的下面是js代码

$scope.sendFn = function() {
		// console.log($scope.file);
		var form = $('form');
		var file = form.find("input[name=filename]");
		var val = form.find("input[name=filename]").val();
		var files = file.prop('files');
		console.log(file);
		// console.log($('form'));
		var formData = new FormData($('form[0]'));
		formData.append("file",file[0].files[0]);
		formData.append("vak",val);
		console.log(formData);
		var url="importpiccontroller/importPickticket",text="提交成功";
		// sendData = formData;
		// sendData.order_code = $stateParams.id;
		$http.post(url, formData,{headers:{'Content-Type': undefined},transformRequest: function (data) {return data}}).success(function(data) {
			if (data.success =='true') {
				alert(text);
				$state.go("home.refund.list");
				// $state.reload();
			}else {
				alert(data.exception);
			}
		});
	};

　　我做的新项目angualr发送请求的时候后台总是接收不到ajax请求头， 所以post里面的header配置是我配置的请求头，如果你的项目没事的话可以不用加。

其实导入更简单一点，就是以前没做过，以前上传的图片视频都是存到服务器返回一个url，本地竟然蜜汁尴尬。