vue实现将数据导出excel

通过将json遍历进行字符串拼接，将字符串输出到csv文件，代码如下

<template>
  <button @click="exportExcel">导出csv表</button>
</template>
  
  <script>
export default {
  data() {
    return {
      jsonData: [
        {
          name: "张三",
          phone: "19866835526",
          email: "19866835526@qq.com"
        },
        {
          name: "李武",
          phone: "18635355355",
          email: "18635355355@qq.com"
        },
        {
          name: "陈铭",
          phone: "18306679888",
          email: "18306689888@163.com"
        },
        {
          name: "何亮",
          phone: "13622527686",
          email: "135635558@qq.com"
        }
      ]
    };
  },
  methods: {
    exportExcel() {
      //列标题，逗号隔开，每一个逗号就是隔开一个单元格
      let str = `名称,课程,邮箱\n`;
      //增加\t为了不让表格显示科学计数法或者其他格式
      for (let i = 0; i < jsonData.length; i++) {
        for (let item in jsonData[i]) {
          str += `${jsonData[i][item] + "\t"},`;
        }
        str += "\n";
      }
      //encodeURIComponent解决中文乱码
      let uri = "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
      //通过创建a标签实现
      let link = document.createElement("a");
      link.href = uri;
      //对下载的文件命名
      link.download = "报表明细.csv";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};
</script>