前端下载二进制流文件

最新推荐文章于 2023-08-10 16:00:13 发布

会编程的林俊杰

最新推荐文章于 2023-08-10 16:00:13 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html5 html javascript

本文链接：https://blog.youkuaiyun.com/zxlzxcvbnm/article/details/120680525

前端专栏收录该内容

3 篇文章

订阅专栏

一、两种方式：

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

四、之后加的需求：

因为之前没有考虑到excel格式、服务器异常等情况，所以当出现500错误时还是会在导入完成后下载文件，但是下载出的文件报了500且存在乱码，此时我们的需求就是出现500时不下载文件，只在前端提示用户。

解决：

因为相应的api接口中要求数据返回类型为 ”blob“，所以非文件处理的请求拦截器不适用，那么我们就新创建一个拦截器文件，专门处理文件下载请求。

其次，在方法中通过对 type 的判断来决定是否要下载导入后的反馈文件还是进行错误提示。

其中，加深了我对响应字段 content-type 的理解，后端一般返回的数据类型都是 application/json ，excel文件的话就是 application/vnd.ms-excel ，所以我们可以根据这点来进行相应的判断。

最后，对 api 接口中的 responseType: "blob" 还是有点不理解，它到底起了什么作用？

代码：

		  iccard.batchImport(formData).then((res) => {
            if (res.data.type == "application/json") {
              var innerData;
              var reader = new FileReader();
              reader.readAsText(res.data, "utf-8");
              reader.onload = () => {
                     innerData = JSON.parse(reader.result);
                if (innerData.code == 500) {
                  this.$notify({
                    type: "error",
                    message: innerData.msg,
                  });
                  return;
                }
                  };
            }else if (res.data.type == "application/vnd.ms-excel") {
              fileUtil
                .downloadFile(res, "批量导入结果反馈")
                .then(() => {
                  this.$notify({
                    type: "success",
                    message: "下载成功",
                  });
                })
                .catch(() => {
                  this.$notify({
                    type: "error",
                    message: "下载失败",
                  });
                });
            } else {
              this.$notify({
                type: "error",
                message: "文件格式不正确",
              });
            }
          });