我想在我的html表格中将数据导出到使用基础点击上的angularjs的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;
}
};
})
答案 0 :(得分:1)
使用:
<body>{table}</body>
而不是:
模板变量中的 <body><table>{table}</table></body>
。
答案 1 :(得分:0)
您可以使用ng-table-to-csv
模块将HTML表导出为CSV文件(可以在Excel中打开)。
如该回购的README所示,这是用法:
入门/使用
通过bower安装模块(或从
struct Meme { var topText : String! var bottomText: String! var image: UIImage! var memedImage: UIImage! init(topText: String, bottomText: String, image: UIImage, memedImage: UIImage) { self.topText = topText self.bottomText = bottomText self.image = image self.memedImage = memedImage
文件夹下载文件 在回购中:
dist
在您的HTML网页中添加对
shell bower install ng-table-to-csv --save
的引用。将
dist/ng-table-to-csv.js
添加为您的模块的依赖项:
ngTableToCsv
在
js angular.module('your_app', ['ngTableToCsv']);
上添加export-csv
属性指令以定义新的table
上的csv
对象,generate()
和link()
函数 他们。选项: - 使用
separator
属性将默认逗号分隔符更改为其他内容(如分号)。 - 使用export-csv-ignore
属性设置将用于阻止tr
/th
/td
字符串化的选择器。要从anchro标记创建
Export
按钮,请使用generate()
link()
和ng-click
上面提到的ng-href
个功能 锚标记的属性。见下文:
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>  Export </a> <table class="table table-bordered" export-csv="csv" separator=";"> <!-- table contents --> </table>