使用vue根据表格内容生成Excel表格并下载

安装file-saver

npm install file-saver -S    

安装 xlsx

 npm install xlsx -S     

按照element

npm i element-ui -S

mian里引入element

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

在页面引入file-saver以及 xlsx

import FileSaver from "file-saver"
import *as XLSX from "xlsx"

假设现在要把id为selectTable1的表格导出

<template>
  <div>
    <el-table  id="selectTable1"
    :data="tableData" border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
  </el-table>
  <button @click="exportExcel">导出</button>
  </div>
</template>

getExcel方法 第一个参数是选择导入的id元素，

    // 格式化数据
      getExcel(dom,title){
        var wb=XLSX.utils.table_to_book(document.querySelector(dom));
        let wbout = XLSX.write(wb, {
         bookType: "xlsx",
         bookSST: true,
         type: "array",
  });
  console.log(wbout)
  try {
    FileSaver.saveAs(
      new Blob([wbout], { type: "application/octet-stream" }),
      "数据导出.xlsx"
    );
  } catch (e) {
    if (typeof consloe !== undefined) {
      Message.error({
        message: e.wbout,
        type: "error",
      });
    }
  }
    return wbout;
  },
     //点击导出方法
      exportExcel(){
        this.getExcel("#selectTable1","导出的自定义标题")
      }
    }