直接上成功代码参考:
- <template>
- // 最开始 span 标签就是 a 标签, 结果点击就是嵌套循环, 所以新加一个 span 标签放在 a 标签里面解耦
- <a id="download-data" ref="link" href="#">
- <span class="download-btn" @click="downloadData">
- <i class="iconfont theme-color"></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();
- })
- }
来源: http://www.bubuko.com/infodetail-3141797.html