vue --》前端导出excel表

1.安装两个依赖包

   cnpm install file-saver  xlsx --save

2.在所用的页面中引入

import FileSaver from "file-saver";

import XLSX from "xlsx";

 

3.导出的方法

<el-button class="fr m-r-10 m-t-10" @click="exportExcel(deviceName)" size="mini">导出列表<i class="el-icon-download el-icon--right"></i></el-button>

<el-table :data="tableData" :id='tables' :height="hg" style="text-align: left;width: 100%;" size="mini" empty-text="无符合条件数据" stripe></el-table>


//导出
    exportExcel(name) {
      let idNames = "tables"; //需要导出的表id
      let xlsxParam = { raw: true }; //转换成excel时，使用原始的格式
      let wb = XLSX.utils.table_to_book(document.getElementById(idNames), xlsxParam);
      let wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array" });
      try {
        FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), name + ".xlsx");  //导出表名称
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },