Как: отображать данные из файла AlaSQL Excel для импорта на странице HTML / ASP - PullRequest
Новая
       22

Как: отображать данные из файла AlaSQL Excel для импорта на странице HTML / ASP

0 голосов
/ 17 июня 2019

Я нахожусь в процессе работы над внутренним веб-сайтом, который должен будет извлекать данные исключительно из статических электронных таблиц 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 в Html )

Конечный результат, к которому я стремлюсь, - пройти цикл содержимого и создать таблицу с требуемым содержимым. Я не могу найти какой-либоресурсы, которые имеют дело с выходом 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], [...]

1 Ответ

0 голосов
/ 25 июня 2019

Итак, после долгих ожиданий и поисков в сети (и в душе) я нашел свой собственный ответ. Я хотел опубликовать это здесь на случай, если кто-то еще найдет то же самое.

Я получил следующие файлы 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>

Приведенный выше код, если он реализован правильно, показывает данные из электронной таблицы в таблице на сайте, который вы хотите.

Можно проделать дополнительную работу (и я сделал это), чтобы выполнить условное форматирование в зависимости от содержимого таблицы после факта (я был бы рад поделиться, дайте мне знать, если вы заинтересованы).

...