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

2024-04-26 18:29:45

公司一个新的需求导出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日程表案例详解

功能:添加事件/完成事件/删除事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .note{ margin:0 auto; background: orange; color: ora
AngularJS 中ui-view传参的实例详解

Angular路由传参首页 <!DOCTYPE html> <html ng-app="app"> <head> <title>路由传参</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" c
Angularjs实现下拉框联动的示例代码

第一种联动方式,在网上看到的,感觉对于我的使用性不高,比较后端不会提供这种json... 实现截图 html <select ng-model="s1" ng-options="selectData.name for selectData in selectDatas"> <option value="">--产品类目--</option> </select> <select ng-model
AngularJS通过ng-Img-Crop实现头像截取的示例

最近闲着无聊,写了一个实用代码,AngularJS通过ng-Img-Crop实现头像截取,分享给大家 1.安装插件 bower install ngImgCrop 2.引入插件 <script src="ng-img-crop.js"></script> <link rel="stylesheet" type="text/css" href="ng-img-crop.css" rel="
AngularJS中filter的使用实例详解

AngularJS中filter的使用实例详解一.格式化数字为货币格式. <div>{{money|currency:"$"}}</div> <div>{{money|currency:"RMB"}}</div> script: app.controller("crl", function($scope, $filter) { $scope.money="4545"; });
Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）

把js的验证方法改成angular可使用的方法 AngularJS文件的写法: $scope.clearNoNum = function(obj,attr){ //先把非数字的都替换掉,除了数字和. obj[attr] = obj[attr].replace(/[^\d.]/g,""); //必须保证第一个为数字而不是. obj[attr] = obj[attr].replace(/^\./g,""); //保证只有出现一个.而没有多个. obj[attr] = o
AngularJs导出数据到Excel的示例代码

公司一个新的需求导出Exce表格,研究了一下,最后终于实现,分享给大家. 1 使用FileSaver 第一次采用FileSaver.js 由于刚开始导致导出一片空白,还只能抓取网页里面的表格地址:https://github.com/eligrey/FileSaver.js HTML <div id="exportable"> <table width="100%"> <thead> <tr> <th>Na
ASP.Net MVC利用NPOI导入导出Excel的示例代码

什么是NPOI 该项目是位于http://poi.apache.org/的POI Java项目的.NET版本.POI是一个开源项目,可以帮助您读取/写入xls,doc,ppt文件.它有着广泛的应用.本文给大家介绍ASP.Net MVC利用NPOI导入导出Excel的问题. 因近期项目遇到所以记录一下: 首先导出Excel: 首先引用NPOI包 (Action一定要用FileResult) /// <summary> /// 批量导出本校第一批派位学生 /// </summary>
Python实现导出数据生成excel报表的方法示例

本文实例讲述了Python实现导出数据生成excel报表的方法.分享给大家供大家参考,具体如下: #_*_coding:utf-8_*_ import MySQLdb import xlwt from datetime import datetime def get_data(sql): # 创建数据库连接. conn = MySQLdb.connect(host='127.0.0.1',user='root'\ ,passwd='123456',db='test',port=3306,char
实现easyui的datagrid导出为excel的示例代码

之前有介绍过如何实现easyui里datagrid内容的打印,今天给大家介绍下如何实现datagrid内容导出为excel文件.以下为代码实现: export.js function ChangeToTable(printDatagrid) { var tableString = '<table cellspacing="0" class="pb">'; var frozenColumns = printDatagrid.datagrid("o
JavaScript实现导入导出excel的示例代码

目录 Excel导入 html代码 js代码 Excel导出 html代码 js代码 Excel导入 html代码 <button style={{ color: '#1890ff', fontSize: '14px', cursor: 'pointer' }} onClick={() => { upFile(); }} > 导入 </button> <input id="upFile" type="file" style={{
Java 批量文件压缩导出并下载到本地示例代码

主要用的是org.apache.tools.zip.ZipOutputStream 这个zip流,这里以Execl为例子. 思路首先把zip流写入到http响应输出流中,再把excel的流写入zip流中(这里可以不用生成文件再打包,只需把execl模板读出写好数据输出到zip流中,并为每次的流设置文件名) 例如:在项目webapp下execl文件中存在1.xls,2.xls,3.xls文件 1.Controller @RequestMapping(value = "/exportAll&qu
Java实现将CSV转为Excel的示例代码

目录一.程序环境二.将CSV转为Excel 补充 CSV(Comma Separated Values)文件是一种纯文本文件,包含用逗号分隔的数据,常用于将数据从一个应用程序导入或导出到另一个应用程序.通过将CSV文件转为EXCEL,可执行更多关于数据编辑.格式设置等操作.下面,将通过Java代码展示如何来实现转换. 一.程序环境可通过以下途径来导入jar: 1. 从 Maven 仓库下载安装,需在pom.xml中配置如下内容: <repositories> <repository
ASP.NET MVC使用EPPlus，导出数据到Excel中

好久没写博客了,今天特地来更新一下,今天我们要学习的是如何导出数据到Excel文件中,这里我使用的是免费开源的Epplus组件. 源代码下载:https://github.com/caofangsheng93/ExcelExportInMvc 介绍这篇文章,介绍的是怎样导出数据到Excel文件中,大多数的后端程序都有报表功能:把显示在Grid中的数据导出到Excel文件中,这篇文章中使用的是EPPlus组件. EPPlus是一个基于OOXML[Open Extended Markup Lang
ASP.NET导出数据到Excel的实现方法

网上好些代码的原理大致与此类似,同样都存在一个问题,就是: 类型"GridView"的控件"ctl00_center_GridView1"必须放在具有 runat=server 的窗体标记内. 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信息:System.Web.HttpException: 类型"GridView"的控件"ctl00_cent
JSP实现从数据库导出数据到Excel下载的方法

本文实例讲述了JSP实现从数据库导出数据到Excel下载的方法.分享给大家供大家参考,具体如下: 关键代码: <%@ page contentType="application/msexcel" %> <% //response.setHeader("Content-disposition","inline; filename=videos.xls"); response.setHeader("Content-disp

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

相关推荐

随机推荐