前端下载二进制流文件

一、两种方式:

  1、后台提供一个 URL,然后用 window.open(URL) 下载

  2、后台直接返回文件的二进制内容,然后前端转化一下再下载

二、Blob对象:

  1、Blob,全称:Binary Large Object,表示不可变的类似文件对象的二进制数据。

  2、构造函数:Blob(blobParts[, options])

   参数说明:

  • blobParts:数组类型, 数组中的每一项连接起来构成Blob对象的数据,数组中的每项元素可以是ArrayBuffer(二进制数据缓冲区), ArrayBufferView,Blob,DOMString。或其他类似对象的混合体。
  • options:可选项,字典格式类型,可以指定如下两个属性:
    • type,默认值为"",它代表了将会被放入到blob中的数组内容的MIME类型。
    • endings, 默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入。它是以下两个值中的一个: "native",表示行结束符会被更改为适合宿主操作系统文件系统的换行符; "transparent",表示会保持blob中保存的结束符不变。

    常用写法:var blob = new Blob([res], { type: res.type });

      解释:res 为请求响应结果,使用 type 指定MIME类型(否则为"")

  3、使用场景:

  • 分片上传
  • Blob URL:Blob URL是blob协议得URL,它的格式如 blob:http://xxx。它可以通过window.URL.createObjectURL(blob)创建。在绝大部分场景下,我们可以像使用Http协议得URL一样使用Blob URL。常见得场景有作为文件得下载地址和作为图片资源地址。

三、根据前端返回的二进制文件流下载文件:

  示例代码:当文件状态改变时触发上传批量导入文件,批量导入完成后会返回一个反馈文件的二进制流,我们需要将该二进制流下载为文件。

    fileChange(file) {

      const formData = new FormData();

      this.$confirm('是否上传此文件?', '提示', {

          confirmButtonText: '确定',

          cancelButtonText: '取消',

          type: 'warning'

        }).then(() => {

          formData.append('file', file.raw)

          iccard.batchImport(formData).then((res) => {

                const blob = new Blob([res], { type: res.type });

            let dom = document.createElement("a");

            let url = window.URL.createObjectURL(blob);

            dom.href = url;

            dom.download = decodeURI('批量导入结果反馈.xlsx');

            dom.style.display = "none";

            document.body.appendChild(dom);

            dom.click();

            dom.parentNode.removeChild(dom);

            window.URL.revokeObjectURL(url);

           });

           this.$message({

             type: 'success',

             message: '上传成功!'

           });

        }).catch(() => {

          this.$message({

            type: 'info',

            message: '取消上传'

          });         

        });

    },

  总结:大体思路就是获取到文件url,然后通过创建document节点--超链接,为节点绑定一个点击事件。

上一篇:axios获取文件流并下载文件


下一篇:Web编辑器实现WORD粘贴图片自动上传