导出jqgrid表格数据为EXCEL文件，通过tableExport.js插件。

今天公司项目需要做个导出功能，将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

巴特西

导出jqgrid表格数据为EXCEL文件，通过tableExport.js插件。

最新文章

热门文章