js怎么请求服务器下载文件

一、使用Fetch API下载文件

Fetch API是现代JavaScript中用于进行网络请求的接口，语法简洁，易于处理异步操作。使用Fetch API下载文件的基本步骤包括发送GET请求、处理响应、并将文件保存到本地。

1. 初始化Fetch请求

首先，使用fetch函数发送GET请求到服务器。fetch函数返回一个Promise对象，可以使用.then()方法来处理响应。

fetch('https://example.com/file.zip')

  .then(response => {
    // 检查响应状态
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.blob(); // 将响应转换为Blob对象
  })
  .then(blob => {
    // 创建一个URL对象
    const url = window.URL.createObjectURL(blob);
    // 创建一个<a>标签并设置下载链接
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.zip';
    document.body.appendChild(a);
    a.click();
    // 移除<a>标签和释放URL对象
    a.remove();
    window.URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

二、处理大文件下载

在处理大文件下载时，使用流（Stream）可以有效减少内存占用，避免浏览器崩溃。Fetch API支持流处理，但需要在服务器端也支持流传输。

1. 使用ReadableStream处理大文件

首先，需要将响应转换为ReadableStream对象，并逐步处理数据块。

fetch('https://example.com/largefile.zip')

  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const reader = response.body.getReader();
    const stream = new ReadableStream({
      start(controller) {
        function push() {
          reader.read().then(({ done, value }) => {
            if (done) {
              controller.close();
              return;
            }
            controller.enqueue(value);
            push();
          });
        }
        push();
      }
    });
    return new Response(stream);
  })
  .then(response => response.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'largefile.zip';
    document.body.appendChild(a);
    a.click();
    a.remove();
    window.URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

三、使用XHR（XMLHttpRequest）下载文件

虽然Fetch API是现代的选择，但在某些旧浏览器中可能需要使用XMLHttpRequest（XHR）进行文件下载。

1. 使用XHR发送请求并处理响应

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://example.com/file.zip', true);
xhr.responseType = 'blob';
xhr.onload = function () {
  if (xhr.status === 200) {
    const blob = xhr.response;
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.zip';
    document.body.appendChild(a);
    a.click();
    a.remove();
    window.URL.revokeObjectURL(url);
  } else {
    console.error('Download failed:', xhr.statusText);
  }
};
xhr.onerror = function () {
  console.error('Network error occurred');
};
xhr.send();

const a = document.createElement('a');

a.href = 'https://example.com/file.zip';
a.download = 'file.zip';
document.body.appendChild(a);
a.click();
a.remove();

五、处理不同类型的文件

下载不同类型的文件（如文本文件、图像、视频等）时，可能需要不同的处理方式。以下是一些常见文件类型的处理示例。

1. 下载并显示图像

fetch('https://example.com/image.jpg')

  .then(response => response.blob())
  .then(blob => {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    document.body.appendChild(img);
  })
  .catch(error => {
    console.error('Error downloading image:', error);
  });

2. 下载并显示文本文件

fetch('https://example.com/textfile.txt')

  .then(response => response.text())
  .then(text => {
    const pre = document.createElement('pre');
    pre.textContent = text;
    document.body.appendChild(pre);
  })
  .catch(error => {
    console.error('Error downloading text file:', error);
  });