常见的 MIME 文件类型

常见 MIME 类型列表 官网链接:
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

1. MIME 文件类型 API

类型	描述
文件/档类	—
text/plain	纯文本文档 (不含二进制数据, 能有效避免XSS漏洞)
text/html	html 文档
text/css	css 文件
text/javascript	js 文件
text/xml	RFC 7303 忽略xml头所指定编码格式而默认采用 us-ascii 编码
application/xml	会根据 xml 头指定的编码格式来编码
application/json	JSON 文件
application/pdf	PDF 文件
application/vnd.ms-excel	XLS 文件
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet	XLXS 文件
application/zip	ZIP 文件
application/xml	XML 文件
application/msword	Word 文件
application/vnd.ms-powerpoint	PPT 文件
application/vnd.openxmlformats-officedocument.presentationml.presentation	PPTX 文件
application/rtf	富文本
application/vnd.apple.installer+xml	Apple 安装包
application/vnd.oasis.opendocument.spreadsheet	开放文档表格文档
application/vnd.oasis.opendocument.text	开放文档文本文档
图像类	—
image/png	PNG 图像
image/jpeg	JPEG 图像
image/jpg	JPG 图像
image/gif	GIF 图像
image/svg+xml	SVG 图像
image/vnd.microsoft.icon	icon 图像
影音类	—
audio/mpeg	MP3 文件
video/mpeg	MP4 文件
audio/ogg	OGG 音频
video/ogg	OGG 视频
其他类	—
application/octet-stream	二进制数据流, 表示未知的文件类型 详见 1.1. application/octet-stream 详解

1.1. application/octet-stream 详解

application/octet-stream 是一个二进制流文件, 当 content-type 设置为: application/octet-stream 时，浏览器会直接下载。这个类型一般搭配另一个响应头 Content-Disposition,该响应头表示回复的内容以哪种形式展示，内链?（即网页或者网页的一部分），附件?

// octet-stream 详解

const response = await request({
      url:'接口',
      data: { url: '/xxx/2024/5/8/文件名20240508181430117-1条-1.xlsx'},
      method: 'post',
      responseType: 'blob',
      timeout: 1000 * 60 * 10, // 十分钟
    })
// 接口返回的类型  Blob {size: 3956, type: 'text/xml'}
    
const url = window.URL.createObjectURL(new Blob([response], { type: 'application/octet-stream' }))
var link = document.createElement('a')
link.href = url
// const names = `文件名.xlsx`
// link.setAttribute('download', names)
// document.body.appendChild(link)
link.click()
// document.body.removeChild(link)
// window.URL.revokeObjectURL(url)

2. 页面使用代码

// 定义映射对象
const MIME_MAP = {
 txt: "text/plain",
 html: "text/html",
 xml: "text/xml",
 css: "text/css",
 js: "text/javascript",
 zip: "application/zip",
 msword: "application/msword",
 xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
 xls: "application/vnd.ms-excel",
 json: "application/json",
 pdf: "application/pdf",
 png: "image/png",
 jpg: "image/jpg",
 jpeg: "image/jpeg",
 gif: "image/gif",
 svg: "image/svg+xml"
 mp3: "audio/mpeg",
 mp4: "video/mpeg",
 all: "application/octet-stream"
}

// 使用:
let link = document.createElement('a')
link.href = URL.createObjectURL(new Blob([blob], { type: MIME_MAP[fileType] }))
link.click()
URL.revokeObjectURL(link.href) //释放

---

1.2. decodeURIComponent ( uri )

1. decodeURIComponent 是什么?
decodeURIComponent() 可对 encodeURIComponent() 函数编码的URI进行解码, 它可以将字符串中的特殊字符进行编码的内置函数，以便这些字符能够在 URL中传递或嵌入到 HTML 文档中。它不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码，但会对其他字符，如用于分隔 URI 组件的标点符号，由一个或多个十六进制的转义序列替换。因此，decodeURIComponent() 函数可以恢复这些被编码的特殊字符，使其能够被正确解析和处理。


2. 与 encodeURI() 区别?
encodeURI() 不会对本身属于URI的特殊字符进行编码, 如冒号、正斜杠、问号和井字号,
encodeURICompoent() 会对所有非标准字符进行编码


3. 应用场景
常用于对接口返回的 url 的编码进行解码


4. 数据格式
var file=“/tms/2024/5/8/测试文件20240508181430117-1条-1.xlsx”;
var url =encodeURIComponent(file)
// 打印结果如下:

%2Ftms%2F2024%2F5%2F8%2F%E5%B9%B2%E7%BA%BF%E9%87%8C%E7%A8%8B%E5%B7%AE%E8%A1%A5%E8%B4%B420240508181430117-1%E6%9D%A1-1.xlsx
/tms/2024/5/8/测试文件20240508181430117-1条-1.xlsx

---

1.3. URL.createObjectURL( array, options )

• array：由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等对象构成的，将会被放进 Blob
• options : 可选的 BlobPropertyBag 字典，它可能会指定如下两个属性:
• type：默认值为 " "，表示将会被放入到 blob 中的数组内容的 MIME 类型。
• endings：默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入，不常用。

1. URL.createObjectURL 是什么?
创建一个指向传入参数对象（如 File 对象或 Blob 对象）的 URL。它可以将Blob、File等二进制文件转换为浏览器可以直接显示的URL地址，从而方便进行展示、下载等操作


2. 应用场景
常用于在网页中显示图片、视频、音频等多媒体文件，或者用于文件下载


3. 数据格式
const url = window.URL.createObjectURL(new Blob([response], { type: ‘application/octet-stream’ }))
// 打印结果如下:
blob:http://localhost:9529/8b1234a4-abcd-4a73-9241-d8fb7be303ce


4. 缺点
1.兼容性问题: IE浏览器不支持createObjectURL方法，需要手动实现下载功能
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, url, true);
xhr.responseType = ‘blob’;
xhr.onload = function() {
if (this.status === 200) {
var blob = new Blob([this.response], { type: ‘image/png’ });
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, ‘file.png’);
} else {
var url = window.URL.createObjectURL(blob);
window.location.href = url;
}
}
};
xhr.send()
2.需要手动释放 createObjectURL, 不然会导致内存泄漏和性能问题,手动释放: URL.revokeObjectURL(url)
3. 内存限制: 将大文件转换为URL地址可能会导致内存问题。所以尽量使用流或者分片等方式

---

1.4. Blob()

1. 什么是 Blob ?
Blob（二进制大对象）是几乎所有二进制数据的一种抽象，类似于File对象。它是一种二进制数据


2. 应用场景
可以用来存储图片、音频、视频等多媒体文件


3. 数据格式
const blob = new Blob([‘Hello, World!’], { type: ‘text/plain’ });
这里我们创建一个包含了"Hello, World!"的文本类型的Blob对象，这个对象可以转换为URL地址供我们使用。

使用Blob下载或展示文件

// 1. 展示图片
<img src="blob:{url}">

const blob = new Blob([arrayBuffer], { type: 'image/png' });
const url = URL.createObjectURL(blob);
// 上述代码中，我们将一个二进制的图片文件放入Blob对象中，并使用createObjectURL方法将其转换为URL地址。然后我们在HTML代码中使用img标签展示图片。此时，img的src属性为"blob:{url}"。


// 2. 下载文件
<a href="blob:{url}" download="filename.txt">Download File</a>

const blob = new Blob(['Hello, World!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
上述代码中，我们将一个包含"Hello, World!"文本字符串的Blob对象转换为URL地址，并使用a标签展示。a标签的href属性为"blob:{url}"，download属性为需要下载的文件名称