在 Web 开发中，有时候我们希望用户可以下载一些文件，例如图片、文档、压缩包等。而 JavaScript 提供了两种非常简单的方式来实现文件下载的功能。

1. 使用 a 标签的 download 属性

在 HTML5 中，可以通过给 a 标签添加一个 download 属性来实现文件下载的功能。具体的步骤如下：

1. 创建一个 a 标签。
2. 设置 href 属性为文件的 URL。
3. 设置 download 属性为文件的文件名。

示例代码如下：

<a href="/path/to/file.jpg" download="filename.jpg">点击下载图片</a>

这样，当用户点击链接时，浏览器会自动下载指定的文件。

需要注意的是，这种方式只适用于支持 HTML5 的浏览器。对于老的浏览器，需要使用第二种方式。

2. 使用 JavaScript 动态创建并点击隐藏的 a 标签

这种方式适用于所有的浏览器，包括不支持 HTML5 的浏览器。只需要使用 JavaScript 动态创建一个带有正确 href 和 download 属性的 a 标签，并模拟点击即可。

示例代码如下：

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

使用时，调用 downloadFile 函数，并传入文件的 URL 和文件名作为参数即可。

downloadFile('/path/to/file.jpg', 'filename.jpg');

这样，浏览器会自动下载指定的文件，并且对于不支持 HTML5 的浏览器也可以兼容。

总结

通过以上两种方式，我们可以轻松实现 JavaScript 文件下载的功能。第一种方式适用于支持 HTML5 的现代浏览器，而第二种方式适用于所有的浏览器。根据实际情况选择合适的方式来实现文件下载，提升用户体验。

希望通过本文的介绍，使大家对 JavaScript 文件下载有更深入的了解。试试以上两种方式，为你的网站或应用程序添加文件下载功能吧！

本文来自极简博客，作者：开发者心声，转载请注明原文链接：Js文件下载的两种方式超简单