vue+filesaver+xlsx导出table为excel

1.安装

npm install file-saver xlsx --save-dev
cnpm install file-saver xlsx --save-dev //淘宝镜像

2.在需要下载excel的页面中引入

import FileSaver from 'file-save';
 
import XLSX from 'xlsx';

3.为<el-table></el-table>表格添加id属性标识 id="out-table"

        <div>
          <el-table :data="usedata" stripe style=" 100%" :cell-style="{bdeviceCodeackground:'#08182C'}" id="out-table">
              <el-table-column prop="devices" label="设备名称" width="270">
              </el-table-column>
              <el-table-column prop="number" label="编号" width="250">
              </el-table-column>
              <el-table-column prop="project" label="所属项目">
              </el-table-column>
              <el-table-column prop="status" label="状态" width="150">
              </el-table-column>
              <el-table-column prop="tips" label="备注信息" width="200">
              </el-table-column>
            </el-table>
        </div>

4.添加一个导出按钮

          <div class="btn_con">
            <el-button class="checkdata"  type="primary" plain size="mini" @click="exportOrderData()">导出Excel</el-button>
          </div>

5.exportOrderData方法

在methods中加入该函数

    exportOrderData() {
      var xlsxParam = { raw: true };
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'),xlsxParam);
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
         FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'excel文档名称.xlsx')
      } catch (e) {  
         if (typeof console !== 'undefined') console.log(e, wbout) 
      }
      return wbout
    },

6.导出全部 or 导出当前页

6.1.导出当前页

当table表格有分页的时候，以上方法只能导出当前页。例如，我们设置的table每页只有10条数据，导出时只导出了10条。

                <el-table :data="alldata" stripe style=" 100%" :cell-style="{bdeviceCodeackground:'#08182C'}" id="out-table">
                  <el-table-column prop="num" label="序号">
                  </el-table-column>
                  <el-table-column prop="mAXLoadTAP" label="日最大负载">
                  </el-table-column>
                  <el-table-column prop="mINLoadTAP" label="日最小负载">
                  </el-table-column>
                </el-table>

6.2.导出全部

在HTML代码中再加一个el-table标签，这个table专门用来导出数据，且此table一直隐藏着，当查询条件发生变化时，根据后台返回的所有符合条件的数据总量total值，然后重新设置获取后台数据方法的参数，拉取到所有符合条件的数据绑定进来，这样导出的就是想要的数据了。

6.2.1页面显示的table(没有id="out-table")

              <el-table :data="fenyedata" stripe style=" 100%" :cell-style="{bdeviceCodeackground:'#08182C'}">
                  <el-table-column prop="num" label="序号">
                  </el-table-column>
                  <el-table-column prop="mAXLoadTAP" label="日最大负载">
                  </el-table-column>
                  <el-table-column prop="mINLoadTAP" label="日最小负载">
                  </el-table-column>
                </el-table>

6.2.2.隐藏的table(有id="out-table")---有样式display:none;

              <el-table :data="alldata" stripe style=" 100%" :cell-style="{bdeviceCodeackground:'#08182C'}" id="out-table" style="display:none;">
                  <el-table-column prop="num" label="序号">
                  </el-table-column>
                  <el-table-column prop="mAXLoadTAP" label="日最大负载">
                  </el-table-column>
                  <el-table-column prop="mINLoadTAP" label="日最小负载">
                  </el-table-column>
                </el-table>

7.导出的内容只做解析，不进行格式转换

var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换 

8.注意点

8.1.第一次导出时，导出的excel表格只有表头，没有数据内容

解决方法：给导出到excel表格的函数exportExcel()设置一个延时执行即可，因为刚开始我没有设置延时执行，拉取到数据后直接赋值给了绑定到table上的exportData上，然后就立即调用exportExcel()导致，我猜测exportData渲染到table是需要一定时间的，这段时间内我们立即调用exportExcel()时，数据还没被渲染进去，此时exportExcel()拿不到数据，故此第一次导出的表格中没有数据

8.2.导出的数据出现两份的情况

　　原因：因为element ui下的el-table被渲染出来后有两个table标签，目的是方便进行数据交互使用，所以如果el-column存在fixed属性时，导出时会出现两份数据的情况

　　解决方法：直接将隐藏table中的el-table-column上的fixed属性去掉，毕竟这个table是隐藏起来的，直接去掉el-table-column上的fixed属性最便捷

9.推荐

别的博主说使用element-ui导出excel表格，代码基于vue-element-admin-master，这个导出来的数据会更完善，更能解决业务上的逻辑，这里也推荐一篇文章 https://blog.csdn.net/weixin_44846723/article/details/100886061

参考---https://blog.csdn.net/dwb123456123456/article/details/85012735