前端导出文件及导出回调监听

爱被打了一巴掌 2022-09-10 08:30 128阅读 0赞

*  本文介绍比较简单也比较常用的iframe导出方式：根据后端提供的url地址，添加到iframe的src里面，然后把iframe标签添加到body里就可以导出下载。
 *  上代码：

var paramA = 'paramA';
    var paramB = 'paramB'; // URL拼接参数
    var exportUrl = 'xxx/xxx/interfaceName?paramA=' + paramA + '&paramB=' + paramB; // URL拼接参数，URL由后台提供
    // 导出函数封装 在对应的事件中调用触发
    function exportFun(exportUrl ) { 
    	if ($('#downloadIframe').length <= 0) { 
    		$('body').append(<iframe id="downloadIframe" style="display:none"></iframe>)
    	}
    	$('#downloadIframe').attr('src', exportUrl);
    	var downloadIframe = document.getElementById('downloadIframe');
    	// 回调封装
    	var exportCallback = function() { 
    		var res = downloadIframe.contentWindow.document.body.innerHTML;
    		// var res = downloadIframe.contentWindow.document.body.innerText; // 笔者用的这个，用innerHTML的话会有个pre标签
    		if (res && res.xxx...) {  // 根据返回内容判断，res内容由后台控制返回
    			// todo
    		}
     	}
     	// 根据浏览器不同 采用不同的监听方法
     	if (downloadIframe.attachEvent) { 
    		downloadIframe.attachEvent('onload', function() { 
    			exportCallback()
    		})
    	} else { 
    		downloadIframe.onload = function () { 
    			exportCallback()
    		}
    	}
    }
    
    *绑定onload事件时没有使用jQuery的load事件，因为会重复绑定load事件，故采用原生的onload方法*

发表评论取消回复

表情：

评论列表（有 0 条评论，128人围观）

还没有评论，来说两句吧...

相关阅读

相关纯前端js导出Excel文件

项目中有的时候需要咱们前端来导出Excel表格还是需要了解怎么做的，当然了最好还是让后端做导出话不多说，上步骤 1. 安装插件 vue-json-excel

向右看齐/ 2023年01月13日 05:44/ 0 赞/ 106 阅读

相关 vue前端导出excel

vue前端导出excel教程，如此简单解决方法： 1.安装依赖，如果下载慢，npm也可以换成cnpm npm install file-saver -S npm

小咪咪/ 2022年12月04日 09:15/ 0 赞/ 155 阅读

相关前端导出Excel文件,并将导出按钮封装成组件使用

下载安装 npm install --save file-saver npm install --save xlsx npm install --save scri

女爷i/ 2022年10月16日 02:57/ 0 赞/ 166 阅读

相关 element ui前端导出

> import FileSaver from 'file-saver'; > import XLSX from 'xlsx'; > > e

傷城~/ 2022年10月10日 04:51/ 0 赞/ 33 阅读

相关 vue前端导出功能（文件流导出）

axios({ url: "statistics/store/dataRank/export", method: "p

旧城等待，/ 2022年10月06日 04:55/ 0 赞/ 241 阅读

相关 jq导出文件及模板下载

> DOM <div class="importDiv">  <input cl

以你之姓@/ 2022年09月10日 14:10/ 0 赞/ 88 阅读

相关前端导出文件及导出回调监听

本文介绍比较简单也比较常用的iframe导出方式：根据后端提供的url地址，添加到iframe的src里面，然后把iframe标签添加到body里就可以导出下载。

爱被打了一巴掌/ 2022年09月10日 08:30/ 0 赞/ 129 阅读

相关 c#导出C++回调函数(cici)

[http://hi.baidu.com/tease/blog/item/1fe7213802780f22b9998f5a.html][http_hi.baidu.com_te

我就是我/ 2022年06月06日 12:13/ 0 赞/ 122 阅读

相关 mysql导入dmp文件及导出

使用命令导入dmp文件 \1.进入mysql bin目录 cd C:\\Program Files\\MySQL\\MySQL Server 5.7\\bin \2

淩亂°似流年/ 2022年04月10日 01:35/ 0 赞/ 286 阅读

相关前端导出表格

<!DOCTYPE html> <html> <head> <title>jQuery Boilerplate</title>

港控/mmm°/ 2021年07月26日 17:23/ 0 赞/ 437 阅读