本文介绍如何使用纯前端技术（html + javascript）在浏览器中通过模态框安全预览服务器生成的pdf订单凭证，并通过css媒体查询与window.print()实现热敏打印机专用纸张尺寸（如80mm宽）的精准打印，无需服务端渲染或php干预。
本文介绍如何使用纯前端技术（html + javascript）在浏览器中通过模态框安全预览服务器生成的pdf订单凭证，并通过css媒体查询与window.print()实现热敏打印机专用纸张尺寸（如80mm宽）的精准打印，无需服务端渲染或php干预。
在现代餐饮POS系统或在线点餐后台中，快速预览并打印标准化收据（如80mm热敏纸）是高频刚需。由于PDF本身具备跨平台排版一致性，最佳实践是完全由前端完成预览与打印控制——服务端（PHP）仅负责生成并存储PDF（您已实现），而浏览器端负责安全展示与设备适配。
✅ 推荐方案：iframe + 自定义打印样式
使用
<!-- 模态框结构 -->
<div id="pdfModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<iframe id="pdfViewer" width="100%" height="600px" frameborder="0"></iframe>
</div>
</div>
<!-- 打印按钮 -->
<button onclick="openPdfPreview('/receipts/order_12345.pdf')">预览并打印收据</button>
<script>
function openPdfPreview(pdfUrl) {
document.getElementById('pdfViewer').src = pdfUrl;
document.getElementById('pdfModal').style.display = 'block';
}
// 关闭模态框
document.querySelector('.close').onclick = () => {
document.getElementById('pdfModal').style.display = 'none';
document.getElementById('pdfViewer').src = '';
};
// 打印函数（调用前确保PDF已加载）
function printReceipt() {
const iframe = document.getElementById('pdfViewer');
// 等待PDF加载完成（简单轮询，生产环境建议监听load事件）
setTimeout(() => {
iframe.contentWindow.focus();
iframe.contentWindow.print();
}, 300);
}
</script><!-- 关键：强制热敏纸尺寸（80mm宽 ≈ 3.15in，常用58mm/80mm） --><style>
@media print {
@page {
size: 80mm 297mm; /* 宽度80mm，长度自动（卷纸） */
margin: 0;
}
body {
margin: 0;
padding: 0;
font-size: 12px;
}
.modal, .modal-content, iframe {
display: none !important; /* 防止模态框元素被打印 */
}
}
</style>
⚠️ 注意事项与优化建议
- 热敏打印机适配核心：@page { size: 80mm 297mm; margin: 0; } 是关键。实际宽度需严格匹配打印机物理纸宽（常见为58mm或80mm），长度设为长条（如297mm）或auto；务必关闭所有外边距，避免内容被裁切。
- PDF加载时机：iframe.contentWindow.print() 必须在PDF完全加载后执行。更健壮的做法是监听 iframe.onload 或使用 postMessage 与PDF嵌入页通信（若PDF同源）。
- 安全性：确保PDF URL为同源路径（如 /receipts/*.pdf），否则跨域iframe无法调用print()。若PDF存于不同域名，请改用
- 无PDF插件兼容性：现代Chrome/Firefox/Edge均原生支持PDF嵌入；Safari需确保MIME类型正确（application/pdf）。
- 备选方案（如需更高控制）：可使用 PDF.js 渲染PDF为Canvas，再通过CSS控制Canvas打印区域——但对热敏收据而言，原生iframe方案更轻量、更可靠。
综上，该方案零依赖PHP打印逻辑，完全交由浏览器处理，既保障了预览体验，又通过标准CSS实现了热敏纸精准输出，同时保留邮件发送能力（您已有的PHP邮件逻辑可保持不变）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
