What I have in the html is as show, it also outputs the successful text but does not download any csv
<!DOCTYPE html>
<html>
<head>
<title> Download CSV file </title>
</head>
<body>
<p id="noticeBoard">Document Loading...</p>
<!-- <button onclick='download_file("my_file.txt", dynamic_text())'>Download</button> -->
<script>
document.onreadystatechange = function () {
if (document.readyState === "complete") {
console.log("Document Loaded!");
updateNoticeBoard("Document Loaded!");
}
}
function updateNoticeBoard(message) {
let messageArea = document.getElementById('noticeBoard');
messageArea.innerHTML = message;
}
window.onmessage = (event) => {
console.log("Message Received: "+(event.data.action ? event.data.action : "Bad Message"));
if (event.data) {
messageReceived(event.data);
//console.log("Message Received: ",event.data);
}
};
function sendMessageToPage(message) {
window.parent.postMessage(message, "*");
}
function messageReceived(message) {
if (message && message.action === 'Report' && message.payload) {
// Convert JSON to csv
download_file("Report.csv", csvFromJson(message.payload));
} else if (message && message.payload) {
updateNoticeBoard(message.payload);
}
}
function dynamic_text() {
return "create your dynamic text here";
}
function download_file(name, contents, mime_type) {
mime_type = mime_type || "text/csv;charset=utf-8";//"text/plain"//
var blob = new Blob(['\uFEFF', contents], {type: mime_type});//new Blob([contents], {type: mime_type});//
var dlink = document.createElement('a');
dlink.download = name;
dlink.href = window.URL.createObjectURL(blob);
dlink.onclick = function(e) {
// revokeObjectURL needs a delay to work properly
var that = this;
setTimeout(function() {
window.URL.revokeObjectURL(that.href);
let sendd= "SUCCESSFUL"
window.parent.postMessage(sendd,"https://sitename.com/report")
}, 1500);
};
dlink.click();
dlink.remove();
}
function csvFromJson(jsonData) {
//console.log("THE JSONdata", jsonData)
const items = JSON.parse(jsonData);
const replacer = (key, value) => value === null ? '' : value // specify how you want to handle null values here
const header = Object.keys(items[0])
let csv = items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','))
csv.unshift(header.join(','))
csv = csv.join('\r\n')
console.log("THE CSV", csv)
return csv
}
</script>
</body>
</html>