導出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