0
点赞
收藏
分享

微信扫一扫

vue axios下载文件(axios post/get方式下载文件)

Java旺 2021-09-29 阅读 230

导语:

   当你点进这篇文章说明你的http基础很烂,该去补http的知识了.

  网上搜了一堆根本就不好使,都是JQ时代的教程,mvvm框架的教程质量很差

先上干货

需求:点击DIV,下载Excel文件

url地址为:http:www.xxx.com/api/download

参数:id:11,time:2018.9.1

特征:参数少,不超过浏览器get长度限制

思路:借助a标签的原生功能,写成div嵌套a标签,a标签的href指向URL.




如果参数非常多,超过了get的长度限制,只能用post

后端正常水平:

post把参数传给后端接口后,让后端返回文件的下载地址,再按照方法1中用window.location.href打开这个地址即可.



后端是萌新的话,只给你个下载接口,按照下面方法来:

多讲一点,文件属于流文件不是json,所以要改响应类型responseType为arraybuffer或者blob而不是改header.拿到二进制文件还需要按照服务器响应头的数据类型转换.

第一步:写好请求

第二步:访问下后端提供的下载接口,复制接口response headers的content-type放在上图中type的字符串中


这种方法会有个问题,当接口报错,后端返回的error是个json前端看到的会是乱码,

因为已经被浏览器处理成文件流了.

第一种办法,报错后端直接返回http状态码4XX,带error

第二种办法,http状态码还是200,需要和后端在响应头约定下报错格式.

比如后端在header里新增个errcode属性和error_content属性,如果errcode不等于undefined,中断执行,弹窗error-contente内容

第三步:设置文件名(可选)

一般文件名不用前端自己设置,后端完全可以设置好,直接下载就完事了.

但是下载文件对于大部分前后端都不擅长,这里说一种需要前端设置文件名且后端又容易配合实现的方法.

比如后端接口是把文件名称放在了response-header里


前端需要读取response-header里的content-disposition属性,处理后获取到文件名,文件名如果不是中文需要转码.

```

//读取response.header里的文件名

      let tempName = headers["content-disposition"]

        .split(";")[1]

        .split("filename=")[1];

      //如果不是中文需要解码,URI编码需要decodeURI解码,GBK编码用iconv-lite插件解码

      tempName = decodeURI(tempName);

```

接下来我们需要用JS创建一个A标签,A标签的download属性值就是文件名

```

export const userDetailDownload = params =>{

    return request({

        url:"/analysis/userTagConfig/userDetailDownload",

        method:"GET",

        params:params,

        responseType:'arraybuffer',

    })

}


 async go_down() {

      let { data, headers } = await userDetailDownload({

        baseTime: this.$route.query.baseTime,

        orderField: "userId",

        orderType: "desc",

        platFrom: this.$route.query.platFrom,

        tagName: this.$route.query.tagName,

        value:

          this.$route.query.value === "合计" ? null : this.$route.query.value,

      });

      //读取response.header里的文件名

      let tempName = headers["content-disposition"]

        .split(";")[1]

        .split("filename=")[1];

      //如果不是中文需要解码,URI编码需要decodeURI解码,GBK编码用iconv-lite插件解码

      tempName = decodeURI(tempName);

      //获取数据流数据

      let blob = new Blob([data], { type: "application/vnd.ms-excel" });

      var downloadElement = document.createElement("a");

      var href = window.URL.createObjectURL(blob); //创建下载的链接

      downloadElement.href = href;

      downloadElement.download = tempName; //下载后文件名

      document.body.appendChild(downloadElement);

      downloadElement.click(); //点击下载

      document.body.removeChild(downloadElement); //下载完成移除元素

      window.URL.revokeObjectURL(href); //释放掉blob对象

    },

```



出错排查建议:

1.检测请求的参数是不是json格式

2.后端接口的响应类型是不是文件格式

3.有没有跨域,为了直观教程中写的是完整URL,实际开发是写代理接口的


如果有帮助可以去github点个start   GitHub - bill-mark/axios-post-file-excel: axios post方式下载文件

谢谢

举报

相关推荐

0 条评论