使用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。這將會更加複雜和耗時。