將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處理對象