vue中前端表格下载文件为csv

JS

// 2.第二种是前端直接将表格下载为csv文件的方法（注意只能是表格）
downFun2(tableLable, ) {
    let addobj = {}
    // 2.1获取表头内容 以rowData形式重新赋值
    try {
        this.tableLable.map((v, i) => {
            addobj['rowData' + i] = v
        })
    } catch (error) {
        this.$message.error('请填写tableLable表头属性')
        return
    }
    if(this.tableData.length == 0) {
            this.$message.error('请填写tableData表格数据属性')
            return
    }
    if(!this.fileUrl) {
            this.$message.error('请填写文件名属性')
            return
    }
    // 2.2用JSON转义清理对象的内存地址关联  来获取表格数据
    let tableData = JSON.parse(JSON.stringify(this.tableData))
    // 2.3把表头添加到表格数据的最前面充当表头
    tableData.unshift(addobj)
    // 2.4列标题，逗号隔开，每一个逗号就是隔开一个单元格
    let str = ``;
    // 2.5增加\t为了不让表格显示科学计数法或者其他格式
    for(let i = 0; i < tableData.length; i++) {
        for(let item in tableData[i]) {
            // 2.5.1 注意要将本身就有换行或者英文逗号的内容进行变换 否则表格内容会错乱
            tableData[i][item] = tableData[i][item].replace(/\n/g, ' ')
            tableData[i][item] = tableData[i][item].replace(/,/g, '，') // 英文替换为中文
            str += `${tableData[i][item] + '\t'},`;
        }
        str += '\n';
    }
    // 2.6encodeURIComponent解决中文乱码
    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
    // 2.7通过创建a标签实现
    let link = document.createElement('a');
    link.href = uri;
    // 2.8对下载的文件命名
    link.download = this.fileUrl;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
},