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

 时间:2024-10-18 14:58:02

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

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

2、先写一个导出按钮以及添加一个点击事件,如下:<Buttonclass="export"type="primary"size="small"@click="exportData()"><Icontype="ios-download-outline"></Icon>导出</Button>(这是用的iview库,你也可以写成普通按钮和点击事件)

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

3、点击事件里写入地址与url的拼接的方法,首先要去调用后台接口,然后拿到data,this.$Api.globalUrl就是你的地址http://114.xxx.242.xxx:8084/,与url进行拼接即可下载一个excle表。leta=document.createElement("a");a.href=this.$Api.globalUrl+res.data;a.click();你可以先在浏览器尝试拼接,验证是否成功。总之,与后端结合去实现导出功能,就是这么个思路。

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

4、点击导出按钮,即可导出表格内容,就是一句话,表格的内容都是后端已经处理好的一个excle表,你只需要调用接口,拼接url就完成了。但是需要注意的是,一般这个地址不是固定的,部署到测试环境中就是不一样的地址,因此最好把它变成一个全局的,这样变化的时候只需要修改一处即可,如何全局配置后台接口方式,可以参考我的另一篇文章

vue项目中如何去实现表格导出excle表功能
  • iPhone13怎么下载应用
  • 苹果手机新手使用教程
  • 苹果手机新手教程
  • 苹果13mini手机怎样下载软件
  • 苹果13手机怎么下载已经购买的软件
  • 热门搜索
    车前草有什么功效 鲁班姓什么 五脏六腑指的是什么 十八洞村隶属于湖南省什么地方 榛子是什么 天上人间吞拿鱼是什么意思 2013年是什么年 什么是青春 暨是什么意思 癸水是什么意思