/binary-viewer

Allow to display binary content using hex-editor like interface

Primary LanguageJavaScriptMIT LicenseMIT

binary-viewer

CodeQL

Allow to display binary content using hex-editor like interface

image

Usage

Example with a fetched response

<!DOCTYPE html>
<html>
  <body>
  </body>
</html>
const content = await (await fetch(dataApiUrl)).blob(); 
const viewer = new HexaViewer('my-viewer', { content });
document.body.append(viewer.table);

Example with an HTML5 file <input>

<!DOCTYPE html>
<html>
  <body>
    <input type="file" id=myFile>
    <hr>
  </body>
</html>
var viewer;

myFile.addEventListener('change', function (event) {

  if (!viewer) {
    viewer = new HexaViewer('my-viewer');
    document.body.append(viewer.table);
  }

  const [file] = event.target.files;
  if (!file) return;

  viewer.reset();
  viewer.load(file);    

});

HexaViewer API Doc

Kind: global class

new HexaViewer(id, [options])

Param Type Description
id string Viewer DOM id, to ease CSS styling
[options] object Optional properties
[options.style] object Default to {fontFamily: 'Source Code Pro,Menlo,Consolas,PT Mono,Liberation Mono,monospace', fontSize: 14, lineHeight: 20, whiteSpace: 'pre'}
[options.content] File | Blob | string binary content to display, may be a base64 encoded string
[options.base64] boolean flag to declare the content as base64 encoded
[options.mime] string Binary content media type. default to application/octet-stream

hexaViewer.load([content], [base64], [mime]) ⇒ Promise

Load the binary content and build the Viewer table

Kind: instance method of HexaViewer

Param Type Description
[content] Blob | string binary content to display, may be a base64 encoded string
[base64] boolean flag to declare the content as base64 encoded
[mime] string Binary content media type. default to application/octet-stream

hexaViewer.reset()

Clear the viewer table

Kind: instance method of HexaViewer

hexaViewer.TABLE_STYLE : object

Table style used by default by the constructor

Default to {fontFamily: 'Source Code Pro,Menlo,Consolas,PT Mono,Liberation Mono,monospace', fontSize: 14, lineHeight: 20, whiteSpace: 'pre'}

HexaViewer.bytesToHexa(byte) ⇒ string

Kind: static method of HexaViewer

Param Type
byte number

HexaViewer.bytesToAscii(byte) ⇒ string

Kind: static method of HexaViewer

Param Type
byte number

License

MIT