vue+axios 实现Excel下载

原创

已于 2022-11-11 10:10:33 修改 · 3.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Vue+axios Excel文件下载

于 2018-12-27 17:34:52 首次发布

这篇博客介绍了如何在Vue前端使用axios实现Excel文件的下载，包括设置axios全局参数，处理responseType为'blob'的数据，以及模拟<a>标签进行文件下载的操作，解决了无法设置表头和传递参数的问题。

以前写过关于Springboot提供Excel文件下载的博客:SpringBoot 使用POI进行Excel下载_兮川的博客-优快云博客 ,当点击下载的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['conte