A label_ File download (download attribute)

Requirements describe

• demand ： When the button is clicked , You can download the template
  • The download address is a remote link —>https://file2.clipworks.com/4c217acc09226795a7ebb8461ddf548f/20220726/469c1056-749d-4c47-819e-35f91c70e163

Implementation process

notes ： If you don't understand something, you can first look at the knowledge points below ~

Realization

<div>
    <a class="el-button el-button--primary el-button--mini" href='https://file2.clipworks.com/4c217acc09226795a7ebb8461ddf548f/20220726/469c1056-749d-4c47-819e-35f91c70e163' download=" Video tutorial template "> Template download </a>
</div>

• a The label style is elementUI The style of the button in

problem

​ if href The attribute value is server link instead of local link , When clicked, it will not download but jump to the current url!

reason

​ Because download Attributes have homologous policies , If it is not the same source, it will not download but jump ！

solve

since a There is a homology strategy for label downloading , We will create a local based on the remote link url;

<template>
  <div style="margin-top:20px">
    <a class="el-button el-button--primary el-button--mini" :href='url' download=" Video tutorial template " id='downloadBtn' target='_blank'> Template download </a>
  </div>
</template>

<script>
export default {
    
  data(){
    
    return{
    
      url:undefined
    }
  },
  created(){
    
    this.getLocalUrl()
  },
  methods:{
    
    getLocalUrl(){
    
      //  To create local 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>

Knowledge point

Knowledge point 1-a Labeled download attribute

• download The attribute is h5 Newly added a Tag attributes ！
• download The function of attribute is ： Instruct the browser to download URL Instead of navigating to URL; download Property value It will be used as the pre filled file name during the download and save process ;
• Be careful ：
  • if url For remote links , There is a homology policy for this attribute —> From different sources url Instead of downloading, you can jump directly ;
  • Compatibility is not good (ie I won't support it )

Knowledge point 2- Native http request

Knowledge point 3- To create local url