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的旧浏览器来说是一个很好的回退方案。

相关问题与解答

Q1: 使用download属性有哪些限制？

A1: download属性只适用于同源链接，并且在某些浏览器配置下可能被禁用，它不能用于跨域请求，也不能用于大文件的分段下载。

Q2: Blob是什么，它是如何帮助文件下载的？

A2: Blob（Binary Large OBject）表示一段二进制数据，它可以是文本、图片、音频等任何类型的数据，Blob用于文件下载是因为它可以代表非HTML文档的内容，而URL.createObjectURL()可以创建一个指向这个Blob的URL，从而允许用户下载它。

Q3: 为什么在使用Blob和URL.createObjectURL()之后要调用URL.revokeObjectURL()？

A3: URL.revokeObjectURL()是用来释放由URL.createObjectURL()创建的URL的，这是一种好的实践，可以防止内存泄漏，特别是在你有多个下载链接或者长时间运行的应用中。

Q4: XMLHttpRequest和Fetch API在实现文件下载时有什么区别？

A4: XMLHttpRequest是传统的方式来进行异步HTTP请求，而Fetch API是更现代的接口，Fetch提供了更强大、灵活的特性，比如Promise支持和更简洁的语法，Fetch API的兼容性不如XMLHttpRequest广泛，尤其是在旧浏览器中，选择哪个API取决于项目需求和目标浏览器的支持情况。