前端GET/POST请求下载文件多种方式代码示例

前端 GET/POST 请求下载文件多种方式代码示例

概述

前端发起 GET/POST 请求，获取后端返回的文件数据，并触发浏览器下载，是常见的业务场景。本文将详细介绍几种常用的实现方式，并提供代码示例。

1. 使用 XMLHttpRequest

XMLHttpRequest 是浏览器原生的 API，可以用来发送各种类型的 HTTP 请求。

GET 请求示例

function downloadFile(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob'; // 指定返回类型为 Blob

  xhr.onload = function() {
    if (this.status === 200) {
      const blob = this.response;
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download   1. github.com 

github.com = '文件名.xlsx'; // 设置下载文件名
      link.click();
      window.URL.revokeObjectURL(link.href); // 释放 URL 对象
    } else {
      console.error('下载失败');
    }
  };

  xhr.send();
}

POST 请求示例

function downloadFileByPost(url, data) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.responseType = 'blob';
  xhr.setRequestHeader('Content-Type', 'application/   1. github.com 

github.comjson'); // 设置请求头

  xhr.onload = function() {
    // ... 同上
  };

  xhr.send(JSON.stringify(data));
}

2. 使用 Fetch API

Fetch API 是 XMLHttpRequest 的替代方案，提供了更加现代化的接口。

function downloadFileWithFetch(url) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download   1. www.framer.community 

www.framer.community = '文件名.xlsx';
      link.click();
      window.URL.revokeObjectURL(url);
    })
    .catch(error => {
      console.error('下载失败', error);
    });
}

3. 使用 Axios

Axios 是一个基于 Promise 的 HTTP 客户端，可以简化异步请求。

import axios from 'axios';

function downloadFileWithAxios(url) {
  axios({
    method: 'get',
    url,
    responseType: 'blob'
  })
  .then(response => {
    const blob = response.data;
    // ... 同上
  })
  .catch(error => {
    console.error('下载失败', error);
  });
}

4. 使用框架提供的请求库

Vue、React 等框架通常提供了自己的请求库，可以直接使用。

• Vue： Vue Resource、Axios
• React： Fetch API、Axios

关键点

• responseType: 设置为 'blob'，表示返回二进制数据。
• URL.createObjectURL: 创建一个 URL 对象，指向 blob 数据。
• a标签: 创建一个 a 标签，设置 href 和 download 属性，模拟点击下载。
• revokeObjectURL: 下载完成后，释放 URL 对象，避免内存泄漏。
• POST请求: 需要设置请求头 Content-Type。

注意事项

• 浏览器兼容性: XMLHttpRequest 和 Fetch API 的兼容性有所差异，需要根据项目需求选择合适的方案。
• 文件类型: 根据文件类型设置正确的 Content-Type。
• 跨域: 如果跨域请求，需要后端配置 CORS。
• 大文件下载: 对于大文件下载，可以考虑分片下载、断点续传等优化方式。

总结

本文介绍了前端发起 GET/POST 请求下载文件的几种常见方式，包括 XMLHttpRequest、Fetch API、Axios 等。选择哪种方式取决于项目需求和开发者的偏好。在实际开发中，可以根据具体场景进行灵活组合和优化。

更多优化建议：

• 进度条: 可以通过监听 XMLHttpRequest 的 onprogress 事件来显示下载进度。
• 错误处理: 对于网络错误、服务器错误等情况，需要进行完善的错误处理。
• 用户体验: 可以提供取消下载、暂停下载等功能。

希望这份回答能帮助你更好地理解前端文件下载的实现方式。