Vue 前端實現csv下載，踩坑需兩次點擊或死循環下載

直接上成功代碼參考：

<template>
　　// 最開始span標簽就是a標簽，結果點擊就是嵌套循環，所以新加一個span標簽放在a標簽里面解耦
　　<a id="download-data" ref="link" href="#" >
    <span class="download-btn" @click="downloadData">
        <i class="iconfont theme-color">&#xe6af;</i>
    </span>
　　</a>
</tempate>

 

邏輯：

downloadData() {
    // 獲取公告信息 項目是前后端分離，先調用api獲取數據
    this.$axios.post('/api/web/export_account_data/', {
            "perms_id": "2-45",
            "func_name": "download_account"
        }).then((res) => {
            var downDict = res.data.data[0];
            this.fileName = downDict['filename']
            this.header = downDict['header_list']
            this.databody = downDict['result_list']
　　　　　　　// 上面就是獲取數據格式如:file_name=aaa.csv  header=['姓名','年紀']  databody=[['艾弗森',41],['詹姆斯',35]]

　　　　　　　// 循環數據轉入到csvContent            
　　　　　　　var csvContent = 'data:text/csv;charset=utf-8,\ufeff';
　　　　　　　csvContent += this.header + '\n';
            this.databody.forEach((item) => {
                csvContent += item + '\n';
            });
            this.$refs.link.setAttribute('href', encodeURI(csvContent)); // 將csv數據綁定到a標簽里
            this.$refs.link.setAttribute('download', this.fileName);
            var downloadClick= document.getElementById("download-data"); //觸發點擊事件進行下載，如果沒有這個就需要點擊兩次才能下載
            downloadClick.click();

    })
}