如何开始在 JavaScript 中解析二进制文件？

Question

我有一些二进制文件，我希望能够在浏览器中解析。我发现一些Python代码（我认为）完全符合我的需要，但我对Python的理解不足以解释我所看到的内容。

我自己的代码存储库上有一些示例文件，下面是我解析这些文件的尝试。您可以将文件拖到片段窗口中来解析该文件

const elBody = document.body;
const dragClass = "drag-over";

const fReader = new FileReader();
fReader.onload = function (e) {
    const data = e.target.result;
    processFile(data);
};

elBody.addEventListener("dragover", (dragEvent) => {
  dragEvent.preventDefault();
  if (!elBody.classList.contains(dragClass)) {
    elBody.classList.add(dragClass);
  }
});
elBody.addEventListener("dragleave", () => {
  elBody.classList.remove(dragClass);
});
elBody.addEventListener("drop", (dropEvent) => {
  dropEvent.preventDefault();
  elBody.classList.remove(dragClass);
  [...dropEvent.dataTransfer.items].forEach((item, i) => {
    if (item.kind === "file") {
      const file = item.getAsFile();
      fReader.readAsArrayBuffer(file, 'utf-8');
    }
  });
});

function processFile(arrayBuffer){
    const byteLength = 4;

    const b1 = new Int32Array(arrayBuffer.slice(0, byteLength))[0]
    console.log(b1)

    // for (let startIdx = 0; startIdx < arrayBuffer.byteLength; startIdx += byteLength) {
    //     const byte = new Int32Array(arrayBuffer.slice(startIdx, startIdx + byteLength))[0]
    //     console.log(byte)
    // }
}

 html,body {height: 100vh;margin: 0;}
.drag-over {background-color: #ccc;}

<h1>Drop a file here</h1>

我只是不确定我是否走在正确的轨道上。我有关这些类型的文件如何构造的信息的唯一来源来自python 文件中的这些注释

如何获取有关文件格式的信息并将其转换为在 JavaScript 中执行相同操作的方法？

Answer 1

这对我对你的示例文件有用。如果您需要解析文本，它可以相当容易地实现。

Int8Array 在循环中保存切片

const processFile = (arrayBuffer) => {
  let offset = 0;
  const outputString = [];
  const firstInteger = new Int32Array(arrayBuffer.slice(offset, offset + 4))[0];
  console.log("First integer:", firstInteger); // some kind of identifier?
  offset += 4;
  const int8View = new Int8Array(arrayBuffer);
  for (; offset < int8View.length; offset++) {
    const char = int8View[offset];
    if (char >= 32 && char <= 126) {
      outputString.push(String.fromCharCode(char));
    } else if (char === 10) {
      outputString.push("\n");
    }
  }
  console.log(outputString.join(''));
};

html,
body {
  height: 100vh;
  margin: 0;
}

.drag-over {
  background-color: #ccc;
}

<h1>Drop a file here</h1>

<script>

// file reader code - no modified except to add identifiers

const fReader = new FileReader();
fReader.onload = function(e) {
  const data = e.target.result;
  processFile(data);
};
const dragClass = "drag-over"
elBody = document.querySelector("h1");
elBody.addEventListener("dragover", (dragEvent) => {
  dragEvent.preventDefault();
  if (!elBody.classList.contains(dragClass)) {
    elBody.classList.add(dragClass);
  }
});
elBody.addEventListener("dragleave", () => {
  elBody.classList.remove(dragClass);
});
elBody.addEventListener("drop", (dropEvent) => {
  dropEvent.preventDefault();
  elBody.classList.remove(dragClass);
  [...dropEvent.dataTransfer.items].forEach((item, i) => {
    if (item.kind === "file") {
      const file = item.getAsFile();
      fReader.readAsArrayBuffer(file, 'utf-8');
    }
  });
});

</script>