MIME

MIME type

这是一份 MIME 类型列表，以及各个类型的文档类别，按照它们的常见扩展名排序。

两种主要的 MIME 类型在默认类型中扮演了重要的角色：

text/plain 表示文本文件的默认值。一个文本文件应当是人类可读的，并且不包含二进制数据。
application/octet-stream 表示所有其他情况的默认值。一种未知的文件类型应当使用此类型。浏览器在处理这些文件时会特别小心, 试图防止、避免用户的危险行为. IANA 是 MIME 媒体类型的官方注册机构，并维护了 list of all the official MIME types。下面的表格列出了 Web 上的一些重要 MIME 类型:

扩展名	文档类型	MIME 类型
`.aac`	AAC audio	audio/aac
`.abw`	AbiWord document	application/x-abiword
`.arc`	Archive document (multiple files embedded)	application/x-freearc
`.avi`	AVI: Audio Video Interleave	video/x-msvideo
`.azw`	Amazon Kindle eBook format	application/vnd.amazon.ebook
`.bin`	Any kind of binary data	application/octet-stream
`.bmp`	Windows OS/2 Bitmap Graphics	image/bmp
`.bz`	BZip archive	application/x-bzip
`.bz2`	BZip2 archive	application/x-bzip2
`.csh`	C-Shell script	application/x-csh
`.css`	Cascading Style Sheets (CSS)	text/css
`.csv`	Comma-separated values (CSV)	text/csv
`.doc`	Microsoft Word	application/msword
`.docx`	Microsoft Word (OpenXML)	application/vnd.openxmlformats-officedocument.wordprocessingml.document
`.eot`	MS Embedded OpenType fonts	application/vnd.ms-fontobject
`.epub`	Electronic publication (EPUB)	application/epub+zip
`.gif`	Graphics Interchange Format (GIF)	image/gif
`.html`	HyperText Markup Language (HTML)	text/html
`.ico`	Icon format	image/vnd.microsoft.icon
`.ics`	iCalendar format	text/calendar
`.jar`	Java Archive (JAR)	application/java-archive
`.jpg`	JPEG images	image/jpeg
`.js`	JavaScript	text/javascript
`.json`	JSON format	application/json
`.jsonld`	JSON-LD format	application/ld+json
`.midi`	Musical Instrument Digital Interface (MIDI)	audio/midi audio/x-midi
`.mjs`	JavaScript module	text/javascript
`.mp3`	MP3 audio	audio/mpeg
`.mpeg`	MPEG Video	video/mpeg
`.mpkg`	Apple Installer Package	application/vnd.apple.installer+xml
`.odp`	OpenDocument presentation document	application/vnd.oasis.opendocument.presentation
`.ods`	OpenDocument spreadsheet document	application/vnd.oasis.opendocument.spreadsheet
`.odt`	OpenDocument text document	application/vnd.oasis.opendocument.text
`.oga`	OGG audio	audio/ogg
`.ogv`	OGG video	video/ogg
`.ogx`	OGG	application/ogg
`.otf`	OpenType font	font/otf
`.png`	Portable Network Graphics	image/png
`.pdf`	Adobe Portable Document Format (PDF)	application/pdf
`.ppt`	Microsoft PowerPoint	application/vnd.ms-powerpoint
`.pptx`	Microsoft PowerPoint (OpenXML)	application/vnd.openxmlformats-officedocument.presentationml.presentation
`.rar`	RAR archive	application/x-rar-compressed
`.rtf`	Rich Text Format (RTF)	application/rtf
`.sh`	Bourne shell script	application/x-sh
`.svg`	Scalable Vector Graphics (SVG)	image/svg+xml
`.swf`	Small web format (SWF) or Adobe Flash document	application/x-shockwave-flash
`.tar`	Tape Archive (TAR)	application/x-tar
`.tiff`	Tagged Image File Format (TIFF)	image/tiff
`.ttf`	TrueType Font	font/ttf
`.txt`	Text, (generally ASCII or ISO 8859-n) text/plain
`.vsd`	Microsoft Visio	application/vnd.visio
`.wav`		Waveform Audio Format
`.weba`	WEBM audio	audio/webm
`.webm`	WEBM video	video/webm
`.webp`	WEBP image	image/webp
`.woff`		Web Open Font Format (WOFF)
`.woff2`	Web Open Font Format (WOFF)	font/woff2
`.xhtml`	XHTML	application/xhtml+xml
`.xls`	Microsoft Excel	application/vnd.ms-excel
`.xlsx`	Microsoft Excel (OpenXML)	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
`.xml`	XML	application/xml 代码对普通用户来说不可读 (RFC 3023, section 3)text/xml 代码对普通用户来说可读 (RFC 3023, section 3)
`.xul`	XUL	application/vnd.mozilla.xul+xml
`.zip`	ZIP archive	application/zip
`.3gp`	3GPP audio/video container	video/3gpp
audio/3gpp（若不含视频）
`.3g2`	3GPP2 audio/video container	video/3gpp2
audio/3gpp2（若不含视频）
`.7z`	7-zip archive	application/x-7z-compressed

前端下载文件流

一、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 type

# 前端下载文件流

# 一、iframe 下载