引入工具库,下面代码是demo

cnpm install -S file-saver xlsx
cnpm install -D script-loader
<template>
  <div>
    <el-button type="primary" @click="exportExcel">导出文件</el-button>

    <el-table :data="tableData" style="width: 100%" id="out-table">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄" width="80"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
    </el-table>
  </div>
</template>
  
  
<script>
//引入安装的依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
    name: "export",
  data() {
    return {
      tableData: [
        {
          name: "张三",
          age: 22,
          date: "2016-05-02",
        },
        {
          name: "王小虎",
          age: 23,
          date: "2016-05-04",
        },
      ],
    };
  },
  methods: {
    // XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ,sheetjs.xlsx 即为导出表格的名字,可修改!
    exportExcel() {
      let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      FileSaver.saveAs(
        new Blob([wbout], { type: "application/octet-stream" }),
        "用户列表.xlsx"
      );

      return wbout;
    },
  },
};
</script>
  
<style scoped>
</style>

Logo

前往低代码交流专区

更多推荐