使用javascript将html字符串转换为csv格式
问题描述：
在尝试将html字符串转换为csv格式时出现问题，以便我可以创建新的csv blob对象并从IE & Edge中的网页中打开该对象。使用javascript将html字符串转换为csv格式
我发现了一个函数来将表格对象转换为csv格式，但不幸的是我需要传递这个字符串，而不是对象。
下面是表对象CSV方法：
function (table) {
var slice = Array.prototype.slice;
return slice.call(table.rows).map(function (row) {
return slice.call(row.cells).map(function (cell) {
return '"t"'.replace("t", cell.textContent);
}).join(",");
}).join("\r\n");
}
的问题是需要在显示之前格式化我希望在CSV文件中显示。因此，如果我只是将该表格对象显示在页面上，那么csv将具有比所需更多的数据。 当单击导出按钮时，我有一个方法将表格格式化，并返回表格的html字符串以显示为csv。 但我不知道如何将该字符串转换为csv格式，无法在任何地方找到此示例。
>修改1
<table id='excel_tbl'><tr><td>Name</td><td>Time allowed</td><td>Best score</td><td>Attempts</td></tr><tr><td>
<a class="ng-binding" id="assess_inst_fdd4ddec-9985-4def-9148-b5cd56ee77e6_875650db-4934-40dc-9e30-81c57c3472de" href="#" ng-click="itShowStudent(oPerson.PersonKey, oPerson.RefName)">Michelle27, Michelle27</a>
</td><td>
<div class="ng-hide" aria-hidden="true" ng-show="oPerson.MaxMins >= 0.0">
<it-time class="it-time ng-isolate-scope" seconds="-60" precise="true"><div class="time-info-text"><!-- ngIf: seconds < 60 && bPrecise --><div class="ng-scope" ng-if="seconds < 60 && bPrecise"><span class="large ng-binding">0</span><!-- ngIf: itGetSeconds(seconds) == 1 --><!-- ngIf: itGetSeconds(seconds) != 1 --><span class="small ng-binding ng-scope" ng-if="itGetSeconds(seconds) != 1">secs</span><!-- end ngIf: itGetSeconds(seconds) != 1 --></div><!-- end ngIf: seconds < 60 && bPrecise --><!-- ngIf: seconds == 0 && !bPrecise && bUseNone --><!-- ngIf: seconds == 0 && !bPrecise && !bUseNone --><!-- ngIf: seconds > 0 && seconds < 60 && !bPrecise --><!-- ngIf: seconds >= 60 --></div></it-time>
</div>
</td><td>
<div class="ng-binding" aria-hidden="false" ng-show="oPerson.BestScore >= 0.0">
33%
</div>
</td><td>
<div class="ng-binding" aria-hidden="false" ng-show="oPerson.Attempts > 0">
1
</div>
</td></tr><tr><td>
<a class="ng-binding" id="assess_inst_f588c82b-7eef-422c-8125-e8d8118ed549_875650db-4934-40dc-9e30-81c57c3472de" href="#" ng-click="itShowStudent(oPerson.PersonKey, oPerson.RefName)">[email protected], [email protected]</a>
</td><td>
<div class="ng-hide" aria-hidden="true" ng-show="oPerson.MaxMins >= 0.0">
<it-time class="it-time ng-isolate-scope" seconds="-60" precise="true"><div class="time-info-text"><!-- ngIf: seconds < 60 && bPrecise --><div class="ng-scope" ng-if="seconds < 60 && bPrecise"><span class="large ng-binding">0</span><!-- ngIf: itGetSeconds(seconds) == 1 --><!-- ngIf: itGetSeconds(seconds) != 1 --><span class="small ng-binding ng-scope" ng-if="itGetSeconds(seconds) != 1">secs</span><!-- end ngIf: itGetSeconds(seconds) != 1 --></div><!-- end ngIf: seconds < 60 && bPrecise --><!-- ngIf: seconds == 0 && !bPrecise && bUseNone --><!-- ngIf: seconds == 0 && !bPrecise && !bUseNone --><!-- ngIf: seconds > 0 && seconds < 60 && !bPrecise --><!-- ngIf: seconds >= 60 --></div></it-time>
</div>
</td><td>
<div class="ng-binding" aria-hidden="false" ng-show="oPerson.BestScore >= 0.0">
100%
</div>
</td><td>
<div class="ng-binding" aria-hidden="false" ng-show="oPerson.Attempts > 0">
18
</div>
</td></tr><tr><td>
<a class="ng-binding" id="assess_inst_a820d6e4-1e68-4265-9580-f053cf09cb11_875650db-4934-40dc-9e30-81c57c3472de" href="#" ng-click="itShowStudent(oPerson.PersonKey, oPerson.RefName)">Michelle35, Michelle35</a>
</td><td>
<div class="ng-hide" aria-hidden="true" ng-show="oPerson.MaxMins >= 0.0">
<it-time class="it-time ng-isolate-scope" seconds="-60" precise="true"><div class="time-info-text"><!-- ngIf: seconds < 60 && bPrecise --><div class="ng-scope" ng-if="seconds < 60 && bPrecise"><span class="large ng-binding">0</span><!-- ngIf: itGetSeconds(seconds) == 1 --><!-- ngIf: itGetSeconds(seconds) != 1 --><span class="small ng-binding ng-scope" ng-if="itGetSeconds(seconds) != 1">secs</span><!-- end ngIf: itGetSeconds(seconds) != 1 --></div><!-- end ngIf: seconds < 60 && bPrecise --><!-- ngIf: seconds == 0 && !bPrecise && bUseNone --><!-- ngIf: seconds == 0 && !bPrecise && !bUseNone --><!-- ngIf: seconds > 0 && seconds < 60 && !bPrecise --><!-- ngIf: seconds >= 60 --></div></it-time>
</div>
</td><td>
<div class="ng-binding" aria-hidden="false" ng-show="oPerson.BestScore >= 0.0">
100%
</div>
</td><td>
<div class="ng-binding" aria-hidden="false" ng-show="oPerson.Attempts > 0">
4
</div>
</td></tr></table>
上述字符串使用铬时传递给
document.open("txt/html", "replace");
iframe.document.write(sHTML);
了在铬/ Firefox中呈现为csv
HTML字符串/ Firefox和呈现如下：
我不能让document.open与Edge一起工作，所以我使用Blob方法。
var csv = $scope.tbl2csv(oTable[0]);
// Create a CSV Blob
var blob = new Blob([ csv ], { type: "text/csv"});
if (navigator.msSaveOrOpenBlob) {
// Works for Internet Explorer and Microsoft Edge
navigator.msSaveOrOpenBlob(blob, "Assessment.csv");
}
这适用于边缘，如所需要的表中的，以CSV开口的出口在Excel中，问题是，表对象转换成CSV格式不一样的HTML字符串由铬呈现/ Firefox浏览器。 所以我的要求是找到一种方法将该字符串转换为csv格式。
答
嗯，我已经想出了一个解决方案（不完美的任何手段），这工作。 我已经添加了我需要转换为csv的表格到html页面，并显示'none'。这样，当需要时它可用于tbl2csv方法。该方法将一个基本的html表格对象作为输入，并转换为csv格式。
function (table) {
var slice = Array.prototype.slice;
return slice.call(table.rows).map(function (row) {
return slice.call(row.cells).map(function (cell) {
return '"t"'.replace("t", cell.textContent);
}).join(",");
}).join("\r\n");
}
这里的客户端调用上述方法：
if (edge >= 0) {
var oTbl = document.querySelector("#edge_excel_tbl");
var csv = $scope.tbl2csv(oTbl);
// Create a CSV Blob
var blob = new Blob([ csv ], { type: "text/csv"});
// Determine which approach to take for the download
if (navigator.msSaveOrOpenBlob) {
// Works for Internet Explorer and Microsoft Edge
//Get Assessment File Name
navigator.msSaveOrOpenBlob(blob, "Assessment.csv");
}
这是我添加到页面本身的HTML。
<table id="edge_excel_tbl" style="display: none;" >
<thead>
<tr>
<!--<td></td>-->
<td>{{itGetString("instructor", "People_Name", "Name")}}</td>
<td>{{itGetString("instructor", "Assess_TimeAvail", "Time allowed")}}</td>
<td>{{itGetString("instructor", "Assess_BestScore", "Best score")}}</td>
<td>{{itGetString("instructor", "Assess_Attempts", "Attempts")}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="oPerson in itGetGroupAssessmentDetails().Done">
<td>{{oPerson.RefName}}</td>
<td><it-time class="it-time" precise="true" seconds="{{oPerson.MaxMins * 60.0}}"></it-time></td>
<td>{{itGetRoundedScore(oPerson.BestScore)}}%</td>
<td>{{oPerson.Attempts}}</td>
</tbody>
</table>
<!-- End of Edge Table for Excel Export -->
它不是最灵活的方法，但它在边缘提供一个CSV文档（在这种情况下，在Excel中打开）方面的匹配，对于所有其他浏览器。 另一种方法是编写一个tbl2csv方法，该方法将html字符串作为输入并将其格式化为csv。这将会更加复杂和耗时。
对待HTML的唯一正确方法是将其发送到HTML解析器。你知道该怎么做。 –
不，这不是一个CSV生成器，即使它大部分时间生成有效的CSV。 –
@JanDvorak为回应。不幸的是，我不知道该怎么做让我的html字符串（这是我想要显示为csv的表格）变成csv格式。任何建议不胜感激。 –