导出.csv格式数据

1. 后端返回的数据是’xxx.csv’

    return {
        'data': 'week_user_pwd_list_620df24d82c49264e32a1fbe.csv',
        'success': true
    }

2. 前端导出

2.1 导出按钮调用的函数

exportFn () {
Vue.prototype.$ajax({
              url:'xxx',
              method:'post',
              data,
              responseType: 'blob'
        }).then((res) => {
            this.exportCsv({
                title: ['来源', '账号', '密码', 'URL', 'refer', '目的端口', '登录状态', '最近登录时间', '处置进度'],
                data: this.formatList
            }, res.data);
        });
      }
 

2.2 因后端返回的数据只有·后缀为 .csv一个文件名，没有要导出的数据信息，可以将选中的导出数据获取到，对表头部分做处理

//参数obj是表头，name是后端返回的 .csv文件名
exportCsv (obj, name) {

        // 拿到对象数据的键，因为是一样的只去第一个即可
        let dataKey = Object.keys(obj.data[0]);
 
        // 列表内容
        let data = obj.data;
        let str = [];

        // 拼接 enter 键或者换行符
        str.push(obj.title.join(',') + '\r\n');
        for (let i = 0; i < data.length; i++) {
           let temp = [];
           for (let j = 0; j < dataKey.length; j++) {
               temp.push(data[i][dataKey[j]]);
           }

           // 拼接 enter 键或者换行符
           str.push(temp.join(',') + '\r\n');
        }
        let blob = new Blob(['\uFEFF' + str.join('')], {
            type: 'text/csv;charset=utf-8'
        });
        let url = window.URL.createObjectURL(blob);
        let downloadLink = document.createElement('a');
        downloadLink.href = url;
        downloadLink.download = name; // 导出的文件名
        downloadLink.click();
        window.URL.revokeObjectURL(url);
    }