zoukankan      html  css  js  c++  java
  • JS-二进制的处理者:Blob

    在公司的项目中,多次用到blob对接口返回的二进制数据进行处理,实现下载效果。但都是照葫芦画瓢,所以今天来分析一下其不同的用法

    下载文件到本地

    通过创建a标签,添加download属性来实现

    var blob = new Blob(data) // data为二进制数据
    var URL = window.url.createObjectURL(blob)
    var a = document.createElement('a')
    a.href = URL
    a.download = '下载的文件.txt' // 写入文件名
    document.body.append(a)
    • 由于IE10/11中不支持download,因此可以使用window.navigator.msSaveBlob或window.navigator.msSaveOrOpenBlob来实现下载效果。
      var blob = new Blob(data) // data为二进制数据
      window.navigator.msSaveBlob(blob)

      使用前者仅能实现保存功能,仅提供给用户一个保存按钮;而后者还提供打开功能。

    显示上传图片

    在项目中,通常也会需要实现上传图片并显示。

    // 默认file为blob格式的图片
    var img = document.createElement('img')
    var URL = window.createObjectURL(file)
    img.src = URL
    document.body.append(img)
    img.onload = function(){
      window.revokeObjectURL(URL) // 释放上一次生成的URL      
    }

    Blob文件分片上传

    var start = 0;
    var CHUNK_SIZE = 20; // 分片大小
    var size = blob.size
    var end = CHUNK_SIZE;
    while(start < size){
      upload(blob.slice(start, end)) // upload为上传的方法
      start = CHUNK_SIZE;
      end = end + CHUNK_SIZE;         
    }

    对Blob数据进行读取,转换为其他格式

    利用FileReader的API进行处理

    • FileReader.readAsText(blob)   // 转换为text格式
    • FileReader.readAsArrayBuffer(blob)  // 转换为arrayBuffer格式
    • FileReader.readAsDataURL(blob) // 转换为base64的Data URL格式
  • 相关阅读:
    爬虫模块BeautifulSoup
    移动端开发概览【webview和touch事件】
    实战JS正则表达式
    相识HTML5 canvas
    运算符中的一些小技巧
    再看Ajax
    跨终端开发必备概念汇总
    谈谈工作,聊聊生活,想想以后
    页面元素坐标和偏移(clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等)相关整理
    CSS3 Flexbox不迷路指南
  • 原文地址:https://www.cnblogs.com/ashen1999/p/13496538.html
Copyright © 2011-2022 走看看