前端下载文件流

一、iframe下载

这种方式不能在下载时名命文件，需要后端设置文件名

      let iframe = document.createElement("iframe");
      iframe.src = "http://localhost:8080/api/getStream";
      iframe.style.display = "none";
      iframe.style.height = 0;
      document.body.appendChild(iframe);
      setTimeout(() => {
        iframe.remove();
      }, 60 * 1000);
1
2
3
4
5
6
7
8

二、a标签下载

a标签的download属性，ie浏览器是不支持的

请求的时候记得加responseType为blob,不然下载后点开是空白文件

前端可以对文件名命

      axios
        .get("/api/getStream", {
          responseType: "blob",
        })
        .then((res) => {
          let blob = new Blob([res.data], {
            type: "application/pdf;charset-UTF-8",
          });
          if (navigator.msSaveOrOpenBlob) {
            navigator.msSaveOrOpenBlob(blob, "fileName.pdf");
          } else {
            const blobUrl = URL.createObjectURL(blob);
            let a = document.createElement("a");
            a.href = blobUrl;
            a.download = "fileName.pdf";
            a.style.display = "none";
            a.click();
            URL.revokeObjectURL(blobUrl);
          }
        });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

如果我们要使用后端返回的文件名（一般都在content-disposition中）

let fileName = '';
const contentDisposition = res.headers['content-disposition'];
if (contentDisposition) {
fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1], "UTF-8");
}
1
2
3
4
5

blob、MIME相关补充

基本语法

blob表示二进制大对象（binary larget object）,是js对不可修改的二进制数据的封装类型，主要用于存储二进制大对象,例如可以存储图片,音视频等文件;

它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作

const blob=new Blob([data],{type:"application/pdf",endings:"transparent"})
1

第一个为一个数据序列，可以是任意格式的值，例如，任意数量的字符串，Blobs 以及 ArrayBuffers。

第二个参数，是一个包含了两个属性的对象，其两个属性分别是：

type – MIME 的类型

endings – 决定 append() 的数据格式，（数据中的 \n 如何被转换）可以取值为 “transparent” 或者 “native”（t ransparent的话不变，native 的话按操作系统转换；transparent为默认）

      const blob = new Blob(["hello", "go"], {
        type: "application/json",
      });
      console.log(blob);
      console.log(blob.slice(0, 5));
1
2
3
4
5

blob对象size和type属性，还有一个slice方法

对象URL于blob

window.URL.createObjectURL()
1

传入一个File或blob对象，返回一个指向内存中地址的字符串，这个字符串是url，所以可以直接在dom中使用

URL对象优点：不用把文件读取到 js 也可以使用文件

使用完通过 window.URL.revokeObjectURL() 释放内存

MIME（媒体类型）常见的类型