需求描述
前端調(diào)用后端的接口，獲取到文件的路徑，并下載。文章來源：http://www.zghlxwxcb.cn/news/detail-627786.html
碰到的問題
頁面組件存在與云端的組件庫，使用window.open()無法滿足需求（在當前頁面下載），因為路徑是跨域的，所以決定使用iframe的方式下載，部分代碼如下：文章來源地址http://www.zghlxwxcb.cn/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') // 創(chuàng)建一個HTML 元素
// iframe.style.display = 'none' // 開放無法下載，網(wǎng)上查閱資料很多都有這一行。
iframe.style.height = 0 // 高度設(shè)置0 防止影響頁面
iframe.src = url// 下載鏈接
document.body.appendChild(iframe) // 這一行必須，iframe掛在到dom樹上才會發(fā)請求 // 5分鐘之后刪除
setTimeout(() => {
iframe.remove()
}, 5 * 60 * 1000)
}
到了這里，關(guān)于前端系統(tǒng)使用iframe下載文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
