首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >将HMTL表导出为包含跨行和跨列的CSV

将HMTL表导出为包含跨行和跨列的CSV
EN

Stack Overflow用户
提问于 2020-05-03 15:43:33
回答 1查看 107关注 0票数 1

我有一个HTML格式的表格,它跨越了行和列,看起来有点复杂。我需要一种方法,以出口到CSV文件的一个按钮点击这个表格。

以下是该表的代码。

代码语言:javascript
运行
复制
<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>

我试过用这个,

代码语言:javascript
运行
复制
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:甚至可以添加更多跨行和跨列

EN

Stack Overflow用户

发布于 2020-05-03 17:33:06

我试过你的代码,它很好。我还发现了一个link,它使用相同的技术来转换表。我假设您认为这是不正常的,但这就是它应该如何工作。

导出的CSV如下所示:

代码语言:javascript
运行
复制
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

如您所见,第一个单元格上的第二行占用了6行空间。在CSV文件中,较大行的内容不会出现在接下来的行中,因为它已经存在了。

但是,excel也以这种方式导出表格,并且行和列跨度不存储在CSV文件中,因此在转换后可能会丢失一些信息。

我还找到了一个answer,非常详细。

票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61571132

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档