feat: add PDF download functionality with loading state and improve print layout styling
This commit is contained in:
@@ -492,6 +492,8 @@
|
||||
padding: 0 !important;
|
||||
width: 210mm !important;
|
||||
height: 297mm !important;
|
||||
max-height: 297mm !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
#letterheadPrintArea, #letterheadPrintArea * {
|
||||
visibility: visible !important;
|
||||
@@ -507,6 +509,7 @@
|
||||
border-radius: 0 !important;
|
||||
margin: 0 !important;
|
||||
background: #ffffff !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
@page {
|
||||
size: A4 portrait;
|
||||
@@ -680,7 +683,7 @@
|
||||
<i class="uil uil-print me-2" style="font-size: 1.2rem; vertical-align: middle;"></i>
|
||||
<strong>{!! t('Yazdır / Print') !!}</strong>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary rounded-pill px-4 shadow-sm" onclick="window.print()">
|
||||
<button type="button" class="btn btn-primary rounded-pill px-4 shadow-sm text-white" style="background-color: #e31e24 !important; border-color: #e31e24 !important; color: #ffffff !important;" onclick="downloadPDF(this)">
|
||||
<i class="uil uil-file-download-alt me-2" style="font-size: 1.2rem; vertical-align: middle;"></i>
|
||||
<strong>{!! t('PDF İndir / Download PDF') !!}</strong>
|
||||
</button>
|
||||
@@ -781,6 +784,46 @@ document.querySelectorAll('.btn-copy-inline').forEach(function (btn) {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function downloadPDF(btn) {
|
||||
var originalHTML = btn.innerHTML;
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" style="width: 1rem; height: 1rem; vertical-align: middle;"></span> <strong>' + (document.documentElement.lang === 'tr' ? 'Lütfen bekleyin...' : 'Please wait...') + '</strong>';
|
||||
|
||||
function run() {
|
||||
var element = document.getElementById('letterheadPrintArea');
|
||||
var opt = {
|
||||
margin: 0,
|
||||
filename: 'truncgil-bank-accounts.pdf',
|
||||
image: { type: 'jpeg', quality: 0.98 },
|
||||
html2canvas: { scale: 2, useCORS: true, letterRendering: true, scrollY: 0 },
|
||||
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
|
||||
};
|
||||
|
||||
html2pdf().set(opt).from(element).save().then(function() {
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = originalHTML;
|
||||
}).catch(function(err) {
|
||||
console.error(err);
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = originalHTML;
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof html2pdf === 'undefined') {
|
||||
var script = document.createElement('script');
|
||||
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js';
|
||||
script.onload = run;
|
||||
script.onerror = function() {
|
||||
alert('PDF library could not be loaded. Please try again.');
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = originalHTML;
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
} else {
|
||||
run();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
|
||||
Reference in New Issue
Block a user