前端下载文件流

这种方式不能在下载时名命文件，需要后端设置文件名二、a标签下载a标签的download属性，ie浏览器是不支持的请求的时候记得加responseType为blob,不然下载后点开是空白文件前端可以对文件名命如果我们要使用后端返回的文件名（一般都在content-disposition中）blob、MIME相关补充基本语法blob表示二进制大对象（binary larget object）,是js对

bug丸

6876人浏览 · 2022-06-26 11:23:53

bug丸 · 2022-06-26 11:23:53 发布

前端下载文件流

一、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);

二、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);
          }
        });

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

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

blob、MIME相关补充

基本语法

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

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

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

第一个为一个数据序列，可以是任意格式的值，例如，任意数量的字符串，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));

在这里插入图片描述

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

对象URL于blob

window.URL.createObjectURL()

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

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

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

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

MIME类型	扩展名
text/plain	txt,普通类型
application/pdf	pdf
application/octet-stream	*/bin/class/dms/exe/lha/lzh
application/zip	zip
image/jpeg	jpeg / jpe / jpg
image/png	png
image/gif	gif
image/svg+xml	svg
image/tiff	tiff
application/vnd.ms-powerpoint	ppt
audio/mpeg	mp3
video/mpeg	mp2/mpa/mpe/mpeg/mpg/mpv2
text/html	html
application/vnd.ms-excel	xlm/xla/xlc/xlt/xlw
application/msword	doc
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet	xlsx
application/vnd.openxmlformats-officedocument.wordprocessingml.document	docx