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

<table id="example" class="table table-striped dataTable no-footer" style="width: 100%;" aria-describedby="example_info">
    <tbody>
        <tr class="odd">
            <td class="sorting_1">971122</td>
            <td>12/23/1221</td>
            <td>123123</td>
            <td>I</td>
            <td><a id="downloadImage" href="https://sample-videos.com/img/Sample-jpg-image-50kb.jpg">Download</a></td>
            <td>
                <button type="button" id="delete" class="btn btn-sm btn-outline-secondary">Delete</button>
                <button type="button" id="edit" class="btn btn-sm btn-outline-secondary">Edit</button>
            </td>
        </tr>
        <!-- 更多动态生成的行... -->
    </tbody>
</table>

/**
 * 通过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表格内所有<a>标签的点击事件
$(document).on('click', '#example a', function(e) {
    e.preventDefault(); // 阻止<a>标签的默认跳转行为

    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错误导致的备用方案，则再次尝试备用方案或给出用户提示