如何通过 JavaScript/jQuery 在新窗口中下载文件？

2024-03-04 00:15:32

通过 JavaScript/jQuery 在新窗口中下载文件：全面指南

引言

在现代 Web 应用程序中，经常需要在用户点击某个链接时从网站下载文件。然而，直接使用 window.href 方法会导致当前页面内容被下载文件覆盖，造成用户体验不佳。为了解决这个问题，本文将详细介绍使用 JavaScript/jQuery 在新窗口或标签页中下载文件的有效技巧。

创建下载链接

下载链接是一个普通的 HTML 链接，其 href 属性指向要下载的文件路径。

<a id="downloadLink" href="path/to/file.ext">下载文件</a>

处理单击事件

要启用下载，我们需要为下载链接添加一个单击事件处理程序。jQuery 提供了一种简洁的方法来实现这一点：

$('#downloadLink').click(function(e) {
  // 阻止默认行为（替换当前页面）
  e.preventDefault();

  // 创建新的窗口或标签页
  var newWindow = window.open();

  // 设置新窗口或标签页的 `location` 属性以启动下载
  newWindow.location.href = $(this).attr('href');
});

代码示例

将上述代码段嵌入 Web 应用程序后，以下完整的代码示例将演示如何从一个简单的链接启动文件下载：

<html>
<head>
  <script src="jquery.js"></script>
  <script>
    $(function() {
      $('#downloadLink').click(function(e) {
        e.preventDefault();
        var newWindow = window.open();
        newWindow.location.href = $(this).attr('href');
      });
    });
  </script>
</head>
<body>
  <a id="downloadLink" href="path/to/file.ext">下载文件</a>
</body>
</html>