Fatal编程技术网
  • javascript/
  • Javascript 如何使用angularjs将HTML表格中的数据导出到excel

Javascript 如何使用angularjs将HTML表格中的数据导出到excel

javascript angularjs

Javascript 如何使用angularjs将HTML表格中的数据导出到excel,javascript,angularjs,export-to-excel,Javascript,Angularjs,Export To Excel,我想在单击按钮时使用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">

我想在单击按钮时使用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>


{{：：mas.contractNumber}
{{：：mas.planNumber}
{{：：mas.businessErrorMsg}}
{{：：mas.systemErrorMsg}
输出到Excel
//控制器代码

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

app.controller（“ErrorDetailController”[
“$scope”、“$location”、“$routeParams”、“messageService”、“errorService”、“repositoryService”、“sharedPageService”，
函数（$scope、$location、$routeParams、messageService、errorService、repositoryService、sharedPageService、**Excel、$timeout**）{
$scope.exportToExcel=函数（tableId）{//ex:“#我的表”
调试器；
var exportHref=Excel.tableToExcel（tableId，“工作表名称”）；
$timeout（函数（）{location.href=exportHref；}，100）；//触发器下载
}
}
]);
应用程序工厂（'Excel'，函数（$window）{
var uri='data:application/vnd.ms excel；base64'，
模板=“{table}”，
base64=函数{return$window.btoa（unescape（encodeURIComponent））；}，
格式=函数（s，c）{返回s.replace（/{（\w+）}/g，函数（m，p）{返回c[p]；}）}；
返回{
tableToExcel:函数（tableId、工作表名称）{
变量表=$（表ID），
ctx={工作表：工作表名称，表：table.html（）}，
href=uri+base64（格式（模板，ctx））；
返回href；
}
};
})
您可以使用该模块将HTML表格导出为CSV文件（可以在Excel中打开）

如回购协议自述文件所示，其用法如下：

入门/使用 通过bower安装模块（或从
dist
文件夹下载文件 在回购协议中）：

shell bower将ng表格安装到csv--保存

将对csv.js的
dist/ng表的引用添加到HTML页面中

添加
ngtabletosv
作为模块的依赖项：


js angular.module（'your_app'，['ngtabletosv']）

在
表上添加
export csv
属性指令以定义新的

csv
作用域上的对象，其上有
generate（）
和
link（）
函数
他们

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

要从Ancho标签创建一个导出按钮，请使用generate（）

和
link（）
上述函数从
ng单击
和
ng href

锚定标记的属性

见下文：


html


使用：


{table}


而不是：

模板变量中的
{table}


<body>{table}</body>