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

对于您的Listings/$listing/ListingData/密钥，看起来空格正在导致错误

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

您可以通过使用

等引号括住User ID对象中的用户ID键来解决此问题

fields

然后在"User ID": { type: String },数组中，您可以使用bracket notation访问它，因为密钥中现在有空格

cells

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

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

来源：MDN Working with objects

shieldui导出到excel

1 个答案: