Ant desgin Vue 表格(json)导出为csv格式

近期工作中碰到一个需要将表格导出为csv格式文件的需求。
最开始不太清楚怎么实现，查了资料发现，其实只需要将表格所用的json数据导出就可以了
下面是实现过程：

一、模块安装

用到 json2csv 和 file-saver。
yarn add json2csv 或 npm install json2csv
yarn add file-saver 或 npm install file-saver

二、代码实现

import FileSaver from "file-saver";
const Json2csvParser = require("json2csv").Parser;

export default {
  methods: {
    // 点击按钮时触发
    exportFile(){
             let data = [
                {
                    "姓名": '张三',//表格的表头即为key,表格的值即为value
                    "年龄": '26',
                    "性别": '男'
                },
                {
                    "姓名": '小红',
                    "年龄": '22',
                    "性别": '女'
                },
                {
                    "姓名": '小兰',
                    "年龄": '24',
                    "性别": '女'
                },
            ]
      this.exportCSV(data) //表格所需数据
    },
    // 导出文件
    exportCSV(data, filename = `${Date.now()}.csv`) {
      const parser = new Json2csvParser();
      const csvData = parser.parse(data);
      const blob = new Blob(["\uFEFF" + csvData], {
        type: "text/plain;charset=utf-8;",
      });
      FileSaver.saveAs(blob, filename);
    },
  }
}

三、效果图

导出文件截图