JavaScript实现跨域动态链接文件下载：解决重定向问题

在Web开发中，我们经常会遇到需要从动态生成的链接下载文件的场景。这些链接可能存在于通过JavaScript动态添加到DOM中的表格或其他元素内。当下载链接指向的资源与当前页面不在同一个域（即跨域）时，传统的属性往往会失效，导致浏览器执行页面跳转（重定向）而非触发文件下载。这给用户体验和功能实现带来了困扰。

例如，以下HTML结构中包含一个动态生成的下载链接：

    

        

            
971122
            
12/23/1221
            
123123
            
I
            
Download
            

                Delete
                Edit
            
        
        
    

当用户点击 Download 链接时，如果 https://sample-videos.com 与当前页面域名不同，浏览器可能会直接跳转到图片地址，而不是下载图片。为了解决这一问题，我们需要借助JavaScript进行编程化下载。

核心原理：Fetch API、Blob与Object URL

要实现可靠的跨域文件下载，特别是当直接的属性失败时，我们可以利用以下浏览器API组合：

立即学习“Java免费学习笔记（深入）

DreamGen

一个AI驱动的角色扮演和故事写作的平台

下载

1. Fetch API: 用于发起网络请求，以获取远程文件的数据流。它支持异步操作，并且能够处理二进制数据。
2. Blob 对象: Blob（Binary Large Object）对象表示一个不可变的、原始数据的类文件对象。通过fetch获取的二进制文件数据可以被封装成一个Blob。
3. URL.createObjectURL(): 这个静态方法可以创建一个DOMString，其中包含一个表示参数中给出的File对象或Blob对象的URL。这个URL是一个临时的、本地的URL，可以在当前文档的生命周期内引用该Blob对象。
4. 编程化创建并点击 标签: 利用生成的Object URL，我们可以动态创建一个隐藏的标签，将其href属性设置为Object URL，download属性设置为期望的文件名，然后模拟点击该标签来触发下载。

这种方法的核心优势在于，fetch API允许我们先将跨域文件内容获取到客户端内存中（如果CORS策略允许），然后通过Blob和Object URL在本地生成一个可下载的链接，从而绕开直接访问跨域URL可能导致的重定向问题。

实现步骤与代码示例

下面我们将详细介绍如何通过jQuery事件委托和上述JavaScript API实现动态链接的跨域文件下载。

1. 辅助函数：通过Blob触发下载

首先，定义一个辅助函数 downloadBlob，它接收一个Blob对象和文件名，并负责创建临时标签并触发下载。

/**
 * 通过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
}

2. 监听动态元素点击事件并触发下载

接下来，我们使用jQuery的事件委托机制来监听父容器（例如#example表格）内所有标签的点击事件。这种方式对于动态添加到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错误导致的备用方案，则再次尝试备用方案或给出用户提示