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�
相关推荐
neter.asia5 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫5 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
十一吖i23 分钟前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年24 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_25 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891128 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾29 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking29 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu31 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym36 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化