Export to Excel button
Export and print
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<a onclick="onOpenLocal()">Open local</a>
<div id="btn-export-excel">
<a onclick="exportHandler()" href="javascript:void(0)"><span>To Excel</span></a></div>
<div id="pivot-container"></div>
CSS
#btn-export-excel {
position: relative;
width: 57px;
height: 78px;
background: #FFFFFF;
cursor: auto;
}
#btn-export-excel > a {
display: block;
height: 76px;
background-size: 45px 45px;
background-position: center 10px;
background-repeat: no-repeat;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
padding: 0;
margin: 0;
font-weight: normal;
text-shadow: none;
background-image: url(https://www.flexmonster.com/flexmonster/toolbar/img/toolbar/menu_xls_large.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#btn-export-excel > a {
background-image: url(https://www.flexmonster.com/flexmonster/toolbar/img/toolbar/[email protected]);
}
}
#btn-export-excel > a > span {
position: absolute;
top: 52px;
line-height: 10px;
left: 0;
right: 0;
text-align: center;
}
JavaScript
function onOpenLocal() {
pivot.updateData({
dataSourceType: "csv",
browseForFile: true
});
}
function exportHandler() {
pivot.exportTo('excel');
}
var pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
width: "100%",
height: 430,
toolbar: true
});
pivot.setOptions({
datePattern: "yyyy-MM-dd HH:mm:ss",
grid: {
type: "flat",
"showTotals": "off",
"showGrandTotals": "off"
},
});