vue+axios 实现Excel下载

以前写过关于Springboot提供Excel文件下载的博客:SpringBoot 使用POI进行Excel下载_兮川的博客-CSDN博客 ,当点击下载的api地址时，就可以直接下载，或我们在前端页面直接使用<a>标签，href指向下载地址，我们也可以进行下载。

但是....,<a>标签无法进行设置表头，也无法进行参数的传递，确实是一个头疼的问题。此时，我们就需要使用axios进行文件的下载操作。

1.修改后端response的头部

response.setHeader("Content-type","application/octet-stream");  //将文件设置为流的形式进行传递，返回的是二进制形式
response.setCharacterEncoding("UTF-8");
response.setHeader("Content-Disposition","attachment;filename="+new String("工资模版".getBytes("UTF-8"),"ISO-8859-1")+".xls");

2.axios代码

设置我们想要的axios的global参数：

    axios.defaults.baseURL = 'http://localhost:7000/micro';axios.defaults.headers.common['school_id'] = "1111";axios.defaults.headers.common['account_id'] = "1001";axios.defaults.headers.post['content-Type'] = 'application/json;charset=UTF-8';

axis请求，注意responseType: 'blob'，blob代码返回的二进制格式。主要就是将数据指定到一个url上，在模拟<a>标签的点击操作，来实现文件的下载。

    axiosGetTemplate(){axios.get("/template",{responseType: 'blob'}).then(response=>{this.download(response);}).catch(error=>{console.log(error);})},download(data) {if(!data){return}var blob = new Blob([data.data], {type: 'application/vnd.ms-excel;charset=utf-8'})var url = window.URL.createObjectURL(blob);var aLink = document.createElement("a");aLink.style.display = "none";aLink.download = '模版.xls';aLink.href = url;//aLink.setAttribute("数据模版", "数据模版.xls");document.body.appendChild(aLink)aLink.click()}

github上有更多的笔记:Raray-chuan (兮川) · GitHub

vue+axios 实现Excel下载相关推荐

vue+axios 实现Excel下载，并解析文件流
功能:导出表格数据,形成一个excel文件,可打开查看内容. 1. axios请求设置头部和请求方法 const serviceHttp = axios.create({baseURL: proces ...
Vue.js + axios 实现excel下载
在以前实现的下载excel功能中,都是用 <a href="xxx">DOWNLOAD</a> 来实现的. 但是由于项目中采用了token验证,上述的做法就 ...
【vue+springboot】excel模板下载、导入功能实现
基于VUE+SpringBoot实现excel模板下载.导入功能背景最近在工作中经常遇到批量导入的功能,而且前端还要提示导入成功几条.失败几条.哪一条数据重复.是哪一条导入的数据出现问题等,抽空写 ...
VUE+JAVA实现EXCEL模板下载
一.项目场景: VUE+JAVA实现EXCEL模板下载二.功能背景本人作为一个开发小白,今天接到一个小需求系统需要导入数据,也就十几个字段,我和老板说了,让客户一个一个去输入吧!然后我就被经理叫去 ...
axios.get php,vue + axios get下载文件功能
本文实例为大家分享了vue + axios 下载文件的具体代码,供大家参考,具体内容如下这里是axios的get方法.post方法请点击这里=>here 注意点: Herder 请求头需注意 ...
excel下载两种方式(axios和window.open)
excel下载两种方式 1 第一种调用window.openmethods:{getDown() {window.open(baseUrl+ "/report/data_excel?cur ...
vue项目中实现下载后端返回的excel数据表格
查看更多资源 1. 案例简介: vue项目中,客户端需要实现以excel表格形式下载数据,后端为java,接受请求 >> 读取数据库 >> 生成excel >> 返 ...
vue中导出Excel表格
vue中导出Excel表格项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体 ...
vue导入导出excel组件封装
vue导入导出excel组件可直接使用参考以下博客,侵删参考的博客 ##一: 项目安装依赖 npm install --save xlsx 在项目中创建文件夹及文件如下图: excel-impo ...

vue+axios 实现Excel下载

vue+axios 实现Excel下载相关推荐

最新文章

热门文章