<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

<button onclick="exportData('excel')">To Excel</button>
<button onclick="exportData('pdf')">To PDF</button>
<div id="wdr-component"></div>
button {
    border: 2px solid #0598df;
    background: #fff;
    width: 120px;
    color: #0598df;
    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: #0598df;
    color: #fff;
}

button:focus {
    outline: none;
}
function exportData(type) {
  webdatarocks.exportTo(type);
}

var pivot = new WebDataRocks({
	container: "#wdr-component",
	height: 345,
	report: {
		dataSource: {
			filename: "https://cdn.webdatarocks.com/data/data.csv"
		}
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.