前端由于安全方面的因素，不能直接对文件进行写操作。
但是在实际的业务需求中，难免会遇到各种各样文件的下载、预览。
如果服务端下载文件是以流的形式传递到前端，前端通常是将流转换为objectURL,借用a标签的download属性，进行文件下载。

Bolb对象

定义

Blob表示二进制类型的大对象，通常是影像、声音或多媒体文件，在 javaScript中Blob表示一个不可变、原始数据的类文件对象。

其构造函数如下:

new Blob(blobParts, options);
  • blobParts:数组类型，可以存放任意多个ArrayBuffer, ArrayBufferView, Blob或者DOMString（会编码为UTF-8），将它们连接起来构成Blob对象的数据。
  • options:可选项，用于设置blob对象的属性，可以指定如下两个属性：
    – type：存放到blob中数组内容的MIME类型（默认为""），例如image/png。
    – endings: 是否转换换行符，用于指定包含行结束符\n的字符串如何被写入。值为native表示行结束符会被更改为适合宿主操作系统文件系统的换行符（默认值为transparent表示会保持blob中保存的结束符不变）

例如：（从字符串创建 Blob）

let blob = new Blob(["<html>…</html>"], {type: 'text/html'});

请注意：第一个参数必须是一个数组 [...]

属性

Blob对象有两个属性，参见下表

属性名 描述
size Blob对象中所包含数据的大小。字节为单位。 只读。
type 一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。 只读。

例如：

const blob = new Blob(['<div>john</div>'], { type: 'text/xml' });
console.log(blob); // Blob {size: 15, type: "text/xml"}

前端实现流文件下载

const res = await axiosRequest({
	url: state.exportUrl,
	method: 'post',
	data: form,
    responseType: 'blob',  // 设置返回为二进制流
});
downloadSource(res);  // 调用此方法实现下载流文件

// 下载流
const downloadSource = (res: any) => {
  let url =(window.URL || window.webkitURL).createObjectURL(new Blob([res], { type:'application/zip'}));
  let link = document.createElement('a');
  link.style.display = 'none';
  link.href = url;
  link.setAttribute('download', `${这里写文件名})`);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

new Blob的第二个参数可以按如下设置：

word文件：
.doc格式的设置为：application/vnd.msword;charset=utf-8
.docx格式的设置为：application/vnd.openxmlformats-officedocument.wordprocessingml.document

excel文件：
.xls格式的设置为：application/vnd.ms-excel
.xlsx格式的设置为：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

zip文件：
. zip格式的设置为：application/zip

https://juejin.cn/post/6844904183661854727
https://juejin.cn/post/6916675943343849479

# javascript # 前端 # vue.js
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

avatar 魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

avatar 魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r

avatar 魔乐社区