纯js的excel导出插件

在不影响服务器性能的前提下前端导出table内容为excel文件


/**
使用示例 自动绑定 table_to_excel
<a href="#" download="交易记录.xls"class="to_excel fjgl_top_r_05">导出</a>

$(".to_excel").click(function(event){
	var t = Itable2excel({
		worksheet:'数据分析',
		table: $('#order-list table')
	});
	var data64 = t.uri();
	if(data64==false)
		return false;
	event.currentTarget.href = data64;
});


 */
(function($,win,dom,undef){

	var tmp  = '<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"><head><meta charset="UTF-8"></meta><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{{worksheet}}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body>{{tables}}</body></html>';

	var Itable2excel=function(settings){
		this.settings = $.extend({},Itable2excel.defaults,settings);
		this.template = '';
		//this.data64 = '';
		//执行
		this.run=function(){
			this.exportHandler();
			return this;
		}
	};

	/**
	 * 弹出框 默认配置 可扩展
	 * @type {Object}
	 */
	Itable2excel.defaults={
		worksheet:'Worksheet',
		table:[],
	};

	Itable2excel.prototype={
		//输出base64的excel下载资源
		uri:function() {
			if($(this.template).find('tbody tr').length==0)
				return false;
			var	uri = 'data:application/vnd.ms-excel;base64,';
				return uri + this.base64();
		},

		base64:function() {
			return window.btoa(unescape(encodeURIComponent(this.template)));

		},
		//对话框本身事件绑定
		exportHandler:function(){
			var table_str = '';
			//数据过滤
			$.each( this.settings.table, function(i){
				var t = $('<div><table><thead></thead><tbody></tobdy></table></div>');
				t.find('thead').html($(this.tHead).html());
				t.find('tbody').append($(this.tBodies).children(':visible').clone());
				t.find('.not-print').remove(); 			// not-print 是@media print中不会打印的部分
				t.find('img').remove();					//图片过滤
				t.find('.table_search').remove(); 		//搜索栏过滤
				
				t.find('a').replaceWith(function (i) { 	//表格中不再需要的超链接也移除
					return this.innerHTML;
				});
				table_str +=t.html();
			});
			this.template = tmp.replace(/\{\{tables\}\}/g, table_str);
			this.template = this.template.replace(/\{\{worksheet\}\}/g, this.settings.worksheet);
		},
	};



	win['Itable2excel']=function(settings){
		var obj = new Itable2excel(settings);
		return obj.run();
	};


})(jQuery,window,document);

技术指导

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是介绍两个常用的前端插件来实现HTML表格Excel导出的方法: 1. TableExport.js插件 TableExport.js是一个轻量级的jQuery插件,可以将HTML表格导出Excel、CSV、TXT和PDF格式。使用该插件需要引入jQuery库和TableExport.js文件。 ```html <!-- 引入jQuery库 --> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <!-- 引入TableExport.js文件 --> <script src="https://cdn.bootcss.com/TableExport/5.2.0/js/tableexport.min.js"></script> ``` 然后在需要导出的表格上添加`data-tableexport`属性,并设置导出格式和文件名: ```html <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>25</td> <td>Male</td> </tr> <tr> <td>Jane</td> <td>30</td> <td>Female</td> </tr> </tbody> </table> <button onclick="exportTable()">Export Table</button> <script> function exportTable() { $('#myTable').tableExport({ type: 'xlsx', // 导出Excel格式 fileName: 'myTable', // 导出文件名 }); } </script> ``` 2. SheetJS.js插件 SheetJS.js是一个JavaScript库,可以将HTML表格导出Excel、CSV和JSON格式。使用该插件需要引入SheetJS.js文件。 ```html <!-- 引入SheetJS.js文件 --> <script src="https://cdn.bootcss.com/xlsx/0.16.8/xlsx.full.min.js"></script> ``` 然后在需要导出的表格上添加`id`属性: ```html <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>25</td> <td>Male</td> </tr> <tr> <td>Jane</td> <td>30</td> <td>Female</td> </tr> </tbody> </table> <button onclick="exportTable()">Export Table</button> <script> function exportTable() { /* 获取表格数据 */ var wb = XLSX.utils.table_to_book(document.getElementById('myTable'), {sheet:"Sheet1"}); /* 导出Excel文件 */ XLSX.writeFile(wb, 'myTable.xlsx'); } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值