在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还是借助第三方库，都可以轻松实现文件下载功能。
本文来自极简博客，作者：星空下的约定，转载请注明原文链接：使用JavaScript下载文件的几种方式
