vue项目中如何去实现表格导出excle表功能

1、首先，可以看到后端已经帮我们处理好数据，并返回给我们一个data，是一个url地址，我们现在只需要做的就是地址与url的拼接

2、先写一个导出按钮以及添加一个点击事件，如下：

    <Button class="export" type="primary" size="small" @click="exportData()">

      <Icon type="ios-download-outline"></Icon>导出

    </Button>

（这是用的iview库，你也可以写成普通按钮和点击事件）

3、点击事件里写入地址与url的拼接的方法，首先要去调用后台接口，然后拿到data，this.$Api.globalUrl就是你的地址http://114.xxx.242.xxx:8084/，与url进行拼接即可下载一个excle表。

        let a = document.createElement("a");

        a.href = this.$Api.globalUrl + res.data;

        a.click();

你可以先在浏览器尝试拼接，验证是否成功。

总之，与后端结合去实现导出功能，就是这么个思路。

4、点击导出按钮，即可导出表格内容，就是一句话，表格的内容都是后端已经处理好的一个excle表，你只需要调用接口，拼接url就完成了。

但是需要注意的是，一般这个地址不是固定的，部署到测试环境中就是不一样的地址，因此最好把它变成一个全局的，这样变化的时候只需要修改一处即可，如何全局配置后台接口方式，可以参考我的另一篇文章