美文网首页
前端vue 下载文件(后端传给的文件流)

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

作者: 无题syl | 来源:发表于2023-05-08 17:08 被阅读0次

可以使用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);
  });
}

相关文章

网友评论

      本文标题:前端vue 下载文件(后端传给的文件流)

      本文链接:https://www.haomeiwen.com/subject/qtylsdtx.html