vue文件流下载

作为一个前端渣渣,在经历了一段较长时间的超文本下载之后,突然后端发现需要使用文件流下载,在这里记录下文件流下载由于是使用的vue-axios的项目,在请求的方式上有给予axios做了一个二次的封装,里面加了拦截器,所以在这里就要用回原来的axiosAxios({url: `xxx.xxx/api${getFile}`, //请求路径responseType: "blob",//表明返回服务器返回的

刘泽鑫

8198人浏览 · 2021-05-21 09:38:37

刘泽鑫 · 2021-05-21 09:38:37 发布

作为一个前端渣渣,在经历了一段较长时间的超文本下载之后,突然后端发现需要使用文件流下载,在这里记录下文件流下载
由于是使用的vue-axios的项目,在请求的方式上有给予axios做了一个二次的封装,里面加了拦截器,所以在这里就要用回原来的axios

   Axios({
        url: `xxx.xxx/api${getFile}`, //请求路径
        responseType: "blob",  //表明返回服务器返回的数据类型
        method: "post",  //请求方式
        data:{
        attribute1:'xxxx',
        attribute2:'xxxxx'},  //请求需要传的参数
      }).then((res) => {  //请求成功之后
      //创建一个隐藏的a链接
        const link = document.createElement("a");
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });  //文件流处理
        link.style.display = "none";  //去除a标签的样式
设置连接
        link.href = URL.createObjectURL(blob);
        link.download = fileName;
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
        //移除创建的a标签
        window.URL.revokeObjectURL(link.href);
      	document.body.removeChild(link);
      });