博客

一、安装相关依赖

//xlsx 与 file-saver依赖
npm install --save xlsx file-saver

二、在main.js中引入以上安装好的组件

// vue中导出excel表格模板
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

Vue.prototype.$FileSaver = FileSaver; //设置全局
Vue.prototype.$XLSX = XLSX; //设置全局

三、先给el-table设置一个id

<el-table ref="filterTable" :data="tableData" style="width: 100%" id="tab1">
  <el-table-column prop="vipname" label="会员信息"></el-table-column>
  <el-table-column prop="mobile" label="手机号码"></el-table-column>
  <el-table-column prop="fee" label="消费金额"></el-table-column>
  <el-table-column prop="count" label="订单数量"></el-table-column>
</el-table>

四、然后需要一个导出按钮

<el-button @click="exportExcel('tab1', '导出表格的名字.xlsx')">导出</el-button>

五、导出方法

// 定义导出表格触发事件
  exportExcel(tabid:string, name:string) {
    const wb = XLSX.utils.table_to_book(document.querySelector('#' + tabid), {
      raw: true // 如果表格里有数字、日期这些、需要加上raw: true
    });
    /* 获取二进制字符串作为输出 */
    var wbout = XLSX.write(wb, {
      bookType: 'xlsx',
      bookSST: true,
      type: 'array'
    });
    try {
      FileSaver.saveAs(
        // Blob 对象表示一个不可变、原始数据的类文件对象。
        new Blob([wbout], { type: 'application/octet-stream' }),
        // 设置导出文件名称
        name
      );
    } catch (e) {
      if (typeof console !== 'undefined') console.log(e, wbout);
    }
    return wbout;
  }

注意：

• XLSX.utils.table_to_book中放的是table的dom节点
• name导出的是表格的名字
• 别忘记在vue中引入element-ui哦，否则html中的报错。
• 一定要设置raw:true，就可以导出字符串并没有做转换，带百分号的数字正常导出了。