Download Single Form Submission as PDF
$(function () {
function addDownloadButton() {
var modalContent = $('.modal-content');
var modalTitle = $('#ModalHeader').text().trim();
if (modalContent.length && modalTitle === 'Manage Form Submission') {
if ($('.data-download').length === 0) {
const newButton = $('<button>')
.text('Download')
.addClass('data-download')
.css({
'background-color': '#28a745',
'color' : '#fff',
'border' : 'none',
'padding' : '8px 16px',
'border-radius' : '5px',
'cursor' : 'pointer',
'font-size' : '14px',
'margin-top' : '10px',
'display' : 'inline-block',
'margin-left' : '658px'
})
.hover(
function () { $(this).css('background-color', '#218838'); },
function () { $(this).css('background-color', '#28a745'); }
)
.click(generatePrint);
$('.modal-body .model-management-modal h4')
.filter(function () {
return $.trim($(this).text()) === 'Data Collected';
})
.append(newButton);
}
}
}
/** Print the table & page name */
function generatePrint() {
/* --------------------------------
1. Grab the page label + name
-----------------------------------*/
const pageRow = $('.model-details tr').filter(function () {
return $(this).find('th').text().trim() === 'Page:';
});
const pageLabel = pageRow.find('th').text().trim(); // "Page:"
const pageName = pageRow.find('td a').text().trim(); // actual page name
const headerText = pageLabel && pageName
? `${pageLabel} ${pageName}`
: 'Collected Data';
/* --------------------------------
2. Collect table rows to print
-----------------------------------*/
const tableData = $('.model-data').find('tr').map(function () {
const cells = $(this).find('th, td').map(function () {
return $(this).text().trim();
}).get();
return `<tr><td>${cells[0]}</td><td>${cells[1]}</td></tr>`;
}).get().join('');
/* --------------------------------
3. Build a hidden iframe to print
-----------------------------------*/
const iframe = document.createElement('iframe');
iframe.style.position = 'absolute';
iframe.style.width = '0';
iframe.style.height = '0';
iframe.style.border = 'none';
document.body.appendChild(iframe);
const doc = iframe.contentWindow.document;
doc.open();
doc.write(`
<html>
<head>
<title>Form Submission</title>
<style>
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid black; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
</style>
</head>
<body>
<h2>${headerText}</h2>
<table>
${tableData}
</table>
<script>
window.print();
window.onafterprint = () => document.body.removeChild(window.frameElement);
</script>
</body>
</html>