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();

    })
}