vue 后端返回文件流,前端导出下载

vue 后端返回文件流,前端导出下载

  1. 配置axios响应拦截器
js 复制代码
request.interceptors.response.use(
  (response) => {
    const res = response.data
    // 关键代码: 返回的是文件流
    if (res instanceof Blob) {
      return response
    }

    if (res.code == 200 || res == true) {
      return res
    } else {
      Message.error("连接超时")
      return Promise.reject(res)
    }
  },
  (error) => {
    return Promise.reject(error)
  }
)
  1. 配置api响应类型
js 复制代码
export async function fileExport(params) {
  return request({
    url: "/api/file/export",
    method: "post",
    data: params,
    responseType: 'blob', // 配置响应类型
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}
  1. 封装解码下载的方法
js 复制代码
downloadFile(res) {
  const fileNames = res.headers["content-disposition"];
  if (fileNames) {
    //解码
    const fileName = decodeURIComponent(fileNames.match(/=(.*)$/)[1]);
    // 处理返回的文件流
    const content = res.data;
    const blob = new Blob([content], {
      type: "application/octet-stream; charset=utf-8",
    });
    if ("download" in document.createElement("a")) {
      //非IE下载
      const a = document.createElement("a"); //创建一个a标签
      a.download = fileName; //指定文件名称
      a.style.display = "none"; //页面隐藏
      a.href = URL.createObjectURL(blob); // href用于下载地址
      document.body.appendChild(a); //插到页面上
      a.click(); //通过点击触发
      URL.revokeObjectURL(a.href); //释放URL 对象
      document.body.removeChild(a); //删掉a标签
      this.$message.success("下载成功");
    } else {
      //IE10 + 下载
      navigator.msSaveBlob(blob, fileName);
      this.$message.success("下载成功");
    }
  }
},
  1. 发起下载请求
js 复制代码
fileExport({}).then((res) => {
  // 下载文件
  this.downloadFile(res);
}).catch((err) => {});
  1. 后端返回的内容示例
js 复制代码
PK-q�cfgfW�d�q�ZCB|��|�*�*h㻆},^�{Va�^K<4�6�N�XQ�dž�9�!P��$��҆�d�c�D�j);��ѝP�g��E�M'O�ʕ����H7L�h���R���G��^�'�{��zސʮB��3�˙��h.�h�W�жF�j娄CQՠ똈���}ιL�U:D�����%އ����,�B���[�	�� ;˱�	�{N��~��X�p�ykOL��kN�V��ܿBZ~����q�� �ar��{O�PKz��q;�S��M�~s+q�~�>�y�ƹXp`=G��C�q-rh?�ڏ�v��=��_M���5o]���2�`g�	��bb48G_��PKMMr�
相关推荐
携欢2 分钟前
POrtSwigger靶场之CSRF where token validation depends on token being present通关秘籍
前端·csrf
weixin_446260854 分钟前
MudBlazor:轻松构建美观的Web应用程序!
前端
谜亚星8 分钟前
GSAP学习(五)
前端·动效
code_Bo11 分钟前
基于vxe-table进行二次封装
前端·javascript·vue.js
小时前端11 分钟前
现代Web认证体系深度解析:从JWT原理到SSO架构设计
前端·面试
闭着眼睛学算法29 分钟前
【双机位A卷】华为OD笔试之【模拟】双机位A-新学校选址【Py/Java/C++/C/JS/Go六种语言】【欧弟算法】全网注释最详细分类最全的华子OD真题题解
java·c语言·javascript·c++·python·算法·华为od
前端一课1 小时前
公开分享一个AI番茄短故事模块技术方案(含代码)
前端
晴殇i1 小时前
为什么现代 JavaScript 代码规范开始建议禁止使用 else ?
前端·javascript·前端框架
梦6501 小时前
axios请求
vue.js
源力祁老师1 小时前
OWL与VUE3 的高级组件通信全解析
前端·javascript·vue.js