<script setup></script>
<template>
<div>
<button><a :href="fileUrl" download>点击下载文件1 - a标签</a></button>
</div>
<hr />
<div>
<button @click="downloadFile">点击下载文件2 - blob</button>
</div>
<hr />
<div>
<button @click="downloadFile2">点击下载文件3 - window.location.href</button>
</div>
</template>
<script>
export default {
data() {
return {
fileUrl: 'http://localhost:9090/cardpro/card/system/login/export/api' // 替换为你要下载的文件的实际路径
}
},
methods: {
async downloadFile() {
const url = 'http://localhost:9090/cardpro/card/system/login/export/api'
const response = await fetch(url) //发送GET请求
if (response.ok) {
const blob = await response.blob() //获取Blob对象
const url = window.URL.createObjectURL(blob) //创建Blob对象的URL
const link = document.createElement('a') //创建一个新的<a>元素
link.href = url //设置<a>元素的href属性为Blob对象的URL
link.download = 'filename.xlsx' //设置下载文件的文件名
document.body.appendChild(link) //将<a>元素添加到文档中
link.click() //模拟点击<a>元素以触发文件下载
} else {
//处理API响应失败的情况，例如显示错误消息
}
},
async downloadFile2() {
window.location.href =
'http://localhost:9090/cardpro/card/system/login/export/api'
}
}
}
</script>
<style scoped></style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/192686.html
