前端接收下载blob文件流

 API文件内

//敏感词 导出
import axios from "axios";

axios.defaults.baseURL = "http://cms.dtcg.7os.com.cn/cms/admin";


export let downFile = () =>
  axios({
    method: "get",   //请求方式
    url: "/word/export",   //请求接口
    responseType: "blob",  //不可省略
  });

 

在需要下载的页面 导入下载文件接口 （思路  通过a标签的链接向后端服务发get请求  模拟点击触发 完后下载 下载完成之后 移出a标签节点）

import {downFile} from "../../api/index.js";
  
// 点击导出
    async downfile() {
      let response = await downFile();
      let res = response.data;

      //获取请求的类型
      const respContentType = response.headers["content-type"];

      if (
        respContentType ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
      ) {
        if (!res) {
          return;
        }
        //由于后台返回文件名称是通过response返回的
        //因此需要从response headers中content-disposition响应头中获取文件名称fileName 而我的后端是写死的文件名 并且没有放进响应请求头返回给前端 所以前端我也写死了
        let fileName = "敏感词";

        const url = window.URL.createObjectURL(
          new Blob([res], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
          })
        );
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        //decodeURIComponent解决文件名的url转码问题
        link.setAttribute("download", decodeURIComponent(fileName));
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        return;
      }
    },
  },

二次封装 element的提示  因为我的是后端 返回success为true或false来判断成功失败

   //操作提示
    Tip(tipword, type) {
      switch (type) {
        case true:
          this.$message({
            message: tipword,
            type: "success",
          });
          this.reload();
          break;
        case false:
          this.$message({
            message: tipword,
            type: "error",
          });
          this.reload();
          break;
      }
    },