前端系统使用iframe下载文件

需求描述

前端调用后端的接口，获取到文件的路径，并下载。

碰到的问题

页面组件存在与云端的组件库，使用window.open()无法满足需求（在当前页面下载），因为路径是跨域的，所以决定使用iframe的方式下载，部分代码如下：

// 获取文件的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)
}