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�
相关推荐
灵感__idea34 分钟前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡1 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo1 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel1 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
大前端helloworld1 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel1 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
繁依Fanyi2 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端
weixin_456904273 小时前
C# 中的回调函数
java·前端·c#
kura_tsuki3 小时前
[Web网页] LAMP 架构与环境搭建
前端·架构
yinuo3 小时前
UniApp+Vue3多分包引入同一 npm 库被重复打包至 vendor 的问题分析与解决
前端