将Shieldui导出到Excel的意外标识符错误

Question

我需要将所有数据导出到Excel工作表。 我在网格中有以下列

<table id="exportTable" class="table table-responsive  table-condensed table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>User ID</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>   
        <tr>
          <td>1</td>
          <td>Vino</td>
          <td>vino123</td>
          <td>vino@gmail.com</td>
        </tr>
      </tbody>
 </table>

我使用下面的代码导出到Excel工作表。

<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light/all.min.css" />
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/jszip.min.js"></script>

<script type="text/javascript">
  jQuery(function ($) {
    $("#exportButton").click(function () {
        // parse the HTML table element having an id=exportTable
        var dataSource = shield.DataSource.create({
            data: "#exportTable",
            schema: {
                type: "table",
                fields: {
                    Name: { type: String },
                    User ID: { type: String },
                    Email: { type: String }    
                }
            }
        });

        // when parsing is done, export the data to Excel
        dataSource.read().then(function (data) {
            new shield.exp.OOXMLWorkbook({
                author: "PrepBootstrap",
                worksheets: [
                    {
                        name: "PrepBootstrap Table",
                        rows: [
                            {
                                cells: [
                                    {
                                        style: {
                                            bold: true
                                        },
                                        type: String,
                                        value: "Name"
                                    },
                                    {
                                        style: {
                                            bold: true
                                        },
                                        type: String,
                                        value: "User ID"
                                    },
                                    {
                                        style: {
                                            bold: true
                                        },
                                        type: String,
                                        value: "Email"
                                    }
                                ]
                            }
                        ].concat($.map(data, function(item) {
                            return {
                                cells: [
                                    { type: String, value: item.Name },
                                    { type: String, value: item.User ID },
                                    { type: String, value: item.Email }

                                ]
                            };
                        }))
                    }
                ]
            }).saveAs({
                fileName: "Processhistoryexcel"
            });
        });
    });
});

当列名没有空格时，它的工作。 例如，我有一列用户ID ，当我提供用户ID时会给出错误，但是当它没有像UserID这样的空格时它会工作。

它给我在字段和单元格中提到位置的错误。

Answer 1

对于您的User ID密钥，看起来空格引起了错误

未捕获的SyntaxError：意外的标识符

您可以通过在fields对象中的用户ID键周围加上引号来解决此问题

"User ID": { type: String },

那么在您的cells数组中，您将使用方括号表示法访问它，因为密钥中现在有空白

{ type: String, value: item["User ID"] },

还值得一提的是为什么需要使用括号符号：

但是，任何不是有效JavaScript标识符的属性名称（例如，具有空格或连字符或以数字开头的属性名称）都只能使用方括号符号来访问

来源： MDN处理对象