js表格直接导出excel

XLSX.js

<template>
  <div class="about">
      <el-button type="success" @click="excel1" icon="el-icon-upload2"
      >data导出</el-button>
    
    <el-table :data="tableData" id="out_table2" border style="width:100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src
import XLSX from 'xlsx'
export default {
  name: 'Home',
  data(){
    return {
      tableData:[
        {name:"yangj",age:22,sex:"男"},
        {name:"骏驰",age:54,sex:"女"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
        {name:"狗多",age:12,sex:"男"},
      ],
      queryInfo:{
          pageSize:10,
          pageCurrent:1
      }
    }
  },
  components: {

  },
  methods:{
    // 数据data导出   ()
    excel1(){
      //创建book
      var wb = XLSX.utils.book_new();
      //json转sheet
      var ws = XLSX.utils.json_to_sheet(this.tableData, {header:["name","age","sex"], skipHeader:false});
      //设置列宽
      ws['!cols']= [
          {width: 15},
          {width: 15},
          {width: 15},
          {width: 15},
          {width: 10}
      ];
      var timestamp = (new Date()).getTime();
      //sheet写入book
      XLSX.utils.book_append_sheet(wb, ws, "file");
      //输出
      XLSX.writeFile(wb,"file"+timestamp+".xlsx");
    }
  }
}

</script>