Blob与ArrayBuffer和File三种数据格式的互相转换

原创已于 2024-11-20 17:45:22 修改 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #Blob #ArrayBuffer

于 2024-07-17 14:30:26 首次发布

ArrayBuffer—>Blob

Array Buffer数据格式转换成为Blob数据格式使用new Blob()方法

function bufToBlob(buf, mimeType = ""){
    return new Blob([buf], { type: mimeType });
}

Blob—>Array Buffer

Blob转换成为Array Buffer有两种方法，一种是使用new FileReader()方法转换，第二种是使用Blob类上自带的实例方法arrayBuffer()转换。

new FileReader()

function blobToBuf(blob, cb){
    var fr = new FileReader();
    var type = blob.type;

    fr.readAsArrayBuffer(blob);
    fr.addEventListener("loadend",(e) => {
        var buf = e.target.result;
        cb(buf, type);
    },false);
}

这里怎么拿到返回的ArrayBuffer数据呢?通过传递的cb回调函数读取,cb回调函数会把处理好的数据buf返回出去,只需要在调用的地方读取就可以了.type类型根据项目需要自己选择.感谢原博主的分享并附上链接.
原文详细参考链接

arrayBuffer(),arrayBuffer()函数返回一个promise,成功的回调结果就是类型为ArrayBuffer的数据.

blob.arrayBuffer().then(buffer => {
    console.log(buffer)
 })

developer.mozilla.org参考链接

File —> ArrayBuffer

File类型转ArrayBuffer主要是因为一些框架需要使用ArrayBuffer类型的数据,所以需要转换一下.转换也很简单,developer文档也将的很清楚developer文档
在这里插入图片描述

文档里讲的很明白,先调用readAsArrayBuffer()方法,读取操作完成时,出发loadend事件,转换完成的ArrayBuffer数据再result属性中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" accept=".docx" onchange="handleChange(event)" />
  </body>
  <script>
    function handleChange(e) {
      console.log(e.target.files[0]);
      let reader  = new FileReader();
      reader.readAsArrayBuffer(e.target.files[0])
      reader.onload = function(e){
        console.log(e.target.result);
      }
    }
  </script>
</html>

公用的xlsx库结合xlsx-style-vite库的公用

// 模拟导出
    async function exportData() {
      const data1 = getForm().getFieldsValue();
      data1.BType = '试剂耗材';
      // 删除筛选条件中的undefind
      for (let key in data1) {
        if (data1[key] === undefined) {
          delete data1[key];
        }
      }
      // 假设列表数据存储在 listData 中
      let listData: any = [];
      try {
        await KCimportExcelData(data1).then((res) => {
          listData = res
        });
      } catch (err) {
        console.log(err);
      }

      console.log('listData', listData);

      let rows = listData.map(item => {
        return {
          name: returnTrue(item.materialDto.name),
          specication: returnTrue(item.materialDto.specication),
          manufacturer: returnTrue(item.materialDto.manufacturer),
          alertCount: returnTrue(item.materialDto.alertCount),
          alertDays: returnTrue(item.materialDto.alertDays),
          storeCondition: returnTrue(item.materialDto.storeCondition),
          remark: returnTrue(item.materialDto.remark)
        }
      })
      let headers = {
        name: '名称',
        specication: '规格',
        manufacturer: '生产厂家',
        alertCount: '库存预警数量',
        alertDays: '库存预警天数',
        storeCondition: '库存条件',
        remark: '备注'
      }
      commonExport(headers, rows, '试剂耗材台账一览表')
    }

    // 公共导出方法
    function commonExport(headers, rows, excelHeadTitle = '标题') {
      rows = [headers, ...rows];
      let workBook = XLSX.utils.book_new();
      let workSheet = XLSX.utils.json_to_sheet(rows, {
        header: Object.keys(headers),
        skipHeader: true,
        origin: 'A2',
      });
      workSheet["A1"] = {
        t: 's',
        v: excelHeadTitle,
        s: {
          font: {
            bold: true,
            sz: 18,
          },
          alignment: {
            horizontal: 'center',
            vertical: 'center',
          },
          border: {
            top: { style: 'thin' },
            left: { style: 'thin' },
            bottom: { style: 'thin' },
            right: { style: 'thin' }
          }
        },
      }

      // 假设你希望所有单元格都有边框，遍历所有单元格设置样式
      let range = XLSX.utils.decode_range(workSheet['!ref']);
      for (let row = range.s.r; row <= range.e.r; row++) {
        for (let col = range.s.c; col <= range.e.c; col++) {
          let cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
          if (!workSheet[cellAddress]) {
            workSheet[cellAddress] = {
              t: 's',
              v: ''
            };
          }
          workSheet[cellAddress].s = workSheet[cellAddress].s || {};
          workSheet[cellAddress].s.border = {
            top: { style: 'thin' },
            left: { style: 'thin' },
            bottom: { style: 'thin' },
            right: { style: 'thin' }
          };
        }
      }
      workSheet["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: Object.keys(headers).length - 1 } }];

      // 设置单元格宽度
      let maxLength = 0;
      if (typeof headers === 'object') {
        for (const key in headers) {
          const fieldLength = headers[key].toString().length;
          if (fieldLength > maxLength) {
            maxLength = fieldLength;
          }
        }
      }
      const colsSettings = new Array(Object.keys(headers).length).fill({ wch: maxLength + 10 });
      workSheet["!cols"] = colsSettings;

      // workSheet["!cols"] = [{ wch: 30 }, { wch: 30 }, { wch: 30 }];
      XLSX.utils.book_append_sheet(workBook, workSheet, 'Sheet1');
      const workString = xlsxStyle.write(workBook, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'binary',
        cellStyles: true,
      });
      console.log('buffer', s2ab(workString));
      downExcel(new Blob([s2ab(workString)], { type: 'application/octet-stream' }), excelHeadTitle + '.xlsx')
    }


    function returnTrue(val) {
      return (val === null || val === undefined) ? '' : val
    }

    // 自定义下载文件方法
    function downExcel(obj, fileName) {
      const a_node = document.createElement("a");
      a_node.download = fileName;
      a_node.href = URL.createObjectURL(obj);
      document.body.appendChild(a_node);
      a_node.click();
      setTimeout(() => {
        document.body.removeChild(a_node);
        URL.revokeObjectURL(obj);
      }, 0);
    }
    // 文件流转换
    function s2ab(s: any) {
      if (typeof ArrayBuffer !== 'undefined') {
        let buf = new ArrayBuffer(s.length);
        let view = new Uint8Array(buf);
        for (let i = 0; i !== s.length; ++i) {
          view[i] = s.charCodeAt(i) & 0xFF;
        }
        return buf;
      } else {
        let buf = new Array(s.length);
        for (let i = 0; i !== s.length; ++i) {
          buf[i] = s.charCodeAt(i) & 0xFF;
        }
        return buf;
      }
    }