vue处理流数据的方式进行下载

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

引言

在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例子，你可以根据实际情况进行调整。希望对你有帮助！