Convert array into hexadecimal file

Question

I want to create a hex file that gets saved/downloaded.

The result should be a file in hex format, like this:

5350 4401 011a 000a 0900 0000 0000 0000
0000 0000 0000 0000 0000 0000 0000 0000
00f8 ff1e ffff ffff b9ff c03b e6bf fbd8
bffb bccc 671c fdee eefd eefe ec6f 3800
0fc0 0003 c000 0180 0f00 1c00 003e 0003
c1e0 07ff f006 3e30 05dd d003 dde0 07be
f00f 6378 0edd b80e 1c38 0f1c 7877 9cf7
7bdd ef7d dddf 1edd bc0f 1c78 07c1 f003
dde0 01be c000 1c00 6f00 1013 4340 3055
6208 181b 4b48 385d 6a72 7678 7b7e 8087
898c 9098 0713 1444 4337 5766 0f1b 1c4c
4b3f 5f6e 7577 7a7d 7f86 888b 8e97 9f02
0610 1006 0205 0502 0610 1006 0205 0503
0204 0304 0503 0303 0202 8080 8080 8080
9090 8080 8080 8080 9090 8080 8080 8080
8080 8080 80

I've already tried this solution: Javascript: how to convert hex data to binary and write it into a file but seem to be stuck somewhere.

My code

  var bytes = new Array(122, 13, 14, 9, 255); // integer values

  var ab = new ArrayBuffer(bytes.length); //bytes is the array with the integer
  var ia = new Uint8Array(ab);

  for (var i = 0; i < bytes.length; i++) {
    ia[i] = bytes[i];
  }

  save_file(ia,"hexfile.bin");

  save_file(data, filename)
  {

      var file = new Blob([data], {type: "octet/stream"});
      if (window.navigator.msSaveOrOpenBlob) // IE10+
          window.navigator.msSaveOrOpenBlob(file, filename);
      else { // Others
          var a = document.createElement("a"),
                  url = URL.createObjectURL(file);
          a.href = url;
          a.download = filename;
          document.body.appendChild(a);
          a.click();
          setTimeout(function() {
              document.body.removeChild(a);
              window.URL.revokeObjectURL(url);  
          }, 0); 
      }
  }

Saving the file works, but the content is not what I expect. Any help is appreciated, thank you!

What are the results you are actually getting? Realize there is no such thing as hex formatted files, that is just how binary files are viewed in hex editors, unless your intent is to actually make a text file with the hexadecimal values of each byte in that format — Patrick Evans, Sep 28 '17 at 10:54

score 1 · Accepted Answer · 2017-09-28T11:23:49.303

The result should be a file in hex format, like this:

Hex is just a visual representation of the content in the file/buffer. The content itself is stored as bytes (hex range [0x00, 0xff], decimal range [0, 255] etc.).

Right now you are creating an empty array based on the length of the array holding the actual bytes:

var ab = new ArrayBuffer(bytes.length);  // will be empty
var ia = new Uint8Array(ab);             // therefor also empty

Simply convert it directly as:

var ia = new Uint8Array(bytes);          // Array converted to typed array incl. content

Now pass that to a Blob or File object using the correct mime-type (not that it matters too much as it has to do with how the browser will handle the file, not altering the content - an unknown mime-type will be handled the same as below):

var file = new Blob([ia], {type: "application/octet-stream"});

or if you'd like a filename:

var file = new File([ia], "hexfile.bin", {type: "application/octet-stream"});

Then serve it as (or use the function you already have for better compatibility):

document.location = URL.createObjectURL(file);

Example (save and open the result in a hex editor where it should contain the bytes represented in the range 0x00 to 0x0f):

var bytes = Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15);
var ia = new Uint8Array(bytes);
var file = new File([ia], "hexfile.bin", {type: "application/octet-stream"});
document.location = URL.createObjectURL(file);

Thank you K3N for taking the time explaining this in such a good way, that was extremely helpful. Turns out I had this before, but overlooked a little detail which made me think I was following the wrong approach: the file, when opened in e.g. Sublime, opens as UTF-8. Is there a way to ensure the file gets encoded as hex? Again, thank you for your help and the solution! — Esshahn, Sep 28 '17 at 16:50
I get the feeling that editors like Sublime decide on the encoding based on the data count. — Esshahn, Sep 28 '17 at 17:02
It will depend on the content. The binary conversion here doesn't affect the encoding but if treated as text later on it may be. Sublime may see (or not) a [BOM marker](https://en.wikipedia.org/wiki/Byte_order_mark) at the beginning, or the input may be in the wrong byte-order (if coming from UTF16 etc.). You could look into using [TextEncoder](https://stackoverflow.com/a/37902334/1693593) if you're mostly dealing with text input for the binary file. — , Sep 29 '17 at 08:19

Convert array into hexadecimal file

1 Answers1