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

上一篇下一篇

猜你喜欢

热点阅读