a标签下载
添加download属性,点击a标签不会跳转,会下载href指定的文件。href=“#info” 跳转到id为’info’的标签位置。设置target=“_blank”,点击打开新页面。download可设置下载的文件名。
·
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>
更多推荐
已为社区贡献3条内容
所有评论(0)