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

<table class="table table-bordered table-condensed table-hover table-striped no-footer">
        <thead>
          <tr role="row" class="sorting_s">
            <th>
              <label>
                <input type="checkbox" ng-click="allCheckFn(apiResultList,allCheckState)" ng-model="allCheckState"/>全选
              </label>
            </th>
            <th ng-repeat="item in config track by $index" ng-bind="item.title"></th>
            <th ng-if="!transHide">轨迹</th>
          </tr>
        </thead>
        <tbody ng-if="!apiState.apiLoading">
          <tr ng-repeat="(key,ls) in apiResultList" class="sorting_s">
            <td>
              <input type="checkbox" ng-model="ls.check" ng-true-value="true" ng-false-value="false"/>
            </td>
            <td ng-repeat="item in config track by $index" ng-bind="{{item.data}}" class="sorting_1"></td>
            <td>
              <div class="btn-group">
                <a ui-sref="home.commodity.edit({id:ls.commodity_id})" per-href="commodity.update">轨迹</a>
                <!-- <a ui-sref="home.commodity.audit({id:ls.commodity_id})" per-href="commodity.info">查看</a>
                <a ui-sref="home.commodity.preview({id:ls.commodity_id})" per-href="commodity.info">预览</a>
                <a ng-click="deleteFn(ls,true)" per-href="commodity.delete">删除</a>
                <a ng-click="unSale(ls,true)" ng-if="ls.status==10" per-href="commodity.down">下架</a>
                <a ng-click="onSale(ls,true)" ng-if="ls.status==0" per-href="commodity.on">上架</a>
                <a ui-sref="home.commodity.audit({id:ls.commodity_id})" ng-show="ls.status==4||ls.status==5" per-href="commodity.on">审核</a></div> -->
            </td>
          </tr>
          <tr ng-if="list.length==0">
            <td colspan="{{transHide?config.length:(config.length+2)}}">没有任何数据</td>
          </tr>
        </tbody>
        <tbody ng-if="apiState.apiLoading">
          <tr>
            <td colspan="{{transHide?config.length:(config.length+2)}}">数据读取中...</td>
          </tr>
        </tbody>
      </table>

　　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代码

<div class="bg-white">
  <div class="modal-header">
    <h5 class="modal-title">导入出库订单<i class="icon iconfont icon-guanbi3" ng-click="closeModal()"></i></h5>
  </div>
  <div class="modal-body">
		<form ng-submit="sendFn()" class="modal-body" enctype="multipart/form-data">
      <input name="filename" type="file" value="选择文件" tinfile file-fn="upload(file)" accept=""  ng-model="item" accept="excel/*" class="file" width="200px"/>
		</form>
	</div>
	<div class="modal-footer">
		<button ng-click="sendFn(true)" class="btn modal-navctl">确认</button>
	</div>
</div>

　　记得要加上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，本地竟然蜜汁尴尬。