|
|
<!DOCTYPE html> |
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="th" xml:lang="th"> |
|
|
<head> |
|
|
<title>PDF Download</title> |
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> |
|
|
<style type="text/css"> |
|
|
@font-face { |
|
|
font-family: 'THSarabunNew'; |
|
|
src: url('fonts/THSarabunNew.ttf') format('truetype'); |
|
|
font-weight: normal; |
|
|
font-style: normal; |
|
|
unicode-range: U+0E00-0E7F, U+0020-007F, U+00A0-00FF; |
|
|
font-display: swap; |
|
|
} |
|
|
|
|
|
@font-face { |
|
|
font-family: 'THSarabunNew'; |
|
|
src: url('fonts/THSarabunNew Bold.ttf') format('truetype'); |
|
|
font-weight: bold; |
|
|
font-style: normal; |
|
|
unicode-range: U+0E00-0E7F, U+0020-007F, U+00A0-00FF; |
|
|
font-display: swap; |
|
|
} |
|
|
|
|
|
* { |
|
|
font-family: 'THSarabunNew', sans-serif !important; |
|
|
} |
|
|
|
|
|
.ft00 { font-size: 19px; color: #000000; } |
|
|
.ft01 { font-size: 25px; color: #000000; } |
|
|
.ft02 { font-size: 22px; color: #000000; } |
|
|
.ft03 { font-size: 22px; color: #000000; } |
|
|
.ft06 { font-size: 15px; line-height: 18px; color: #000000; } |
|
|
|
|
|
|
|
|
.loading-overlay { |
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%; |
|
|
background: rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; |
|
|
align-items: center; justify-content: center; z-index: 9999; |
|
|
color: white; font-family: 'THSarabunPsk', sans-serif; |
|
|
} |
|
|
.spinner { |
|
|
border: 4px solid #f3f3f3; border-top: 4px solid #3498db; |
|
|
border-radius: 50%; width: 50px; height: 50px; |
|
|
animation: spin 1s linear infinite; margin-bottom: 20px; |
|
|
} |
|
|
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
|
|
</style> |
|
|
<script> |
|
|
let allWorkerData = []; |
|
|
|
|
|
function setImageSrc(imgElementId, src, defaultSrc, workerName, type) { |
|
|
const imgElement = document.getElementById(imgElementId); |
|
|
if (!imgElement) return; |
|
|
if (src && src.trim() !== '') { |
|
|
imgElement.crossOrigin = "anonymous"; |
|
|
const testImage = new Image(); |
|
|
testImage.crossOrigin = "anonymous"; |
|
|
testImage.onload = () => imgElement.src = src; |
|
|
testImage.onerror = () => imgElement.src = defaultSrc; |
|
|
testImage.src = src; |
|
|
} else { |
|
|
imgElement.src = defaultSrc; |
|
|
} |
|
|
} |
|
|
|
|
|
function getCurrentTimestamp() { |
|
|
const now = new Date(); |
|
|
return now.toLocaleString('th-TH', { |
|
|
hour: '2-digit', minute: '2-digit', hour12: false |
|
|
}).replace(',', ' น.'); |
|
|
} |
|
|
|
|
|
function displayWorkerData(worker) { |
|
|
|
|
|
document.getElementById('requestNumberReceipt').innerHTML = worker.requestNumber || 'N/A'; |
|
|
document.getElementById('receiptNumberReceipt').innerHTML = worker.receiptNumber || 'N/A'; |
|
|
document.getElementById('paymentNumberReceipt').innerHTML = worker.paymentNumber || 'N/A'; |
|
|
document.getElementById('payerNameReceipt').innerHTML = worker.englishName || worker.thaiName || 'N/A'; |
|
|
document.getElementById('nationalityReceipt').innerHTML = worker.nationality || 'N/A'; |
|
|
document.getElementById('alienReferenceReceipt').innerHTML = worker.alienReferenceNumber || 'N/A'; |
|
|
document.getElementById('personalIDReceipt').innerHTML = worker.personalID || 'N/A'; |
|
|
|
|
|
|
|
|
const currentUrl = window.location.href; |
|
|
const baseUrl = currentUrl.substring(0, currentUrl.lastIndexOf('/') + 1); |
|
|
const currentDomain = window.location.origin; |
|
|
const receiptUrl = `${currentDomain}/pdf.html?id=${encodeURIComponent(worker.requestNumber || '')}`; |
|
|
const receiptQrCodeApiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&ecc=H&data=${encodeURIComponent(receiptUrl)}`; |
|
|
const defaultQrCodeSrc = 'https://via.placeholder.com/90?text=No+QR'; |
|
|
setImageSrc('receiptQrCode', receiptQrCodeApiUrl, defaultQrCodeSrc, worker.englishName, 'receipt QR code'); |
|
|
|
|
|
|
|
|
const timestamp = getCurrentTimestamp(); |
|
|
const receiptTimestamp = `เอกสารอิเล็กทรอนิกส์ฉบับนี้ถูกสร้างจากระบบอนุญาตทำงานคนต่างด้าวที่มีสถานะการทำงานไม่ถูกต้องตามกฎหมาย ตามมติคณะรัฐมนตรีเมื่อวันที่ 24 กันยายน 2567<br/>โดยกรมการจัดหางาน กระทรวงแรงงาน<br/>พิมพ์เอกสาร วันที่ 10/04/2568 ${timestamp} น.`; |
|
|
document.getElementById('receiptTimestamp').innerHTML = receiptTimestamp ; |
|
|
} |
|
|
|
|
|
async function downloadPage2AsPDF(worker) { |
|
|
try { |
|
|
const page2Element = document.getElementById('page2-div'); |
|
|
|
|
|
|
|
|
const images = document.querySelectorAll('img'); |
|
|
await Promise.all(Array.from(images).map(img => { |
|
|
return new Promise(resolve => { |
|
|
if (img.complete) resolve(); |
|
|
else { |
|
|
img.onload = resolve; |
|
|
img.onerror = resolve; |
|
|
setTimeout(resolve, 2000); |
|
|
} |
|
|
}); |
|
|
})); |
|
|
|
|
|
const opt = { |
|
|
margin: [0, 0, 0, 0], |
|
|
filename: 'mpdf.pdf', |
|
|
image: { type: 'jpeg', quality: 0.98 }, |
|
|
html2canvas: { scale: 3, useCORS: true, width: 892, height: 1261, scrollX: 0, scrollY: 0 }, |
|
|
jsPDF: { unit: 'px', format: [892, 1261], orientation: 'portrait', compress: true } |
|
|
}; |
|
|
|
|
|
|
|
|
const page2Clone = page2Element.cloneNode(true); |
|
|
const container = document.createElement('div'); |
|
|
container.style.width = '892px'; |
|
|
container.style.height = '1261px'; |
|
|
container.appendChild(page2Clone); |
|
|
document.body.appendChild(container); |
|
|
|
|
|
await html2pdf().set(opt).from(container).save(); |
|
|
document.body.removeChild(container); |
|
|
|
|
|
const loadingOverlay = document.getElementById('loadingOverlay'); |
|
|
if (loadingOverlay) loadingOverlay.style.display = 'none'; |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Error generating PDF:', error); |
|
|
showError('เกิดข้อผิดพลาดในการสร้าง PDF กรุณาลองใหม่อีกครั้ง'); |
|
|
} |
|
|
} |
|
|
|
|
|
function showError(message) { |
|
|
const loadingOverlay = document.getElementById('loadingOverlay'); |
|
|
if (loadingOverlay) { |
|
|
loadingOverlay.innerHTML = ` |
|
|
<div style="text-align: center;"> |
|
|
<h2 style="color: #ff6b6b; font-size: 24px; margin-bottom: 20px;">เกิดข้อผิดพลาด</h2> |
|
|
<p style="font-size: 18px; margin-bottom: 20px;">${message}</p> |
|
|
<button onclick="window.close()" style="padding: 10px 20px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">ปิดหน้าต่าง</button> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
} |
|
|
|
|
|
function loadWorkerData() { |
|
|
const urlParams = new URLSearchParams(window.location.search); |
|
|
const requestNumberFromUrl = urlParams.get('id'); |
|
|
|
|
|
fetch('combined-data.json') |
|
|
.then(response => { |
|
|
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); |
|
|
return response.json(); |
|
|
}) |
|
|
.then(data => { |
|
|
allWorkerData = data; |
|
|
|
|
|
if (requestNumberFromUrl) { |
|
|
const worker = allWorkerData.find(w => w.requestNumber === requestNumberFromUrl); |
|
|
|
|
|
if (worker) { |
|
|
displayWorkerData(worker); |
|
|
setTimeout(() => { downloadPage2AsPDF(worker); }, 2000); |
|
|
} else { |
|
|
showError(`ไม่พบข้อมูลสำหรับเลขที่คำขอ: ${requestNumberFromUrl}`); |
|
|
} |
|
|
} else { |
|
|
showError('ไม่พบเลขที่คำขอในลิงก์'); |
|
|
} |
|
|
}) |
|
|
.catch(error => { |
|
|
console.error('Error loading worker data:', error); |
|
|
showError(`เกิดข้อผิดพลาดในการโหลดข้อมูล: ${error.message}`); |
|
|
}); |
|
|
} |
|
|
|
|
|
window.onload = function() { loadWorkerData(); }; |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-gray-500"> |
|
|
<div id="loadingOverlay" class="loading-overlay"> |
|
|
<div class="spinner"></div> |
|
|
<h2 style="font-size: 24px; margin-bottom: 10px;">กำลังเตรียม PDF...</h2> |
|
|
<p style="font-size: 18px;">กรุณารอสักครู่ ระบบกำลังสร้างเอกสารให้คุณ</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="page2-div" class="page-div relative w-[892px] h-[1261px] font-['THSarabunPSK'] text-black mx-auto bg-white"> |
|
|
<img width="892" height="1261" src="bg2.svg" alt="receipt background image"/> |
|
|
|
|
|
<img class="absolute top-[925px] left-[120px] w-[90px] h-[90px] object-cover" id="receiptQrCode" src="https://via.placeholder.com/90?text=Loading" alt="Receipt QR Code"/> |
|
|
|
|
|
<p style="position:absolute;top:147px;left:86px;white-space:nowrap" class="ft00">กรมการจัดหางาน</p> |
|
|
<p style="position:absolute;top:170px;left:88px;white-space:nowrap" class="ft00">กระทรวงแรงงาน</p> |
|
|
|
|
|
<p style="position:absolute;top:90px;left:397px;white-space:nowrap" class="ft01"><b>ใบเสร็จรับเงิน</b></p> |
|
|
<p style="position:absolute;top:120px;left:418px;white-space:nowrap" class="ft01"><b>ต้นฉบับ</b></p> |
|
|
|
|
|
<p style="position:absolute;top:60px;left:598px;white-space:nowrap" class="ft00">เลขที่</p> |
|
|
<p style="position:absolute;top:60px;left:640px;white-space:nowrap" class="ft00" id="receiptNumberReceipt">xxxxxxx</p> |
|
|
|
|
|
<p style="position:absolute;top:149px;left:582px;white-space:nowrap" class="ft00">ที่ทำการ   สำนักบริหารแรงงานต่างด้าว</p> |
|
|
<p style="position:absolute;top:188px;left:602px;white-space:nowrap" class="ft00">วันที่   19 มีนาคม 2568</p> |
|
|
|
|
|
<p style="position:absolute;top:227px;left:540px;white-space:nowrap" class="ft00">เลขที่ใบชำระเงิน  </p> |
|
|
<p style="position:absolute;top:227px;left:640px;white-space:nowrap" class="ft00" id="paymentNumberReceipt">IV680329/002308</p> |
|
|
|
|
|
<p style="position:absolute;top:271px;left:60px;white-space:nowrap" class="ft00">เลขรับคำขอที่</p> |
|
|
<p style="position:absolute;top:271px;left:180px;white-space:nowrap" class="ft00" id="requestNumberReceipt">xxxxxxx</p> |
|
|
<p style="position:absolute;top:310px;left:60px;white-space:nowrap" class="ft00">ชื่อผู้ชำระเงิน</p> |
|
|
<p style="position:absolute;top:310px;left:180px;white-space:nowrap" class="ft00" id="payerNameReceipt">xxxxxxxxxxxxx</p> |
|
|
<p style="position:absolute;top:310px;left:471px;white-space:nowrap" class="ft00">สัญชาติ</p> |
|
|
<p style="position:absolute;top:310px;left:520px;white-space:nowrap" class="ft00" id="nationalityReceipt">เมียนมา</p> |
|
|
<p style="position:absolute;top:354px;left:60px;white-space:nowrap" class="ft00">เลขอ้างอิงคนต่างด้าว</p> |
|
|
<p style="position:absolute;top:354px;left:180px;white-space:nowrap" class="ft00" id="alienReferenceReceipt">xxxxxxxxxxxxx</p> |
|
|
<p style="position:absolute;top:354px;left:432px;white-space:nowrap" class="ft00">หมายเลขประจำตัวคนต่างด้าว</p> |
|
|
<p style="position:absolute;top:354px;left:640px;white-space:nowrap" class="ft00" id="personalIDReceipt">xxxxxxxxxxxxx</p> |
|
|
|
|
|
<p style="position:absolute;top:399px;left:60px;white-space:nowrap" class="ft00">ชื่อนายจ้าง / สถานประกอบการ   บริษัท บาน กง เอ็นจิเนียริ่ง จำกัด</p> |
|
|
<p style="position:absolute;top:438px;left:60px;white-space:nowrap" class="ft00">เลขประจำตัวนายจ้าง</p> |
|
|
<p style="position:absolute;top:437px;left:233px;white-space:nowrap" class="ft00">  0415567000061</p> |
|
|
|
|
|
<p style="position:absolute;top:526px;left:345px;white-space:nowrap" class="ft02"><b>รายการ</b></p> |
|
|
<p style="position:absolute;top:526px;left:688px;white-space:nowrap" class="ft02"><b>จำนวนเงิน</b></p> |
|
|
|
|
|
<p style="position:absolute;top:572px;left:118px;white-space:nowrap" class="ft03">1. ค่าธรรมเนียมในการยื่นคำขอ ฉบับละ 100 บาท</p> |
|
|
<p style="position:absolute;top:572px;left:736px;white-space:nowrap" class="ft03">100.00</p> |
|
|
<p style="position:absolute;top:616px;left:118px;white-space:nowrap" class="ft03">2. ค่าธรรมเนียมใบอนุญาตทำงาน</p> |
|
|
<p style="position:absolute;top:616px;left:736px;white-space:nowrap" class="ft03">900.00</p> |
|
|
|
|
|
<p style="position:absolute;top:694px;left:97px;white-space:nowrap" class="ft03"> </p> |
|
|
<p style="position:absolute;top:694px;left:648px;white-space:nowrap" class="ft03"> </p> |
|
|
|
|
|
<p style="position:absolute;top:772px;left:174px;white-space:nowrap" class="ft02"><b>รวมเป็นเงินทั้งสิ้น (บาท)</b></p> |
|
|
<p style="position:absolute;top:799px;left:188px;white-space:nowrap" class="ft02"><b>( หนึ่งพันบาทถ้วน )</b></p> |
|
|
<p style="position:absolute;top:786px;left:385px;white-space:nowrap" class="ft03"> </p> |
|
|
<p style="position:absolute;top:774px;left:722px;white-space:nowrap" class="ft02"><b>1,000.00</b></p> |
|
|
|
|
|
<p style="position:absolute;top:894px;left:94px;white-space:nowrap" class="ft00">ได้รับเงินไว้เป็นการถูกต้องแล้ว</p> |
|
|
|
|
|
<p style="position:absolute;top:977px;left:481px;white-space:nowrap" class="ft00">(ลงชื่อ)</p> |
|
|
<p style="position:absolute;top:977px;left:564px;white-space:nowrap" class="ft00">นางสาวอารีวรรณ โพธิ์นิ่มแดง</p> |
|
|
<p style="position:absolute;top:977px;left:762px;white-space:nowrap" class="ft00">(ผู้รับเงิน)</p> |
|
|
|
|
|
<p style="position:absolute;top:1017px;left:473px;white-space:nowrap" class="ft00">ตำแหน่ง</p> |
|
|
<p style="position:absolute;top:1016px;left:562px;white-space:nowrap" class="ft00">นักวิชาการแรงงานชำนาญการ</p> |
|
|
|
|
|
<p style="position:absolute;top:1133px;left:55px;white-space:nowrap" class="ft06" id="receiptTimestamp">เอกสารอิเล็กทรอนิกส์ฉบับนี้ถูกสร้างจากระบบอนุญาตทำงานคนต่างด้าวที่มีสถานะการทำงานไม่ถูกต้องตามกฎหมาย ตามมติคณะรัฐมนตรีเมื่อวันที่ 24 กันยายน 2567<br/>โดยกรมการจัดหางาน กระทรวงแรงงาน</p> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
