Vue导出EXCEL表格

1.首先下载插件

npm install js-export-excel

2.vue代码

​
/<template>
  <div>
    <el-button type="primary" @click="download"> Export to Excel </el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="class" label="班级" />
      <el-table-column prop="achievement" label="成绩" />
    </el-table>
  </div>
</template>

<script>
import ExportJsonExcel from "js-export-excel";

export default {
  name: `biaoge`,
  data() {
    return {
      tableData: [
        {
          name: "陈卓",
          class: "一年级",
          achievement: "98",
        },
        {
          name: "张珂",
          class: "一年级",
          achievement: "89",
        },
        {
          name: "刘欣欣",
          class: "一年级",
          achievement: "88",
        },
      ],
    };
  },
  methods: {
    download() {
      let tableExcel = [];
      this.tableData.map((item) => {
        tableExcel.push({
          姓名: item.name,
          班级: item.class,
          成绩: item.achievement,
        });
      });
      this.exportToExcel(tableExcel);
      console.log(tableExcel);
    },
    exportToExcel(tableExcel) {
      let option = {};
      option.fileName = "学生成绩单";
      option.datas = [
        {
          sheetData: tableExcel,
          sheetName: "一年级学生成绩单",
          sheetFilter: ["姓名", "班级", "成绩"],
          sheetHeader: ["姓名", "班级", "成绩"],
        },
      ];
      var toExcel = new ExportJsonExcel(option);
      toExcel.saveExcel();
    },
  },
};
</script>

<style>
</style>

​