ExtJs6.0之Grid前端导出Excel

本文主要是介绍ExtJs6.0之Grid前端导出Excel，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

该js文件支持三级表头的导出。
引入该js文件，调用grid2Excel(grid, fileName)即可。

新建导出按钮

new Ext.create('Ext.button.Button',{ xtype:'button', iconCls:'excel', type: 'excel', text:'保存为Excel', handler:function() {  //grid 为Extjs grid对象  //"导出文件名"  为导出的Excel文件的名称                     grid2Excel(grid,"项目授权列表"); } 
})

点击后调用该函数即可。

列出详细代码：

/** 
* 
* function grid2Excel(grid,filename) 
* @param grid Extjs grid panel 
* @param filename Excel 文件名称 
* 
* **/ 
(function(){ function  getExplorer() {var explorer = window.navigator.userAgent ;//ie if (explorer.indexOf("MSIE") >= 0) {return 'ie';}//firefox else if (explorer.indexOf("Firefox") >= 0) {return 'Firefox';}//Chromeelse if(explorer.indexOf("Chrome") >= 0){return 'Chrome';}//Operaelse if(explorer.indexOf("Opera") >= 0){return 'Opera';}//Safarielse if(explorer.indexOf("Safari") >= 0){return 'Safari';}         }function export_excel_ie(tableStr, fileName) {//整个表格拷贝到EXCEL中if(getExplorer()=='ie'){var oXL = new ActiveXObject("Excel.Application");/** 设置边框, 1表示最细边框,2表示细边框,4表示粗线。*///oXL.Selection.Borders.Weight = 4;/** 设置边框线 1 实线, -4115 虚线, 4 点划相间线, 5 划线后跟两个点, -4118 点式线, -4119 双线。*///oXL.Selection.Borders.LineStyle = 1;var el4table = document.createElement("div");el4table.innerHTML = tableStr;//创建AX对象excel var oWB = oXL.Workbooks.Add();//获取workbook对象 var xlsheet = oWB.Worksheets(1);//激活当前sheet var sel = document.body.createTextRange();sel.moveToElementText(el4table);//把表格中的内容移到TextRange中 sel.select;//全选TextRange中内容 sel.execCommand("Copy");//复制TextRange中内容  xlsheet.Paste();//粘贴到活动的EXCEL中       oXL.Visible = true;//设置excel可见属性try {var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");}