a标签下载

a标签

当后端提供了下载url时，利用a标签download属性进行下载

<a href="www.baidu.com" target="_blank">百度</a>
<a href="#info">跳转到info</a> 

1.href

目的url

2.target

设置target=“_blank”，点击打开新页面

3.锚点

href=“#info” 跳转到id为’info’的标签位置

4.a标签的download属性

<a href="${fileUrl}" download>下载文件</a>
<a :href="downloadUrl" :download="checkCodeFile.name">{{ checkCodeFile.name}}</a>

添加download属性，点击a标签不会跳转，会下载href指定的文件
download可设置下载的文件名

5.动态数据下载

const downloadFile = (url,filename) => {
    if (!url) return
    let link = document.createElement('a') //创建a标签
    link.style.display = 'none'  //使其隐藏
    link.href = url //赋予文件下载地址
    link.setAttribute('download',filename) //设置下载属性 以及文件名
    document.body.appendChild(link) //a标签插至页面中
    link.click() //强制触发a标签事件
    document.body.removeChild(link);
}

例：

 <a-link
   :hoverable="false"
   icon
   v-if="filename"
   @click="downloadFile(url, filename)"
 >
   {{ filename }}
 </a-link>

或

<a
  :href="downloadUrl"
  :download="filename"
 >
  {{ filename }}
 </a>