将 json 导出到 CSV 在 angularjs 中不起作用答案

【问题标题】：Export json to CSV is not working in angularjs将 json 导出到 CSV 在 angularjs 中不起作用
【发布时间】：2019-12-09 02:10:02
【问题描述】：

下载 CSV 以从表中获取 JSON 数据。整个div 打印在 CSV 文件中

我已经尝试过其他网站上的解决方案

$scope.record=function(){

    console.log("Export Records");`enter code here`
    $http({
        url: _BASE_URL_+'/get_records',
        method:"GET"

    })
    .then(function(response) {

        console.log(response.data);         
        $scope.reprtData=response.data;
        //$scope.exportExcel();
        /*document.getElementById('exportable').table2excel({
            filename: "Table.xls"
        });*/

        var blob = new Blob([document.getElementById('exportable').innerHTML], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
        });
        saveAs(blob, "Report.csv");      
    });
}

这是我的 maincontroller.js

<div>
 <a type="button" ng-click="record()" class="btn btn-success" href="">
   <i class="fa fa-file-excel-o" style="font-size: 16px;"></i> 
   Export Records
 </a>
</div>
<div id="exportable" style="display">
    <table width="100%" >
        <thead>
            <tr>
                <th>Name</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in reprtData">
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
            </tr>
        </tbody>
    </table>
</div>

这是样本数据

[0 … 99]
0:
$$hashKey: "object:13",
chapterName: "Light",
className: "VIII",
duration: null,
endTime: null,
id: 0,
ondate: "2018-03-12",
section: null,
startTime: null,
subjectName: null,
teacherName: "Editorial User1",
__proto__: Object
1:
$$hashKey: "object:14",
chapterName: "Light",
className: "VIII",
duration: null,
endTime: null,
id: 0,
ondate: "2018-03-12",
section: null,
startTime: null,
subjectName: null,
teacherName: "Editorial User1"

【问题讨论】：

在尝试获取 innerHTML 之前尝试使用 $timeout。在呈现新数据之前，您需要一个摘要循环

标签： javascript java html angularjs jdbc

【解决方案1】：

为您的数据创建一个可读的 CSV 字符串并将其保存在一个变量中。

var data = 'chapterName,className,duration,endTime,id,ondate,section,startTime,subjectName,teacherName\n';
angular.forEach(response.data, function(e) {
    data += (e.chapterName || '') + ',' 
            + (e.className || '') + ',' 
            + (e.duration || '') + ',' 
            + (e.endTime || '') + ',' 
            + (e.id || '') + ',' 
            + (e.ondate || '') + ',' 
            + (e.section || '') + ',' 
            + (e.startTime || '') + ',' 
            + (e.subjectName || '') + ',' 
            + (e.teacherName || '') + '\n';
});

那就用这个函数

function downloadFile(filename, data) {
     var link;
     link = document.createElement('a');
     link.setAttribute('href', data.replace(/#/g, '%23'));
     link.setAttribute('download', filename);
     link.style = 'visibility:hidden';
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
};

【讨论】：