|
18 | 18 | <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
|
19 | 19 | <script src="https://cdnjs.cloudflare.com/ajax/libs/docx/7.8.2/docx.js"></script>
|
20 | 20 |
|
| 21 | + <!-- Additional script to verify library loading --> |
| 22 | + <script> |
| 23 | + // Check if libraries are loaded correctly |
| 24 | + window.addEventListener('load', function() { |
| 25 | + // Check docx.js |
| 26 | + if (typeof docx === 'undefined') { |
| 27 | + console.error('docx.js library failed to load'); |
| 28 | + // Attempt to reload it |
| 29 | + var script = document.createElement('script'); |
| 30 | + script.src = 'https://unpkg.com/[email protected]/build/index.js'; |
| 31 | + script.onload = function() { |
| 32 | + console.log('docx.js loaded from fallback source'); |
| 33 | + window.docxLoaded = true; |
| 34 | + }; |
| 35 | + document.head.appendChild(script); |
| 36 | + } else { |
| 37 | + console.log('docx.js loaded successfully'); |
| 38 | + window.docxLoaded = true; |
| 39 | + } |
| 40 | + }); |
| 41 | + </script> |
| 42 | + |
21 | 43 | <!-- Font Awesome for icons -->
|
22 | 44 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
23 | 45 |
|
@@ -703,25 +725,122 @@ <h2 class="font-bold mb-2">TO</h2>
|
703 | 725 | previewContent.innerHTML = '';
|
704 | 726 | previewContent.appendChild(template);
|
705 | 727 | }
|
| 728 | + |
| 729 | +// Generate PDF |
| 730 | + document.getElementById('generatePDFBtn').addEventListener('click', function() { |
| 731 | + try { |
| 732 | + // Update preview content first |
| 733 | + updatePreview(); |
| 734 | + |
| 735 | + // Get the element with preview content |
| 736 | + const element = document.getElementById('previewContent').firstChild; |
| 737 | + |
| 738 | + // Make sure the element is visible and has content |
| 739 | + if (!element) { |
| 740 | + console.error("Preview content is empty"); |
| 741 | + alert("Unable to generate PDF: Preview content is empty. Please try again."); |
| 742 | + return; |
| 743 | + } |
| 744 | + |
| 745 | + // Create a clone of the element to prevent modifications to the original |
| 746 | + const clonedElement = element.cloneNode(true); |
| 747 | + |
| 748 | + // Make sure all images are fully loaded before generating PDF |
| 749 | + const images = clonedElement.querySelectorAll('img'); |
| 750 | + let imagesLoaded = true; |
| 751 | + |
| 752 | + images.forEach(img => { |
| 753 | + if (!img.complete) { |
| 754 | + imagesLoaded = false; |
| 755 | + } |
| 756 | + }); |
| 757 | + |
| 758 | + if (!imagesLoaded) { |
| 759 | + console.log("Waiting for images to load..."); |
| 760 | + setTimeout(() => { |
| 761 | + document.getElementById('generatePDFBtn').click(); |
| 762 | + }, 500); |
| 763 | + return; |
| 764 | + } |
| 765 | + |
| 766 | + // Set PO number for filename |
| 767 | + const poNumber = document.getElementById('poNumber').value || 'purchase-order'; |
| 768 | + |
| 769 | + // Configure PDF options for better rendering |
| 770 | + const opt = { |
| 771 | + margin: [10, 10, 10, 10], |
| 772 | + filename: poNumber + '.pdf', |
| 773 | + image: { type: 'jpeg', quality: 0.98 }, |
| 774 | + html2canvas: { |
| 775 | + scale: 2, // Higher scale for better quality |
| 776 | + useCORS: true, // Allow loading of images from other domains |
| 777 | + logging: true, // Enable logging for debugging |
| 778 | + letterRendering: true, // Improve rendering of text |
| 779 | + allowTaint: true, // Allow processing of tainted canvas |
| 780 | + foreignObjectRendering: true // Use ForeignObject when possible |
| 781 | + }, |
| 782 | + jsPDF: { |
| 783 | + unit: 'mm', |
| 784 | + format: 'a4', |
| 785 | + orientation: 'portrait', |
| 786 | + compress: true |
| 787 | + } |
| 788 | + }; |
| 789 | + |
| 790 | + // Create a wrapper div to ensure proper rendering |
| 791 | + const wrapper = document.createElement('div'); |
| 792 | + wrapper.appendChild(clonedElement); |
| 793 | + document.body.appendChild(wrapper); |
| 794 | + wrapper.style.position = 'absolute'; |
| 795 | + wrapper.style.left = '-9999px'; |
| 796 | + wrapper.style.top = '0'; |
| 797 | + wrapper.style.width = '210mm'; // A4 width |
| 798 | + |
| 799 | + // Add a message to show processing status |
| 800 | + const loadingMsg = document.createElement('div'); |
| 801 | + loadingMsg.innerText = 'Generating PDF...'; |
| 802 | + loadingMsg.style.position = 'fixed'; |
| 803 | + loadingMsg.style.top = '50%'; |
| 804 | + loadingMsg.style.left = '50%'; |
| 805 | + loadingMsg.style.transform = 'translate(-50%, -50%)'; |
| 806 | + loadingMsg.style.padding = '20px'; |
| 807 | + loadingMsg.style.backgroundColor = 'rgba(0,0,0,0.7)'; |
| 808 | + loadingMsg.style.color = 'white'; |
| 809 | + loadingMsg.style.borderRadius = '5px'; |
| 810 | + loadingMsg.style.zIndex = '9999'; |
| 811 | + document.body.appendChild(loadingMsg); |
| 812 | + |
| 813 | + // Generate PDF with error handling |
| 814 | + html2pdf() |
| 815 | + .set(opt) |
| 816 | + .from(wrapper) |
| 817 | + .save() |
| 818 | + .then(() => { |
| 819 | + console.log('PDF generated successfully'); |
| 820 | + document.body.removeChild(wrapper); |
| 821 | + document.body.removeChild(loadingMsg); |
| 822 | + }) |
| 823 | + .catch(error => { |
| 824 | + console.error('Error generating PDF:', error); |
| 825 | + alert('There was an error generating the PDF. Please check the console for details.'); |
| 826 | + document.body.removeChild(wrapper); |
| 827 | + document.body.removeChild(loadingMsg); |
| 828 | + }); |
| 829 | + |
| 830 | + } catch (error) { |
| 831 | + console.error('Error in PDF generation:', error); |
| 832 | + alert('There was an error generating the PDF. Please try again.'); |
| 833 | + } |
| 834 | + }); |
706 | 835 |
|
707 |
| - // Generate PDF |
708 |
| - document.getElementById('generatePDFBtn').addEventListener('click', function() { |
709 |
| - updatePreview(); |
710 |
| - const element = document.getElementById('previewContent').firstChild; |
711 |
| - |
712 |
| - const opt = { |
713 |
| - margin: 10, |
714 |
| - filename: document.getElementById('poNumber').value + '.pdf' || 'purchase-order.pdf', |
715 |
| - image: { type: 'jpeg', quality: 0.98 }, |
716 |
| - html2canvas: { scale: 2 }, |
717 |
| - jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } |
718 |
| - }; |
719 |
| - |
720 |
| - html2pdf().set(opt).from(element).save(); |
721 |
| - }); |
722 |
| - |
723 |
| - // Generate Word Document |
| 836 | +// Generate Word Document |
724 | 837 | document.getElementById('generateWordBtn').addEventListener('click', function() {
|
| 838 | + // Check if library is loaded before proceeding |
| 839 | + if (typeof docx === 'undefined') { |
| 840 | + alert('Word export library is not loaded. Please check your internet connection and try again.'); |
| 841 | + return; |
| 842 | + } |
| 843 | + |
725 | 844 | // Update preview first to ensure data is current
|
726 | 845 | updatePreview();
|
727 | 846 |
|
@@ -1189,7 +1308,7 @@ <h2 class="font-bold mb-2">TO</h2>
|
1189 | 1308 | }
|
1190 | 1309 | });
|
1191 | 1310 |
|
1192 |
| - // Generate Excel |
| 1311 | +// Generate Excel |
1193 | 1312 | document.getElementById('generateExcelBtn').addEventListener('click', function() {
|
1194 | 1313 | const poNumber = document.getElementById('poNumber').value || 'purchase-order';
|
1195 | 1314 | const companyName = document.getElementById('companyName').value || 'Your Company';
|
|
0 commit comments