【文件下载】

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

最简单的使用a标签：

/*docx格式此处加上download，用于下载；
如果是pdf，去除download，可以用于预览（用户可见，需要点击操作）*/
<a download={item.title} 
href={item.pdf || '/#'} 
target={item.pdf ? "_blank" : ''} 
rel="noreferrer" 
onClick={(e) => !item.pdf && e.preventDefault()}


// 也可以使用动态创建a标签来进行下载（无需操作，执行即下载）
// 这里的文件名根据实际情况从响应头或者url里获取
        const filename = name || 'xxx.pdf';
        const a = document.createElement('a');
        a.href = 链接;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(链接);
>

方法一：使用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，最后创建一个元素，将其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元素下载文件

使用iframe元素下载文件的方式比较简单，只需要将src属性设置为文件的URL即可。例如：

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

这里的style属性设置为display: none;，表示不显示iframe元素。

需要注意的是，由于浏览器的安全限制，只有在用户主动触发下载操作时，才能成功下载文件。因此，我们需要在点击事件中，将iframe元素的src属性设置为文件的URL，从而触发文件下载操作。例如：

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);
});

这里的document.body.appendChild(iframe)表示将iframe元素添加到文档中，从而触发文件下载操作

需要注意的是，文件下载操作可能会涉及到跨域问题，需要在服务器端进行相应的配置。另外，不同浏览器对于文件下载的支持也有所不同，需要进行兼容性测试。

最后，需要注意的是，在进行文件下载操作时，应该遵循相关的法律法规，不得下载侵犯他人权益的文件。

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

使用元素下载文件的方式也比较简单，只需要创建一个表单，将action属性设置为文件的URL，将method属性设置为GET，然后提交表单即可。例如：

这里的style属性设置为display: none;，表示不显示表单。

需要注意的是，由于浏览器的安全限制，只有在用户主动触发下载操作时，才能成功下载文件。因此，我们需要在点击事件中，将表单提交，从而触发文件下载操作。例如：

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();
});

这里的document.body.appendChild(form)表示将表单添加到文档中，从而触发文件下载操作。

写在最后
需要注意的是，文件下载操作可能会涉及到跨域问题，需要在服务器端进行相应的配置。另外，不同浏览器对于文件下载的支持也有所不同，需要进行兼容性测试。

最后，需要注意的是，在进行文件下载操作时，应该遵循相关的法律法规，不得下载侵犯他人权益的文件。