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);
},
複製代碼