vue如何实现通过接口直接下载java生成好的Excel表格 - 行业资讯

vue如何实现通过接口直接下载java生成好的Excel表格?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

通过浏览器直接访问导出接口就会自动下载创建好的Excel表格。但是我们在vue里使用axios请求接口,一般是处理json数据,如果要处理文件流数据,需要做下特殊处理即可直接下载文件。

假如下载Excel接口为:/api/downExcel,则请求如下

从& # 39;进口axios axios& # 39;
　　
　　出口const exportFile=params=比;{
　　var参数=new URLSearchParams ()
　　param.append (& # 39; beginTime& # 39;, params.beginTime)
　　param.append (& # 39; endTime& # 39;, params.endTime)
　　返回axios ({
　　方法:& # 39;文章# 39;
　　数据:参数,
　　url: & # 39;/api/downExcel& # 39;
　　responseType: & # 39;团# 39;
　　})
　　}

下载按钮触发下载方法如下:

downExcel () { 　　var params={ 　　beginTime: this.times [0], 　　endTime: this.times [1] 　　}; 　　exportFile (params) ( 　　data=https://www.yisu.com/zixun/> {/* *获取生成设置好的文件名*/var=data.headers文件名(“附加”); 　　文件名=filename.split ("=") [1]; 　　文件名=decodeURIComponent(文件名,“utf - 8”);/* *接收文件流*/const blob=new blob ([data.data]); 　　让url=URL.createObjectURL (blob);/* *模拟浏览器操作文档,并模拟下载动作*/让链接=document.createElement (“a”); 　　link.style。显示=懊挥小? 　　链接。href=url; 　　链接。setAttribute(“下载”,文件名); 　　document.body.appendChild(链接); 　　link.click (); 　　}, 　　错误=> { 　　console.log(错误); 　　message.error美元。(“下载异常,请稍后再试”); 　　})；　　}

这样就可以在vue项目中完整下载Excel接口,当然vue也有生成Excel的插件,接收后台的json数据然后在前端生成并下载。

<强> vue实现通过后端接口导出Excel表格

<强>需求:后端提供下载接口,返回二进制文件流,前端导出为xlsx格式的Excel表格

<强>实现:

1,按钮调用下载接口

2,新团导出

vue如何实现通过接口直接下载java生成好的Excel表格