需求描述
前端调用后端的接口,获取到文件的路径,并下载。文章来源:https://www.toymoban.com/news/detail-627786.html
碰到的问题
页面组件存在与云端的组件库,使用window.open()无法满足需求(在当前页面下载),因为路径是跨域的,所以决定使用iframe的方式下载,部分代码如下:文章来源地址https://www.toymoban.com/news/detail-627786.html
// 获取文件的url,并下载
export async function getOut(rUrl: string, Message?: any) {
const response = await fetch(rUrl)
const data = await response.json()
loadFile(data.data)
Message.clear()
Message.success('导出成功!')
}
下载文件
function loadFile(url: string) {
const iframe = document.createElement('iframe') // 创建一个HTML 元素
// iframe.style.display = 'none' // 开放无法下载,网上查阅资料很多都有这一行。
iframe.style.height = 0 // 高度设置0 防止影响页面
iframe.src = url// 下载链接
document.body.appendChild(iframe) // 这一行必须,iframe挂在到dom树上才会发请求 // 5分钟之后删除
setTimeout(() => {
iframe.remove()
}, 5 * 60 * 1000)
}
到了这里,关于前端系统使用iframe下载文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!