Javascript - Save typed array as blob and read back in as binary data

Question

I have a typed array full of binary data that is being generated from an ArrayBuffer

var myArr = new Uint8Array(myBuffer);

I am presenting this to the user with

var blob = new Blob(myArr, {type: "octet/stream"};
var blobURL = URL.createObjectURL(blob);

and inserting a link that is

"<a href=" + blobUrl + " download=" + filename "/a>"

Later, I am letting the user select the file from disk, and using a file reader to do with

var reader = new FileReader();

reader.onload = function () {
console.log(reader.result);
};

reader.readAsArrayBuffer(sourceFile);

The problem is, it seems like no matter what I do, I get a "string" of the file's contents. In fact, when I save the file, I can open it, and it is plainly human readable. I.E. if my Uint8Array was {"0" : "51", "1" : "52", "2" : "53" }

I can open the downloaded blob in a text editor and I just see "515253" which I don't think is what should be happening.

How can I make a link to a file download for my file that is formatted properly so I can read it back in an dget the right values?

Julio C. · Accepted Answer · 2020-07-12 23:55:28Z

18

As it turns out, the problem was that I had a syntax error in the creation of the Blob.

The corrected code looked like: var blob = new Blob([myArr], {type: "octet/stream"});

I'm not really sure why if I am already passing an ArrayBuffer argument. Why I need bracket notation? Seems redundant?

edited Jul 12, 2020 at 23:55

Julio C.

851 silver badge5 bronze badges

answered May 4, 2016 at 2:41

Derek

11.9k33 gold badges136 silver badges235 bronze badges

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

1 Comment

user1693593 Over a year ago

The first argument is always an array which in theory can hold multiple parts (f.ex. multiple ArrayBuffer views) which are then concatenated internally (very useful when building things like binary file formats).

NiKO · Accepted Answer · 2018-12-11 15:35:49Z

6

According to Mozilla

https://developer.mozilla.org/en-US/docs/Web/API/Blob#Example_for_creating_a_URL_to_a_typed_array_using_a_blob

var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'});

answered Dec 11, 2018 at 15:35

NiKO

2,9331 gold badge22 silver badges20 bronze badges

Comments

Christian Ibarra · Accepted Answer · 2022-12-03 04:41:32Z

1

const download = function (data) 
{
    const blob = new Blob(data, { type: "octet/stream"});
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.setAttribute('href', url)
    a.setAttribute('download', app.lastSub+"_"+new Date().toISOString()+'.py');
    a.click()
}

const get = async function () {
    download(app.psspyList);
}

answered Dec 3, 2022 at 4:41

Christian Ibarra

112 bronze badges

1 Comment

Christian Ibarra Over a year ago

<button id="action" onclick="get()"> Download</button>

Collectives™ on Stack Overflow

Javascript - Save typed array as blob and read back in as binary data

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related