无法调用 table2excel答案

【问题标题】：Can't call table2excel无法调用 table2excel
【发布时间】：2021-12-12 02:09:34
【问题描述】：

对于我的项目，我必须将表格导出到 Excel。但是由于某种原因，我无法通过按下按钮来调用该函数，但我可以在没有调用的情况下完成。

<script>
    $("#studentTable").table2excel({
        exclude: ".excludeThisClass",
        name: "Worksheet Name",
        filename: "SomeFile.xls",
        preserveColors: true
    });
</script>

这样，当页面加载并正常工作时，表格将导出到 Excel。

<script>
    $("#exportBtn").click(function () {
        $("#studentTable").table2excel({
            exclude: ".excludeThisClass",
            name: "Worksheet Name",
            filename: "SomeFile.xls",
            preserveColors: false
        });
    });
</script>

但如果我按下按钮调用该函数，它就不起作用。有人可以帮忙吗？

我使用https://github.com/rainabba/jquery-table2excel 的table2excel 库。

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>

这是 HTML 页面

    <div class="container-fluid">
        <div style="overflow-x: auto;">
            <table class="table table-striped" id="studentTable">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Voornaam</th>
                        <th>Tussenvoegsel</th>
                        <th>Achternaam</th>
                        <th>Opleiding</th>
                        <th>Niveau</th>
                        <th>Jaar</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>A</td>
                        <td>B</td>
                        <td>C</td>
                        <td>D</td>
                        <td>E</td>
                        <td>F</td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>A</td>
                        <td>B</td>
                        <td>C</td>
                        <td>D</td>
                        <td>E</td>
                        <td>F</td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>A</td>
                        <td>B</td>
                        <td>C</td>
                        <td>D</td>
                        <td>E</td>
                        <td>F</td>
                    </tr>
                    <tr>
                        <th scope="row">4</th>
                        <td>A</td>
                        <td>B</td>
                        <td>C</td>
                        <td>D</td>
                        <td>E</td>
                        <td>F</td>
                    </tr>
                    <tr>
                        <th scope="row">5</th>
                        <td>A</td>
                        <td>B</td>
                        <td>C</td>
                        <td>D</td>
                        <td>E</td>
                        <td>F</td>
                    </tr>
                </tbody>
            </table>
            <button class="exportToExcel" id="exportBtn">
                Export to Excel
            </button>
        </div>
    </div>

【问题讨论】：

欢迎来到 Stack Overflow。你在使用特定的库吗？喜欢github.com/rainabba/jquery-table2excel 如果是请确保已正确加载。检查控制台是否有任何错误。请提供一个最小的、可重现的示例：stackoverflow.com/help/minimal-reproducible-example
由于它在没有.click 的情况下工作，我认为它会正确加载。但现在我看到控制台出现错误。 $(...).table2excel 不是函数。在编辑中，您可以看到我使用的链接
我确实看到了更新，但我没有看到任何示例表数据或您引用的按钮。
额外的代码在问题中
您的浏览器控制台有错误吗？

标签： javascript jquery html-table

【解决方案1】：

考虑以下示例：

https://jsfiddle.net/Twisty/m3oe05ky/

HTML

<table id="studentTable" class="table2excel" data-tableName="Student Table 1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Student ID</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bart Simpson</td>
      <td>S001</td>
    </tr>
    <tr>
      <td>Lisa Simpson</td>
      <td>S002</td>
    </tr>
    <tr>
      <td>Maggie Simpson</td>
      <td>S003</td>
    </tr>
  </tbody>
</table>
<button class="exportToExcel">Export to XLS</button>

JavaScript

$(function() {
  $(".exportToExcel").click(function(event) {
    console.log("Exporting XLS");
    $("#studentTable").table2excel({
      exclude: ".excludeThisClass",
      name: $("#studentTable").data("tableName"),
      filename: "StudentTable.xls",
      preserveColors: false
    });
  });
});

使用：

这似乎按预期工作。

【讨论】：

再次出现同样的问题
学生：91 Uncaught TypeError: $(...).table2excel is not a function at HTMLButtonElement. (studenten:91) at HTMLButtonElement.dispatch (jquery.min.js:2)在 HTMLButtonElement.v.handle (jquery.min.js:2)
@Arthur070 有东西干扰了库的加载。
但是我该如何解决这个问题。因为它只在我使用按钮时发生