前言

在前端开发中，有时需要让用户下载文件，比如下载PDF文档、Excel表格等。这时候，我们可以使用JavaScript来实现文件下载功能。本文将介绍几种常用的前端JS下载文件的方法，包括XMLHttpRequest、Fetch API、Blob、FileSaver.js等。



方法一：使用XMLHttpRequest对象

使用XMLHttpRequest对象可以发送HTTP请求，获取文件内容，然后使用Blob对象创建一个URL，最后将下载链接的href属性设置为这个URL。以下是具体的代码示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'file.pdf', true);
xhr.responseType = 'blob';
xhr.onload = function() {
  if (xhr.status === 200) {
    var blob = xhr.response;
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = 'file.pdf';
    a.click();
  }
};
xhr.send();

这里的xhr.responseType属性设置为blob，表示响应内容为二进制数据。当请求成功后，我们可以使用xhr.response获取文件内容，然后使用URL.createObjectURL()方法创建一个URL，最后创建一个<a>元素，将其href属性设置为这个URL，并设置download属性为文件名，这样就可以触发文件下载操作了。

需要注意的是，由于浏览器的安全限制，只有在用户主动触发下载操作时，才能成功下载文件。



方法二：Fetch API

Fetch API是一种新的发送HTTP请求的方法，可以用来下载文件。具体来说，可以使用Fetch API发送HTTP请求，获取文件内容，然后使用Blob对象创建一个URL，最后将下载链接的href属性设置为这个URL。以下是一个简单的示例：

fetch('file.pdf')
  .then(function(response) {
    return response.blob();
  })
  .then(function(blob) {
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = 'file.pdf';
    a.click();
  });



这里的new Blob()方法创建一个Blob对象，第一个参数为文件内容，第二个参数为文件类型。当创建成功后，我们可以使用URL.createObjectURL()方法创建一个URL，最后创建一个<a>元素，将其href属性设置为这个URL，并设置download属性为文件名，这样就可以触发文件下载操作了。



方法三：Blob

Blob是一种表示二进制数据的对象，可以用来下载文件。具体来说，可以使用Blob对象创建一个URL，然后将下载链接的href属性设置为这个URL。以下是一个简单的示例：

var content = 'Hello, world!';
var blob = new Blob([content], { type: 'text/plain' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'file.txt';
a.click();

这里的new Blob()方法创建一个Blob对象，第一个参数为文件内容，第二个参数为文件类型。当创建成功后，我们可以使用URL.createObjectURL()方法创建一个URL，最后创建一个<a>元素，将其href属性设置为这个URL，并设置download属性为文件名，这样就可以触发文件下载操作了。



方法四：使用FileSaver.js库

FileSaver.js是一个用于在浏览器中保存文件的JavaScript库，可以用来下载文件。具体来说，它提供了一种简单的方式来将数据保存到本地文件中，支持多种文件格式，包括文本文件、JSON文件、Blob对象等。以下是具体的代码示例：

<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>

var data = new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8' });
saveAs(data, 'hello.txt');

在上面的示例中，我们首先创建了一个Blob对象，表示要保存的数据。然后，我们调用saveAs()方法，将数据保存到本地文件中。第一个参数是要保存的数据，第二个参数是文件名。

除了Blob对象，FileSaver.js还支持其他类型的数据，例如字符串、ArrayBuffer等。它还提供了一些其他的API，例如saveText()、saveBlob()等，用于保存不同类型的数据。

需要注意的是，FileSaver.js并不是所有浏览器都支持的，一些旧版本的浏览器可能无法正常使用它。因此，在使用FileSaver.js时，需要进行兼容性测试，确保它能够在目标浏览器中正常工作。



方法五：使用元素下载文件

<iframe src="file.pdf" style="display: none;"></iframe>

var downloadLink = document.getElementById('downloadLink');
downloadLink.addEventListener('click', function() {
  var iframe = document.createElement('iframe');
  iframe.src = 'file.pdf';
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
});

<form action="file.pdf" method="GET" style="display: none;"></form>

var downloadLink = document.getElementById('downloadLink');
downloadLink.addEventListener('click', function() {
  var form = document.createElement('form');
  form.action = 'file.pdf';
  form.method = 'GET';
  form.style.display = 'none';
  document.body.appendChild(form);
  form.submit();
});