当前位置: 首页 > news >正文

前端系统使用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)
}
http://www.lryc.cn/news/111872.html

相关文章:

  • RabbitMQ - 简单案例
  • 《吐血整理》高级系列教程-吃透Fiddler抓包教程(30)-Fiddler如何抓Android7.0以上的Https包-番外篇
  • 服务器被攻击了怎么办?
  • P1156 垃圾陷阱(背包变形)
  • [Docker实现测试部署CI/CD----构建成功后钉钉告警(7)]
  • UE5 半透明覆层材质
  • 在Raspberry Pi 4上安装Ubuntu 20.04 + ROS noetic(不带显示器)
  • CommStudio for .NET Crack
  • 蓝桥杯上岸考点清单 (冲刺版)!!!
  • AI一键生成短视频
  • 基于MATLAB长时间序列遥感数据分析(以MODIS数据处理为例)
  • postgresql之内存池-AllocsetContext
  • QT 使用单例模式
  • 接口测试——postman接口测试(三)
  • react中hooks的理解与使用
  • STM32的电动自行车信息采集上报系统(学习)
  • 蓝桥杯上岸每日N题 第七期(小猫爬山)!!!
  • 【Linux系统编程】冯诺依曼体系结构
  • 数据结构--动态顺序表
  • 笔试数据结构选填题
  • # 鸢尾花的案例学习
  • 线程、进程的区别
  • 在 Ubuntu 上安装 Docker 桌面
  • 【WebRTC---序篇】(七)RTC多人连麦方案
  • 【Java可执行命令】(十六)诊断命令请求发送工具 jcmd:提供一种简单而强大的方式来管理和监控 Java 进程 ~
  • 如何创建无序列表和有序列表?
  • 【MongoDB】初识、安装MongoDB
  • 方法区内存溢出及常量池
  • 【MTK平台】【wpa_supplicant】关于wpa_supplicant_8/src/p2p/p2p_invitation.c文件的介绍
  • 智能仪表板DevExpress Dashboard v23.1亮点 - 增强对自定义导出的支持