前端文件下载方法总结

前端涉及到的文件下载应用场景非常广泛。本文将介绍几种常见的前端文件下载方法，并分析它们的优缺点。

1. 使用 <a> 标签

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

示例代码

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

说明

• 优点：简单易用。
• 缺点：只能下载同源文件。如果是跨域资源，如图片、音视频等，浏览器会进行预览而非下载。

通过 JavaScript 实现

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

2. 使用 window.open()

通过 window.open() 方法也可以实现类似的效果。

示例代码

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

说明

• 优点：简单，可以在新标签页中打开链接。
• 缺点：不能指定下载文件名。某些文件类型（如 .html、.xml）会被浏览器直接打开而非下载。

3. 使用 location.href

通过改变 location.href 的值，可以触发浏览器下载或打开文件。

示例代码

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

说明

• 优点：简单。
• 缺点：与 window.open() 相似，存在相同的限制和缺点。

4. 使用 XMLHttpRequest

通过 AJAX 请求文件内容，然后创建一个 Blob 对象来实现下载。

示例代码

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/sample.pdf', true);
xhr.responseType = '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 = 'sample.pdf';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(downloadUrl);
  }
};

xhr.send();

说明

• 优点：可以下载非同源文件，更灵活。
• 缺点：相对复杂，需要处理 AJAX 请求和 Blob 对象。

总结

虽然前端文件下载方法多样，但最终都依赖于浏览器的内置下载机制。选择合适的方法需要根据具体的应用场景和需求来决定。