logo标签列表

如何使用AngularJS将HTML表格数据导出到Excel

javascriptangularjsexport-to-excel
3

我想通过AngularJS实现在单击按钮时将HTML表中的数据导出到Excel工作表。我尝试了一些代码，但没有成功。虽然我能够触发按钮单击事件，但好像没有其他反应。

<table class="table table-bordered table-condensed table-hover  table-striped" id="tableId">
<tr ng-repeat="mas in vm1 | orderBy:orderByField:reverseSort">
                            <td>{{::mas.contractNumber}} </td>
                            <td>{{::mas.planNumber}} </td>
                            <td>{{::mas.businessErrorMsg }} </td>
                            <td>{{::mas.systemErrorMsg}} </td>

                        </tr>
 <button class="btn btn-link" ng-click="exportToExcel('#tableId')">
                            <span class="glyphicon glyphicon-share"></span>Export to Excel
                        </button>

//控制器代码

app.controller("ErrorDetailController", [
    "$scope", "$location", "$routeParams", "messageService", "errorService", "repositoryService", , "sharedPageService",
    function ($scope, $location, $routeParams, messageService, errorService, repositoryService,sharedPageService, **Excel, $timeout**) {
$scope.exportToExcel = function (tableId) { // ex: '#my-table'

            debugger;
            var exportHref = Excel.tableToExcel(tableId, 'sheet name');
            $timeout(function () { location.href = exportHref; }, 100); // trigger download
        }
}
]);

app.factory('Excel', function ($window) {
    var uri = 'data:application/vnd.ms-excel;base64,',
        template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
        base64 = function (s) { return $window.btoa(unescape(encodeURIComponent(s))); },
        format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) };
    return {
        tableToExcel: function (tableId, worksheetName) {
            var table = $(tableId),
                ctx = { worksheet: worksheetName, table: table.html() },
                href = uri + base64(format(template, ctx));
            return href;
        }
    };
})
2个回答
1
使用：
<body>{table}</body>

替换为：

<body><table>{table}</table></body> 在模板变量中。

0

您可以使用ng-table-to-csv模块将HTML表格导出为CSV文件（可在Excel中打开）。

如该存储库的README所示，以下是用法：

入门/使用

通过bower安装模块（或从存储库的dist文件夹下载文件）：

shell bower install ng-table-to-csv --save

在HTML页面中添加对dist/ng-table-to-csv.js的引用。

将ngTableToCsv作为依赖项添加到您的模块中：

js angular.module('your_app', ['ngTableToCsv']);

在table上添加export-csv属性指令，以定义新的csv对象，并在其上具有generate()和link()函数。

选项： - 使用separator属性将默认逗号分隔符更改为其他分隔符（如分号）。 - 使用export-csv-ignore属性设置选择器，以防止tr/th/td被字符串化。

要从锚标记创建一个Export按钮，请使用ng-click和ng-href属性中提到的generate()和link()函数。

见下文：

html <a class="btn" title="Export Table" ng-click='csv.generate()' ng-href="{{ csv.link() }}" download="myTable.csv"> <i class="glyphicon glyphicon-new-window"></i> &#160;Export </a> <table class="table table-bordered" export-csv="csv" separator=";"> <!-- table contents --> </table>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接