Response Type ArrayBuffer is not working (comparison XMLHttpRequest)

[bilalcorbacioglu]

Hi everyone,

Simply; I used two different ways to download the document.

1-XMLHttpRequest

var oReq = new XMLHttpRequest()
oReq.open('GET', 'http://localhost:15354/api/......', true)
oReq.setRequestHeader('Accept', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
oReq.setRequestHeader('AuthenticationToken', '.......')
oReq.responseType = 'arraybuffer'
oReq.onload = function () {
    var arrayBuffer = oReq.response
    console.log(arrayBuffer)
    var blob = new Blob([arrayBuffer], { type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
    console.log(blob)
    fileSaver.saveAs(blob, 'Document.xlsx')
}
oReq.send(null)

2-Vue Resource

this.$http.get('http://localhost:15354/api/......', {responseType: 'arraybuffer'}, {headers: {'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'AuthenticationToken': '.....'}}).then(response => {
  var arrayBuffer = response.data
  console.log(arrayBuffer)
  var blob = new Blob([arrayBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
  console.log(blob)
  fileSaver.saveAs(blob, 'Document.xlsx')
})

Console.log Result ; http://prntscr.com/hzc2rk

3541 => 1.XMLHttpRequest (The document is opening.) 1782 => 2,Vue Resource (The document is not opening.)

Where is the problem ?

[hotslab]

This also happened to me too with a pdf file. The vanilla method worked whilst the vue-resource failed despite the implementation being similar. Could it be that the following snippet does not properly pass the request in the node module file /node_modules/vue-resource/src/http/client/xhr.js ?

if (request.responseType && 'responseType' in xhr) {
            xhr.responseType = request.responseType;
}  

[FeherMarcell]

Requesting the response in ArrayBuffer works for me (VueResource 1.5.1) if responseType: 'arraybuffer' is in the same object as headers, like this:

this.$get(
   'http://link-to-my-image', 
   { responseType: 'arraybuffer', headers: this.http_headers }
)
.then(res => {
   console.log("Response body ArrayBuffer: ", res.body)
})