Vue之将前端的筛选结果导出为csv文件

有导入就有导出哈！这里继导入之后记录一下导出的实现过程。

1.按钮部分：

<el-button class="filter-item" style="margin-left: 10px;" type="success" native-type="submit" @click="exportAll()" icon="el-icon-plus">
        导出
</el-button>

2.exportAll方法：

exportAll() {
    this.$confirm(‘现将导出全部已筛选结果, 是否继续?‘, ‘提示‘, {
      confirmButtonText: ‘确定‘,
      cancelButtonText: ‘取消‘,
      type: ‘warning‘
    }).then(() => {
      this.confirmExport();
    })
}

3.confirmExport方法：

async confirmExport() {
    const res = await this.$store.api.newReq(‘/xxx/xxxx/exportcsv‘).post(this.items);
    if (res != null) {
      this.download(res);
      this.$message({
        type: ‘success‘,
        message: ‘导出成功‘,
        duration: 1500
      })
    } else {
      this.$message.error("导出失败");
    }
}

4.download方法：

download (data) {
    if (!data) {
        return
    }
    let url = window.URL.createObjectURL(new Blob([data]));
    let link = document.createElement(‘a‘);
    link.style.display = ‘none‘;
    link.href = url;
    link.setAttribute(‘download‘, ‘导出结果.csv‘);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

点击按钮出发点击事件exportAll，然后弹出询问框，点击确定导入文件，调用confirmExport发送请求，最后后台做完处理返回数据给前端，前端动态生成DOM节点，触发下载。

大概思路就是这样，仅供参考，大家可以在评论区交流哦。

原文地址：https://www.cnblogs.com/ailanlan/p/12172748.html