vue 实现怎么下载后台的response中的文件流

此处记录一下 vue 的实现下载文件功能.
因为是后台生成的文件写入了response中,所有vue 需要获取到这个流并且下载.
vue 核心代码

我这里是下了一个后台生成的excel表.

// 点击导出调用的按钮 实现文档的导出功能
    daochu() {
      // 查看需要生成的表格数据
      console.log(this.tableData);

      // 请求到后台进行生成excel表 携带以上的表格的参数
      axios.post("http://localhost:8086/vue", this.tableData, {

        // 设置返回响应数据的类型,需要确保服务器所返回的类型和你所设置的返回值类型是兼容的
        responseType: "blob" // 必须写这个 不写可能导致这个文件无法打开 或者里边乱码
        /**
         * blob 说明:
         *    Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，
         *    也可以转换成 ReadableStream 来用于数据操作.
         *
         *    Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其
         *    扩展使其支持用户系统上的文件.
         */

      }).then(res => { // 后台返回的数据 res中存储
        console.log(res);

        // 判断一下后台是否是成功的
        if (res.status === 200) {
          // 获取流信息
          const blob = new Blob([res.data]);
          // 设置文件的名称
          const fileName = '信息表.xls';

          if ('download' in document.createElement('a')) { // 非IE下载

            // document.createElement()是在对象中创建一个对象
            const elink = document.createElement('a');

            // js下载通过 download 属性下载 fileName 这个文件
            elink.download = fileName;
            // 样式 为 none
            elink.style.display = 'none';

            //可以获取当前文件的一个内存URL
            elink.href = URL.createObjectURL(blob);

            //body中添加一个子结点
            document.body.appendChild(elink);

            elink.click();

            // 释放URL 对象
            URL.revokeObjectURL(elink.href);

            // 删除指定的元素
            document.body.removeChild(elink);

          } else { // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }

          this.open2("导出成功!")
        } else {
          this.open4("导出异常,未成功导出文件!")
        }
      })