React中，通过iframe，实现文件下载功能

简要介绍：我们可以通过iframe，动态设置src，来实现下载功能。

1.通用的iframe实现下载功能。

<script>function download()
{var url="http://www.baidu.com?fileId="1234"document.getElementById("ifile").src=url;
}</script>

  <a href="#" onClick="download()">download</a><iframe id="ifile" style="display:none"></iframe>

代码的结构如上，我们可以看到：

（1）首先iframe的id为ifile，并且设置display为none,不可见，这样就就不会影响外观。

（2）其次，通过onClick事件，执行动态设置src，通过get的方法在src中传递参数fileId。

这样就能实现从iframe中下载文件。

2.在React中，如何利用iframe来实现文件下载的功能。

HTML:

 <a href="#" onClick="download()">download</a><iframe ref="ifile" style="display:none"></iframe>

JS:

down(){this.refs.ifile.props.src="www.baidu.com?fileId="1234";
}

React中，通过iframe，实现文件下载功能相关推荐

React中的各个目录文件功能
react 渲染道具_在React中学习分解道具的基础
react 渲染道具 by Evelyn Chan 通过伊芙琳·陈在React中学习分解道具的基础 (Learn the basics of destructuring props in React ...
react 中 state 的基本使用
有状态组件和无状态组件函数组件又叫做无状态组件,类组件又叫做有状态组件状态( state )即数据函数组件没有自己的状态,只负责数据展示(静) 类组件有自己的状态,负责更新Ul,让页面&q ...
angular7中文件下载功能(图片、文档)
在angular中实现文件下载功能,暂不支持pdf格式,因为pdf会直接预览 H5的下载方式: <!-- <td class="underline"><a ...
ASP.NET网页中RAR、DOC、PDF等文件下载功能实例源代码
以前做asp.net下载功能的时候都是采用: <a href="http://www.wang0214.com/wgcms">下载</a> 的方式来实现下载 ...
如何在React中使用功能组件
Have you wondered how to create a component in React? 您是否想过如何在React中创建组件? To answer, it is as simple ...
react中的keep-alive功能
在vue中可以很方便的实现keep-alive功能,但是在react中却不是很方便,遇事不要慌,度娘来帮忙. react-keep-alive 首先找到的是react-keep-alive,一波操作之 ...
react项目中实现打印预览功能
最近项目中,前端采用react+antd+dva的组合, 今天有一个新需求, 需要在后台管理系统中实现点击打印完成指定页面的打印功能. 我们道浏览器带有打印功能的实现,window.print() ...
JS全屏代码，解决PDF.js在iframe中部分浏览器全屏功能错误
JS全屏代码,解决PDF.js在iframe中部分浏览器全屏功能错误 PDF.js在iframe模式在火狐浏览器中按钮被屏蔽经分析,viewer.js 发现了判断逻辑 debug发现第二个判断后为 ...

React中，通过iframe，实现文件下载功能

React中，通过iframe，实现文件下载功能相关推荐

最新文章

热门文章