Экспорт таблицы HMTL в CSV с составными строками и столбцами - PullRequest
Новая
       41

Экспорт таблицы HMTL в CSV с составными строками и столбцами

1 голос
/ 03 мая 2020

У меня есть таблица в HTML, которая состоит из строк и столбцов и выглядит довольно сложной. Мне нужен способ экспортировать эту таблицу в файл CSV одним нажатием кнопки. enter image description here

Ниже приведен код таблицы, 

<table class="table table-bordered">
<thead class="thead-dark">
  <tr>
     <th scope="col">Fruit Name</th>
     <th scope="col">Type</th>
     <th scope="col" colspan="3">Features</th>
     <th scope="col">Recommended Values</th>
  </tr>
</thead>
<tbody ng-repeat="x in response">
  <tr>
     <th  rowspan="6"><b>{{x.FruitName}}</b></th>
     <td rowspan="6"><b>{{x.FruitType}}</b></td>
     <td rowspan="3">Color</td>
     <td>Outer </td>
     <td><b>{{x.Outer}}</b></td>
     <td>Green/Black</td>
  </tr>
  <tr>
     <td>Inner</td>
     <td><b>{{x.Inner}}</b></td>
     <td>Red</td>
  </tr>
  <tr>
     <td>Seed</td>
     <td><b>{{x.Seed}}</b></td>
     <td>Seedless</td>
  </tr>
  <tr>
     <td rowspan="2">Water</td>
     <td>Sweet</td>
     <td><b>{{x.Sweet}}</b></td>
     <td>80%</td>
  </tr>
  <tr>
     <td>Sour</td>
     <td><b>{{x.Sour}}</b></td>
     <td>10%</td>
  </tr>
  <tr>
     <td rowspan="1">Weight</td>
     <td>Body Wt</td>
     <td ><b>{{x.weight}}</b></td>
     <td>500gm</td>
  </tr>
</tbody>

Я пытался использовать это, 

function exportTableToCSV(filename) {
        var csv = [];
        var rows = document.querySelectorAll("table tr");

        for (var i = 0; i < rows.length; i++) {
            var row = [], cols = rows[i].querySelectorAll("td, th");

            for (var j = 0; j < cols.length; j++) 
                row.push(cols[j].innerText);

            csv.push(row.join(","));        
        }
        downloadCSV(csv.join("\n"), filename);
    }
    function downloadCSV(csv, filename) {
        var csvFile;
        var downloadLink;
        csvFile = new Blob([csv], {type: "text/csv"});
        downloadLink = document.createElement("a");
        downloadLink.download = filename;
        downloadLink.href = window.URL.createObjectURL(csvFile);
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
        downloadLink.click();
    }

Но вывод, который я получаю, не совсем то, что я упомянул на картинке. Как точно импортировать HTML таблицу в CSV как есть. PS: можно добавить еще несколько строк и столбцов

1 Ответ

1 голос
/ 03 мая 2020

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

Экспортированный CSV выглядит следующим образом: 

Fruit Name,Type,Feature,Recommended
Watermelon,melon,Color,Outer,Green,Black/Green
Inner,Red,Red
Seed,Black,Seedless
Water,Sweet,50%,80%
Sour,20%,10%
Weight,Body Wt,400gm,500gm

Как вы можете видеть, 2-й ряд на 1-м клетка занимает 6 рядов пространства. В файле CSV содержимое большей строки не появляется в следующих строках, потому что оно уже там.

Однако Excel также экспортирует таблицы таким образом, и строки и colspans не сохраняются в файлах CSV. , вы можете потерять некоторую информацию после конвертации.

Я также нашел ответ , который действительно детализирован.

...