本教程详细讲解如何使用JavaScript解决动态生成链接的
跨域
文件下载问题，特别是当属性导致重定向而非下载时。我们将利用fetch API获取文件内容并结合Blob对象和URL.createObjectURL方法，实现可靠的客户端文件下载，同时讨论跨域资源共享（CORS）的关键作用及潜在的解决方案。
引言：动态链接与跨域下载的挑战
在Web开发中，我们经常会遇到需要从动态生成的链接下载文件的场景。这些链接可能存在于通过JavaScript动态添加到DOM中的表格或其他元素内。当下载链接指向的资源与当前页面不在同一个域（即跨域）时，传统的属性往往会失效，导致
浏览器
执行页面跳转（重定向）而非触发文件下载。这给用户体验和功能实现带来了困扰。
例如，以下HTML结构中包含一个动态生成的下载链接：
当用户点击 Download 链接时，如果 https://sample-videos.com 与当前页面域名不同，浏览器可能会直接跳转到图片地址，而不是下载图片。为了解决这一问题，我们需要借助JavaScript进行编程化下载。
核心原理：Fetch API、Blob与Object URL
要实现可靠的跨域文件下载，特别是当直接的属性失败时，我们可以利用以下浏览器API组合：
立即学习
“
Java免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
Fetch API
: 用于发起网络请求，以获取远程文件的数据流。它支持异步操作，并且能够处理二进制数据。
Blob 对象
: Blob（Binary Large Object）对象表示一个不可变的、原始数据的类文件对象。通过fetch获取的二进制文件数据可以被封装成一个Blob。
URL.createObjectURL()
: 这个静态方法可以创建一个DOMString，其中包含一个表示参数中给出的File对象或Blob对象的URL。这个URL是一个临时的、本地的URL，可以在当前文档的生命周期内引用该Blob对象。
编程化创建并点击 标签
: 利用生成的Object URL，我们可以动态创建一个隐藏的标签，将其href属性设置为Object URL，download属性设置为期望的文件名，然后模拟点击该标签来触发下载。
这种方法的核心优势在于，fetch API允许我们先将跨域文件内容获取到客户端内存中（如果CORS策略允许），然后通过Blob和Object URL在本地生成一个可下载的链接，从而绕开直接访问跨域URL可能导致的重定向问题。
实现步骤与代码示例
下面我们将详细介绍如何通过jQuery事件委托和上述JavaScript API实现动态链接的跨域文件下载。
1. 辅助函数：通过Blob触发下载
首先，定义一个辅助函数 downloadBlob，它接收一个Blob对象和文件名，并负责创建临时标签并触发下载。
2. 监听动态元素
点击事件
并触发下载
接下来，我们使用jQuery的事件委托机制来监听父容器（例如#example表格）内所有标签的点击事件。这种方式对于动态添加到DOM中的元素非常有效。
971122
12/23/1221
123123
I
Download
/**
* 通过Blob对象触发文件下载
* @param {Blob} blob - 要下载的Blob对象
* @param {string} filename - 下载文件的名称
*/
function downloadBlob(blob, filename) {
// 创建一个临时的URL，指向Blob对象
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none'; // 隐藏a标签，避免对页面布局产生影响
a.href = url;
a.download = filename; // 设置下载文件的名称
document.body.appendChild(a); // 将a标签添加到DOM中
a.click(); // 模拟点击a标签，触发下载
window.URL.revokeObjectURL(url); // 释放Object URL，避免内存泄漏
document.body.removeChild(a); // 移除临时a标签，清理DOM
}
// 使用jQuery进行事件委托，监听#example表格内所有标签的点击事件
$(document).on('click', '#example a', function(e) {
e.preventDefault(); // 阻止标签的默认跳转行为
const fileUrl = $(this).attr('href'); // 获取要下载的文件URL
// 从URL中提取文件名。例如，从"https://sample-videos.com/img/Sample-jpg-image-50kb.jpg"提取"Sample-jpg-image-50kb.jpg"
const filename = fileUrl.split('/').pop();
console.log(`尝试下载文件: ${filename} from ${fileUrl}`);
// 使用Fetch API获取文件内容
fetch(fileUrl)
.then(response => {
if (!response.ok) {
// 如果HTTP响应状态码不是2xx，则表示请求失败
// 这通常发生在CORS策略不允许跨域请求时
console.error(`Fetch请求失败，状态码: ${response.status}. 尝试直接链接下载作为备用方案。`);
// 备用方案：直接创建并点击a标签。此时文件可能仍会重定向而非下载，但这是在fetch失败时的最后尝试。
const fallbackLink = document.createElement('a');
fallbackLink.style.display = 'none';
fallbackLink.href = fileUrl;
fallbackLink.download = filename;
document.body.appendChild(fallbackLink);
fallbackLink.click();
document.body.removeChild(fallbackLink);
throw new Error(`HTTP Error: ${response.status}`); // 抛出错误以中断Promise链
}
return response.blob(); // 将响应体解析为Blob对象
})
.then(blob => {
// 成功获取Blob后，调用辅助函数进行下载
downloadBlob(blob, filename);
console.log(`文件 "${filename}" 已开始下载。`);
})
.catch(error => {
console.error('文件下载过程中发生错误:', error);
// 如果fetch失败（例如网络错误或CORS预检失败），
// 且之前未触发HTTP错误导致的备用方案，则再次尝试备用方案或给出用户提示