Typescript导出json列表数据为csv表格文件

做React项目，有个需求，要求把页面上显示的列表数据导出为表格文件，可以用excel等软件打开。

先看下这个页面上显示的列表长啥样：

就是上面这个格式的列表，它的数据testList如下：

const testList = 
[
    {
        "course_title":"Course1",
        "course_category":"Violin",
        "visit_count":5,
        "visit_length":264,
        "ios":3,
        "android":2,
        "web":0,
        "teacher_id":"BelaHorvath"
    },
    {
        "course_title":"Course2",
        "course_category":"Piano",
        "visit_count":1,
        "visit_length":149,
        "ios":1,
        "android":0,
        "web":0,
        "teacher_id":"FeiFeiDong"
    },
    {
        "course_title":"Course3",
        "course_category":"Violin",
        "visit_count":1,
        "visit_length":161,
        "ios":0,
        "android":1,
        "web":0,
        "teacher_id":"BelaHorvath"
    },
    {
        "course_title":"Course4",
        "course_category":"Piano",
        "visit_count":1,
        "visit_length":170,
        "ios":1,
        "android":0,
        "web":0,
        "teacher_id":"MinKwon"
    },
    {
        "course_title":"Course5",
        "course_category":"Violin",
        "visit_count":1,
        "visit_length":15,
        "ios":1,
        "android":0,
        "web":0,
        "teacher_id":"IgorPikayzen"
    },
    {
        "course_title":"Course6",
        "course_category":"Violin",
        "visit_count":1,
        "visit_length":152,
        "ios":0,
        "android":1,
        "web":0,
        "teacher_id":"EricSilberger"
    }
]

 现在要把这个列表数据导出为表格，下面是实现方法：

  const exportCSV = (list: Array<any>) => {
    let str = 'No, title, category, Visit Count, Visit Length, iOS, Android, Web\n';
    for (let i = 0 ; i < list.length ; i++) {
        let data = list[i];
        str += (i+1) + ",";
        str += data.course_title.replace(",","-") + ",";
        str += data.course_category + ",";
        str += data.visit_count + ",";
        str += data.visit_length + ",";
        str += data.ios + ",";
        str += data.android + ",";
        str += `${data.web}`;
        str+='\n';
    }
    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
    let link = document.createElement("a");
    link.href = uri;
    link.download =  "course_metrics.csv";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

直接调用下面的一行代码即可导出为csv文件:

exportCSV(testList)

说下上面方法的实现逻辑，首先把列表json数据按照规则，每列以“，”分割，行尾以“\n”分割表示换行，连接成字符串。然后创建一个链接，链接指向的数据设为这个字符串资源，再模拟一下链接的点击，浏览器就会开始下载，下载的文件就会命名为我们代码里设置的“course_metrics.csv”。

导出的文件用WPS打开效果：