前端excle表格插件xlsx(1) 将html页面数据写入一个excle文件

代码

 <template>
 <div class='container'>
    <el-table
      id="table"
      :data="tableData"
      border
      max-height="700"
      style="width: 500px">
      class="tableData">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    <div>
      <el-button @click="writeExcel">生产EXCLe</el-button>
    </div>
  <!-- 生成一个表格 -->
  <table >
    <thead>
      <tr>
        <th>姓名</th>
        <th>地址</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>黄飞鸿</td>
        <td>安徽省合肥市</td>
      </tr>
      <tr>
        <td>鬼脚七</td>
        <td>安徽省六安市</td>
      </tr>      
    </tbody>
  </table>
 </div>

  </template>

  <script>
  import { read, writeFile,utils } from "xlsx";
    export default {
      created(){
        for(let i=0;i<1000;i++){
          this.tableData.push({
            id:i+1,
            name: '王小虎' + i,
            address: '上海市普陀区金沙江路 1518 '+ i+' 弄'
          })
        }
        
      },
      data() {
        return {
          tableData: []
        }
      },
      methods:{
        writeExcel(){
          let table_elt = document.getElementById("table"); // 获取页面table对象
          let workbook = utils.table_to_book(table_elt) // 将table转换成工作簿
          var ws = workbook.Sheets["Sheet1"]; // 创建工作簿中的第一张表命名为Sheet1
          writeFile(workbook, "Report.xlsx"); // 写一个命名为Report.xlsx的文件
        }
      }
    }
  </script>

效果图