使用javascript将html字符串转换为csv格式

Question

在尝试将html字符串转换为csv格式时出现问题，以便我可以创建新的csv blob对象并从IE & Edge中的网页中打开该对象。

我发现了一个函数来将表格对象转换为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 &amp;&amp; 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)">Michelle33@outlook.com, Michelle33@outlook.com</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 &amp;&amp; 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 &amp;&amp; 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格式。

Answer 1

嗯，我已经想出了一个解决方案（不完美的任何手段），这工作。 我已经添加了我需要转换为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。这将会更加复杂和耗时。