Recently, I stumbled across the MDN document about responseType property and found out that there seem to be two values, blob and arraybuffer, that do the same thing.
In the docs, it says that arraybuffer response is a JavaScript ArrayBuffer containing binary data and blob is a Blob object containing the binary data. So both of them are just something that contains binary data, what is the difference then?
Blob
Blob is a file-like object of immutable raw data, and the File interface is based on Blob. So if the binary data is only for read, and in my case to download it, then using Blob is better. Also, Blob can pass to window.URL.createObjectURL directly, which makes using it to download much easier.
When using some third-party library like axios, the code could look something like below.
axios.get("/download", { responseType: "blob" }).then((res) => {
const url = window.URL.createObjectURL(res.data)
const link = document.createElement("a")
link.setAttribute("href", objecturl)
link.setAttribute("download", fileName)
link.click()
window.URL.revokeObjectURL(objecturl)
})And with web standard fetch api, it could be even more simpler thanks to response.blob() method.
fetch("/download")
.then((response) => response.blob())
.then((blob) => {
const url = URL.createObjectURL(blob)
})ArrayBuffer
The ArrayBuffer object is used to represent a generic raw binary data buffer, in other languages as a “byte array”. ArrayBuffer cannot be directly manipulated, but you can use them to create one of the typed array objects or DataView objects, and use these to write the contents of the buffer.