Donwload File - Vue.js 2.x

fileUtils.js

export function getFile(response) {
      var result = document.createElement('a');
      var contentDisposition = response.headers.get('Content-Disposition') || '';
      var filename = contentDisposition.split('filename=')[1];
      filename = filename.replace(/"/g,"")

      return response.blob()
        .then(function(data) {
          result.href = window.URL.createObjectURL(data);
          result.target = '_self';
          result.download = filename;

          return result;
        })
}

sample.js

import * as fileUtil from '../fileUtils';

this.$http.post('/generate', data)
  .then(fileUtil.getZIPData)
  .then((link) => {
    link.click();
  })
  .catch((err) => {
    console.log(err)
  })

Hey @11joselu, is this still relevant, or have you found a better solution?

For now I will use this, so I graciously thank you for creating this gist!

I was unable to get a lot of snippets that look like this working with vue-resource - unless I explicitly specified the responseType as blob.

this.$http.post('/api/download', object, {
  responseType: 'blob'
})

hello, @11joselu I use this code in my project, but it doesn't work.
there is an error:

TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
    at eval (fileUtils.js?b651:9)
    at <anonymous>

does anyone know the reason? need you guys help. thanks

@Pokom still use the same code, with package lock version into vue-resource :(

@fgcui1204 I don't knwo if you still having this issue, but maybe this can help you:

https://stackoverflow.com/questions/27120757/failed-to-execute-createobjecturl-on-url

See: https://developer.mozilla.org/es/docs/Web/API/URL/createObjectURL

@11joselu I do not understand what needs to be the result from your api call? The file path?
And why do you use getZIPData when getZIPData is not mentioned in fileUtils.js?