前端原生excel 导出 ,通过解析hmtl ＜table＞...＜/table＞

最新推荐文章于 2024-03-05 18:06:54 发布

原创最新推荐文章于 2024-03-05 18:06:54 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript

html 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用前端技术将HTML表格数据导出为Excel文件的方法。该方法支持多种浏览器，并针对IE浏览器提供了特殊处理。代码实现了表格数据的清理与格式化，确保导出的Excel文件具有良好的可读性和兼容性。

前端原生excel 导出 ,通过解析hmtl <table>...</table>

/**
 * 根據table的id導出Excel
 */
function AutomateExcel(tableid) {
	
	var div_Excelid = "div_Ex11_11";
	$("body").find("#" + div_Excelid).remove();
	var ExcelData = $("#" + tableid).clone(true);
	var vthead = ExcelData.find("thead");
	var vtbody = ExcelData.find("tbody");
	var vt = "<div id='" + div_Excelid + "' style='display:none'><table>"
			+ vthead.html() +vtbody.html()  + "</table></div>";
	
	$("body").append(vt);// 
	var tableExcelid = "div_Extb11_11";
	$("#"+div_Excelid+"").find("table").prop("id", tableExcelid);

	$("#" + tableExcelid).find("tr th").each(function() {
		var che=$(this).attr("name");
		if(che != 'flag'){
			var a = $(this).css("display");
			if (a == "none") {
				$(this).remove();
			}
		}
	});

	$("#" + tableExcelid).find("tr td").each(function() {
		var che=$(this).attr("name");
		if(che != 'flag'){
			var a = $(this).css("display");
			if (a == "none") {
				$(this).remove();
			}
		}
	});
	$("#" + tableExcelid).find("tbody").find("tr").each(function() {		
			var a = $(this).css("display");
			if (a == "none") {
				$(this).remove();
			}	
		
	});
	if (getExplorer() == 'ie') {
		var table = document.getElementById(tableExcelid);
		var Ref = document.body.createTextRange();
		Ref.moveToElementText(table);
		Ref.execCommand("Copy");
		try {
			var Excel = new ActiveXObject("Excel.Application");
		} catch (e) {
			// IE浏览器 →工具 → Internet选项 → 安全 → 自定义级别 → ActiveX 控件和插件 →
			// 对未标记为可安全执行脚本的ActiveX 控件初始化并执行脚本 → 启用 → 确定
			//
			alert("導出數據異常");
			return;
		}
		Excel.Visible = true;
		Excel.Workbooks.Add().Worksheets.Item(1).Paste();
		Excel = null;

	} else {
		tableToExcel(tableExcelid)
	}
}

/**
 * 非IE瀏覽器導出Excel
 */
var tableToExcel = (function() {
	var uri = 'data:application/vnd.ms-excel;base64,';
	var template = '<html><head><meta charset="UTF-8">             '
			+ ' <style>                                       '
			+ '  table {                                '
			+ '       table-layout: fixed;                    '
			+ '       empty-cells: show;                      '
			+ '       border-collapse: collapse;              '
			+ '       border: 1px solid #dddddd;              '
			+ '       margin:0 auto;                          '
			+ '       table-layout:fixed;                     '
			+ '   }                                           '
			+ '                                               '
			+ '  table td {                                   '
			+ '      border: 1px solid #dddddd;               '
			+ '      padding: 0 lem 0;                        '
			+ '      vertical-align: middle !important;       '
			+ '      text-align: center;                      '
			+ '      border: 1px solid #dddddd;               '
			+ '     width:80px;                              '
			+ '  }                                            '
			+ '  table th {                                   '
			+ '      border: 1px solid #dddddd;               '
			+ '      padding: 0 lem 0;                        '
			+ '      vertical-align: middle !important;       '
			+ '      text-align: center;                      '
			+ '      border: 1px solid #dddddd;               '
			+ '     width:80px;                              '
			+ '  }                                            '
			+ '  </style>                                     '
			+ '</head><body><table>{table}</table></body></html>';
	var base64 = function(s) {
		return window.btoa(unescape(encodeURIComponent(s)))
	}, format = function(s, c) {
		return s.replace(/{(\w+)}/g, function(m, p) {
			return c[p];
		})
	}
	return function(table, name) {
		if (!table.nodeType)
			table = document.getElementById(table)
		var ctx = {
			worksheet : name || 'Worksheet',
			table : table.innerHTML
		}
		window.location.href = uri + base64(format(template, ctx))
	}
})()

/**
 * 判斷瀏覽器
 */
function getExplorer() {
	var explorer = window.navigator.userAgent;
	// ie
	if (explorer.indexOf("MSIE") >= 0) {
		return 'ie';
	}
	// firefox
	else if (explorer.indexOf("Firefox") >= 0) {
		return 'Firefox';
	}
	// Chrome
	else if (explorer.indexOf("Chrome") >= 0) {
		return 'Chrome';
	}
	// Opera
	else if (explorer.indexOf("Opera") >= 0) {
		return 'Opera';
	}
	// Safari
	else if (explorer.indexOf("Safari") >= 0) {
		return 'Safari';
	}
};

今天发现一个不错的代码分享一下,上古前端大佬写的，至今已无从考证。(非本人写的)