Js导出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('数据导出成功!')
                        })

                    }
                })
        }
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原生js将table导出为Excel(json字符串导出Excel同理) 效果示意图: 以下为完整代码
    以为是书生阅读 3,024评论 1 1
  • JsonExportExcel 简介 原文地址: http://coding.cuikangjie.com git...
    cuikangjie阅读 1,903评论 0 5
  • *这篇文章转载自网络http://blog.csdn.net/aa122273328/article/detail...
    洱月阅读 3,220评论 1 7
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,964评论 25 709
  • 如果不是爱,我又怎么会坚持这么久,如果不是爱,我又怎么会愁眉苦脸 如果不奢望跟你到白头,我又怎么会这般不堪 说多了...
    沉睡的小宇宙要爆发阅读 207评论 0 0