vue使用asiox 下载后端返回的excel数据流

一、前端代码

javascript 复制代码
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button style="color: brown" @click="exportExcel">excel导出</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  methods: {
    exportExcel() {
      //请求
      console.log("test");
      axios
        .post("/api/export", {}, { responseType: "blob" })
        .then((res) => {
          //请求成功,触发then中的函数
          console.log(res);
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel",
          });

          // 获取 获取响应头 heads 中的 filename 文件名
          let temp = res.headers["content-disposition"]
            .split(";")[1]
            .split("filename=")[1];
          // 把 %E9%AB%98%E6%84%8F%E5%90%91%E5%AD%A6%E5%91%98303.xlsx 转化成文字
          var fileName = decodeURIComponent(temp);
          //创建一个 a 标签
          const link = document.createElement("a");
          //不显示a标签
          link.style.display = "none";
          // 给a 标签的href属性赋值
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", fileName);
          //把a标签插入页面中
          document.body.appendChild(link);
          link.click();
          //点击之后移除a标签
          document.body.removeChild(link);
        })
        .catch((error) =>
          //请求失败,触发catch中的函数 可省略
          console.log(error)
        );
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

二、后端代码

java 复制代码
    @PostMapping("/export")
    public void download(HttpServletResponse response) throws IOException {
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
        response.setCharacterEncoding("utf-8");
        // 这里URLEncoder.encode可以防止中文乱码
        String fileName = URLEncoder.encode("交付对象及机构信息关系表", "UTF-8").replaceAll("\\+", "%20");
        response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");
        //自行编写查询数据库数据
        List<DataOrganizationDrugRelationExport> list = Lists.newArrayList();
        EasyExcel.write(response.getOutputStream(), DataOrganizationDrugRelationExport.class).head(DataOrganizationDrugRelationHeader.class).sheet("结果").doWrite(list);
    }
相关推荐
永乐春秋29 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿31 分钟前
【前端】CSS
前端·css
ggdpzhk32 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic6 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue