Js导出Excel

作者: 喝不醉再来 | 来源:发表于2017-08-11 10:16 被阅读319次

    公司一个新的需求导出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导出Excel

      本文链接:https://www.haomeiwen.com/subject/saclrxtx.html