使用 JavaScript/jQuery 下载文件

使用隐形：<iframe>

<iframe id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) {
    document.getElementById('my_iframe').src = url;
};
</script>

若要强制浏览器下载它本来能够呈现的文件（如 HTML 或文本文件），需要服务器将该文件的 MIME 类型设置为一个荒谬的值，例如 或 或者 用于任意二进制数据。application/x-please-download-meapplication/octet-stream

如果只想在新选项卡中打开它，则执行此操作的唯一方法是让用户单击其属性设置为 的链接。target_blank

在 jQuery 中：

$('a#someID').attr({target: '_blank', 
                    href  : 'http://localhost/directory/file.pdf'});

每当单击该链接时，它将在新的选项卡/窗口中下载文件。

2019年现代浏览器更新

这是我现在推荐的方法，但需要注意一些：

• 需要一个相对现代的浏览器
• 如果预计文件非常大，则可能应执行与原始方法（iframe 和 cookie）类似的操作，因为以下某些操作可能消耗的系统内存至少与正在下载的文件一样大和/或其他有趣的 CPU 副作用。

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // the filename you want
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!'); // or you know, something with better UX...
  })
  .catch(() => alert('oh no!'));

2012 年原创的基于 jQuery/iframe/cookie 的方法

我已经创建了jQuery文件下载插件（演示）（GitHub），这也可以帮助您解决您的情况。它与iframe的工作方式非常相似，但具有一些很酷的功能，我发现这些功能非常方便：

• 非常容易设置漂亮的视觉效果（jQuery UI对话框，但不是必需的），一切都经过测试

• 用户永远不会离开他们从中启动文件下载的同一页面。此功能对于现代 Web 应用程序越来越重要

• successCallback 和 failCallback 函数允许您明确用户在任一情况下看到的内容

• 结合jQuery UI，开发人员可以轻松显示一个模式，告诉用户正在进行文件下载，在下载开始后解散模式，甚至以友好的方式通知用户发生了错误。有关此示例，请参阅演示。希望这有助于某人！

这是一个简单的用例演示，使用带有承诺的插件源。演示页面还包括许多其他“更好的UX”示例。

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });