Save an object using blob api. How?

Question

How can trigger a local to local download of an object as a json file using the Blob API?

const obj = {

  prop1: 'val1',
  prop2: 'val2',
  prop3: 'val3',
  prop4: 'val4',

}

const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});

...triggers a local to local download as myObject.json

Declaring this does nothing?

Does this help? stackoverflow.com/questions/25547475/… The last answer looks like what you're trying to do — Eamonn McEvoy
– Eamonn McEvoy, Commented Jul 13, 2020 at 14:54
Are you asking how to download the obj as a JSON file? If so check out this q/a: JavaScript blob filename without link — Nick Parsons
– Nick Parsons, Commented Jul 13, 2020 at 14:54

feedy · Accepted Answer · 2020-07-13 15:10:10Z

1

Do this to get the url. Then navigate to it to download the file.

let blobUrl = URL.createObjectURL(new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'}))

Or if you want to download it straight away (edit: by using a library):

saveAs(new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'}), "myBlob"); // "myBlob" is the name of the file

edited Jul 13, 2020 at 15:10

answered Jul 13, 2020 at 14:56

feedy

1,1508 silver badges21 bronze badges

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

4 Comments

suchislife Over a year ago

saveAs appears to require a third party library, fyi.

feedy Over a year ago

You are right, I thought it is native. Did the first one work? Generating and navigating to the url?

suchislife Over a year ago

It sure did. The first one however, does not allow for file naming.

feedy Over a year ago

@suchislife Yeah, use FileSaver to save yourself some time, or if you don't want it, check the last comment in this thread as to how to name the file and download it (by using blob again): stackoverflow.com/questions/25547475/…

Collectives™ on Stack Overflow

Save an object using blob api. How?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related