[英]Export HMTL table to CSV with spanned rows and columns
我在 HTML 中有一个表,它横跨行和列,看起来有点复杂。 我需要一种在单击按钮时将此表导出到 CSV 文件的方法。
以下是表格的代码,
<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();
}
但是我得到的 output 并不完全是我在图片中提到的。 如何按原样将 HTML 表准确导入 CSV。 PS:可以添加更多跨行和列
我已经试过你的代码了,没问题。 我还找到了一个使用相同技术转换表格的链接。 我假设你认为这是不正常的,但它应该是这样工作的。
导出的 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
如您所见,第一个单元格的第二行占用了 6 行空间。 在 CSV 文件中,较大行的内容不会出现在下一行中,因为它已经存在。
但是,excel 也以这种方式导出表,并且行和跨度不存储在 CSV 文件中,转换后可能会丢失一些信息。
我还找到了一个答案,非常详细。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.