前端vue 下载文件(后端传给的文件流)

2023-05-08  本文已影响0人  无题syl

可以使用axios库下载文件流。具体步骤如下:
后端通过URL地址或API接口将文件流传递给前端。
前端使用axios库发送GET请求,获取文件流数据。
在响应拦截器中获取文件流数据,并创建一个Blob对象。
创建一个a标签,设置它的href属性为Blob URL,download属性为文件名,触发点击事件进行下载。

import axios from 'axios';

// 下载文件流
function downloadFile(url) {
  axios({
    method: 'GET',
    url: url,
    responseType: 'blob'
  })
  .then(response => {
    // 获取文件流数据
    const blob = new Blob([response.data]);
    // 创建a标签进行下载
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '文件名';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  })
  .catch(error => {
    console.log(error);
  });
}

上一篇 下一篇

猜你喜欢

热点阅读