实现axios请求直接下载文件的流程

flowchart TD
    A[创建axios实例] --> B[发送请求]
    B --> C[设置响应类型为blob]
    C --> D[处理响应数据]
    D --> E[创建下载链接]
    E --> F[创建下载按钮]
    F --> G[点击下载按钮]

步骤一：创建axios实例

首先，我们需要创建一个axios实例，用于发送请求和处理响应。

import axios from 'axios';

const instance = axios.create();

步骤二：发送请求

使用axios实例发送GET请求，获取需要下载的文件。

async function downloadFile() {
  try {
    const response = await instance.get('/api/download', {
      responseType: 'blob' // 设置响应类型为blob
    });

    // 处理响应数据
    handleResponseData(response);
  } catch (error) {
    console.error(error);
  }
}

步骤三：处理响应数据

在获取到响应数据后，我们需要对其进行处理，创建下载链接。

function handleResponseData(response) {
  const url = URL.createObjectURL(new Blob([response.data]));

  // 创建下载链接
  createDownloadLink(url);
}

步骤四：创建下载链接

通过创建一个<a>标签，设置其href属性为下载链接，然后触发点击事件，实现文件的下载。

function createDownloadLink(url) {
  const link = document.createElement('a');
  link.href = url;
  link.download = 'file.txt'; // 设置下载文件的名称

  // 创建下载按钮
  createDownloadButton(link);
}

步骤五：创建下载按钮

将下载链接添加到页面中，并创建一个下载按钮，触发点击事件进行下载。

function createDownloadButton(link) {
  const button = document.createElement('button');
  button.textContent = '点击下载';
  button.addEventListener('click', () => {
    link.click();
  });

  document.body.appendChild(link);
  document.body.appendChild(button);
}

至此，我们已经完成了axios请求直接下载文件的实现。

完整代码如下：

import axios from 'axios';

const instance = axios.create();

async function downloadFile() {
  try {
    const response = await instance.get('/api/download', {
      responseType: 'blob' // 设置响应类型为blob
    });

    // 处理响应数据
    handleResponseData(response);
  } catch (error) {
    console.error(error);
  }
}

function handleResponseData(response) {
  const url = URL.createObjectURL(new Blob([response.data]));

  // 创建下载链接
  createDownloadLink(url);
}

function createDownloadLink(url) {
  const link = document.createElement('a');
  link.href = url;
  link.download = 'file.txt'; // 设置下载文件的名称

  // 创建下载按钮
  createDownloadButton(link);
}

function createDownloadButton(link) {
  const button = document.createElement('button');
  button.textContent = '点击下载';
  button.addEventListener('click', () => {
    link.click();
  });

  document.body.appendChild(link);
  document.body.appendChild(button);
}

downloadFile();

希望这篇文章能帮助到你，让你能够顺利实现axios请求直接下载文件的功能。如有任何问题，请随时提问。