I would like to add a filename to my Blob file, but I don't really know how to do it, here is my code for the moment :

  onClick() {
    var myHeader = new Headers();

    myHeader.append('Content-Type', 'text/plain');

    fetch(this.props.url, {
      method: 'POST',
      headers: myHeader,
      body: JSON.stringify(this.state.api_arg)
    }).then(response => {
      const filename = getFileName(response.headers.get('Content-Disposition'))

      response.blob().then(myBlob => {
        const fileUrl = URL.createObjectURL(myBlob)

        console.log(fileUrl)
        window.open(fileUrl)
      })
    })
 }

my filename is stocked in a variable.

I would like to add a filename to my Blob file, but I don't really know how to do it, here is my code for the moment :

  onClick() {
    var myHeader = new Headers();

    myHeader.append('Content-Type', 'text/plain');

    fetch(this.props.url, {
      method: 'POST',
      headers: myHeader,
      body: JSON.stringify(this.state.api_arg)
    }).then(response => {
      const filename = getFileName(response.headers.get('Content-Disposition'))

      response.blob().then(myBlob => {
        const fileUrl = URL.createObjectURL(myBlob)

        console.log(fileUrl)
        window.open(fileUrl)
      })
    })
 }

my filename is stocked in a variable.

• javascript
• fetch

2 Answers 2

The answer of Niels was incomplete, to handle filename in blob you have to do it that way:

const file = new File([myBlob], filename)

const url = URL.createObjectURL(myBlob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();