前端系统使用iframe下载文件

news/2024/11/8 12:01:19/

需求描述

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

碰到的问题

页面组件存在与云端的组件库,使用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.ppmy.cn/news/1007908.html

相关文章

__attribute__((noreturn))

GNU C 的一大特色就是__attribute__ 机制,__attribute__ 可以设置函数属性(Function Attribute)、变量属性(Variable Attribute)和类型属性(Type Attribute)。 语法格式为: __attribute__((att…

并查集练习—省份数量

上一篇中讲了并查集及其原理,在这篇文章中简单应用一下。如果对并查集不是很了解强烈建议先看上一篇。 题目: 有 n 个城市,其中一些彼此相连,另一些没有相连。如果城市 a 与城市 b 直接相连,且城市 b 与城市 c 直接相…

三数之和 LeetCode热题100

题目 给你一个整数数组 nums ,判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ,同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意:答案中不可以包含重复的三元组。 …

设计模式——面向对象的7大设计原则

1.单一职责原则 一个类中最好只放一种类型的方法,比如Dao中只有和数据库交互相关的代码。实现高内聚,低耦合。 2.开闭原则 对外拓展开放,对内修改关闭,有新的需求时不要修改已有代码,而是添加新的代码,比…

合宙Air724UG LuatOS-Air script lib API--ntp

ntp Table of Contents ntp ntp.timeSync(period, fnc, fun) ntp 模块功能:网络授时. 重要提醒!!!!!! 本功能模块采用多个免费公共的NTP服务器来同步时间 并不能保证任何时间任何地点都能百分…

分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测

分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测 目录 分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测…

关于HIVE的分区与分桶

1.分区 1.概念 Hive中的分区就是把一张大表的数据按照业务需要分散的存储到多个目录,每个目录就称为该表的一个分区。在查询时通过where子句中的表达式选择查询所需要的分区,这样的查询效率会提高很多 个人理解白话:按表中或者自定义的一个列,对数据进…

Vue 简版文件预览笔记

简版文件预览笔记 调用方法 <script lang"ts" setup>import {exportFileData,preViewFile,} from /xxx/tools.ts;import {fileDownload,} from /api/xxx/xx;// 预览方法const handleViewBtn () > {const filePath 获取预览地址;const urlFormat 获取预…