如何在本地打印机打印PHP表单指定数据而非整页？

针对你在本地PHP CRUD项目中遇到的「window.print()打印整页而非仅表单数据」的问题，以下是几种实用的解决方法：

方法1：用CSS媒体查询隐藏非目标内容 #

这种方法最简单，通过打印专属的CSS规则，让页面仅显示需要打印的表单区域。

步骤： #

1. 给表单添加唯一ID，方便CSS定位：

<form method="POST" action="" id="print-form">  
    <div class="form-group">
        <input type="number" name="stu_num" class="form-control" value="<?php echo $stu_num ; ?>">
    </div>

    <div class="form-group">
        <label>Student Name</label>
        <input type="text" name="stu_name" class="form-control" value="<?php echo $stu_name ; ?>" >
    </div>

    <div class="form-group">
        <input type="number" name="no_pouch" class="form-control" >
    </div>
    <div class="form-group">
        <input type="number" name="no_contra" class="form-control" >
    </div>

    <div class="form-group">
        <label>Date</label>
        <input type="text" name="date" class="form-control" value="<?php echo $date ; ?>">
    </div>        

    <button type="button" name="print" class="btn btn-primary" onclick="printForm()">Print</button>
</form>

2. 添加打印专用的CSS样式：

<style>
@media print {
    /* 隐藏页面所有元素 */
    body * {
        visibility: hidden;
    }
    /* 让表单及内部所有元素可见 */
    #print-form, #print-form * {
        visibility: visible;
    }
    /* 把表单定位到页面左上角，避免打印空白 */
    #print-form {
        position: absolute;
        left: 0;
        top: 0;
    }
}
</style>

3. 添加触发打印的JS函数：

<script>
function printForm() {
    window.print();
}
</script>

方法2：创建临时打印容器，自定义打印格式 #

如果需要更灵活的打印样式（比如不显示输入框，只显示文本），可以提取表单数据生成自定义内容后打印。

代码示例： #

修改表单的打印按钮，绑定自定义打印函数：

<button type="button" name="print" class="btn btn-primary" onclick="printSelectedData()">Print</button>

添加JS函数：

<script>
function printSelectedData() {
    // 提取表单中的数据
    const stuNum = document.querySelector('input[name="stu_num"]').value;
    const stuName = document.querySelector('input[name="stu_name"]').value;
    const noPouch = document.querySelector('input[name="no_pouch"]').value;
    const noContra = document.querySelector('input[name="no_contra"]').value;
    const date = document.querySelector('input[name="date"]').value;

    // 构建自定义打印内容（可自行调整样式）
    const printContent = `
        <div style="padding: 20px; font-family: 'Arial', sans-serif; max-width: 500px;">
            <h2 style="text-align: center;">Student Record</h2>
            <hr>
            <p><strong>学号：</strong>${stuNum}</p>
            <p><strong>学生姓名：</strong>${stuName}</p>
            <p><strong>袋数：</strong>${noPouch}</p>
            <p><strong>合同数：</strong>${noContra}</p>
            <p><strong>日期：</strong>${date}</p>
        </div>
    `;

    // 创建临时iframe承载打印内容
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
    const doc = iframe.contentDocument || iframe.contentWindow.document;
    doc.write(printContent);
    doc.close();

    // 触发打印
    iframe.contentWindow.print();

    // 打印后移除临时iframe
    setTimeout(() => {
        document.body.removeChild(iframe);
    }, 1000);
}
</script>

方法3：新开窗口打印表单区域 #

这种方法会打开一个新窗口，仅加载表单内容后打印，不会影响原页面。

代码示例： #

给表单添加ID后，使用以下JS函数：

<script>
function printForm() {
    const form = document.getElementById('print-form');
    // 新开空白窗口
    const printWindow = window.open('', '', 'width=600,height=800');
    // 写入表单内容和基础样式
    printWindow.document.write(`
        <html>
        <head>
            <title>打印学生数据</title>
            <style>
                body { font-family: Arial, sans-serif; padding: 20px; }
                .form-group { margin-bottom: 15px; }
                label { display: block; margin-bottom: 5px; font-weight: bold; }
                .form-control { width: 100%; padding: 8px; box-sizing: border-box; }
            </style>
        </head>
        <body>${form.innerHTML}</body>
        </html>
    `);
    printWindow.document.close();
    // 触发打印
    printWindow.print();
}
</script>

内容的提问来源于stack exchange，提问作者MohamedSalem