api.exportAll(params).then(response => { // 获取响应头'content-disposition' const contentDisposition = response.headers['content-disposition'] // 获取文件命名 const filename = decodeURI(contentDisposition.split('attachment; ')[1]) // blob是可以存储二进制的容器,大文件 const blob = new Blob([response.data]) // 将二进制转化为url 创建本地url const url = window.URL.createObjectURL(blob) // 创建a标签 const link = document.createElement('a') // 隐藏a标签 link.style.display = 'none' // 设置a标签的url link.href = url // 动态配置文件的名称 link.setAttribute('download', filename.replace('filename=', '')) // 添加a链接到页面 document.body.appendChild(link) // 点击事件触发a标签 link.click() // 移除a标签 document.body.removeChild(link) // 移除本地url window.URL.revokeObjectURL(url) })
前端 vue数据流的处理
最新推荐文章于 2024-09-13 10:46:15 发布
本文介绍了如何通过JavaScript处理API返回的响应头,利用Blob和URL.createObjectURL技术,实现从API获取的数据自动下载为本地文件,包括设置文件名和隐藏a标签的操作。
摘要由CSDN通过智能技术生成