binary-viewer
binary-viewer copied to clipboard
Published
20 hours ago •
AMorgaut
AMorgaut
Allow to display binary content using hex-editor like interface
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()
- .load([content], [base64], [mime]) ⇒
- static
- .TABLE_STYLE :
object - .bytesToHexa(byte) ⇒
string - .bytesToAscii(byte) ⇒
string
- .TABLE_STYLE :
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