Vue/HTML/JS how to download a file to browser using the download tag

问题

This question is different from the other answer provided, because my question is focused on VUE and if VUE also has a way to prevent the default method.

This question is more specific to HTML 5 "download" along with VUE binding of the :href and why it doesn't work to prevent the default browser behavior of opening the file in a new tab.

Expected behavior : Download the file to the browser

Actual behavior : Opens the file in a new tab

Exception: Only images, pdf and browser compatible files are opened in a new tab, other files like .exe are downloaded as normal - Why is this, can this behavior be changed in html?

Adding target="_blank" does not solve the problem

<a :href="downloadById(item.url)" download>Download</a>

When the above link is clicked, the file is opened in a new browser tab, i need to prevent this default behavior and force a download upon click. The HTML 5 tag "download" is suppose to solve this problem doesn't seem to work.

Chrome has recently deprecated the download tag form working with cross domain downloads. Does vue have a modifier to prevent this default? Are there any other ways to download the file either in javascript or in html?

One proposed solution is to read the URL as a arrayBuffer and then create a new blob in the DOM, and then create an anchor element and click it.. But that seems hacky to force a download of a file.

I am sure their must be a cleaner solution to download a file form a URL, its a trivial problem, hoping for a simple solution.

Thanks.

回答1:

A less hacky way to avoid CORS issues would be to get the file via XHR request and provide the file as a blob:

Template

<a
  :href="item.url"
  v-text="item.label"
  @click.prevent="downloadItem(item)" />

Vue

methods: {
  downloadItem ({ url, label }) {
    Axios.get(url, { responseType: 'blob' })
      .then(({ data }) => {
        const blob = new Blob([data], { type: 'application/pdf' })
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = label
        link.click()
      }).catch(error => console.error(error))
    })
  }
}

I used Axios for my example, but you should be able to use whatever lib you want. Also note that both the blob's mime type and the download's name are hardwired for simplicity.

来源：https://stackoverflow.com/questions/53772331/vue-html-js-how-to-download-a-file-to-browser-using-the-download-tag

标签

html5

Vue.js

arraybuffer