如何使用 JavaScript/jQuery 下载文件？

在前端开发中，常常会遇到需要通过代码实现文件下载的需求。那么，该如何使用 JavaScript/jQuery 下载文件呢？

方法一：使用链接下载

最简单的方式就是使用链接下载，只需要设置链接的 href 属性为文件的下载链接即可。

<a href="path/to/file" download>下载文件</a>

其中，download 属性用来指定下载后的文件名，如果不指定，浏览器会默认使用链接中的文件名。

方法二：使用 XMLHttpRequest 下载

使用 XMLHttpRequest 对象可以实现文件数据的异步传输，从而实现文件的下载功能。

具体做法是：

// 创建一个 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 设置请求方式，请求地址，以及 responseType （请求类型）
xhr.open('GET', 'path/to/file');
xhr.responseType = 'blob';

// 注册 onLoad 事件，在数据加载完成后执行回调函数
xhr.onload = function () {
  if (xhr.status === 200) {
    // 创建一个下载链接，并触发点击事件开始下载
    const link = document.createElement('a');
    link.href = URL.createObjectURL(xhr.response);
    link.download = 'filename.txt';
    link.click();
  }
};

// 发送请求
xhr.send();

其中，blob 类型可以读取并处理二进制数据，使用 URL.createObjectURL 可以创建一个临时下载链接，link.click() 可以触发点击事件开始下载。

但是需要注意的是，由于浏览器的安全策略，前端只能下载同源下的文件，如果需要下载非同源文件，需要通过服务器进行中转。

方法三：使用 jQuery 插件下载

如果你正在使用 jQuery，可以使用其中的 FileSaver.js 插件来实现文件下载功能。

具体做法是：

// 引入 FileSaver.js 和 Blob.js
import { saveAs } from 'file-saver';
import Blob from 'blob';

// 发送请求
$.ajax({
  url: 'path/to/file',
  method: 'GET',
  dataType: 'binary',  // 设置请求数据类型为二进制
  processData: false,  // 禁止将数据转换为查询字符串
  responseType: 'arraybuffer',  // 设置响应类型为 ArrayBuffer
  success: function (data) {
    // 使用 Blob 对象创建一个文件对象
    const file = new Blob([data], { type: 'application/pdf' });

    // 使用 saveAs 方法将文件保存到本地
    saveAs(file, 'filename.pdf');
  },
  error: function (xhr, status, error) {
    console.log(error);
  },
});

其中，dataType 设置请求数据类型为二进制，responseType 设置响应类型为 ArrayBuffer。

FileSaver.js 插件还提供了一些其他的 API，例如可以直接保存数据为 CSV、JSON 等格式，具体可以查看插件文档。

结语

以上就是三种实现 JavaScript/jQuery 文件下载的方法，根据实际需求选择合适的方法即可。