zoukankan      html  css  js  c++  java
  • 导出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(/
    /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);

    参考博客:

    通过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

  • 相关阅读:
    A Complete Tutorial to Learn Data Science with Python from Scratch
    OpenGL学习--08--基本渲染(灯光)
    OpenGL学习--07--模型加载(obj)
    OpenGL学习--06--键盘与鼠标交互
    OpenGL学习--05--纹理立方体--代码
    OpenGL学习--05--纹理立方体--BMP文件格式详解(转载)
    OpenGL学习—04--彩色立方体
    OpenGL学习--03--矩阵
    OpenGL学习--02--绘制一个红色三角形
    OpenGL学习--01--打开一个窗口
  • 原文地址:https://www.cnblogs.com/hfzsjz/p/10272024.html
Copyright © 2011-2022 走看看