用 tableExcel导出EXCEL数据

Posted 2020-12-12 tangxiaoxiong

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