后端返回文件流时，前端如何处理并成功下载流文件以及解决下载后打开显示不支持此文件格式-前端-CSS教程

一、文件和流的关系

文件（File）和流(Stream)是既有区别又有联系的两个概念。

文件是计算机管理数据的基本单位，同时也是应用程序保存和读取数据的一个重要场所。
存储介质：文件是指在各种存储介质上（如硬盘、可移动磁盘、CD等）永久存储的数据的有序集合，它是进行数据读写操作的基本对象。
特性：每个文件都有文件名、文件所在路径、创建时间及访问仅限等属性。

流是字节序列的抽象概念，例如文件、输入/输出设备、内部进程通信管道等。流提供一种向后备存储器写入字节和从后备存储器读取字节的方式。
存储介质：除了和磁盘文件直接相关的文件流以外，流还有多种类型。流可以分布在网络中、内存中或者是磁带中。

上图类似于乱码，就是文件流在浏览器中的表现形式。

二、前端处理文件流并下载（Vue）

await this.$http
        .request({
          url: `/minioDownload?htitle=${title}`, //这里是你的请求url
          responseType: 'blob', //这里最重要,不要去掉
          method: 'get', //请求方式,看后台的需求,可能是get,post等方式
        })
        .then((res) => {
          console.log(res);
          var elink = document.createElement('a');
          elink.download = name;
          elink.style.display = 'none';
          var blob = new Blob([res], { type: 'application/x-msdownload' });
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          document.body.removeChild(elink);
          this.$message.su***ess(`文件下载成功！`)
        }).catch(err => {
            console.log(err);
        });

设置Content-Type 的值为：application/x-msdownload。Web 服务器需要告诉浏览器其所输出的内容的类型不是普通的文本文件或 HTML 文件，而是一个要保存到本地的下载文件。

三、解决下载后打开显示不支持此文件格式

这个问题我也遇到了，在网上也搜了好多资料，才得到答案。

比如：

是因为在 axios 中对后端的响应做了拦截，所以new Blob([res])中拿到的res实际上是后端接口的 res.data，只不过这一层操作在全局被封装了。

而如果直接使用的$http.get().then()，并未在全局对请求进行封装拦截。所以在这里需要取得的是 res.data 于是，我把new Blob([res])改成new Blob([res.data])后，问题就解决了。