js从服务器下载文件到本地

JavaScript可以使用XMLHttpRequest或fetch API从服务器下载文件，并使用FileSaver.js或浏览器的download属性将文件保存到本地。

在Web开发中，实现从服务器下载文件是一个常见的需求，这可以通过多种方式完成，但使用JavaScript进行文件下载提供了一种不需要刷新页面即可获取文件的便捷方法，以下是使用JavaScript实现服务器文件下载的几种技术介绍：

使用HTML5的download属性

HTML5引入了一个新的全局属性 download，它允许你轻松地创建一个下载链接，当你点击一个带有 download 属性的 <a> 标签时，浏览器会启动下载过程而不是导航到链接的href。

<a href="/path/to/file" download>Download File</a>

这种方法非常简单，但有一些限制，例如它不适用于大量数据的文件下载，因为整个文件需要先加载到内存中。

使用Blob和URL.createObjectURL()

Blob对象表示一段二进制数据，可以用来处理文件和数据。URL.createObjectURL()方法可以创建一个指向包含文件数据的Blob的URL。

function downloadFile(data, fileName) {
    const blob = new Blob([data], { type: 'application/octet-stream' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}
// 假设有一个文件的数据
const fileData = "Hello, world!";
downloadFile(fileData, 'hello.txt'); // 下载名为hello.txt的文件

此方法适合下载动态生成的内容或较小的文件，因为它不需要将整个文件内容加载到内存中。

使用Fetch API和Blob

Fetch API提供了一个现代的方式来获取资源，包括文件，你可以用它将响应体作为一个Blob来处理，并利用前面提到的Blob和URL.createObjectURL()方法来实现下载。

async function fetchAndDownload(url, fileName) {
    const response = await fetch(url);
    const blob = await response.blob();
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}
fetchAndDownload('/path/to/file', 'example.txt'); // 下载服务器上的example.txt文件

这种方法非常适合于现代浏览器，并且能够处理较大的文件下载，同时不会阻塞主线程。

使用XMLHttpRequest

虽然Fetch API提供了一个更现代的接口，但XMLHttpRequest仍然是一种广泛支持的方法来异步获取资源，通过监听readystatechange事件，并在readyState为4且status为200时触发下载，可以实现文件下载。

function downloadViaXHR(url, fileName) {
    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], { type: 'application/octet-stream' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
        }
    };
    xhr.send();
}
downloadViaXHR('/path/to/file', 'sample.txt'); // 通过XHR下载sample.txt文件

这个方法对于不支持Fetch API的旧浏览器来说是一个很好的回退方案。