使用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