5

I am trying to download a file from local server (maybe in the future i need to do that in other server). When i click on the link to download the file in the browser appear this message "about:blank#blocked".

I am using axios and vue.js. The code is this:

downloadItem(urlDoc) {
    console.log(urlDoc);
    axios({
        method: 'get',
        url: urlDoc,
        responseType: 'arraybuffer',
    }).then(function(response) {
        let blob = new Blob([response.data], { type: 'image/png' })
        let link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = 'image.png'
        link.click()
    })
}

Previously i add a chrome extension to able the call request. The extension is allow-control-allow-origin.

Thanks.

matiaslauriti
  • 7,065
  • 4
  • 31
  • 43
garciam202
  • 591
  • 2
  • 7
  • 17
  • Any reason you cannot use a normal `a` tag with the download attribute set? – Ferrybig Apr 08 '19 at 19:43
  • If i do that the file was download but with error message appear "Error: network error". And i am not sure if this method help me if i try to download the file from another server that is not local. – garciam202 Apr 08 '19 at 19:52
  • 1
    To download files with javascript, the remote server needs to give your domain permission to do that, that is why it uses cors, if the remote server does not give you permission, you can only use a single `` tag to download files – Ferrybig Apr 08 '19 at 19:53
  • And how can i do that? i try as i said in the post with chrome extension but not work. – garciam202 Apr 09 '19 at 08:09
  • I mean with axios and give permission to my server. Because I try bur always get the same error. For that I used the Chrome extension I mentioned before. Because, what is the difference between two methods? Thanks. – garciam202 Apr 09 '19 at 18:09
  • If you configure your server to send the `Access-Control-Allow-Origin: *` header, then your problem can use the code you posted just fine – Ferrybig Apr 09 '19 at 18:11

0 Answers0