Create binary blob in JS

Question

I'm generating a file client-side, I have the data in hexadecimal and just want to let the user download the generated file.

var blob = new Blob([hexData], {type: "application/octet-stream"});
console.log(URL.createObjectURL(blob));

The resulting file is a plain-text file containing hex data in ASCII. How can I force the Blob to contain the binary data as is and not as text?

Alan Mimms · Accepted Answer · 2016-06-20 18:53:33Z

11

Derived from @Musa's solution above so I cannot take credit, but it's clearer to write this as an answer than my lame comment to his answer.

var byteArray = new Uint8Array(hexdata.match(/.{2}/g)
                              .map(e => parseInt(e, 16)));
var blob = new Blob([byteArray], {type: "application/octet-stream"});

Maybe this is easier to understand? I personally think it is clearer.

edited Jun 20, 2016 at 18:53

answered Jun 16, 2016 at 23:10

Alan Mimms

70311 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Endless Over a year ago

The blob first argument has to be an array new Blob([byteArray], ...);

Alan Mimms Over a year ago

Thanks. Oops. Fixed.

Musa · Accepted Answer · 2014-09-24 14:26:43Z

8

Convert you data to a binary array then create a blob from that.

var byteArray = new Uint8Array(hexdata.length/2);
for (var x = 0; x < byteArray.length; x++){
    byteArray[x] = parseInt(hexdata.substr(x*2,2), 16);
}
var blob = new Blob([byteArray], {type: "application/octet-stream"});

http://jsfiddle.net/mowglisanu/15h9o3d5/

answered Sep 24, 2014 at 14:26

Musa

97.9k17 gold badges123 silver badges144 bronze badges

1 Comment

Alan Mimms Over a year ago

I'd like to suggest a simpler and maybe cleaner (eye of the beholder) way.

var byteArray = new Uint8Array(hexdata.match(/.{2}/g)                                               .map(e => parseInt(e, 16)));

This splits the hex data into two byte hunks, parses them as hex into numbers, then returns an array of these to the Uin8Array constructor.

Collectives™ on Stack Overflow

Create binary blob in JS

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related