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表格案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

configureWebpack、chainWebpack配置vue.config.js方式
这篇文章主要介绍了configureWebpack、chainWebpack配置vue.config.js方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
详解Vue iview IE浏览器不兼容报错（Iview Bable polyfill）
这篇文章主要介绍了Vue iview IE浏览器不兼容报错的决绝方法，由于Iview编译使用到了es6的一些新特性，但是在IE中不支持ES6的新特性，本文就介绍一下如何解决这些问题
2019-01-01
vue+tsc+noEmit导致打包报TS类型错误问题及解决方法
当我们新建vue3项目,package.json文件会自动给我添加一些配置选项,这写选项基本没有问题,但是在实际操作过程中,当项目越来越复杂就会出现问题,本文给大家分享vue+tsc+noEmit导致打包报TS类型错误问题及解决方法,感兴趣的朋友一起看看吧
2023-10-10
Vue+ECharts+高德地图API实现天气预报数据可视化的教程
所谓数据可视化，我们可以理解为从宏观角度来看一眼就能看出来整个数据的占比，走向，对于数据可视化，很多互联网公司是很看重这一块的，包括大厂，本就将给大家介绍如何通过Vue+ECharts+高德地图API实现天气预报数据可视化
2023-06-06
vue中el-input绑定键盘按键(按键修饰符)
这篇文章主要介绍了vue中el-input绑定键盘按键(按键修饰符)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
Vue3中defineProps设置默认值的方法实现
Vue3中我们经常需要使用defineProps来定义组件的属性,本文主要介绍了Vue3中defineProps设置默认值的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-07-07
Create vite理解Vite项目创建流程及代码实现
这篇文章主要为大家介绍了Create vite理解Vite项目创建流程及代码实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
vue-cli项目使用vue-picture-preview图片预览组件方式
这篇文章主要介绍了vue-cli项目使用vue-picture-preview图片预览组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue proxy 的优势与使用场景实现
这篇文章主要介绍了vue proxy 的优势与使用场景实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
关于Vue Webpack2单元测试示例详解
这篇文章主要给大家介绍了关于Vue Webpack2单元测试的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
2017-08-08

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具