【问题标题】:Got duplicate table when export handsontable to XLS将 Handsontable 导出到 XLS 时出现重复表
【发布时间】:2016-01-01 16:33:37
【问题描述】:

我打算将一个handsontable 导出到 XLS 文件,但我遇到了这个错误:

结果excel文件包含2个这样的表:

First name  Last name   Email            Phone  Password
23123   31231231    213@dsfsd213.563    NjU0NTY0    46565465546
Buu     Mr          your@email.com      MTI0NTU1    your password

名字姓氏电子邮件电话密码

下面的代码框中是我在jsp中的代码

 <%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

    <script src="resources/handsontable/handsontable.full.js"></script>
    <link rel="stylesheet" media="screen" href="resources/handsontable/handsontable.full.css">
    <link rel="stylesheet" media="screen" href="resources/handsontable/github.css">


    <div class="tab-pane active" id="user"> 
  <!--   <form action="addBatchUser" method="POST"> -->
    <div class="col-lg-12">
    <div class="page-header">
      <h4>
        <span>Export to Excel</span>
      </h4>
    </div>

    <div class="panel-body">
      <div class="form-group">
        <label class="col-lg-2 control-label">Parent Group</label>
        <div class="col-lg-10">
          <input type="text" readonly id="parentGroupUser" class="form-control uniform-input text focus"></input> <input
            type="hidden" id="group-parent" name="groupou"></input>
        </div>

      </div>

      <br />
      <div class="form-group">
        <!-- Space line -->
        <div class="col-lg-12">
          <div class="col-lg-2">
            <label class="control-label"></label>
          </div>
          <div class="col-lg-10"></div>
        </div>

        <div class="col-lg-2">
          <label class="control-label"></label>
        </div>
        <div class="col-lg-10">
          <div id="example"></div>
          <br /> <input type="button" value="Export" id="btnExport" class="btn btn-success" />

          <div>
            <img id="access_log_print" src="resources/images/ajax-loader.gif" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--   </form> -->
    </div>
    <div id="resViewer"></div>

    <script language="JavaScript" type="text/javascript">
    $(document).ready(
            function() {
                $("#btnExport").click(
                        function(e) {
                            window.open('data:application/vnd.ms-excel,'
                                    + encodeURIComponent($('div[id$=example]')
                                            .html()));
                            e.preventDefault();
                        });
            });

    $(document).ready(
            function() {
                hideLoadingMsg();
                function showLoadingMsg() {
                    $("input[type=submit]").attr("disabled", "disabled");
                    $('#access_log_print').show();
                }
                function hideLoadingMsg() {
                    $("input[type=submit]").removeAttr("disabled");
                    $('#access_log_print').hide();
                }

                var data = ${listuser}
                ;
                var container = document.getElementById('example');
                var hot = new Handsontable(container, {
                    data : data,
                    rowHeaders : false,
                    colHeaders : true,
                    //                             contextMenu : true,
                    colHeaders : [ 'First name', 'Last name', 'Email', 'Phone',
                            'Password' ],
                    colWidths : [ 130, 130, 150, 120, 130 ],
                    columns : [ {
                        data : "firstName",
                        readOnly : true
                    }, {
                        data : "lastName",
                        readOnly : true
                    }, {
                        data : "email",
                        readOnly : true
                    }, {
                        data : "telNumber",
                        readOnly : true
                    }, {
                        data : "password",
                        readOnly : true
                    } ]
                });

                //                         var hot ={}

                //                         $("#save")
                //                                 .click(
                //                                         function() {
                //                                             var json = container
                //                                                     .handsontable('getData');
                //                                             var jsonData = createJsonSection(json);
                //                                             if (jsonData === null) {
                //                                                 return false;
                //                                             } else {
                //                                                 showLoadingMsg();
                //                                                 var dataJson = JSON
                //                                                         .stringify(jsonData);
                //                                                 console.log(dataJson);

                //                                                 $
                //                                                         .ajax({
                //                                                             url : "addBatchUser",
                //                                                             data : {
                //                                                                 "data" : dataJson,
                //                                                                 "groupou" : $(
                //                                                                         '#group-parent')
                //                                                                         .val(),
                //                                                                 "saveToLdap" : $(
                //                                                                         '#saveToLdap')
                //                                                                         .is(
                //                                                                                 ':checked'),
                //                                                                 "saveToSvnAcm" : $(
                //                                                                         '#saveToSvnAcm')
                //                                                                         .is(
                //                                                                                 ':checked'),
                //                                                                 "svnAcmGroup" : $(
                //                                                                         '#svnAcmGroup')
                //                                                                         .val()
                //                                                             }, //returns all cells' data
                //                                                             type : "POST",
                //                                                             success : function(
                //                                                                     res) {
                //                                                                 $("#resViewer")
                //                                                                         .empty();
                //                                                                 $("#resViewer")
                //                                                                         .append(
                //                                                                                 res);
                //                                                                 hideLoadingMsg();
                //                                                             }
                //                                                         });
                //                                             }
                //                                         });
            });
    </script>

【问题讨论】:

  • 什么是错误?你能清理你的代码以只显示相关的信息吗?
  • @ZekeDroid 是的,先生,实际上我想使用此脚本code $(document).ready( function() { $("#btnExport").点击(函数(e){window.open('数据:应用程序/vnd.ms-excel,'+ encodeURIComponent($('div[id$=example]').html()));e.preventDefault() ; }); });
  • 但是 excel 文件包含像这样的重复表 名字 姓氏 电子邮件 电话 密码 23123 31231231 213@dsfsd213.563 NjU0NTY0 46565465546 Buu Mr your@email.com MTI0NTU1 您的密码 名字 姓氏 电子邮件 电话 密码如您所见,它的 col 标头已被复制
  • 你可以查看这张图片以获取我的结果link

标签: handsontable


【解决方案1】:

我建议您不要使用您看到的表格的html 内容导出到 CSV,而是使用数据本身来正确解析和导出。您的方法的问题是 Handsontable 正在渲染一个浮动的“标题”行,用于在底部显示标题。如果你仍然想使用这个方法,你可以简单地解析这个html并删除最后一行。

【讨论】:

  • 先生你能描述清楚吗?如何解析(html)?
  • 您永远都不想解析 HTML,所以我不建议您这样做。我只是说,无论你的结果是什么,只要删除最后一行。
猜你喜欢
  • 2019-04-09
  • 2015-11-08
  • 1970-01-01
  • 2015-05-23
  • 2012-05-30
  • 2020-10-10
  • 1970-01-01
  • 2021-04-11
  • 1970-01-01
相关资源
最近更新 更多