当前位置：首页 > jquery

jquery文件下载

2026-02-03 09:18:26jquery

jQuery 文件下载方法

使用 jQuery 实现文件下载可以通过以下方式完成，适用于前端动态触发下载操作。

动态创建下载链接 通过创建隐藏的 <a> 标签并触发点击事件实现下载：

function downloadFile(url, filename) {
    const link = document.createElement('a');
    link.href = url;
    link.download = filename || 'file';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

// 调用示例
$('#downloadBtn').click(function() {
    downloadFile('https://example.com/file.pdf', 'document.pdf');
});

通过 AJAX 下载二进制文件 适用于需要先获取文件内容的场景（注意跨域限制）：

$.ajax({
    url: 'https://example.com/file',
    method: 'GET',
    xhrFields: {
        responseType: 'blob'
    },
    success: function(data) {
        const blobUrl = URL.createObjectURL(data);
        const link = document.createElement('a');
        link.href = blobUrl;
        link.download = 'file.ext';
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(blobUrl);
        document.body.removeChild(link);
    }
});

表单提交下载 适用于需要传递参数的场景：

$('#downloadForm').submit(function(e) {
    e.preventDefault();
    const form = this;
    const url = $(form).attr('action');
    const method = $(form).attr('method') || 'GET';
    const data = $(form).serialize();

    if (method === 'GET') {
        window.location.href = url + '?' + data;
    } else {
        const iframe = $('<iframe style="display:none;"></iframe>');
        $('body').append(iframe);
        $(form).attr('target', iframe.attr('id')).submit();
        setTimeout(() => iframe.remove(), 10000);
    }
});

注意事项

跨域问题：直接下载需确保目标服务器允许跨域请求（CORS 配置）。
文件名处理：后端可通过响应头 Content-Disposition: attachment; filename="xxx" 指定文件名。
大文件处理：推荐直接使用链接下载，避免内存问题。

服务端配合示例（PHP）

header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="downloaded_file.txt"');
readfile('/path/to/file.txt');

以上方法可根据实际需求选择，优先推荐第一种直接链接方式实现简单下载。

jquery文件下载