今天公司项目需要做个导出功能,将jqgrid查询出的数据导出为EXCEL表格文件,期间遇到两个问题:
1.导出报错
uncaught exception: INVALID_CHARACTER_ERR: DOM Exception 5
,原因是插件是老外写的,不支持中文。
2.使用官方的导出代码//$('#jqgrid1').tableExport({ type: 'excel', fileName: new Date().getTime(), escape: 'false' });,导出的EXCEL文件没有表头,并且数据最上方多了一行空白行。
下面我们就来说说怎么处理这两个问题。
首先说一下这个插件下载地址:
Jquery tableExcel.js下载地址:https://github.com/kayalshri/tableExport.jquery.plugin
这个插件功能很强大,支持以下导出格式:
JSON
XML
PNG
CSV
TXT
SQL
MS - Word
Ms - Excel
Ms - Powerpoint
PDF
今天只介绍我在使用此插入导出EXCEL过程中遇到的问题解决方法。
第一个问题解决方法:
打开jquery.base64.js文件,
在
return {
decode: _decode,
代码上方,添加两个方法,代码如下:
// private property var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; // private method for UTF-8 encoding function utf8Encode(string) { string = string.replace(/\r\n/g, "\n"); var utftext = ""; for (var n = 0; n < string.length; n++) { var c = string.charCodeAt(n); if (c < 128) { utftext += String.fromCharCode(c); } else if ((c > 127) && (c < 2048)) { utftext += String.fromCharCode((c >> 6) | 192); utftext += String.fromCharCode((c & 63) | 128); } else { utftext += String.fromCharCode((c >> 12) | 224); utftext += String.fromCharCode(((c >> 6) & 63) | 128); utftext += String.fromCharCode((c & 63) | 128); } } return utftext; } function encode(input) { var output = ""; var chr1, chr2, chr3, enc1, enc2, enc3, enc4; var i = 0; input = utf8Encode(input); while (i < input.length) { chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64; } else if (isNaN(chr3)) { enc4 = 64; } output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4); } return output; }
然后将代码:
return { decode: _decode, encode: _encode, VERSION: _VERSION };
改为:
return { decode: _decode, encode: function (str) { return encode(str); }, VERSION: _VERSION };
即可解决。
第二个问题解决办法:
将默认导出代码修改为以下代码:
var tableid = "jq1"; 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);
参考博客:
通过tableExport.js插件来实现导出Excel/Pdf/txt/json等 - xingyuqihuan的博客 - CSDN博客 https://blog.csdn.net/xingyuqihuan/article/details/79139778
jqgrid实现客户端导出Excel、txt、word、json等数据格式的文件 - 无欲则刚 - CSDN博客 https://blog.csdn.net/qq_29542611/article/details/72657802