前端 javascript 实现文件下载的示例

首先，我们需要了解前端 JavaScript 实现文件下载的方式。一般有两种方式，一种是利用 <a> 标签的 download 属性，另一种是通过 XMLHttpRequest（XHR）对象来实现。

利用标签的download属性下载文件

利用 <a> 标签的 download 属性可以实现前端文件下载。具体实现步骤如下：

1. 在 HTML 文件中添加一个 <a> 标签，设置 download 属性和 href 属性，如下所示：

html
<a download href="文件下载地址">下载文件</a>

1. 在 JavaScript 中使用 getElementById 方法获取 <a> 标签对象，并触发点击事件，如下所示：

javascript
var downloadLink = document.getElementById('download-link');
downloadLink.click();

1. 当用户点击该链接时，文件将被下载到本地。需要注意的是，href 属性的值应该是文件的下载地址。

使用XMLHttpRequest对象下载文件

使用 XHR 对象来实现文件下载需要注意的是，需要借助服务端的帮助，将文件数据以二进制形式返回给前端，然后通过 JavaScript 解析和下载这个二进制数据。

具体实现步骤如下：

1. 在 JavaScript 中创建 XHR 对象，并使用 open 方法设置请求方法和请求地址，如下所示：

javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', '文件下载地址', true);

1. 使用 responseType 属性设置响应体数据类型为二进制数据，如下所示：

javascript
xhr.responseType = 'blob';

1. 添加监听器，监听 XHR 对象的 load 事件，如下所示：

javascript
xhr.addEventListener('load', function () {
// 处理二进制数据并下载文件
});

1. 在 load 事件监听器中，创建 Blob 对象、创建下载链接、设置链接的下载属性，如下所示：

javascript
var blob = new Blob([xhr.response], { type: 'application/octet-stream' });
var downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = '文件名';
downloadLink.click();

这里需要注意的是，在创建 Blob 对象时，需要传递 XHR 响应体，而 URL.createObjectURL 方法则是用来创建下载链接。另外，需要设置 <a> 标签的 download 属性，使得浏览器将其当作要下载的文件处理。

示例1：使用标签下载文件

假设我们需要下载一个名为 example.txt 的文件，我们可以使用以下代码来实现：

<a id="download-link" download href="example.txt">下载文件</a>

var downloadLink = document.getElementById('download-link');
downloadLink.click();

这里使用 getElementById 方法获取 <a> 标签对象，然后通过 click 方法触发下载操作。

示例2：使用XHR对象下载文件

假设我们需要下载一个名为 example.txt 的文件，我们可以使用以下代码来实现：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.txt', true);
xhr.responseType = 'blob';

xhr.addEventListener('load', function () {
  var blob = new Blob([xhr.response], { type: 'application/octet-stream' });
  var downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = 'example.txt';
  downloadLink.click();
});

xhr.send();

这里使用 XHR 对象来请求文件数据，并设置响应体数据类型为二进制数据。当 XHR 对象接收到服务端返回的响应体数据时，会触发 load 事件，我们可以在监听器中创建 Blob 对象，然后使用创建链接、设置下载属性来实现文件的下载。