如何通过 JavaScript 实现点击按钮下载

在现代 Web 开发中，有时我们需要提供用户点击按钮直接下载文件的功能，而不是简单地让浏览器直接访问链接。这种方式更加直观且用户体验更好，因为它避免了用户在新标签页或当前页面中打开文件的麻烦。

首先解释几个问题：

Q：为什么触发下载操作而不是直接访问链接？

A：触发下载操作能够确保文件直接保存到用户的设备，而不会在浏览器中打开，从而提高用户体验并确保用户获取文件的完整性。直接访问链接，浏览器可能不会触发下载操作，而是直接解析了这个文件。

Q：为什么用 button 按钮而不是 a 标签

A：使用 button 按钮可以更好地满足交互性需求，并且它的样式和行为更容易与其他表单元素保持一致，而 a 标签通常用于页面跳转或链接访问，功能相对单一。

示例代码

<button id="downloadButton">下载文件</button>

<script>
  document
    .getElementById("downloadButton")
    .addEventListener("click", function () {
      const fileUrl = "path/to/your/file.pdf"; // 文件的实际路径
      const fileName = "your-file-name.pdf"; // 下载时保存的文件名

      const a = document.createElement("a"); // 创建一个 <a> 标签元素
      a.href = fileUrl; // 设置下载链接
      a.download = fileName; // 设置下载文件名
      document.body.appendChild(a); // 将 <a> 标签添加到页面
      a.click(); // 模拟点击 <a> 标签，触发下载
      document.body.removeChild(a); // 删除 <a> 标签，清理DOM
    });
</script>

解释

在这个代码片段中，我们首先通过 getElementById 方法获取到页面中的下载按钮，并添加一个点击事件监听器。当按钮被点击时，代码动态创建了一个 a 标签元素，并将文件的下载路径和保存的文件名分别赋值给 href 和 download 属性。接着，临时将这个标签添加到页面的 DOM 树中，模拟一次点击事件来触发下载，最后将这个标签从 DOM 树中移除，确保页面不会受到任何影响。

问题

Q：为什么在代码里面要模拟一个 a 标签

A：在代码中模拟一个 a 标签是为了利用 a 标签的 download 属性，这是 HTML5 提供的一个简便方法，能够告诉浏览器将链接指向的资源作为下载处理。