Get file name from blob javascript

21

I just wanted to expand on the accepted answer with support for Internet Explorer [most modern versions, anyways], and to tidy up the code using jQuery:

N8allan

2,05019 silver badges31 bronze badges

answered Apr 27, 2016 at 20:08

AlexandruAlexandru

11.8k16 gold badges107 silver badges201 bronze badges

2

Same principle as the solutions above. But I had issues with Firefox 52.0 [32 bit] where large files [>40 MBytes] are truncated at random positions. Re-scheduling the call of revokeObjectUrl[] fixes this issue.

function saveFile[blob, filename] {
  if [window.navigator.msSaveOrOpenBlob] {
    window.navigator.msSaveOrOpenBlob[blob, filename];
  } else {
    const a = document.createElement['a'];
    document.body.appendChild[a];
    const url = window.URL.createObjectURL[blob];
    a.href = url;
    a.download = filename;
    a.click[];
    setTimeout[[] => {
      window.URL.revokeObjectURL[url];
      document.body.removeChild[a];
    }, 0]
  }
}

jsfiddle example

answered Feb 24, 2018 at 23:26

Kim NyholmKim Nyholm

9161 gold badge9 silver badges18 bronze badges

2

Late, but since I had the same problem I add my solution:

function newFile[data, fileName] {
    var json = JSON.stringify[data];
    //IE11 support
    if [window.navigator && window.navigator.msSaveOrOpenBlob] {
        let blob = new Blob[[json], {type: "application/json"}];
        window.navigator.msSaveOrOpenBlob[blob, fileName];
    } else {// other browsers
        let file = new File[[json], fileName, {type: "application/json"}];
        let exportUrl = URL.createObjectURL[file];
        window.location.assign[exportUrl];
        URL.revokeObjectURL[exportUrl];
    }
}

answered Sep 11, 2018 at 10:28

benben

3393 silver badges3 bronze badges

10

2

Working example of a download button, to save a cat photo from an url as "cat.jpg":

HTML:

Download

JavaScript:

function downloadUrl[url, filename] {
  let xhr = new XMLHttpRequest[];
  xhr.open["GET", url, true];
  xhr.responseType = "blob";
  xhr.onload = function[e] {
    if [this.status == 200] {
      const blob = this.response;
      const a = document.createElement["a"];
      document.body.appendChild[a];
      const blobUrl = window.URL.createObjectURL[blob];
      a.href = blobUrl;
      a.download = filename;
      a.click[];
      setTimeout[[] => {
        window.URL.revokeObjectURL[blobUrl];
        document.body.removeChild[a];
      }, 0];
    }
  };
  xhr.send[];
}

answered Sep 3, 2019 at 20:31

WSBTWSBT

27.5k14 gold badges106 silver badges123 bronze badges

1

window.location.assign did not work for me. it downloads fine but downloads without an extension for a CSV file on Windows platform. The following worked for me.

    var blob = new Blob[[csvString], { type: 'text/csv' }];
    //window.location.assign[window.URL.createObjectURL[blob]];
    var link = window.document.createElement['a'];
    link.href = window.URL.createObjectURL[blob];
    // Construct filename dynamically and set to link.download
    link.download = link.href.split['/'].pop[] + '.' + extension; 
    document.body.appendChild[link];
    link.click[];
    document.body.removeChild[link];

answered Oct 7, 2019 at 0:38

Sacky SanSacky San

1,43921 silver badges26 bronze badges

this is a good easy solution for it.

function downloadBloob[blob,FileName] {
    var link = document.createElement["a"]; // Or maybe get it from the current document
    link.href = blob;
    link.download = FileName;
    link.click[];
}

answered Jun 3 at 10:55

segusegu

215 bronze badges

1

If you want to download a pdf and using window.location is not mandatory, you can use jsPdf like this following :

// Create document
const doc = new jsPDF['l', 'px', 'a4'];

// [...] Add here the jsPdf doc filling

// Launch the document downloading
doc.output['save', 'filename.pdf'];

answered Jan 5 at 14:28

Rey0bsRey0bs

1,15612 silver badges18 bronze badges