iframe导出文件
2020-03-19 本文已影响0人
麦西的西
1. <iframe>简介
<iframe>标签规定一个内联框架。
这个内联框架可以用来在当前HTML文档中嵌入另一个文档。
比如,在自己的html页面中嵌入百度的网页:
<iframe src="https://www.baidu.com" width="500px" height="500px">
效果:
iframe嵌入百度.jpg
可以使用 CSS 为 <iframe> (包括滚动条)定义样式,修改成我们需要的样子。
2. iframe导出文件
可以使用<iframe>标签的src属性来实现导出文件。
创建一个iframe标签,并把后端提供的下载地址放到src属性里面,然后把iframe添加到body里即可。
// 使用JQuery
var iframeEl = "<iframe src='http://************'></iframe>"
$("body").append(iframeEl)
一个比较完整的导出文件函数,如下:
// 封装一个导出文件的函数,url为文件下载地址
exportFile(url) {
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = url;
let bodyEl = document.getElementsByTagName('body')[0]
bodyEl.appendChild(iframe);
//最好设置下载完成后移除iframe,这里设置100s后移除
setTimeout(() => {
bodyEl.removeChild(iframe);
}, 100000);
}
参考:https://www.runoob.com/tags/tag-iframe.html
https://segmentfault.com/a/1190000010498035