前端系统使用iframe下载文件

这篇具有很好参考价值的文章主要介绍了前端系统使用iframe下载文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求描述

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

碰到的问题

页面组件存在与云端的组件库,使用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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue】 在 vue 中使用 iframe 挂载 html 文件

    首先需要将要挂载的 html 文件放到 public 文件夹中 路径的引用形式 通过绑定 ref 获取到 iframe,data为我需要传递的数据,通过 iframes.postMessage 的方法进行传递。 postMessage 通信具体用法请参考:https://blog.csdn.net/qq_45677671/article/details/128238860

    2024年02月17日
    浏览(46)
  • 前端工程化-VUE

    高效的开发离不开基础工程的搭建。本章主要介绍如何使用Vue进行实际SPA项目的开发,这里使用的是目前热门的JavaScript应用程序模块打包工具Webpack,进行模块化开发、代码编译和打包。 Vue脚手架指的是Vue-cli,它是一个专门为单页面应用快速搭建繁杂程序的脚手架,它可以轻

    2024年02月08日
    浏览(74)
  • Vite + Vue3 实现前端项目工程化

    Vue3 发布至今,周边的生态、技术方案已足够成熟,个人认为新项目是时候切换到 Vite + Vue3 了。今天就给大家操作一下这种技术方案实现前端工程化。 数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus Vue权限系统案例 个人博客 通过官方脚手架初始化项目 第一种方式,这是使

    2024年02月03日
    浏览(73)
  • 前端Vue入门-day03-用Vue实现工程化、组件化开发

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 生命周期 Vue 生命周期 和 生命周期的四个阶段  Vue 生命周期函数(钩子函数) 案例-create的应用 案例-mounted的应用 工程化开发 脚手架 Vue CLI 开发 Vue 的两种方式 基本介

    2024年02月15日
    浏览(57)
  • Vue3学习-01_前端工程化与webpack

    最近在学习Vue知识,参照的教程是黑马程序员官网提供的免费前端教程,这里记录一下自己的学习笔记以及遇到的相关问题。 前端工程化指的是:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上,就是实现前

    2024年02月13日
    浏览(68)
  • 手把手完成前端Vue3 + Vite项目工程化搭建

    基于 Vue3 + Vite 搭建的前端工程化项目演示模板 开发环境: Node.js v16.14.2 + npm v8.3.2 开发工具: Visual Studio Code or WebStorm 源代码管理: Git npm镜像: npm config set registry https://registry.npmmirror.com 技术栈 描述 Vue 渐进式 JavaScript 框架 Vite 新一代前端开发与构建工具 Element Plus 基于 Vue

    2024年04月11日
    浏览(67)
  • Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署

    Ajax介绍 Axios 案例 前后端分离 前端工程化 环境准备,nodejs安装,D:javaprojectjavawebday03-Vue-Elementday03-Vue-Element资料NodeJS安装文档 Vue项目简介 它本来默认端口号是8080 ,但这就和tomcat冲突了所以修改为7000 Vue项目开发流程 Vue组件库Element pagination分页组件,table表格组件,Dial

    2024年02月05日
    浏览(69)
  • 前端使用vue-pdf、pdf-lib、canvas 给PDF文件添加水印,并预览与下载

    原理就是给显示pdf 的容器增加一层水印遮罩层 下载: 通过url获取pdf文件的arrarybuffer文件流 将arraybuffer数据转成pdf文档 添加水印字体(内置/自定义) 为每页pdf添加文字水印 保存pdf文件的unit64Arrary文件流 预览: 创建canvas容器(用于显示水印文字) 创建水印canvas 将水印canv

    2024年01月24日
    浏览(59)
  • Velocity 不用愁!Velocity 系统的前端工程化之路

    Velocity是一个基于Java的Web页面模版引擎。十多年前,Velocity将Java代码从Web页面中分离出来,使得开发者能够并行网页开发和Java开发。随着十年前后端分离的浪潮涌动,回首再面对这些基于Velocity的旧系统,无论是后端还是前端人员维护,都会存在诸多问题: (1)后端人员维

    2024年02月06日
    浏览(35)
  • 前端(vue)文件流下载

    前端(vue)文件流下载 3.一般下载都得首先去触发点击,点击后下载。点击时候去拿到下载文件的下载文件名,下载数据流,下载的类型,请求content-type 要设置为 application/octet-stream(二进制流数据),这样我们的的参数就全齐了 4.拓展 ,在http请求中,一般接口相应得是20

    2024年02月12日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包