vue axios接受文件流

vue yekong

在Vue中使用Axios接收文件流并下载文件,通常是处理后台接口返回的文件流数据,如生成的PDF文件、Excel文件等。以下是一个基本的实现步骤和示例代码:

基本步骤

  1. 配置Axios请求:设置响应类型为blob,这样Axios就会以二进制的形式接收文件流。

  2. 发送请求:通过Axios发送请求,获取文件流。

  3. 处理响应:将获取到的文件流转换为Blob对象,然后使用URL.createObjectURL创建一个指向该Blob的URL。

  4. 下载文件:创建一个<a>标签,将其href属性设置为Blob对象的URL,并设置download属性为文件名。通过模拟点击该标签来触发下载。

示例代码

import axios from 'axios';

export default {
  methods: {
    downloadFile() {
      axios({
        url: '你的文件流接口URL',
        method: 'GET',
        responseType: 'blob', // 重要
      }).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        // 设置文件名,如果后端在headers中返回了文件名,也可以从response.headers中获取
        link.setAttribute('download', '文件名.扩展名');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url); // 释放URL对象
      }).catch((error) => {
        console.error('文件下载失败', error);
      });
    }
  }
}

在这个示例中,responseType: 'blob'是关键配置,它告诉Axios以二进制形式接收响应数据。然后,我们将响应数据转换为Blob对象,并创建一个指向该Blob的URL。最后,通过创建一个临时的<a>标签并模拟点击它来实现文件的下载。

请注意,实际使用时需要将'你的文件流接口URL''文件名.扩展名'替换为实际的值。如果后端API在响应头中返回了文件名,可以从response.headers中获取并使用它。

喜欢