AngularJS Flexmonster excel export
HTML
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div ng-app ng-controller="LoginController">
<button ng-click="exportTo()">
Export to Excel
</button>
<div id="pivotContainer"></div>
</div>
CSS
button {
border: 2px solid #df3800;
background: #fff;
color: #df3800;
text-transform: uppercase;
cursor: pointer;
margin: 5px 0;
display: inline-block;
-webkit-transition: all .3s;
transition: all .3s;
font-weight: normal;
padding: 10px 10px;
font-size: 14px;
}
button:hover {
background: #df3800;
color: #fff;
}
button:focus {
outline: none;
}
JavaScript
function LoginController($scope) {
const dataTest = [{
"Case Id": 0,
"Delivered Date Time": "2023-03-16T00:00:00",
"Deadline": "2020-05-15T09:39:25",
"Production Support Hours": 41341,
"Production Hours": 44004,
"Agent": "Agent B"
},
{
"Case Id": 1,
"Delivered Date Time": "2023-03-16T00:00:00",
"Deadline": "2020-05-13T16:32:47",
"Production Support Hours": 34579,
"Production Hours": 20228,
"Agent": "Agent B"
},
{
"Case Id": 2,
"Delivered Date Time": "2023-03-16T00:00:00",
"Deadline": "2020-05-19T01:14:03",
"Production Support Hours": 46936,
"Production Hours": 25159,
"Agent": "Agent A"
},
{
"Case Id": 3,
"Delivered Date Time": "2023-03-16T00:00:00",
"Deadline": "2020-05-13T05:33:32",
"Production Support Hours": 33728,
"Production Hours": 48029,
"Agent": "Agent A"
}
];
$scope.pivot = new Flexmonster({
container: "pivotContainer",
componentFolder: "https://cdn.flexmonster.com/",
global: {
localization: "loc/pt.json"
},
toolbar: true,
report: {
localization: {
grid: {
blankMember: "N/A"
}
},
dataSource: {
data: dataTest,
mapping: {
"Case Id": {
type: "number"
},
"Delivered Date Time": {
type: "date string"
},
"Deadline": {
type: "date string"
},
"Production Support Hours": {
type: "number"
},
"Production Hours": {
type: "number"
},
"Agent": {
type: "string"
}
}
},
options: {
grid: {
type: "flat"
}
}
}
});
$scope.exportTo = function () {
$scope.pivot.exportTo("excel");
}
}