File: /var/www/test/Installationlist/oldphp/submit(1).php
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>申請資料 PDF 下載</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script src="fill_preview_data.js"></script>
<style>
body {
margin: 0;
padding: 10mm;
background: #eee;
font-family: "Microsoft JhengHei";
}
.a4-container {
width: 210mm;
min-height: 297mm;
margin: 0 auto;
background: white;
box-sizing: border-box;
padding: 0;
display: flex;
justify-content: center;
flex-direction: column;
}
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
td, th {
border: 1px solid #000;
padding: 10px;
vertical-align: top;
}
.section-title {
background: #f6f6f6;
font-weight: bold;
font-size: 22px;
text-align: center;
}
.label {
font-weight: bold;
width: 20%;
background: #f7f7fa;
}
.val {
width: 30%;
}
.val-a {
width: 30%;
text-align:left;
}
.device-table {
table-layout: fixed;
width: 100%;
}
.device-table td.label {
width: 18px;
max-width: 22px;
min-width: 16px;
background: #f7f7fa;
text-align: center;
font-weight: bold;
word-break: break-all;
font-size: 16px;
}
.device-table td.val {
text-align: center;
word-break: break-all;
}
.content-inner {
width: 190mm;
margin: 0 auto;
padding: 10mm;
box-sizing: border-box;
}
.avoid-break {
page-break-inside: avoid;
break-inside: avoid;
margin-top: 20mm;
}
.signature-inline {
text-align: left;
margin-top: 10mm;
}
.signature-inline-img {
max-height: 40mm;
width: 50%;
border: 1px solid #ccc;
display: block;
margin-top: 5px;
}
.id-photo-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20px;
gap: 10px;
page-break-inside: avoid;
}
.photo-item {
width: 32%;
text-align: center;
}
.photo-label {
font-weight: bold;
margin-bottom: 5px;
font-size: 14px;
}
.photo-img {
max-width: 100%;
max-height: 60mm;
border: 1px solid #ccc;
}
.page-break {
display: block;
page-break-before: always;
}
.page-footer {
font-size: 11px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 1mm 5mm;
transform: scale(0.95);
}
.page-header {
display: flex;
align-items: center;
padding-bottom: 5px;
border-bottom: 1px solid black;
margin-top: 5mm;
}
</style>
</head>
<body>
<div id="previewContent" class="a4-container">
<div class="content-inner">
<div class="page-footer">
公司地址：桃園市桃園區大興西路二段61號16樓
電話：03-358-5867
傳真：03-301-2115 <br>
官方網址：www.ysnet.com.tw
</div>
<div style="display: flex; align-items: center; padding-bottom: 5px; border-bottom: 1px solid black;">
<!-- 左側 LOGO 區塊 -->
<div style="width: 22%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; line-height: 1.2; padding-left: 10px;">
<strong style="font-size: 22px;">YSNET</strong>
<span style="font-size: 12px;">亞訊股份有限公司</span>
</div>
<!-- 中央標題區 -->
<div style="width: 56%; text-align: center; font-size: 30px; font-weight:bold;">
網際網路接取服務申請書
</div>
<!-- 右側保留空間（可放圖片或留白） -->
<div style="width: 22%;"></div>
</div>
<table>
<tr class="section-title"><td colspan="4">申請人基本資料</td></tr>
<tr><td class="label">用戶編號</td><td class="val" id="user_id_display"></td>
<td class="label">社區名稱</td><td class="val" id="member_display"></td></tr>
<tr><td class="label">申請人姓名</td><td class="val" id="applicant_name"></td>
<td class="label">住宅電話</td><td class="val" id="applicant_homenumber"></td></tr>
<tr><td class="label">身分證字號/統一編號</td><td class="val" id="applicant_usernumber"></td>
<td class="label">行動電話</td><td class="val" id="applicant_phone"></td></tr>
<tr><td class="label">裝機地址</td><td class="val" id="install_address" colspan="3"></td></tr>
<tr><td class="label">電子信箱</td><td class="val" colspan="3" id="applicant_email"></td></tr>
<tr><td class="label">申請速率</td><td class="val" id="speed"></td>
<td class="label">連接據點</td><td class="val" id="basenumber"></td></tr>
<tr><td class="label">連線帳號</td><td class="val" id="pppoeid"></td>
<td class="label">連線密碼</td><td class="val" id="pppoepw"></td></tr>
<tr><td class="label">首裝優惠</td><td class="val" colspan="3" id="fistcount" style="white-space:pre-wrap;"></td></tr>
</table>
<table class="device-table">
<tr class="section-title"><td colspan="3">設備資訊</td></tr>
<tr>
<td class="label">室內資訊箱設備</td>
<td class="label">室內網路設備</td>
<td class="label">借用設備料號</td>
</tr>
<tr>
<td class="val-a" id="info_box"></td>
<td class="val-a" id="router_box"></td>
<td class="val-a" id="use_box"></td>
</tr>
</table>
<div class="page-break"></div>
<div class="avoid-break">
<div class="page-footer">
公司地址：桃園市桃園區大興西路二段61號16樓
電話：03-358-5867
傳真：03-301-2115 <br>
官方網址：www.ysnet.com.tw
</div>
<div style="display: flex; align-items: center; padding-bottom: 5px; border-bottom: 1px solid black;">
<!-- 左側 LOGO 區塊 -->
<div style="width: 22%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; line-height: 1.2; padding-left: 10px;">
<strong style="font-size: 22px;">YSNET</strong>
<span style="font-size: 12px;">亞訊股份有限公司</span>
</div>
<!-- 中央標題區 -->
<div style="width: 56%; text-align: center; font-size: 30px; font-weight:bold;">
網際網路接取服務申請書
</div>
<!-- 右側保留空間（可放圖片或留白） -->
<div style="width: 22%;"></div>
</div>
<table>
<tr class="section-title"><td colspan="4">收費項目明細</td></tr>
<tr><td style="width: 20%; font-weight:bold;">項目</td>
<td style="width: 25%;">品項</td>
<td style="width: 15%;">金額</td>
<td style="width: 40%;">設備料號/備註</td></tr>
<tbody id="fee-list"></tbody>
<tr>
<td colspan="2" style="text-align:right; font-weight:bold;">總計</td>
<td id="fee-total" style="font-weight:bold; color:red;"></td>
<td></td>
</tr>
</table>
</div>
<div class="avoid-break">
<table>
<tr class="section-title"><td colspan="4">日期資訊</td></tr>
<tr><td style="font-weight:bold;">裝機日</td><td id="install-date"></td></tr>
<tr><td style="font-weight:bold;">起租日</td><td id="rental-start-date"></td></tr>
<tr><td style="font-weight:bold;">到期日</td><td id="rental-end-date"></td></tr>
<tr><td style="font-weight:bold;">贈送月份明細</td><td colspan="3" id="given-months-list"></td></tr>
<tr><td style="font-weight:bold;">贈送後到期日</td><td id="real-end-date"></td></tr>
</table>
</div>
<table>
<tr class="section-title"><td colspan="4">完工有線測速</td></tr>
<tr>
<td class="label">下載速率(Mbps)</td><td class="val" id="download"></td>
<td class="label">上傳速率(Mbps)</td><td class="val" id="upload"></td>
</tr>
</table>
<div class="avoid-break">
<div class="page-footer">
公司地址：桃園市桃園區大興西路二段61號16樓
電話：03-358-5867
傳真：03-301-2115 <br>
官方網址：www.ysnet.com.tw
</div>
<div style="display: flex; align-items: center; padding-bottom: 5px; border-bottom: 1px solid black;">
<!-- 左側 LOGO 區塊 -->
<div style="width: 22%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; line-height: 1.2; padding-left: 10px;">
<strong style="font-size: 22px;">YSNET</strong>
<span style="font-size: 12px;">亞訊股份有限公司</span>
</div>
<!-- 中央標題區 -->
<div style="width: 56%; text-align: center; font-size: 30px; font-weight:bold;">
網際網路接取服務申請書
</div>
<!-- 右側保留空間（可放圖片或留白） -->
<div style="width: 22%;"></div>
</div>
<table>
<tr class="section-title"><td colspan="4">簽名與證件影本</td></tr>
<tr>
<td style="width: 50%; vertical-align: top;">
<div style="margin-bottom: 10px;">
<strong>申請人簽名：</strong><br>
<img id="signature-image" alt="簽名圖片" style="max-width: 100%; max-height: 60mm; border: 1px solid #ccc; display: block; margin-top: 5px;">
<div id="proxy-info" style="margin-top: 10px;"></div>
</div>
<div style="margin-top: 20px;">
<strong>施工工程師：</strong>
<div id="engineer-name" style="min-height: 24px; border: 1px solid #ccc; padding: 5px;"></div>
</div>
</td>
<td style="width: 50%;">
<div style="display: flex; flex-direction: column; gap: 10px;">
<div style="text-align: center;">
<div style="font-weight: bold; font-size: 14px;">身分證正面</div>
<img id="preview-front-pdf" class="photo-img" style="max-height: 60mm; border: 1px solid #ccc;">
</div>
<div style="text-align: center;">
<div style="font-weight: bold; font-size: 14px;">身分證反面</div>
<img id="preview-back-pdf" class="photo-img" style="max-height: 60mm; border: 1px solid #ccc;">
</div>
<div style="text-align: center;">
<div style="font-weight: bold; font-size: 14px;">第二證件正面</div>
<img id="preview-second-pdf" class="photo-img" style="max-height: 60mm; border: 1px solid #ccc;">
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<script>
async function waitForImagesToLoad(container) {
const images = container.querySelectorAll("img");
const promises = [];
images.forEach((img) => {
if (!img.complete || img.naturalHeight === 0) {
promises.push(new Promise((resolve) => {
img.onload = img.onerror = resolve;
}));
}
});
return Promise.all(promises);
}
function forceBreakIfOverflows(element, containerHeight = 1122) {
const top = element.offsetTop;
const height = element.offsetHeight;
if (top + height > containerHeight) {
const pageBreak = document.createElement('div');
pageBreak.classList.add('page-break');
element.parentNode.insertBefore(pageBreak, element);
}
}
window.onload = async () => {
try {
const container = document.getElementById('previewContent');
// 填入資料
if (typeof fillPreviewFromSession === 'function') {
await fillPreviewFromSession(container);
}
document.getElementById("download").textContent = sessionStorage.getItem("download") || '—';
document.getElementById("upload").textContent = sessionStorage.getItem("upload") || '—';
// 插入簽名與圖片
const signature = sessionStorage.getItem("signatureData");
const photoFront = sessionStorage.getItem("photo_front");
const photoBack = sessionStorage.getItem("photo_back");
const photoSecond = sessionStorage.getItem("photo_second");
if (signature) document.getElementById("signature-image").src = signature;
if (photoFront) document.getElementById("preview-front-pdf").src = photoFront;
if (photoBack) document.getElementById("preview-back-pdf").src = photoBack;
if (photoSecond) document.getElementById("preview-second-pdf").src = photoSecond;
const signatureType = sessionStorage.getItem("signature_type");
const proxyID = sessionStorage.getItem("proxy_id");
if (signatureType === "代簽" && proxyID) {
document.getElementById("proxy-info").innerHTML = `
<div style="margin-top: 10px;">
<strong>簽名類型：</strong> 代簽人<br>
<strong>代簽人身分證字號：</strong> ${proxyID}
</div>
`;
}
await waitForImagesToLoad(container);
setTimeout(() => {
html2pdf().set({
margin: [0, 0, 0, 0],
filename: '亞訊申請資料.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
}).from(container).save();
}, 300);
} catch (err) {
console.error("PDF 錯誤：", err);
alert("PDF 下載發生錯誤，請開啟 console 查看詳情");
}
};
</script>
</body>
</html>