vue通过接口直接下载java生成好的Excel表格案例

 更新时间:2020年10月26日 12:48:15   作者:胖子ღ牛逼  
这篇文章主要介绍了vue通过接口直接下载java生成好的Excel表格案例

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

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

import axios from 'axios'
 
export const exportFile = params => {
 var param = new URLSearchParams()
 param.append('beginTime', params.beginTime)
 param.append('endTime', params.endTime)
 return axios({
  method: 'post',
  data: param,
  url: '/apis/downExcel',
  responseType: 'blob'
 })
}

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

downExcel() {
 var params = {
  beginTime: this.times[0],
  endTime: this.times[1]
 };
 exportFile(params).then(
  data => {
   /** 获取生成设置好的文件名 */
   var filename = data.headers["content-disposition"];
   filename = filename.split("=")[1];
   filename = decodeURIComponent(filename, "utf-8");
   /** 接收文件流 */
   const blob = new Blob([data.data]);
   let url = URL.createObjectURL(blob);
   /** 模拟浏览器操作Document,并模拟下载动作 */
   let link = document.createElement("a");
   link.style.display = "none";
   link.href = url;
   link.setAttribute("download", filename);
   document.body.appendChild(link);
   link.click();
  },
  error => {
   console.log(error);
   this.$message.error("下载异常,请稍后再试");
  });
}

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

补充知识:Vue实现通过后端接口导出Excel表格

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

实现:

1、按钮调用下载接口

2、new Blob导出

PS:

1、第一步请求接口时,注意要设置请求responseType为blob类型,否则下载后,显示格式错误,无法打开

2、new Blob请求是,注意修改type类型为application/vnd.ms-excel

以上这篇vue通过接口直接下载java生成好的Excel表格案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 八种vue实现组建通信的方式

    八种vue实现组建通信的方式

    这篇文章主要介绍是八种vue实现组建通信的方式,包括、props 父组件与子组件通信、$emit 子组件父组件传递、$emit与props结合 兄弟组件传值等等,想具体了解的朋友可以参考下面文章的具体内容
    2021-09-09
  • vue用vis插件如何实现网络拓扑图

    vue用vis插件如何实现网络拓扑图

    这篇文章主要介绍了vue用vis插件如何实现网络拓扑图,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue清除浏览器全部cookie的问题及解决方法(绝对有效!)

    vue清除浏览器全部cookie的问题及解决方法(绝对有效!)

    最近项目要实现关闭浏览器清除用户缓存的功能,下面这篇文章主要给大家介绍了关于vue清除浏览器全部cookie的问题及解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue中动态出来返回的时间秒数(在多少秒显示分、小时等等)

    vue中动态出来返回的时间秒数(在多少秒显示分、小时等等)

    这篇文章主要给大家介绍了关于vue中动态出来返回的时间秒数(在多少秒显示分、小时等等)的相关资料,文中通过代码示例介绍的非常详细,对大家学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • Vue中实现视频播放的示例详解

    Vue中实现视频播放的示例详解

    这篇文章主要为大家学习介绍了基于Vue如何实现视频播放的功能,文中的示例代码讲解详细,具有一定的参考价值,需要的小伙伴可以了解一下
    2023-08-08
  • Vue动画之第三方类库实现动画方式

    Vue动画之第三方类库实现动画方式

    这篇文章主要介绍了Vue动画之第三方类库实现动画方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Element Backtop回到顶部的具体使用

    Element Backtop回到顶部的具体使用

    这篇文章主要介绍了Element Backtop回到顶部的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue axios拦截器常用之重复请求取消

    vue axios拦截器常用之重复请求取消

    我们大家在开发中,经常会遇到接口重复请求导致的各种问题,下面这篇文章主要给大家介绍了关于axios拦截器之重复请求取消的相关资料,需要的朋友可以参考下
    2021-09-09
  • 在vue自定义组件中使用 v-model指令详情

    在vue自定义组件中使用 v-model指令详情

    这篇文章主要介绍了在vue自定义组件中使用 v-model指令详情,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-06-06
  • vue基于Element构建自定义树的示例代码

    vue基于Element构建自定义树的示例代码

    本篇文章主要介绍了vue基于Element构建自定义树的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09

最新评论