binary-viewer

Allow to display binary content using hex-editor like interface

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

HexaViewer
- new HexaViewer(id, [options])
- instance
  - .load([content], [base64], [mime]) ⇒ Promise
  - .reset()
- static
  - .TABLE_STYLE : object
  - .bytesToHexa(byte) ⇒ string
  - .bytesToAscii(byte) ⇒ string

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

AMorgaut/binary-viewer