使用FileSaver导出页面数据到excel

之前在博客中写了使用 FileSaver.js对文件进行读写，这次分享的是使用FileSaver实现前端导出页面数据到excel

首先引入fileSave.js

import '~/lib/file-saver/dist/FileSaver.min.js';

    html:  <table class="table tb report-table-wrapper refresh" id="exportable">
                <thead>
                <tr class="tb-head fix-top-two tr-nowrap">
                    <th class="text-center">区域编号</th>
                    <th class="text-center ">区域名称</th>
                    <th class="text-center">分店编号</th>
                    <th class="text-center">分店名称</th>
                    <th class="text-center">现金</th>
                    <th class="text-center">银行卡</th>
                    <th class="text-center">微信</th>
                    <th class="text-center">支付宝</th>
                    <th class="text-center">会员（储值）</th>
                    <th class="text-center">会员（券）</th>
                    <th class="text-center">美团外卖支付</th>
                    <!--<th class="text-center">优惠券支付</th>-->
                    <th class="text-center">美团支付</th>
                    <th class="text-center">银行积分兑换</th>
                    <th class="text-center">挂账</th>
                    <th class="text-center">合计</th>
                    <!--<th class="text-center">操作</th>-->
                </tr>
                </thead>
                <tbody ng-if="!$ctrl.isRenderTableContent"><tr></tr></tbody>
                <tbody ng-if="$ctrl.isRenderTableContent">
                <tr class="tb-body tr-nowrap"  ng-repeat="item in $ctrl.dataList1">
                    <td class="text-center" >{{item.areaId}}</td>
                    <td class="text-center">{{item.areaName}}</td>
                    <td class="text-center" >{{item.shopId}}</td>
                    <td class="text-center">{{item.shopName}}</td>
                    <td class="text-center">{{item.xj}}</td>
                    <td class="text-center">{{item.yhk}}</td>
                    <td class="text-center">{{item.wx}}</td>
                    <td class="text-center">{{item.zfb}}</td>
                    <td class="text-center">{{item.hycz}}</td>
                    <td class="text-center">{{item.hyq}}</td>
                    <td class="text-center">{{item.mtwmzf}}</td>
                    <!--<td class="text-center">{{item.yhqzf}}</td>-->
                    <td class="text-center">{{item.mtzf}}</td>
                    <td class="text-center">{{item.yhjfdh}}</td>
                    <td class="text-center">{{item.gz}}</td>
                    <td class="text-center">{{item.hj}}</td>
                </tr>
                </tbody>
            </table>

js:       

  var blob = new Blob([document.getElementById('exportable').innerText], {//通过id来exportable获取所有子节点下面得文字

          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" }); //文件类型 　　　 saveAs(blob, "按收银员汇总.xls");//使用saveAs保存数据到excel

来源：https://www.cnblogs.com/jeremy-o/p/11388208.html

标签