vue 导出excel 后端返回blob数据流

后端返回blob数据流,前端进行下载

封装公共ts组件downloadExcel.ts

/*
* created by seven.lau on 22/11/2023
* 导出excel
* 后端返回Blob数据流
* url 接口地址
* paramsData 接口参数
* filename 导出excel的文件名
* */
import axios from 'axios';
const downloadExcel = function (url, paramsData) {
  axios({
    method: 'post',
    url: url,
    data: paramsData,
    responseType: 'blob'
  }).then((res) => {
    console.log('res----------', res);
    const str = res.headers['content-disposition'].split(';')[1].split('=')[1];
    const filename = decodeURIComponent(str);
    const blob = new Blob([res.data], {
      type: 'app;ication/vnd.ms-excel',
    });
    const objectUrl = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.setAttribute('href', objectUrl);
    a.setAttribute('download', filename);
    a.click();
    window.URL.revokeObjectURL(objectUrl);
  }).catch(error => {
    console.log(error);
  });
}
export default downloadExcel

在需要的页面引入方法

调用方法

文件导出后如图

posted @   飞天龙猫  阅读(198)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示