前端下载二进制流文件

本文主要是介绍前端下载二进制流文件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、两种方式：

  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节点--超链接，为节点绑定一个点击事件。

这篇关于前端下载二进制流文件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！