How to make the response as downloading as an attachment on browser, after getting back binary?

Question

I am sending a API request to a endpoint, which is supposed to give me back a powerpoint file.

However, in my response it is a bunch of binary code.

The header is content-type: 'application/octet-stream'

For example,

 "PK\u0003\u0004\u0014\u0000\u0000\u0000\b\u0000�\u0015'U��O�.\u000

Here is my axios in my code for calling the api,

export const getPtt = pptRequests => {
  const response = new Promise((resolve, reject) => {
    axios
      .post(
        `url`,
        pptRequests 
      )
      .then(data => {

        resolve(data)
      })
      .catch(err => {
        reject(err)
      })
  })
return response 

}

May I know how to decode the binary code, so I can make it will be downloading like below after sending it out

Edit:

here is where I call the function

 const handleGeneratePtt = () => {
    
    const pptRequests  = getPttRequests()
    getPtt (pptRequests ) // how to make it start downloading a ppt?
   
  }

Edit:

    export const getPtt = pptRequests => {
      const response = new Promise((resolve, reject) => {
        axios
          .post(
            `url`,
            pptRequests 
          )
          .then(data => {
const blob = new Blob([new Uint8Array(response.data)])
            const url = window.URL.createObjectURL(blob)
            const a = document.createElement('a')
            a.setAttribute('style', 'display:none;')
            document.body.appendChild(a)
            a.href = url
            a.download = 'filename'
            a.click()
            a.remove()
            resolve(data)
          })
          .catch(err => {
            reject(err)
          })
      })
    return response 

    }

score 0 · Answer 1 · answered Sep 07 '22 at 05:27

0

convert your data into blob (wether it's base64, octate, arraybuffer etc)

const blob = new Blob([data])

create objectURL for that

const url = window.URL.createObjectURL(blob)

create hidden dom element (so it works in all browsers)

const a = document.createElement('a');
a.setAttribute('style', 'display:none;');
document.body.appendChild(a);

attach file to hidden element and click hidden element to download. remove after

a.href = url;
a.download = filename;
a.click();
a.remove();

just make sure to make your data into blob

answered Sep 07 '22 at 05:27

Stacks Queue

848
7
18

Thanks, I tried, but nothing shown up, I will updated my code so you see what Ive done – Ae Leung Sep 07 '22 at 06:26
you can go for await rather than whole promise thing `const response = await axios.post(url, option).then(response=>{}).catch(error=>)` if you are to `console.log(blob)` it should have `{size: filesize, type: ''}` also try to add extension in your filename like "filename.pptx" more about it: https://stackoverflow.com/questions/52817280/problem-downloading-a-pdf-blob-in-javascript – Stacks Queue Sep 07 '22 at 07:05
Let me try, I'll post the result wether it's success or not – Ae Leung Sep 07 '22 at 07:14
It started to download the ppt as attachment, but when I open the file, it said it need to get repaired and it isnt openable as well. While I am sure that the downloaded ppt should be openable coz I have tried to download a file with same request, and it is openable. So I guess it is the problem with the code above? – Ae Leung Sep 07 '22 at 07:40
try to change `const blob = new Blob([data])` to `const blob = new Blob([new Uint8Array(data)])` or make some way that your binary will be converted into blob. May check it's response type first. it's best if your response type is `array buffer` – Stacks Queue Sep 07 '22 at 08:06
Now, the ppt is openable, but the file size become 0kb and empty ppt. I updated the code in edit – Ae Leung Sep 07 '22 at 10:27
There is a new proceed, I checked that my type of data is a string, even though they show "PK\u0003\u0004\u0014\u0000\u0000\u0000\b\u0000�\u0015'U��O�.\u000 .... , in that case, what should I do? ([new Uint8Array(data)] doesnt work , as the size becomes zero when I console the blob) – Ae Leung Sep 08 '22 at 11:49
can you edit your question and add the whole response data even for a sample pptx? – Stacks Queue Sep 08 '22 at 13:43
May I ask how to check the response type? I am afraid the respone type is not what new Blob() is expecting to get – Ae Leung Sep 14 '22 at 16:38

How to make the response as downloading as an attachment on browser, after getting back binary?

1 Answers1