如何突破 Chrome 浏览器自动下载文件不超过 10 个的限制
我写的字幕工具箱中有一个批量双语字幕合并的功能，批量双语字幕合并 —— 字幕工具箱。
今天有用户反馈在 Chrome 浏览器上使用时，自动下载的文件数量被限制为 10 个，超过 10 个后就无法继续下载。
javascript - 在 Chrome 浏览器上自动下载文件限制为 10 个文件 - Stack Overflow — javascript - Automatic file downloads limited to 10 files on Chrome browser - Stack Overflow
经过调查发现，这是 Chrome 浏览器的一个限制，默认情况下，浏览器会限制自动下载的文件数量为 10 个，以防止恶意网站进行大量下载。
有两种解决方法：
间隔下载
如果您在每 10 次下载之间暂停一秒钟，则所有下载都将在 Chrome 中运行。当然，简单起见，也可以在每一次下载之后暂停一秒钟。
所以，首先可以写一个延迟函数，在每次下载后等待一段时间。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 创建延迟函数
const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
const handleBatchMergeAndDownload = async () => {
for (let i = 0; i < matchedFiles.length; i++) {
const group = matchedFiles[i];
await handleMergeAndDownload(group);
// 如果不是最后一组，则等待1秒
if (i < matchedFiles.length - 1) {
await delay(1000);
}
}
};
zip 打包下载
如果您需要下载的文件数量较多，或者希望用户能够一次性下载所有合并后的字幕文件，可以将这些文件打包成一个 ZIP 文件，然后提供下载链接。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import JSZip from 'jszip';
const handleBatchMergeZipDownload = async () => {
try {
const zip = new JSZip();
// 处理所有文件组
for (const group of matchedFiles) {
if (group.length < 2) continue;
const mergedContent = await mergeSubtitles(group);
// 为合并后的文件创建文件名
const firstFileName = group[0].name;
const getBaseName = (name: string) => name.split('.').slice(0, -1).join('.');
const getExtension = (name: string) => name.split('.').pop();
const baseName = getBaseName(firstFileName);
const extension = getExtension(firstFileName);
const mergedFileName = `${baseName}_merged.${extension}`;
// 添加到zip文件
zip.file(mergedFileName, mergedContent);
}
// 生成zip文件
const zipContent = await zip.generateAsync({ type: 'blob' });
// 创建下载链接
const url = URL.createObjectURL(zipContent);
const a = document.createElement('a');
a.href = url;
a.download = `merged_subtitles_${new Date().toISOString().slice(0,10)}.zip`;
a.click();
URL.revokeObjectURL(url);
} catch (error) {
console.error('创建ZIP文件时出错:', error);
alert('打包下载失败，请重试');
}
};
参考资料
如何绕开浏览器批量下载的限制前言 最近遇到一个需求，需要将批量选择的图片，批量一个个下载。 在浏览器中触发下载，我们可以 - 掘金
javascript - js 多文件下载，总是只下载10个？ - SegmentFault 思否