前端导出csv文件的实现

1. 用npm在项目中安装下面插件:
   npm install file-saver --save
2. 在你要编写项目的文件中导入插件:
   import FileSaver from 'file-saver'
3. 写一个方法逻辑将数据生成csv文件:

// 点击批量导出数据生成csv文件
  exportList = ()=>{
    // 拿到所有的数据
    const {data}=this.state
    // 定义数据拼接
    // str:table的每一列的标题，即为导出后的csv文件的每一列的标题
    // str +='name' + ',' +'pwd' + ',' +'school' + ',' +'age';
   // 如果项目中安装了eslint语法，是不能通过'+'来拼接字符串的，可采用如下方式
    let str=''
    str +=`deptOne,userName,userId,quarter,objective,keyResult`
    // 通过循环拿出data数据源里的数据，并塞到str中
    for (const i in data) {
      // 如果是第一行,不换行
      str += `\n ${data[i].deptOne},${data[i].userName},${data[i].userId},${data[i].quarter},${data[i].objective},${data[i].keyResult}`

    }
    // Excel打开后中文乱码添加如下字符串解决
    const exportContent = "\uFEFF";
    const blob = new Blob([exportContent + str], {
      type: "text/plain;charset=utf-8"
    });
    // 根据数据生成生成文件,后面为下载时的文件名称
    FileSaver.saveAs(blob, "OKR员工数据.csv");
}

 return (
      <div>
        <Button type='primary'
        style={{position:'absolute',right:'120px',top:'10px'}}
            onClick={()=>{
            // 点击按钮时候调用生成csv文件的方法
                this.exportList()
            }}
        >导出员工数据</Button>
         </div>
    )

4. 遇到问题：
   拿到的数据中有些内容是包含‘\n’的，这会导致下载的csv中内容错乱，因为生成文件过程中遇到‘\n’就表格换行了，所以可以采用replace(/[\r\n]/g, "")的方式去掉内容中的回车换行符。例如：

  ajaxgetAllObjectiveInfo = async data => {
    const response = await queryOkrgetAllObjectiveInfo(data)
    if (response.code === '0') {
        const arr = []
        response.data.forEach(item => {
            let str =''
            item.krList.forEach(i => {
                str += `[${i.weight}]${i.keyResult}`              
            })
            arr.push({
                deptOne:item.deptOne,
                userName:item.userName,
                userId:item.userId,
                quarter:item.quarter,
                objective:item.objective,
                // 对拿到的内容做了处理
                keyResult:str.replace(/[\r\n]/g, ""),
            })
        });
      this.setState({
        data:arr
      })
    }
  }