AngularJs导出数据到Excel的示例代码

公司一个新的需求导出Exce表格，研究了一下，最后终于实现，分享给大家。

1 使用FileSaver

第一次采用FileSaver.js 由于刚开始导致导出一片空白，还只能抓取网页里面的表格地址：https://github.com/eligrey/FileSaver.js

HTML

<div id="exportable">
  <table width="100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>小明</td>
        <td>dsds@163.com</td>
      </tr>
    </tbody>
  </table>
</div>

js部分

var blob = new Blob([document.getElementById('exportable').innerHTML], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
  });
  saveAs(blob, "日记账.xls");
};

2 使用 alasql

使用alasql的好处就是可以在数据层面去组织结构

官网地址:http://alasql.org/

js部分

\\ angular 需要导入xlsx.core.min.js alasql.min.js
\\ 文件结构 
 var arr = [
      {
        '收入':1,
        '支出':2,
        '结存':3
      },
      {
        '收入':4,
        '支出':5,
        '结存':6
      }
    ]

\\ 生成 excel 文件
alasql('SELECT * INTO XLSX("日记账.xlsx",{headers:true}) FROM ?',[arr]);

我优化的版本

// 导出excel

  $scope.exportToExcel=function(){
    var data = angular.copy($scope.pageData.list)
    var arr = [];
    var type = null;
    var amountIN = 0;
    var amountOUT = 0;
    angular.forEach(data,function (item) {
      // 兑付情况
      if(item.isHappened){
        type = '未兑付'
      }else{
        type = '已兑付'
      }
      // 收入
      if(item.itemModel=='INCOME'){
        amountIN = item.amount
      }
      // 支出
      if(item.itemModel=='OUTCOME'){
        amountOUT = item.amount
      }
      arr.push({
        '兑付情况':type,
        '合同':item.keyId,
        '收付日期':$filter('date')(item.updateTime,'yyyy-MM-dd'),
        '科目':item.itemType.value,
        '收入':$filter('number')(amountIN,2),
        '支出':$filter('number')(amountOUT,2),
        '结存':$filter('number')(item.balance,2)
      })
    })
    if(arr.length < 1){
      ToasterTool.error('暂无数据，导出失败！');
    }else{
      // alasql('SELECT * INTO XLSX("日记账.xlsx",{headers:true}) FROM ?',[arr]);
      
      alasql.promise('SELECT * INTO XLSX("日记账-'+ DateTool.format(new Date(),'yyyy-MM-dd HH:mm:ss') + "-"+ $scope.loginUser.userName +'.xlsx",{headers:true}) FROM ?',[arr])
        .then(function (data) {
          if(data == 1){
            $timeout(function(){
              ToasterTool.success('数据导出成功！')
            })

          }
        })
    }
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# AngularJs导出Excel  # Angular导出数据到Excel  # JS实现将数据导出到Excel的方法详解  # js实现数据导出为EXCEL（支持大量数据导出）  # Vue导出json数据到Excel电子表格的示例  # JSP实现从数据库导出数据到Excel下载的方法  # js导出table数据到excel即导出为EXCEL文档的方法  # 通过Javascript将数据导出到外部Excel文档的函数代码  # javascript 导出数据到Excel(处理table中的元素)  # javascript 实现纯前端将数据导出excel两种方式  # 暂无  # 给大家  # 刚开始  # 小明  # 官网  # 组织结构  # 大家多多  # 收付  # document  # Blob  # type  # innerHTML  # getElementById  # dsds  # officedocument 

相关文章： 建站主机服务器选购指南：轻量应用与VPS配置解析  ,柠檬视频怎样兑换vip？  建站之星×万网：智能建站系统+自助建站平台一键生成  如何选择CMS系统实现快速建站与SEO优化？  如何获取PHP WAP自助建站系统源码？  C++如何使用std::optional？（处理可选值）  网站制作公司排行榜,四大门户网站排名？  如何制作算命网站,怎么注册算命网站？  合肥做个网站多少钱,合肥本地有没有比较靠谱的交友平台？  如何选择美橙互联多站合一建站方案？  香港服务器WordPress建站指南：SEO优化与高效部署策略  如何获取开源自助建站系统免费下载链接？  官网自助建站系统：SEO优化+多语言支持，快速搭建专业网站  专业网站制作企业网站,如何制作一个企业网站，建设网站的基本步骤有哪些？  专业制作网站的公司哪家好,建立一个公司网站的费用.有哪些部分,分别要多少钱？  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  建站之星如何助力企业快速打造五合一网站？  攀枝花网站建设,攀枝花营业执照网上怎么年审？  家庭服务器如何搭建个人网站？  如何在宝塔面板中修改默认建站目录？  如何在阿里云ECS服务器部署织梦CMS网站？  桂林网站制作公司有哪些,桂林马拉松怎么报名？  如何用西部建站助手快速创建专业网站？  如何快速上传建站程序避免常见错误？  广德云建站网站建设方案与建站流程优化指南  C++时间戳转换成日期时间的步骤和示例代码  如何彻底删除建站之星生成的Banner？  建站主机数据库如何配置才能提升网站性能？  台州网站建设制作公司,浙江手机无犯罪记录证明怎么开？  建站主机无法访问？如何排查域名与服务器问题  唐山网站制作公司有哪些,唐山找工作哪个网站最靠谱？  如何在云主机上快速搭建网站？  ,如何利用word制作宣传手册？  如何获取免费开源的自助建站系统源码？  图册素材网站设计制作软件,图册的导出方式有几种？  制作网站的公司有哪些,做一个公司网站要多少钱？  网站按钮制作软件,如何实现网页中按钮的自动点击？  建站之星在线版空间：自助建站+智能模板一键生成方案  建站VPS选购需注意哪些关键参数？  制作证书网站有哪些,全国城建培训中心证书查询官网？  如何快速搭建自助建站会员专属系统？  如何通过虚拟主机空间快速建站？  免费ppt制作网站,有没有值得推荐的免费PPT网站？  网站制作费用多少钱,一个网站的运营，需要哪些费用？  如何构建满足综合性能需求的优质建站方案？  广州建站公司哪家好？十大优质服务商推荐  网站代码制作软件有哪些,如何生成自己网站的代码？  c++怎么实现高并发下的无锁队列_c++ std::atomic原子变量与CAS操作【详解】  网站制作知乎推荐,想做自己的网站用什么工具比较好？  制作网站的过程怎么写,用凡科建站如何制作自己的网站？