javascript導出excel

時間  2019-11-09
標籤 javascript 導出 excel 欄目 JavaScript 简体版
原文   原文鏈接

<script type="text/javascript" src="js/jquery.min.js"></script>javascript

<script type="text/javascript" src="js/jquery.base64.js"></script>html

<script type="text/javascript" src="js/jquery.table2excel.js"></script>java

$("#table2excel").table2excel({
  // 不被導出的表格行的CSS class類
  exclude: ".noExl",
  // 導出的Excel文檔的名稱
  name: "Excel Document Name",
  // Excel文件的名稱，不要加後綴
  filename: "myExcelTable"
});jquery

js下載：http://download.csdn.net/detail/liu4071325/9483580git

插件：github

https://github.com/rainabba/jquery-table2exceljson

https://github.com/kayalshri/tableExport.jquery.plugin瀏覽器

 

PS：當表格數據太多會不能正常下載導出app

原理：將數據轉化爲base64的串，經過data:application/vnd.ms-excel;base64,瀏覽器協議下載。ide

but瀏覽器對於URL長度是有限制的，當你的數據太多的時候base64的串會超過這個限制就不能下載了。

HTTP URL最大長度 http://blog.csdn.net/woxueliuyun/article/details/41866611

 

解決方案：

修正後的jquery.table2excel.js

//table2excel.js
;(function ( $, window, document, undefined ) {
	var pluginName = "table2excel",

		defaults = {
			exclude: ".noExl",
			name: "Table2Excel",
			excludeChild : '',
		};

	// The actual plugin constructor
	function Plugin ( element, options ) {
		this.element = element;
		// jQuery has an extend method which merges the contents of two or
		// more objects, storing the result in the first object. The first object
		// is generally empty as we don't want to alter the default options for
		// future instances of the plugin
		//
		this.settings = $.extend( {}, defaults, options );
		this._defaults = defaults;
		this._name = pluginName;
		this.init();
	}

	Plugin.prototype = {
		init: function () {
			var e = this;

			var utf8Heading = "<meta http-equiv=\"content-type\" content=\"application/vnd.ms-excel; charset=UTF-8\">";
			e.template = {
				head: "<html xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:x=\"urn:schemas-microsoft-com:office:excel\" xmlns=\"http://www.w3.org/TR/REC-html40\">" + utf8Heading + "<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets>",
				sheet: {
					head: "<x:ExcelWorksheet><x:Name>",
					tail: "</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>"
				},
				mid: "</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body>",
				table: {
					head: "<table>",
					tail: "</table>"
				},
				foot: "</body></html>"
			};

			e.tableRows = [];

			// get contents of table except for exclude
			$(e.element).each( function(i,o) {
				var tempRows = "";
				$(o).find("tr").not(e.settings.exclude).each(function (i,o) {
					tempRows += "<tr>";
					$(o).find("th").not(e.settings.exclude).each(function (i,q) {
						var flag = $(q).find(e.settings.exclude) // does this <td> have something with an exclude class
						if(flag.length >= 1) {
							tempRows += "<td> </td>" // exclude it!!
						} else {
							if(e.settings.excludeChild){
								var html = $(q).html();
								$(q).find(e.settings.excludeChild).each(function(){
									html = html.replace($(this).html(), '');
								});
								tempRows += "<td>" + html + "</td>";
							}else {
								tempRows += "<td>" + $(q).html() + "</td>";
							}
						}
					})
					$(o).find("td").not(e.settings.exclude).each(function (i,q) {
						var flag = $(q).find(e.settings.exclude) // does this <td> have something with an exclude class
						if(flag.length >= 1) {
							tempRows += "<td> </td>" // exclude it!!
						} else {
							if(e.settings.excludeChild){
								var html = $(q).html();
								$(q).find(e.settings.excludeChild).each(function(){
									html = html.replace($(this).html(), '');
								});
								tempRows += "<td>" + html + "</td>";
							}else {
								tempRows += "<td>" + $(q).html() + "</td>";
							}
						}
					});
					tempRows += "</tr>";
				});
				e.tableRows.push(tempRows);
			});

			e.tableToExcel(e.tableRows, e.settings.name, e.settings.sheetName);
		},

		tableToExcel: function (table, name, sheetName) {
			var e = this, fullTemplate="", i, link, a;

			e.uri = "data:application/vnd.ms-excel;base64,";
			e.base64 = function (s) {
				return window.btoa(unescape(encodeURIComponent(s)));
			};
			e.format = function (s, c) {
				return s.replace(/{(\w+)}/g, function (m, p) {
					return c[p];
				});
			};

			sheetName = typeof sheetName === "undefined" ? "Sheet" : sheetName;

			e.ctx = {
				worksheet: name || "Worksheet",
				table: table,
				sheetName: sheetName,
			};

			fullTemplate= e.template.head;

			if ( $.isArray(table) ) {
				for (i in table) {
					//fullTemplate += e.template.sheet.head + "{worksheet" + i + "}" + e.template.sheet.tail;
					fullTemplate += e.template.sheet.head + sheetName + i + e.template.sheet.tail;
				}
			}

			fullTemplate += e.template.mid;

			if ( $.isArray(table) ) {
				for (i in table) {
					fullTemplate += e.template.table.head + "{table" + i + "}" + e.template.table.tail;
				}
			}

			fullTemplate += e.template.foot;

			for (i in table) {
				e.ctx["table" + i] = table[i];
			}
			delete e.ctx.table;

			if (typeof msie !== "undefined" && msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
			{
				if (typeof Blob !== "undefined") {
					//use blobs if we can
					fullTemplate = [fullTemplate];
					//convert to array
					var blob1 = new Blob(fullTemplate, { type: "text/html" });
					window.navigator.msSaveBlob(blob1, getFileName(e.settings) );
				} else {
					//otherwise use the iframe and save
					//requires a blank iframe on page called txtArea1
					txtArea1.document.open("text/html", "replace");
					txtArea1.document.write(e.format(fullTemplate, e.ctx));
					txtArea1.document.close();
					txtArea1.focus();
					sa = txtArea1.document.execCommand("SaveAs", true, getFileName(e.settings) );
				}

			} else {
				link = e.uri + e.base64(e.format(fullTemplate, e.ctx));
				if(e.settings.hasOwnProperty('uploadFunc') && link.length > 10000){
					e.settings.uploadFunc({
						'name' : getFileName(e.settings),
						'data' : link
					}, getFileName(e.settings));
				}else{
					a = document.createElement("a");
					a.download = getFileName(e.settings);
					a.href = link;

					document.body.appendChild(a);
					a.click();
				}
				// setTimeout('document.body.removeChild(a)', 2000);
			}
			return true;
		}
	};

	function getFileName(settings) {
		return ( settings.filename ? settings.filename : "table2excel" );
	}

	$.fn[ pluginName ] = function ( options ) {
		var e = this;
		e.each(function() {
			if ( !$.data( e, "plugin_" + pluginName ) ) {
				$.data( e, "plugin_" + pluginName, new Plugin( this, options ) );
			}
		});

		// chain jQuery functions
		return e;
	};

})( jQuery, window, document );

使用

$("#export").on('click',function(){
			$("#table").table2excel({
				exclude : '',
				excludeChild : '.excludeChild',
				name: '',
				filename: buildExportName() + '.xls',
				uploadFunc : openPostWindow
			});
		});

		function openPostWindow(data, name) {
			var tempForm = document.createElement("form");
			tempForm.id= "tempForm1";
			tempForm.method="post";
			tempForm.action= "{:U('Excel/json_export')}";
			tempForm.target= name;

			if( (typeof data == 'string') && data.constructor == String ){
				var hideInput = document.createElement("input");
				hideInput.type="hidden";
				hideInput.name= "content"
				hideInput.value= data;
				tempForm.appendChild(hideInput);
			} else if(( typeof data == 'object' )&& data.constructor == Object ){
				for(var k in data){
					var hideInput = document.createElement("input");
					hideInput.type="hidden";
					hideInput.name= k
					hideInput.value= data[k];
					tempForm.appendChild(hideInput);
				}
			}
			if(tempForm.hasOwnProperty('attachEvent')){
				tempForm.attachEvent("onsubmit",function(){
					window.open('about:blank', name,'height=400, width=400, top=0, left=0, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes');
				});
			}else{
				tempForm.addEventListener("submit",function(){
					window.open('about:blank', name,'height=400, width=400, top=0, left=0, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes');
				});
			}

			document.body.appendChild(tempForm);
			if(tempForm.hasOwnProperty('fireEvent')){
				tempForm.fireEvent("onsubmit");
			}else{
				var evt = document.createEvent("MouseEvents");
				evt.initEvent("click", true, true);
				tempForm.dispatchEvent(evt);
			}

			tempForm.submit();
			document.body.removeChild(tempForm);
		}

PHP下載

$name = I('post.name');
$data = I('post.data');
$data = str_ireplace('data:application/vnd.ms-excel;base64,', '', $data);
$data = base64_decode($data);
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache");
header("Pragma: no-cache");
$file = "./Public/tmp/".$name;
file_put_contents($file, $data);
header("Content-type: application/octet-stream");
if(IS_WIN){
    $name = iconv('gb2312','utf-8',$name);
}
header('Content-Disposition: attachment; filename="' . $name . '"');
header("Content-Length: ". filesize($file));
readfile($file);

 

 

新問題：新打開的窗口在下載以後如何關閉？

方案一：定時關閉~~~~~~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程