文件下载，搞懂这9种场景就够了（下）
六、附件形式下载
在服务端下载的场景中，附件形式下载是一种比较常见的场景。在该场景下，我们通过设置 Content-Disposition 响应头来指示响应的内容以何种形式展示，是以内联（inline）的形式，还是以附件（attachment）的形式下载并保存到本地。
Content-Disposition: inline
Content-Disposition: attachment
Content-Disposition: attachment; filename="mouth.png"
而在 HTTP 表单的场景下， Content-Disposition 也可以作为 multipart body 中的消息头：
Content-Disposition: form-data
Content-Disposition: form-data; name="fieldName"
Content-Disposition: form-data; name="fieldName"; filename="filename.jpg"
第 1 个参数总是固定不变的 form-data；附加的参数不区分大小写，并且拥有参数值，参数名与参数值用等号（=）连接，参数值用双引号括起来。参数之间用分号（;）分隔。
了解完 Content-Disposition 的作用之后，我们来看一下如何实现以附件形式下载的功能。Koa 是一个简单易用的 Web 框架，它的特点是优雅、简洁、轻量、自由度高。所以我们选择它来搭建文件服务，并使用 @koa/router 中间件来处理路由：
// attachment/file-server.js
const fs = require("fs");
const path = require("path");
const Koa = require("koa");
const Router = require("@koa/router");
const app = new Koa();
const router = new Router();
const PORT = 3000;
const STATIC_PATH = path.join(__dirname, "./static/");
// http://localhost:3000/file?filename=mouth.png
router.get("/file", async (ctx, next) => {
const { filename } = ctx.query;
const filePath = STATIC_PATH + filename;
const fStats = fs.statSync(filePath);
ctx.set({
"Content-Type": "application/octet-stream",
"Content-Disposition": `attachment; filename=${filename}`,
"Content-Length": fStats.size,
});
ctx.body = fs.createReadStream(filePath);
});
// 注册中间件
app.use(async (ctx, next) => {
try {
await next();
} catch (error) {
// ENOENT（无此文件或目录）：通常是由文件操作引起的，这表明在给定的路径上无法找到任何文件或目录
ctx.status = error.code === "ENOENT" ? 404 : 500;
ctx.body = error.code === "ENOENT" ? "文件不存在" : "服务器开小差";
}
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(PORT, () => {
console.log(`应用已经启动：http://localhost:${PORT}/`);
});
以上的代码被保存在 attachment 目录下的 file-server.js 文件中，该目录下还有一个 static 子目录用于存放静态资源。目前 static 目录下包含以下 3 个 png 文件。
├── file-server.js
└── static
├── body.png
├── eyes.png
└── mouth.png
当你运行 node file-server.js 命令成功启动文件服务器之后，就可以通过正确的 URL 地址来下载 static 目录下的文件。比如在浏览器中打开 http://localhost:3000/file?filename=mouth.png 这个地址，你就会开始下载 mouth.png 文件。而如果指定的文件不存在的话，就会返回文件不存在。
Koa 内核很简洁，扩展功能都是通过中间件来实现。比如常用的路由、CORS、静态资源处理等功能都是通过中间件实现。因此要想掌握 Koa 这个框架，核心是掌握它的中间件机制。若你想深入了解 Koa 的话，可以阅读 如何更好地理解中间件和洋葱模型 这篇文章。
在编写 HTML 网页时，对于一些简单图片，通常会选择将图片内容直接内嵌在网页中，从而减少不必要的网络请求，但是图片数据是二进制数据，该怎么嵌入呢？绝大多数现代浏览器都支持一种名为 Data URLs 的特性，允许使用 Base64 对图片或其他文件的二进制数据进行编码，将其作为文本字符串嵌入网页中。所以文件也可以通过 Base64 的格式进行传输，接下来我们将介绍如何下载 Base64 格式的图片。
附件形式下载示例：attachment
七、base64 格式下载
Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法。由于 2⁶ = 64 ，所以每 6 个比特为一个单元，对应某个可打印字符。3 个字节有 24 个比特，对应于 4 个 base64 单元，即 3 个字节可由 4 个可打印字符来表示。相应的转换过程如下图所示：
Base64 常用在处理文本数据的场合，表示、传输、存储一些二进制数据，包括 MIME 的电子邮件及 XML 的一些复杂数据。 在 MIME 格式的电子邮件中，base64 可以用来将二进制的字节序列数据编码成 ASCII 字符序列构成的文本。使用时，在传输编码方式中指定 base64。使用的字符包括大小写拉丁字母各 26 个、数字 10 个、加号 + 和斜杠 /，共 64 个字符，等号 = 用来作为后缀用途。
Base64 的相关内容就先介绍到这，如果你想进一步了解 Base64 的话，可以阅读 一文读懂base64编码 这篇文章。下面我们来看一下具体实现代码：
7.1 前端代码
html
在以下 HTML 代码中，我们通过 select 元素来让用户选择要下载的图片。当用户切换不同的图片时，img#imgPreview 元素中显示的图片会随之发生变化。
<h3>base64 下载示例</h3>
<img id="imgPreview" src="./static/body.png" />
<select id="picSelect">
<option value="body">body.png</option>
<option value="eyes">eyes.png</option>
<option value="mouth">mouth.png</option>
</select>
<button onclick="download()">下载</button>
js
const picSelectEle = document.querySelector("#picSelect");
const imgPreviewEle = document.querySelector("#imgPreview");
picSelectEle.addEventListener("change", (event) => {
imgPreviewEle.src = "./static/" + picSelectEle.value + ".png";
});
const request = axios.create({
baseURL: "http://localhost:3000",
timeout: 60000,
});
async function download() {
const response = await request.get("/file", {
params: {
filename: picSelectEle.value + ".png",
},
});
if (response && response.data && response.data.code === 1) {
const fileData = response.data.data;
const { name, type, content } = fileData;
const imgBlob = base64ToBlob(content, type);
saveAs(imgBlob, name);
}
}
在用户选择好需要下载的图片并点击下载按钮时，就会调用以上代码中的 download 函数。在该函数内部，我们利用 axios 实例的 get 方法发起 HTTP 请求来获取指定的图片。因为返回的是 base64 格式的图片，所以在调用 FileSaver 提供的 saveAs 方法前，我们需要将 base64 字符串转换成 blob 对象，该转换是通过以下的 base64ToBlob 函数来完成，该函数的具体实现如下所示：
function base64ToBlob(base64, mimeType) {
let bytes = window.atob(base64);
let ab = new ArrayBuffer(bytes.length);
let ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: mimeType });
}
7.2 服务端代码
// base64/file-server.js
const fs = require("fs");
const path = require("path");
const mime = require("mime");
const Koa = require("koa");
const cors = require("@koa/cors");
const Router = require("@koa/router");
const app = new Koa();
const router = new Router();
const PORT = 3000;
const STATIC_PATH = path.join(__dirname, "./static/");
router.get("/file", async (ctx, next) => {
const { filename } = ctx.query;
const filePath = STATIC_PATH + filename;
const fileBuffer = fs.readFileSync(filePath);
ctx.body = {
code: 1,
data: {
name: filename,
type: mime.getType(filename),
content: fileBuffer.toString("base64"),
},
};
});
// 注册中间件
app.use(async (ctx, next) => {
try {
await next();
} catch (error) {
ctx.body = {
code: 0,
msg: "服务器开小差",
};
}
});
app.use(cors());
app.use(router.routes()).use(router.allowedMethods());
app.listen(PORT, () => {
console.log(`应用已经启动：http://localhost:${PORT}/`);
});
在以上代码中，对图片进行 Base64 编码的操作是定义在 /file 路由对应的路由处理器中。当该服务器接收到客户端发起的文件下载请求，比如 GET /file?filename=body.png HTTP/1.1 时，就会从 ctx.query 对象上获取 filename 参数。该参数表示文件的名称，在获取到文件的名称之后，我们就可以拼接出文件的绝对路径，然后通过 Node.js 平台提供的 fs.readFileSync 方法读取文件的内容，该方法会返回一个 Buffer 对象。在成功读取文件的内容之后，我们会继续调用 Buffer 对象的 toString 方法对文件内容进行 Base64 编码，最终所下载的图片将以 Base64 格式返回到客户端。
base64 格式下载示例：base64
八、chunked 下载
分块传输编码主要应用于如下场景，即要传输大量的数据，但是在请求在没有被处理完之前响应的长度是无法获得的。例如，当需要用从数据库中查询获得的数据生成一个大的 HTML 表格的时候，或者需要传输大量的图片的时候。
要使用分块传输编码，则需要在响应头配置 Transfer-Encoding 字段，并设置它的值为 chunked 或 gzip, chunked：
Transfer-Encoding: chunked
Transfer-Encoding: gzip, chunked
响应头 Transfer-Encoding 字段的值为 chunked，表示数据以一系列分块的形式进行发送。需要注意的是 Transfer-Encoding 和 Content-Length 这两个字段是互斥的，也就是说响应报文中这两个字段不能同时出现。下面我们来看一下分块传输的编码规则：
- 每个分块包含分块长度和数据块两个部分；
- 分块长度使用 16 进制数字表示，以
\r\n结尾； - 数据块紧跟在分块长度后面，也使用
\r\n结尾，但数据不包含\r\n； - 终止块是一个常规的分块，表示块的结束。不同之处在于其长度为 0，即
0\r\n\r\n。
了解完分块传输的编码规则，我们来看如何利用分块传输编码实现文件下载。
8.1 前端代码
html5
<h3>chunked 下载示例</h3>
<button onclick="download()">下载</button>
js
const chunkedUrl = "http://localhost:3000/file?filename=file.txt";
function download() {
return fetch(chunkedUrl)
.then(processChunkedResponse)
.then(onChunkedResponseComplete)
.catch(onChunkedResponseError);
}
function processChunkedResponse(response) {
let text = "";
let reader = response.body.getReader();
let decoder = new TextDecoder();
return readChunk();
function readChunk() {
return reader.read().then(appendChunks);
}
function appendChunks(result) {
let chunk = decoder.decode(result.value || new Uint8Array(), {
stream: !result.done,
});
console.log("已接收到的数据：", chunk);
console.log("本次已成功接收", chunk.length, "bytes");
text += chunk;
console.log("目前为止共接收", text.length, "bytes\n");
if (result.done) {
return text;
} else {
return readChunk();
}
}
}
function onChunkedResponseComplete(result) {
let blob = new Blob([result], {
type: "text/plain;charset=utf-8",
});
saveAs(blob, "hello.txt");
}
function onChunkedResponseError(err) {
console.error(err);
}
当用户点击 下载 按钮时，就会调用以上代码中的 download 函数。在该函数内部，我们会使用 Fetch API 来执行下载操作。因为服务端的数据是以一系列分块的形式进行发送，所以在浏览器端我们是通过流的形式进行接收。即通过 response.body 获取可读的 ReadableStream，然后用 ReadableStream.getReader() 创建一个读取器，最后调用 reader.read 方法来读取已返回的分块数据。
因为 file.txt 文件的内容是普通文本，且 result.value 的值是 Uint8Array 类型的数据，所以在处理返回的分块数据时，我们使用了 TextDecoder 文本解码器。一个解码器只支持一种特定文本编码，例如 utf-8、iso-8859-2、koi8、cp1261，gbk 等等。
如果收到的分块非 终止块，result.done 的值是 false，则会继续调用 readChunk 方法来读取分块数据。而当接收到 终止块 之后，表示分块数据已传输完成。此时，result.done 属性就会返回 true。从而会自动调用 onChunkedResponseComplete 函数，在该函数内部，我们以解码后的文本作为参数来创建 Blob 对象。之后，继续使用 FileSaver 库提供的 saveAs 方法实现文件下载。
这里我们用 Wireshark 网络包分析工具，抓了个数据包。具体如下图所示：
从图中我们可以清楚地看到在 HTTP chunked response 下面包含了 Data chunk（数据块） 和 End of chunked encoding（终止块）。接下来，我们来看一下服务端的代码。
8.2 服务端代码
const fs = require("fs");
const path = require("path");
const Koa = require("koa");
const cors = require("@koa/cors");
const Router = require("@koa/router");
const app = new Koa();
const router = new Router();
const PORT = 3000;
router.get("/file", async (ctx, next) => {
const { filename } = ctx.query;
const filePath = path.join(__dirname, filename);
ctx.set({
"Content-Type": "text/plain;charset=utf-8",
});
ctx.body = fs.createReadStream(filePath);
});
// 注册中间件
app.use(async (ctx, next) => {
try {
await next();
} catch (error) {
// ENOENT（无此文件或目录）：通常是由文件操作引起的，这表明在给定的路径上无法找到任何文件或目录
ctx.status = error.code === "ENOENT" ? 404 : 500;
ctx.body = error.code === "ENOENT" ? "文件不存在" : "服务器开小差";
}
});
app.use(cors());
app.use(router.routes()).use(router.allowedMethods());
app.listen(PORT, () => {
console.log(`应用已经启动：http://localhost:${PORT}/`);
});
在 /file 路由处理器中，我们先通过 ctx.query 获得 filename 文件名，接着拼接出该文件的绝对路径，然后通过 Node.js 平台提供的 fs.createReadStream 方法创建可读流。最后把已创建的可读流赋值给 ctx.body 属性，从而向客户端返回图片数据。
现在我们已经知道可以利用分块传输编码（Transfer-Encoding）实现数据的分块传输，那么有没有办法获取指定范围内的文件数据呢？对于这个问题，我们可以利用 HTTP 协议的范围请求。接下来，我们将介绍如何利用 HTTP 范围请求来下载指定范围的数据。
chunked 下载示例：chunked
九、范围下载
HTTP 协议范围请求允许服务器只发送 HTTP 消息的一部分到客户端。范围请求在传送大的媒体文件，或者与文件下载的断点续传功能搭配使用时非常有用。如果在响应中存在 Accept-Ranges 首部（并且它的值不为 “none”），那么表示该服务器支持范围请求。
在一个 Range 首部中，可以一次性请求多个部分，服务器会以 multipart 文件的形式将其返回。如果服务器返回的是范围响应，需要使用 206 Partial Content 状态码。假如所请求的范围不合法，那么服务器会返回 416 Range Not Satisfiable 状态码，表示客户端错误。服务器允许忽略 Range 首部，从而返回整个文件，状态码用 200 。
Range 语法：
Range: <unit>=<range-start>-
Range: <unit>=<range-start>-<range-end>
Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>
Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>, <range-start>-<range-end>
unit：范围请求所采用的单位，通常是字节（bytes）。<range-start>：一个整数，表示在特定单位下，范围的起始值。<range-end>：一个整数，表示在特定单位下，范围的结束值。这个值是可选的，如果不存在，表示此范围一直延伸到文档结束。
了解完 Range 语法之后，我们来看一下实际的使用示例：
# 单一范围
$ curl http://i.imgur.com/z4d4kWk.jpg -i -H "Range: bytes=0-1023"
# 多重范围
$ curl http://www.example.com -i -H "Range: bytes=0-50, 100-150"
9.1 前端代码
html
<h3>范围下载示例</h3>
<button onclick="download()">下载</button>
js
async function download() {
try {
let rangeContent = await getBinaryContent(
"http://localhost:3000/file.txt",
0, 100, "text"
);
const blob = new Blob([rangeContent], {
type: "text/plain;charset=utf-8",
});
saveAs(blob, "hello.txt");
} catch (error) {
console.error(error);
}
}
function getBinaryContent(url, start, end, responseType = "arraybuffer") {
return new Promise((resolve, reject) => {
try {
let xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.setRequestHeader("range", `bytes=${start}-${end}`);
xhr.responseType = responseType;
xhr.onload = function () {
resolve(xhr.response);
};
xhr.send();
} catch (err) {
reject(new Error(err));
}
});
}
当用户点击 下载 按钮时，就会调用 download 函数。在该函数内部会通过调用 getBinaryContent 函数来发起范围请求。对应的 HTTP 请求报文如下所示：
GET /file.txt HTTP/1.1
Host: localhost:3000
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36
Accept: */*
Accept-Encoding: identity
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,id;q=0.7
Range: bytes=0-100
而当服务器接收到该范围请求之后，会返回对应的 HTTP 响应报文：
HTTP/1.1 206 Partial Content
Vary: Origin
Access-Control-Allow-Origin: null
Accept-Ranges: bytes
Last-Modified: Fri, 09 Jul 2021 00:17:00 GMT
Cache-Control: max-age=0
Content-Type: text/plain; charset=utf-8
Date: Sat, 10 Jul 2021 02:19:39 GMT
Connection: keep-alive
Content-Range: bytes 0-100/2590
Content-Length: 101
从以上的 HTTP 响应报文中，我们见到了前面介绍的 206 状态码和 Accept-Ranges 首部。此外，通过 Content-Range 首部，我们就知道了文件的总大小。在成功获取到范围请求的响应体之后，我们就可以使用返回的内容作为参数，调用 Blob 构造函数创建对应的 Blob 对象，进而使用 FileSaver 库提供的 saveAs 方法来下载文件了。
9.2 服务端代码
const Koa = require("koa");
const cors = require("@koa/cors");
const serve = require("koa-static");
const range = require("koa-range");
const PORT = 3000;
const app = new Koa();
// 注册中间件
app.use(cors());
app.use(range);
app.use(serve("."));
app.listen(PORT, () => {
console.log(`应用已经启动：http://localhost:${PORT}/`);
});
服务端的代码相对比较简单，范围请求是通过 koa-range 中间件来实现的。由于篇幅有限，阿宝哥就不展开介绍了。感兴趣的小伙伴，可以自行阅读该中间件的源码。其实范围请求还可以应用在大文件下载的场景，如果文件服务器支持范围请求的话，客户端在下载大文件的时候，就可以考虑使用大文件分块下载的方案。
范围下载示例：range
十、大文件分块下载
相信有些小伙伴已经了解大文件上传的解决方案，在上传大文件时，为了提高上传的效率，我们一般会使用 Blob.slice 方法对大文件按照指定的大小进行切割，然后在开启多线程进行分块上传，等所有分块都成功上传后，再通知服务端进行分块合并。
那么对大文件下载来说，我们能否采用类似的思想呢？其实在服务端支持 Range 请求首部的条件下，我们也是可以实现大文件分块下载的功能，具体处理方案如下图所示：
因为在 JavaScript 中如何实现大文件并发下载？ 这篇文章中，阿宝哥已经详细介绍了大文件并发下载的方案，所以这里就不展开介绍了。我们只回顾一下大文件并发下载的完整流程：
其实在大文件分块下载的场景中，我们使用了 async-pool 这个库来实现并发控制。该库提供了 ES7 和 ES6 两种不同版本的实现，代码很简洁优雅。如果你想了解 async-pool 是如何实现并发控制的，可以阅读 JavaScript 中如何实现并发控制？ 这篇文章。
大文件分块下载示例：big-file
十一、总结
本文阿宝哥详细介绍了文件下载的 9 种场景，希望阅读完本文后，你对 9 种场景背后使用的技术有一定的了解。其实在传输文件的过程中，为了提高传输效率，我们可以使用 gzip、deflate 或 br 等压缩算法对文件进行压缩。由于篇幅有限，阿宝哥就不展开介绍了，如果你感兴趣的话，可以阅读 HTTP 传输大文件的几种方案 这篇文章。
链接：https://juejin.cn/post/6989413354628448264
