Blob对象

1.单词翻译 ：（Binary Large Object）二进制大对象

Blob构造函数接受两个参数。第一个参数是数组，成员是字符串或二进制对象，表示新生成的Blob实例对象的内容；第二个参数是可选的，是一个配置对象，目前只有一个属性type，它的值是一个字符串，表示数据的 MIME 类型，默认是空字符串。

var htmlFragment = ['<a id="a"><b id="b">hey!</b></a>'];
var myBlob = new Blob(htmlFragment, {type : 'text/html'});

文件流下载

// HTML 代码如下
// <input type="file" accept="image/*" multiple onchange="fileinfo(this.files)"/>

function fileinfo(files) {
  for (var i = 0; i < files.length; i++) {
    var f = files[i];
    console.log(
      f.name, // 文件名，不含路径
      f.size, // 文件大小，Blob 实例属性
      f.type, // 文件类型，Blob 实例属性
      f.lastModifiedDate // 文件的最后修改时间
    );
  }
}

 

AJAX 请求时，如果指定responseType属性为blob，下载下来的就是一个 Blob 对象。

function getBlob(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.onload = function () {
    callback(xhr.response);
  }
  xhr.send(null);
}

 

浏览器允许使用URL.createObjectURL()方法，针对 Blob 对象生成一个临时 URL，以便于某些 API 使用。这个 URL 以blob://开头，表明对应一个 Blob 对象，协议头后面是一个识别符，用来唯一对应内存里面的 Blob 对象。这一点与data://URL（URL 包含实际数据）和file://URL（本地文件系统里面的文件）都不一样。

var droptarget = document.getElementById('droptarget');

droptarget.ondrop = function (e) {
  var files = e.dataTransfer.files;
  for (var i = 0; i < files.length; i++) {
    var type = files[i].type;
    if (type.substring(0,6) !== 'image/')
      continue;
    var img = document.createElement('img');
    img.src = URL.createObjectURL(files[i]);
    img.onload = function () {
      this.width = 100;
      document.body.appendChild(this);
      URL.revokeObjectURL(this.src);
    }
  }
}

 

上面代码通过为拖放的图片文件生成一个 URL，产生它们的缩略图，从而使得用户可以预览选择的文件。

浏览器处理 Blob URL 就跟普通的 URL 一样，如果 Blob 对象不存在，返回404状态码；如果跨域请求，返回403状态码。Blob URL 只对 GET 请求有效，如果请求成功，返回200状态码。由于 Blob URL 就是普通 URL，因此可以下载。

读取文件

取得 Blob 对象以后，可以通过FileReader对象，读取 Blob 对象的内容，即文件内容。

FileReader 对象提供四个方法，处理 Blob 对象。Blob 对象作为参数传入这些方法，然后以指定的格式返回。

  • FileReader.readAsText()：返回文本，需要指定文本编码，默认为 UTF-8。
  • FileReader.readAsArrayBuffer()：返回 ArrayBuffer 对象。
  • FileReader.readAsDataURL()：返回 Data URL。
  • FileReader.readAsBinaryString()：返回原始的二进制字符串。

下面是FileReader.readAsText()方法的例子，用来读取文本文件。

// HTML 代码如下
// <input type="file" onchange="readfile(this.files[0])"></input>
// <pre id="output"></pre>
function readfile(f) {
  var reader = new FileReader();
  reader.readAsText(f);
  reader.onload = function () {
    var text = reader.result;
    var out = document.getElementById('output');
    out.innerHTML = '';
    out.appendChild(document.createTextNode(text));
  }
  reader.onerror = function(e) {
    console.log('Error', e);
  };
}

上面代码中，通过指定 FileReader 实例对象的onload监听函数，在实例的result属性上拿到文件内容。

下面是FileReader.readAsArrayBuffer()方法的例子，用于读取二进制文件。

// HTML 代码如下
// <input type="file" onchange="typefile(this.files[0])"></input>
function typefile(file) {
  // 文件开头的四个字节，生成一个 Blob 对象
  var slice = file.slice(0, 4);
  var reader = new FileReader();
  // 读取这四个字节
  reader.readAsArrayBuffer(slice);
  reader.onload = function (e) {
    var buffer = reader.result;
    // 将这四个字节的内容，视作一个32位整数
    var view = new DataView(buffer);
    var magic = view.getUint32(0, false);
    // 根据文件的前四个字节，判断它的类型
    switch(magic) {
      case 0x89504E47: file.verified_type = 'image/png'; break;
      case 0x47494638: file.verified_type = 'image/gif'; break;
      case 0x25504446: file.verified_type = 'application/pdf'; break;
      case 0x504b0304: file.verified_type = 'application/zip'; break;
    }
    console.log(file.name, file.verified_type);
  };
}

 原生js使用new Blob()实现带格式导出excel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table id="table" border="1">
        <tr style="height:50px;">
            <th style="width:100px;color:red;">姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>16</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>女</td>
            <td>17</td>
        </tr>
        <tr>
            <td>小张</td>
            <td>男</td>
            <td>17</td>
        </tr>
    </table>
    <a id="down">点击下载excel</a>
    <script>
        //或者是body的innerHTML
        let html = document.getElementById("table").outerHTML;
        let blob = new Blob([html],{ type: 'application/vnd.ms-excel'});
        let a = document.getElementById('down');
        a.href = URL.createObjectURL(blob);
        a.download = '测试excel下载'
    </script>
</body>
</html>

vue导出下载

async downLoad() {
      await request({
        url: 'xxxxxx/getExcel',
        method: 'get',
        responseType: 'blob'
      })
        .then(res => {
          const blob = new Blob([res.data], {
            type: 'application/octet-stream'
          });
          if (window.navigator.msSaveOrOpenBlob) {
            // msSaveOrOpenBlob方法返回boolean值
            navigator.msSaveBlob(blob, '订单列表.xls');
            // 本地保存
          } else {
            const link = document.createElement('a'); // a标签下载
            link.href = window.URL.createObjectURL(blob); // href属性指定下载链接
            link.download = '作品列表.xls'; // dowload属性指定文件名
            link.click(); // click()事件触发下载
            window.URL.revokeObjectURL(link.href); // 释放内存
          }
          this.getData();
        });
    }

使用编程式FormData对象上传

var file = e.target.files[0];
    var form = new FormData();
    form.append("file", file); //第一个参数是后台读取的请求key值
    form.append("fileName", file.name);
    form.append("errorType", "1"); //实际业务的其他请求参数
    form.append('webmasterfile',oBlob);    //二进制对象 
     //原生的xhr请求
    var xhr = new XMLHttpRequest();
    var url= "http://localhost:8080/upload.do"; //上传服务的接口地址
    xhr.open("POST", url);
    xhr.send(form); //发送表单数据
    xhr.onreadystatechange = function(){
      if(xhr.readyState==4 && xhr.status==200){
        var resultObj = JSON.parse(xhr.responseText);
        //处理返回的数据......
      }
    }
    //项目封装axios请求
    uploadAjax(form).then(({ data: res }) => {
        console.log(res);
      });

 

posted on 2022-07-22 11:24  马玉豪  阅读(855)  评论(0)    收藏  举报

导航