Question

我在尝试将html字符串转换为csv格式时遇到问题，这样我就可以创建一个新的csv blob对象并从IE中的网页打开它。边缘。

我找到了一个将表对象转换为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格式，并且无法在任何地方找到这样的示例。

＆GT;编辑1

在Chrome / Firefox中呈现为csv的Html字符串

<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);

使用Chrome / 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" );
                    }

这适用于Edge，根据需要将表导出到excel中的csv，问题是转换为csv格式的表对象与Chrome / Firefox呈现的html字符串不同。所以我的要求是找到一种方法将该字符串转换为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 -->

它不是最灵活的方法，但它在Edge中提供了与所有其他浏览器相匹配的csv doc（在这种情况下在excel中打开）。另一种方法是编写一个tbl2csv方法，该方法将html字符串作为输入并将其格式化为csv。那可能会更加复杂和耗时。

使用javascript

1 个答案: