vue中导出csv格式表格

这是页面

这是最终csv格式导出表

挺简单的，读完此篇文章约3分钟，学会使用约2分钟

首先介绍一下我用的插件

**

## csv-exportor

**

安装命令

npm install --save csv-exportor

别忘了在script引用一下

import CsvExportor from "csv-exportor";

不要问为啥用这个插件，问就是用的人最多

==============================

这是我在按钮上绑定的点击事件

  <one-button :color="true" @click="download1">导出成绩</one-button>

下面让我们看一下组织的数据

const data = [
  {
    key: "20200202",
    info: "1701班",
    type: "张三",
    detail: "90",
    startTime: "1",
  },
  {
    key: "20200203",
    info: "1701班",
    type: "李四",
    detail: "90",
    startTime: "1",
  },
  {
    key: "20200204",
    info: "1701班",
    type: "王五",
    detail: "90",
    startTime: "1",
  },
  {
    key: "20200205",
    info: "1701班",
    type: "李六",
    detail: "90",
    startTime: "1",
  },
  {
    key: "20200206",
    info: "1701班",
    type: "杨七",
    detail: "90",
    startTime: "1",
  },
  {
    key: "20200207",
    info: "1701班",
    type: "张三",
    detail: "90",
    startTime: "1",
  },
];
===============================

我是先在data的外部定义的数据，const data 这个data只是随便 ，叫a,b都可以
然后在放到data中去，我之所以定义在外部，是因为data中的数据过大，可能会导致页面加载速度变慢

这是方法，这个插件的最简单的地方就在与表单的表头设置，你只需要按照你需要的顺序，写进header数组就可以了， 代码如下，自取


 download1() {
      let tableData = this.data;
      let header = ["学员", "班级", "姓名",'成绩','排名'];
      CsvExportor.downloadCsv(tableData, { header }, "test.csv");
    },