当前位置：首页 > jquery

jquery下载文件

2026-04-08 07:10:40jquery

jQuery 下载文件的方法

使用 jQuery 下载文件可以通过几种方式实现，以下是常见的几种方法：

方法一：通过创建隐藏的 <a> 标签触发下载

创建一个隐藏的 <a> 标签，设置其 href 为文件的 URL，并触发点击事件。这种方法适用于已知文件 URL 的情况。

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

// 调用示例
downloadFile('https://example.com/file.pdf', 'my_file.pdf');

方法二：通过 AJAX 请求下载文件

如果需要从服务器动态获取文件内容，可以使用 AJAX 请求获取文件数据，然后通过 Blob 对象创建下载链接。

function downloadFileViaAjax(url, filename) {
    $.ajax({
        url: url,
        method: 'GET',
        xhrFields: {
            responseType: 'blob'
        },
        success: function(data) {
            var blob = new Blob([data]);
            var downloadUrl = URL.createObjectURL(blob);
            var link = document.createElement('a');
            link.href = downloadUrl;
            link.download = filename || 'downloaded_file';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(downloadUrl);
        },
        error: function(xhr, status, error) {
            console.error('Error downloading file:', error);
        }
    });
}

// 调用示例
downloadFileViaAjax('https://example.com/file.pdf', 'my_file.pdf');

方法三：直接通过表单提交下载文件

如果需要传递参数或使用 POST 请求下载文件，可以通过动态创建表单实现。

jquery下载文件

function downloadFileViaForm(url, params, method) {
    method = method || 'POST';
    var form = document.createElement('form');
    form.method = method;
    form.action = url;
    form.style.display = 'none';

    if (params) {
        for (var key in params) {
            if (params.hasOwnProperty(key)) {
                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = key;
                input.value = params[key];
                form.appendChild(input);
            }
        }
    }

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

// 调用示例
downloadFileViaForm('https://example.com/download', { id: 123 }, 'POST');