Vue download file

在 Vue 项目中使用 <a> 标签在 Chrome 浏览器中下载文件，目前测试网络路径图片，网络路径mp4文件，都会直接在浏览器当前 tab 页打开，代码示例如下

<a href="http://v1.keepcdn.com/video/2019/12/14/21/51/15763314900925df4e8e265dcbb4382acc709.mp4" download>mp4</a>

mp4

<a href="https://img.36krcdn.com/20200305/v2_dfec2fe8a18b49eeb5a7b9960c2ad500_img_png" download>png</a>

image

Version

Chrome: Version 80.0.3987.132 (Official Build) (64-bit)
Vue: v2.6.10

解决思路

使用 fetch 获取url 得到 blob 对象，下载 window.URL.createObjectURL() 生成的 object url 就行了

<template>
  <div>
    <a
      href="http://v1.keepcdn.com/video/2019/12/14/21/51/15763314900925df4e8e265dcbb4382acc709.mp4"
      download
    >mp4</a>
    <a
      href="https://img.36krcdn.com/20200305/v2_dfec2fe8a18b49eeb5a7b9960c2ad500_img_png"
      download
    >png</a>
    <a ref="download" :href="downloadUrl" :download="downloadFileName">download</a>
    <input type="button" @click="downloadClick" value="download" />
  </div>
</template>
<script>
export default {
  data () {
    return {
      downloadFileName: '',
      downloadUrl: ''
    }
  },
  methods: {
    async downloadClick () {
      let url = 'http://v1.keepcdn.com/video/2019/12/14/21/51/15763314900925df4e8e265dcbb4382acc709.mp4' // 网络路径文件地址
      const res = await fetch(url)
      console.log(res)
      const blob = await res.blob()
      console.log(blob)
      const urlBlob = window.URL.createObjectURL(blob) // 创建 object url，没有这一步下载的 blob 文件会出现 Failed 情况
      console.log('urlBlob: ', urlBlob)
      this.downloadUrl = urlBlob
      console.log('downloadUrl: ', this.downloadUrl)
      this.downloadFileName = 'a.mp4' // 文件名需要动态赋值
      console.log('fileName: ', this.downloadFileName)
      setTimeout(() => {
        this.$refs.download.click()
      }, 200)
    }
  }
}
</script>

参考

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
https://segmentfault.com/a/1190000017946900#item-2-3
Vue <a> download file
Vue download base64 file