wshy-docs

Appearance

前端文件下载方法总结 ​

前端涉及到的文件下载场景非常多，本文将介绍几种常见的前端文件下载方法，并探讨它们的优缺点。

1. 使用 <a> 标签 ​

通过 <a> 标签的 download 属性实现文件下载是最简单且常用的方法。

示例代码 ​

<a href="http://www.example.com/sample.pdf" download="SampleFile.pdf">下载</a>

注意事项 ​

  • <a> 标签的 download 属性只能用于同源文件。对于跨域的资源，如图片、音视频等，浏览器会默认进行预览而不是下载。

  • 可以通过 JavaScript 动态创建 <a> 标签来触发下载：

    javascript
    const a = document.createElement('a');
a.href = 'http://www.example.com/sample.pdf';
a.download = 'SampleFile.pdf';
a.click();

2. 使用 window.open() ​

window.open() 方法也可以用于触发文件下载，但其行为类似于在新标签页中打开资源。

示例代码 ​

js
window.open('http://www.example.com/sample.pdf', '_blank');

注意事项 ​

  • 不能下载 HTML、XML 等会被浏览器当作文档解析的文件类型，因为这些文件会在新标签页中直接打开。
  • 与 <a> 标签类似，不能下载跨域文件。

3. 使用 location.href ​

直接通过修改 location.href 也可以触发下载，但这种方法会导致当前页面跳转。

示例代码 ​

js
location.href = 'http://www.example.com/sample.pdf';

4. 使用 XMLHttpRequest 或 Fetch API ​

通过 AJAX 请求文件内容，然后使用 JavaScript 创建一个可下载的链接。

示例代码 ​

javascriptCopy codeconst xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/sample.pdf', true);
xhr.responseType = 'blob'; // 重要：设置响应类型为 Blob

xhr.onload = function () {
  if (this.status === 200) {
    const blob = new Blob([this.response], { type: 'application/pdf' });
    const downloadUrl = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = 'SampleFile.pdf';
    document.body.appendChild(a);
    a.click();
    URL.revokeObjectURL(downloadUrl); // 清理资源
  }
};

xhr.send();

注意事项 ​

  • 使用 Blob 和 URL.createObjectURL() 可以处理任意类型的文件，并允许设置自定义文件名。
  • 需要在下载完成后使用 URL.revokeObjectURL() 来释放由 URL.createObjectURL() 创建的对象 URL。

总结 ​

虽然有多种实现文件下载的方法，但大多数情况下，最终都依赖于浏览器的内置下载功能。选择哪种方法取决于具体的应用场景和需求。