阅读 398

前端使用Blob对象处理后台传输的文件流|8月更文挑战

这是我参与8月更文挑战的第1天,活动详情查看:8月更文挑战

引:我们在开发中总是会遇到一些下载后台返回文件流的问题,在这个时候我们可以借助Blob对象来解决这个问题

想要用Blob对象,我们要先明确:

1. Blob对象是什么?

它是一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成ReadableStream来用于数据操作。是一个二进制大对象,也是一个可以存储二进制文件的容器。

2.它有哪些属性和方法?

Blob对象有size和type两个属性和一个slice()方法;

size:表示Blob对象的字节长度。 Blob对象的二进制数据可借助FileReader接口读取。 如果Blob对象没有字节数,则size属性为0。

type:表示一个字符串 表明该 Blob 对象所包含数据的 MIME 类型 如果类型未知,则该值为空字符串。

slice():可以对Blob对象进行切割,返回新的Blob对象 slice使用:


const newBlob*blob.slice(start,end,contentType);

// start这个参数代表Blob里的下标,表示第一个会被会被拷贝进新的 Blob的字节的起始位置

// end 这个参数代表的是 Blob的一个下标,这个下标-1的对应的字节将会是被拷贝进新的Blob 的最后一个字节。

// contentType表示给新的 Blob赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。

复制代码

了解了Blob是什么东西之后我们就可以在项目中来用它。

项目中使用

调接口时添加 responseType: 'blob'
    return request('接口', {
      method: 'POST',
      responseType: 'blob',
      data:{
        ...params,
      },
    });
复制代码
对返回的文件流进行处理

response为获取到的文件流

(response: any) => {
    // 创建blob对象
    const blob = window.URL.createObjectURL(
        new Blob([response]),
        );
    // 创建a链接
    const aLink=document.createElement('a');
    // 设置隐藏a链接
    aLink.style.display='none';
    // 把创建的blob给a.href
    aLink.href=blob;
    // 设置下载文件的名称
    aLink.download='下载的文件名称.类型';
    // 向body添加a链接
    document.body.appendChild(aLink);
    // 点击a链接
    aLink.click();
    // 点击完成后记得删除创建的链接
    document.body.removeChild(aLink);
    }
复制代码
文章分类
前端
文章标签