axios下载流文件

最新推荐文章于 2024-02-23 22:18:53 发布

路人甲的乙

最新推荐文章于 2024-02-23 22:18:53 发布

阅读量1.1k

点赞数 1

文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_58717344/article/details/132493979

版权

要使用axios下载流文件，你可以按照以下步骤进行操作：

首先，确保你已经引入了axios库。你可以使用npm或CDN的方式获取axios库。

在前端代码中，使用axios发送请求并设置responseType为'blob'，以指定响应数据类型为Blob类型（二进制数据）。

在获取到响应后，创建一个URL对象，并将Blob数据传递给它，从而生成一个可供下载的URL。

使用JavaScript创建一个<a>标签，设置相关属性来触发下载操作。

以下是一个使用axios下载流文件的示例：

import axios from 'axios';//引入axios库

function downloadFile() {
  axios({
    url: 'http://example.com/download',
    method: 'GET',
    responseType: 'blob', // 指定响应数据类型为Blob
  })
    .then(response => {
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'example.pdf');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    })
    .catch(error => {
      console.error('下载失败', error);
    });
}

在上述示例中，我们使用了axios发送一个GET请求，并将responseType设置为'blob'。

在响应成功后，创建一个Blob对象并将其传递给URL对象来生成下载URL。

然后，创建一个<a>标签，设置href为URL，setAttribute为download属性来指定下载后的文件名，最后进行下载操作。

请根据实际需求调整URL、请求方法、文件名等内容。这样就可以使用axios库来下载流文件了。