'Export in excel in ag-grid in plain javascript with Thymeleaf
I am using ag-grid and Thymleaf scripts to display data in the frontend.
I am able to display data. To export the data I was following the steps given in this documentation
On clicking on the export to excel button I got this warning in Chrome console
AG Grid: unable to use api.exportDataAsExcel as module @ag-grid-enterprise/excel-export is not present.
Attached the screenshot that displays the warning.
This is the link the warning redirects me to.
With this I am lost as to how to export data in Excel, PDF format in ag-grid in plain JavaScript. My frontend code is in a .html file.
Update 1:
Adding code
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css"></link>
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css"></link>
</head>
<body>
<h1>Dynamic Header Configuration</h1>
<div id="myGrid" style="height: 500px; width:1000px;" class="ag-theme-balham" th:if="${not #lists.isEmpty(reports)}">
<script type="text/javascript" th:inline="javascript">
const columnDefs = [];
const gridOptions = {
defaultColDef: {
sortable: true,
filter: true,
resizable: true,
minWidth: 100,
flex: 1,
},
columnDefs: columnDefs,
enableSorting: true,
enableFilter: true,
pagination: true
};
function onBtExport() {
gridOptions.api.exportDataAsExcel();
}
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
function dynamicallyConfigureColumnsFromObject(anObject, viewMetadata){
const colDefs = gridOptions.api.getColumnDefs();
colDefs.length=0;
const keys = Object.keys(anObject)
keys.forEach(key =>{
let obj = viewMetadata.find(o => o.column_name === key);
if(obj!=undefined){
if(obj.data_type==="character varying")
{
colDefs.push({field : key, filter: 'agTextColumnFilter'})
}
else if(obj.data_type==="integer")
{
colDefs.push({field : key, filter: 'agNumberColumnFilter'})
}
}
else{
colDefs.push({field : key})
}
});
gridOptions.api.setColumnDefs(colDefs);
}
/*<![CDATA[*/
var reportsData = /*[[${reports}]]*/
console.table("reportsData= ", reportsData);
let data = JSON.parse(reportsData[0].json_agg.value);
fetch('/getData').then(function (response) {
return response.json();
}).then(function (result) {
dynamicallyConfigureColumnsFromObject(data[0], result)
gridOptions.api.setRowData(data);
})
/*]]>*/
</script>
<button onclick="onBtExport()" style="margin-bottom: 5px; font-weight: bold">
Export to Excel
</button>
</div>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|