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("导出异常,未成功导出文件!")
        }
      })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值