通过tableExport.js插件导出jqgrid表格数据

问题：1 uncaught exception: INVALID_CHARACTER_ERR: DOM Exception 5
2.使用官方的导出代码//$(’#jqgrid1’).tableExport({ type: ‘excel’, fileName: new Date().getTime(), escape: ‘false’ });，导出的EXCEL文件没有表头，并且数据最上方多了一行空白行。
3.下载空白没有数据
4.乱码问题

下载地址：Jquery tableExcel.js下载地址：https://github.com/kayalshri/tableExport.jquery.plugin；
这个功能挺好用，可以导出好多，例如：
JSON
XML
PNG
CSV
TXT
SQL
MS - Word
Ms - Excel
Ms - Powerpoint
PDF

这里只导出excel

1、打开jquery.base64.js
找到：
return {
decode: _decode,

代码上方，添加两个方法，代码如下：

然后把：
return {
decode: _decode,
encode: _encode,
VERSION: _VERSION
};
改成：
return {
decode: _decode,
encode: function (str) {
return encode(str);
},
VERSION: _VERSION
};

第二个问题：

在前端插入：

然后写入导出按钮

然后把onclick事件写上
function export_excel(){

    //$('#gridTable').tableExport({type:'excel', fileName: new Date().getTime(), escape:'false'});
    var tableid = "gridTable";
    var dd = $("#gbox_" + tableid + ' .ui-jqgrid-htable thead');
    var ee = $('#' + tableid);
    ee.find('.jqgfirstrow').remove();//干掉多余的无效行
    ee.find('tbody').before(dd);//合并表头和表数据
    ee.find('tr.ui-search-toolbar').remove();//干掉搜索框
    ee.tableExport({ type: 'excel', escape: 'false', fileName: '导出' + new Date().getTime() });
    var a = $("#" + tableid).find('thead');//把合并后的表头和数据拆分
    $("#gbox_" + tableid + ' .ui-jqgrid-htable').append(a);

}

 3.若是下载有空白一般都是这样写的，
 var tableid = "list2";//表格ID
var head = $("#gbox_" + tableid + ' .ui-jqgrid-htable thead').clone();//克隆表头
var dom = $("#" + tableid).clone();//克隆表内容
dom.find('.jqgfirstrow').remove();//干掉多余的无效行
dom.find('tr.ui-search-toolbar').remove();//干掉搜索框
dom.find('tbody').before(head);//合并表头和表数据
dom.tableExport({ type: 'excel', escape: 'false' });//导出

这个导出不知道为为啥是空白的 难道是最后没加上这个嘛？
("#gbox_" + tableid + ’ .ui-jqgrid-htable’).append(a);
我也不是很清楚，

4 乱码问题：
一般都是编码格式的问题吧，在后边加上编码的格式一般都能解决
加在tableExport.js下面代码部分的第二行

var excelFile = “”;
excelFile += “<meta http-equiv=“content-type” content=“application/vnd.ms-excel; charset=UTF-8”>”;//加在这里
excelFile += “”;
excelFile += “<!–[if gte mso 9]>”;
我的没有出现有乱码 但是估计以后可能遇到 就先记下来
这个可以参考我找到某位大神的博客：https://blog.csdn.net/qq_29801045/article/details/104236601?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.channel_param

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!--jqGrid组件基础样式包-必要 -->
	<link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css" />		
	<!-- jqGrid主题包-非必要 --> 
	<!-- 在jqgrid/css/css这个目录下还有其他的主题包，可以尝试更换看效果-->
	<link rel="stylesheet" href="jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" /> 

	<script src="js/jquery.min.js"></script>
	<script src="js/grid.locale-cn.js"></script>
	<script src="js/jquery.jqGrid.min.js"></script>
	<script src="js/tableExport.js"></script>
	<script src="js/jquery.base64.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<style>
	.grid-btn{
		margin:10px
	}
	</style>

解决导出没后缀名

window.open(‘data:application/vnd.ms-’+defaults.type+’;filename=exportData.doc;’ + base64data);

所有的上面这句代码，替换成下面的代码

if(defaults.type==“excel”){//这句加Excel那里，别的不用加
defaults.type=“xls”;
}
$(’’).appendTo(document.body).find(‘span’).trigger(“click”).parent().remove();

我的最终成果：