使用JavaScript下载文件的几种方式

在Web开发中，常常会遇到需要让用户下载文件的场景，无论是下载文件的链接还是通过Ajax请求后下载文件，都可以通过JavaScript来实现。本文将介绍几种常见的使用JavaScript下载文件的方式，并给出对应的代码示例。

1. 通过创建超链接下载文件

使用超链接是最简单的方式之一，只需创建一个指向文件的标签，并设置其download属性为想要保存的文件名。

function downloadFile(url, filename) {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.click();
}

调用示例：

const fileUrl = 'https://example.com/files/sample.pdf';
const fileName = 'sample.pdf';

downloadFile(fileUrl, fileName);

2. 通过Ajax请求下载文件

在某些情况下，我们希望在后台处理文件下载，并返回给前端。可以使用Ajax请求来下载文件。

function downloadFile(url, successCallback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';

  xhr.onload = function() {
    if (xhr.status === 200) {
      const blob = new Blob([xhr.response]);
      successCallback(blob);
    }
  };

  xhr.send();
}

调用示例：

const fileUrl = 'https://example.com/download';
const fileName = 'downloadedFile.txt';

downloadFile(fileUrl, function(blob) {
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = fileName;
  link.click();
});

3. 通过Data URI下载文件

对于一些小文件，可以将文件内容转换为Data URI，并通过超链接或重定向方式下载。

function downloadFile(data, filename, mimetype) {
  const link = document.createElement('a');
  link.href = `data:${mimetype};base64,${btoa(data)}`;
  link.download = filename;
  link.click();
}

调用示例：

const fileData = 'Hello, World!';
const fileName = 'sample.txt';

downloadFile(fileData, fileName, 'text/plain');

4. 使用第三方库下载文件

如果你不希望手动实现下载文件的逻辑，也可以使用一些第三方JavaScript库来简化这一过程，比如FileSaver.js。

使用FileSaver.js下载文件示例：

const fileData = 'Hello, World!';
const fileName = 'sample.txt';

const fileBlob = new Blob([fileData], { type: 'text/plain' });
saveAs(fileBlob, fileName);

以上是几种使用JavaScript下载文件的方式，可以根据实际需求选择合适的方法。无论是直接创建超链接、通过Ajax请求、使用Data URI还是借助第三方库，都可以轻松实现文件下载功能。