1.安装插件 papaparse
npm install -S papaparse
2.在导出文件中引入papaparse

import Papa from 'papaparse'

3.制作点击按钮

<el-button type="primary" @click="exportcsv">导出csv文件</el-button>
 exportcsv(){
      if (this.tableEchart.length > 0) {
        var show_fields_list = []
        var fieldsmap = {'__TIMER__': '时间'}
        for (let item in this.tableEchart) {
          show_fields_list.push(this.tableEchart[item].name)
          fieldsmap[this.tableEchart[item].name] = this.tableEchart[item].describe
        }
        axios.post('/core/get_opcgroup_chart_datalist/', {
          data_group_id: this.data_group_id,
          show_fields_list: show_fields_list,
          S_start_date: this.dateToString(this.S_start_date),
          S_end_date: this.dateToString(this.S_end_date)
        })
          .then((res) => {
            try {
              let datalist = []
              let headlist = []
              // 转化为Json格式数据
              for (let header in res.data.data) {
                headlist.push(fieldsmap[header])
              }
              for (var idx in res.data.data['__TIMER__']) {
                let ditem = {}
                for (let item in res.data.data) {
                  ditem[fieldsmap[item]] = res.data.data[item][idx]
                }
                datalist.push(ditem)
              }
                // // 转化为Json格式数据
              // // 解决中文编码,加上"\ufeff"配合后面编码解决
              // // 方法一
              var csv = '\ufeff' + Papa.unparse(datalist)
              // // 方法二
              // let csv = '\ufeff' + Papa.unparse(JSON.stringify({
              //   fields: headlist,
              //   data: datalist
              // }))
              // // 定义文件内容,类型必须为Blob 否则createObjectURL会报错
              // let content = new Blob([csv], {type: 'text/csv; charset=UTF-8'})
              // // 生成url对象
              // let urlObject = window.URL || window.webkitURL || window
              // let url = urlObject.createObjectURL(content)
              // // 生成<a></a>DOM元素
              // let el = document.createElement('a')
              // // 链接赋值
              // el.href = url
              // el.download = '文件导出.csv'
              // // 必须点击否则不会下载
              // el.click()
              // // 移除链接释放资源
              // urlObject.revokeObjectURL(url)
              
              // 方法三:输出的内容有引号
                //安装csv-exportor   npm install csv-exportor
              //CsvExportor.downloadCsv(
               // datalist,
                //{ header: headlist },
               // '文件导出.csv'
              //)
            
            } catch (e) {
              console.log(e)
            }
          })
      }
    },

如有不同意见,欢迎提出!!!

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐