a标签_文件下载(download属性)

需求描述

• 需求：当点击按钮时，可以下载模板
  • 下载地址是一个远程链接—>https://file2.clipworks.com/4c217acc09226795a7ebb8461ddf548f/20220726/469c1056-749d-4c47-819e-35f91c70e163

实现过程

注：若有不明白的地方可以先看下方知识点哦~

实现

<div>
    <a class="el-button el-button--primary el-button--mini" href='https://file2.clipworks.com/4c217acc09226795a7ebb8461ddf548f/20220726/469c1056-749d-4c47-819e-35f91c70e163' download="视频教程模板">模板下载a>
div>
1
2
3

• a标签样式采用的是elementUI中按钮的样式

问题

​ 按照如上代码，当点击时并不会下载而是跳转到当前url!

原因

​ 是因为download属性具有同源策略，若是不同源不会下载而是跳转！

解决

既然a标签下载存在同源策略，我们就依据远程链接创建一个本地url;

<template>
  <div style="margin-top:20px">
    <a class="el-button el-button--primary el-button--mini" :href='url' download="视频教程模板" id='downloadBtn' target='_blank'>模板下载</a>
  </div>
</template>

<script>
export default {
  data(){
    return{
      url:undefined
    }
  },
  created(){
    this.getLocalUrl()
  },
  methods:{
    getLocalUrl(){
      // 创建本地url
      const url = 'https://file2.clipworks.com/4c217acc09226795a7ebb8461ddf548f/20220726/469c1056-749d-4c47-819e-35f91c70e163'
      const xhr = new XMLHttpRequest()
      xhr.open('GET', url)
      xhr.responseType = "blob"
      xhr.onload = ()=>{
        console.log('res', xhr.response)
        this.url = URL.createObjectURL(xhr.response)
      }
      xhr.onerror = e =>{
        console.log('err', e)
      }
      xhr.send()
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

知识点

知识点1-a标签的download属性

• download属性是h5新增的a标签属性！
• download属性作用是：指示浏览器下载 URL 而不是导航到URL; download属性值 将在下载保存过程中作为预填充的文件名；
• 注意点：
  • 若url为远程链接，此属性存在同源策略—>不同源的url不会下载而是直接跳转；
  • 兼容性不太好(ie不支持)

知识点2-原生http请求

使用XMLHttpRequest实例对象发送请求

知识点3-创建本地url

创建本地url