tableexport.js 导出无数据怎么解决
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了tableexport.js 导出无数据怎么解决相关的知识,希望对你有一定的参考价值。
使用table2excel表格插件需要在页面中引入jquery和jquery.table2excel.js文件。html结构
你可以将任何标准的HTML表格结构的数据导出到Excel中,一个HTML表格的结构为:
带noExlclass的行不会被输出到excel中
带noExlclass的行不会被输出到excel中
这一行会被导出到excel中
这一行会被导出到excel中
单元格1-1
单元格1-2
单元格2-1
单元格2-2
单元格3-1
单元格3-2
合并2个单元格
如果表格中的某一行不需要导出到Excel中,可以为这一行添加.noExl class类,该class类会在插件初始化时通过参数被指定为不被导出的数据。
初始化插件
在页面DOM元素加载中完毕之后,可以通过下面的方法来初始化table2excel插件。
$("#table2excel").table2excel(
// 不被导出的表格行的CSS class类
exclude: ".noExl",
// 导出的Excel文档的名称
name: "Excel Document Name",
// Excel文件的名称
filename: "myExcelTable"
);
配置参数
table2excel插件的可用配置参数有:
exclude:不被导出的表格行的CSS class类。
name:导出的Excel文档的名称。
filename:Excel文件的名称。
exclude_img:是否导出图片。
exclude_links:是否导出超链接
exclude_inputs:是否导出输入框中的内容。
- 参考技术A 如果这么初始化不好用的话可以尝试将TableExport.init();这句写在相关操作请求成功之后(例如ajax请求的success之后)。
用 tableExcel导出EXCEL数据
1、技术概述
描述这个技术是做什么?学习该技术的原因,技术的难点在哪里。控制在50-100字内。
这个技术是用于导出jqgrid表格数据为EXCEL文件。原因是因为tableExport.js插件很强大,很便利。技术难点:相关的资料比较少。
2、技术详述
描述你是如何实现和使用该技术的,要求配合代码和流程图详细描述。可以再细分多个点,分开描述各个部分。
1.前端页面引用jqGridExportToExcel.js,放置按钮调用exportExcel()函数即可
grid-table为JQGrid的名称
‘c.xlsx‘为导出的excel文件名称
<script src="../Scripts/jqGridExportToExcel.js"></script>
function exportExcel() { <%--导出Excel--%>
ExportJQGridDataToExcel(‘#grid-table‘, ‘c.xlsx‘);
}
2.配置jqgrid
注意:此插件的限制:
loadonce: true,
必须设为true。
datatype: "json",
测试必须设为json,设为local就不行,其他数据格式未使用,否则导出excel只有列头
中文命名可能部分浏览器或系统是乱码
3、技术使用中遇到的问题和解决过程。要求问题的描述和解决有一定的内容,不能草草概括。要让遇到相关问题的人看了你的博客之后能够解决该问题。
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文件,
在
decode: _decode,
代码上方,添加两个方法,代码如下:
// private property
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
// private method for UTF-8 encoding
function utf8Encode(string) {
string = string.replace(/
/g, "
");
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);
4、总结
在遇到jqgrid导出数据时,查遍许多博客都没有详细的过程,只能自己硬着头皮上,也遇到了许多问题,在诸多博客拼凑下终于利用tableExport成功导出。
5、列出参考文献、参考博客(标题、作者、链接)。
https://www.cnblogs.com/jhlong/p/6265677.html
以上是关于tableexport.js 导出无数据怎么解决的主要内容,如果未能解决你的问题,请参考以下文章