如何：在 HTML/ASP 页面中显示来自 AlaSQL Excel 文件导入的数据

Question

我正在开发一个内部网站，该网站需要专门从静态 XLSX 电子表格中提取数据（每天通过自动化更新）。在这个网站上，我需要将数据发布在表格中并且可排序/可搜索。在内容实际正确显示后，我可以自己处理特殊功能（搜索/排序选项）。

我的问题：我不知道如何在通过 AlaSQL 成功查询后显示内容。我可以在控制台中看到 JSON 格式的内容，但我不是 JS 程序员，几乎不知道如何传递信息以使其正确显示。

我在使用 IIS 8 的服务器上工作，使用 HTML/C# 编写基本网站代码，还结合了 jQuery、W3.CSS 框架和 JS 库 AlaSQL 和依赖项（用于读取 Excel 文件）。

如上所述，我已经做好了基础工作——Alasql 正在运行，我正在按照我应该的方式从 Excel 文件中获取结果，但仅限于控制台。我从下面的基本代码中知道，它是通过设计将其发布到控制台的，但是我在 JS 工作中非常绿色，我不知道如何存储数据以便可以将其拉出并显示在 HTML 的表格中.

我也有 jQuery 来帮助格式化文件表，如果我能做到那么远 [jquery-3.4.1 和 jquery.tablesorter (https://mottie.github.io/tablesorter/docs/)].

 <div class="w3-panel" id="OhYeah">
 </div>
 <script>
      var ImportData = (alasql.promise('select * from xlsx("File.xlsx",{sheetid:"Sheet1"})')
           .then(function(data){
            console.log(data);
       }).catch(function(err){
        console.log('There was an error reading the source file.:', err);
      }));
      document.getElementById("OhYeah").innerHTML = ImportData
 </script>

所以，只是通过摸索，我发现一个资源说上面的“document.getElementByID”行应该以原始字符串显示数据（所以我知道我至少正在取得进展） - 相反，我得到了输出“[对象承诺]”。

我查看了该站点上具有类似请求的其他资源，但没有一个完全有帮助 - 这是我发现的最接近的问题，但尝试他们的代码没有用。 (Excel Table to Html table)

我的目标是让内容循环并创建一个包含所需内容的表格。我找不到任何专门处理 AlaSQL 输出的资源，即使部分解释了这一点。与大多数事情一样，我可以弄清楚我是否至少有一些代码可以“逆向工程”到我想要做的事情。

有什么想法吗？

---编辑 6/18---

所以，我只是想从逻辑上解决这个问题，我已经走得更远了，但仍然需要指导。我将代码修改为以下，现在我得到了不同的输出。

 <div class="w3-panel" id="OhYeah">
 </div>
 <script>
      alasql.promise('select * from xlsx("File.xlsx",{sheetid:"Sheet1"})')
           .then(function(data){
            document.getElementById("OhYeah").innerHTML = (data)
            //console.log(data);
       }).catch(function(err){
        console.log('There was an error reading the source file.:', err);
      });
 </script>

我现在在显示页面上收到 755（我的电子表格中的行数）“[object Object]”打印输出。

[object Object],[object Object],[object Object],[object Object],
[object Object],[object Object],[object Object],[object Object],
[object Object],[object Object],[object Object],[object Object],
[object Object],[object Object],[object Object],[object Object], [...]

Answer 1

所以，经过多次等待和网络（和灵魂）搜索，我找到了自己的答案。我想在这里发布它，以防其他人正在寻找相同的东西。

我最终得到了以下 JS（和 CSS）文件来完成这项工作：

<script type="text/javascript" src="\js\jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript" src="\js\xlsx.full.min.js"></script>
<script type="text/javascript" src="\js\jquery.miranda.min.js"></script>    
<script type="text/javascript" src="\js\alasql.min.js"></script>
<link href="\css\w3.css" rel="stylesheet" type="text/css">

jQuery Miranda 来源：https://github.com/fabianomiranda/miranda-js

SheetJS (XLSX) 来源：https://github.com/SheetJS/js-xlsx

AlaSQL 来源：https://github.com/agershun/alasql

W3 CSS 来源：https://www.w3schools.com/w3css/w3css_downloads.asp

最终脚本代码：

    function getData(){
        let query = alasql.promise('select * from xlsx("File.xlsx")')
            .then(function(data){
            $("#tbodyid").mirandajs(data)
        }).catch(function(err){
             console.log('There was an error reading the source file.:', err);
        })
     };
     getData();

最终的 HTML 代码：

<div class="w3-container" id="w00t" style="padding-bottom:100px;">
    <table class="w3-table w3-bordered w3-striped" id="1337" style="overflow: auto;">
        <thead>
            <tr>
                <th>Object1</th> //Any title/name you want to provide your data for viewing.
                <th>Object2</th>
            </tr>
        </thead>
        <tbody id="tbodyid">
            <tr>
                <td>[[Object_1]]</td> //This is the "title" of the JSON data pulled from the AlaSQL query against the spreasheet - this must match any header you want to pull content to display in a table format (with spaces or underscores or however the header is formatted). This will only pull the content for the table for each iteration of <td> that you do.
                <td>[[Object_2]]</td>
            </tr>
       </tbody>
    </table>
</div>

如果正确实施，上述代码会在您想要的网站上的表格中显示电子表格中的数据。

可以做更多的工作（我已经做到了），事后根据表格的内容进行条件格式化（我很乐意分享，如果您有兴趣，请告诉我）。