在这里插入图片描述

📫 作者简介:「子非我鱼」,专注于研究全栈
🔥 三连支持:欢迎 ❤️关注、👍点赞、👉收藏三连,支持一下博主~

引言

在Vue.js中,如果后端接口返回的是文件流(例如文件下载),你可以使用axios库来处理这种情况。以下是处理接口返回的文件流并进行下载的步骤。

步骤一:查看postman请求下载请求,返回效果如下:

在这里插入图片描述

步骤二:vue页面,发送请求,然后处理流

点击按钮发送请求

<a-button type="primary" icon="download" @click="myqxindown">报告下载</a-button>

代码实现:

      myqxindown(){
         let {data} = axios.post("http://localhost:9527/jeecg-boot/strategy/LrSpatial/downloadAssignmentSheet1",{},{responseType:'blob'})
        .then(function (response){
          alert(response);
         const blob = new Blob([response.data]);
         let downloads = document.createElement("a");
         let href = window.URL.createObjectURL(blob);
         downloads.href = href;
         downloads.download = 'cccc.docx';
         document.body.appendChild(downloads);
         downloads.click();
         document.body.removeChild(downloads);
         window.URL.revokeObjectURL(href);
        }).catch(function (error){
          alert(error)
        });
      },
步骤三:结果展示:

在这里插入图片描述
在上述代码中:

通过Axios发送POST请求,设置responseType为blob对象创建一个二进制大对象,将文件流传递给它。
创建一个a标签,将Blob的URL作为下载链接的href,设置下载的文件名。
模拟点击a标签实现文件下载。
最后,移除a标签。

这是一个基本的文件下载的Vue.js例子,你可以根据实际情况进行调整。希望对你有帮助!

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐