关于Vue下载文件功能使用iframe重复下载（连续下载两次）的问题解决方法

最新推荐文章于 2023-08-22 11:48:00 发布

StreakerHan

最新推荐文章于 2023-08-22 11:48:00 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/m0_37924554/article/details/118183221

版权

本文针对Vue项目中使用iframe实现文件下载时出现的首次点击下载两次的异常现象进行分析。问题描述为页面加载后首次点击下载文件会执行两次，而后续点击则正常。解决方法是在组件的created阶段预调用下载代码，但设置空的下载路径，从而避免了首次下载的重复执行。此解决方案具有一定的适用性。

摘要由CSDN通过智能技术生成

关于Vue下载文件功能使用iframe重复下载（连续下载两次）的问题解决方法

网上的功能代码

	  var iframe = document.createElement('iframe')
      iframe.style.display = 'none' // 防止影响页面
      iframe.style.height = 0 // 防止影响页面
      iframe.src = src

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

StreakerHan

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue下iframe标签页,切换标签页,iframe不重载

12-05

vue项目中一个模板组件，不同iframe的src地址，对应不同的路由，不同标签页，且切换标签页不重载。这种客户的要求是特例在网上没有，所以纯自行手码。由于项目在vuex保存了标签页，所以初次进入该组件时，调用了一次$store。思路很关键，看懂了可复用，熟悉vue的朋友酌情下载。

js使用iframe下载文件连续下载两次问题

weixin_42322084的博客

10-25

762

js使用iframe下载文件重复下载（连续下载两次）完美解决办法

1 条评论您还未登录，请先登录后发表或查看评论

Vue进阶（幺叁玖）：iframe在更改了src之后对应的网页调用后台方法2次

IT全栈华强工作室

08-27

2824

在前期博文《Vue进阶（六十四）：iframe在更改了src之后对应的网页并未刷新》，讲解了解决iframe下src变化后，页面内容未刷新问题，解决方法是在更改iframe src属性值之前加上document.getElementById(iframe的id).contentWindow.location.reload(true);处理逻辑，但是在后续的项目开发过程中发现，以上解决方法会引入一个新的问题：页面relaod之后，相当于页面做了刷新处理，就会调用页面请求后台方法2次，会给服务器造成请求压力。故

iframe页面缓存加载

xixiaixinxin的博客

03-14

4364

东汇宝app后台管理 var iframeArray=new Array();//缓存的数组，放已经创建的iframe 的id /*event事件源 ---------*/ function openPage(event){ var clickSource=event.target || event.srcEl

iframe onload事件触发两次

WHU2015的博客

07-30

2206

标准参考关于 HTML 4.01 规范中 onload 内在事件说明：http://www.w3.org/TR/html401/interact/scripts.html#adef-onload 关于 DOM Level2 Events 规范中 load 事件说明：http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-...

vue 项目中关于iframe页面缓存问题

weixin_45514326的博客

05-20

6208

1.简介关于ifarem标签一般用于项目内外嵌页面。比如vue中经常会遇到外嵌页面的问题，但是有需求这样的要求外嵌页面的内容保持缓存项目中一不小心点他其它页面再次切换回来防止页面外嵌页面再次刷新。 2关于使用keep-alive缓存不了iframe界面原因很多人第一想法就是会使用 keep-alive 去实现组件缓存，但是对iframe标签是行不通的，keepalive作为缓存组件这里不过多介绍，大多用于项目中标签的嵌套实现出口视图页面的缓存。项目中可以发现keepalive包裹

vue 处理页面缓存问题，点击tab标签不刷新页面，点击菜单刷新页面，附带处理报表iframe缓存页面

weixin_40466351的博客

06-03

6235

效果图 1、index页面主要代码 <keep-alive :include="keepAliveList"> <router-view class="avue-view" v-if="keepAlive"/> </keep-alive> provide() { return { index: this, routerRefresh: this.routerRefresh }; }, data() { return

vue项目关于iframe嵌套的页面，在切换tab标签时会被重新刷新的问题处理方案

热门推荐

weixin_44900104的博客

03-16

1万+

vue项目关于iframe嵌套的页面，在切换tab标签时会被重新刷新的问题处理方案

vue中keep-alive对引入iframe的页面无效，实现iframe页面缓存问题

ll7425的博客

11-16

6091

vue中keep-alive对引入iframe的页面无效，实现iframe页面缓存问题

vue使用axios实现excel文件下载的功能

10-15

在Vue.js应用中，使用axios实现Excel文件下载是一项常见的需求，尤其在数据导出场景下。axios是一个基于Promise的HTTP库，可用于浏览器和node.js，它提供了丰富的API接口供前端开发者进行网络请求。在本例中，我们将...

vue实现点击按钮下载文件功能

10-16

`@click`指令用于绑定点击事件，这里使用了Vue Router的`$router.push`方法来跳转路由，而不是直接进行文件下载。真正的下载操作是通过点击按钮后触发`<el-link>`组件，其`href`属性绑定到了文件的URL。为了实现...

在VUE中实现文件下载并判断状态的方法

10-16

在Vue.js框架中，实现文件下载并判断下载状态是常见的需求，特别是在处理用户交互和数据传输时。本篇文章将详细介绍如何在Vue项目中实现这一功能，并通过Axios库来管理HTTP请求。首先，我们需要引入Axios库，它是...

vue 使用post/get 下载导出文件操作

10-14

首先，让我们来看看如何在Vue中使用POST方法下载文件。这种方式通常适用于需要传递复杂参数或者大量数据到服务器的情况。以下是一个简单的示例： ```javascript // 假设`ListData`是从Vue实例中获取的数据 let ...

VUE + java 文件下载

03-29

前端vue，后端java。如果前端是其他语言，可自行转换。实现在浏览器前端点击后的文件下载。不是整个工程代码，只把涉及到下载用的前端的代码和后端的代码贴出来了，可以直接复制使用，有详细的步骤。包含了前端...

vue-element-admin项目中tagView嵌入iframe不刷新重载