Vue download file-阿里云开发者社区

Vue download file

2024-01-05 42

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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>

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>