打印PHP表单时如何自动跳过未填写的空字段与空元素

实现方案说明 #

你完全可以直接在现有的print.php文件中用PHP条件判断包裹对应表单模块，这是当前场景下最优的方案：服务端渲染阶段直接过滤空内容，不会出现前端方案常见的打印闪烁、兼容问题，逻辑也最容易维护。

具体实现逻辑

你可以先判断整个模块是否有填写内容，如果全空直接不渲染整个卡片，也可以针对单个行做细粒度控制，示例代码如下：

<?php
// 先校验Parent 2模块是否存在有效填写内容
$hasParent2 = !empty($_POST['par2relation']) 
            || !empty($_POST['par2fname']) 
            || !empty($_POST['par2lname']) 
            || !empty($_POST['par2phone']) 
            || !empty($_POST['par2email']) 
            || !empty($_POST['par2address']) 
            || !empty($_POST['par2city']) 
            || !empty($_POST['par2state']) 
            || !empty($_POST['par2zip']);

// 模块无内容就直接跳过渲染
if ($hasParent2):
?>
<div class="no-break card">
    <div class="card-content black-text">
        <div class="row">
            <div class="col s12 radio-label">
                <span class="card-title">PARENT 2</span>
            </div>
        </div>

        <!-- 单选组行：判断关系项有选择才渲染 -->
        <?php if (!empty($_POST['par2relation'])): ?>
        <div class="row">
            <div class="col s12">
                <span class="radio-label">Relationship:</span>
                <label class="active radio-button">
                    <input name="par2relation" type="radio" value="mother" <?php if($_POST['par2relation'] == 'mother') echo 'checked'; ?> />
                    <span>Mother</span>
                </label>
                <!-- 其余单选框逻辑同上，自动回显选中状态 -->
            </div>
        </div>
        <?php endif; ?>

        <!-- 姓名行：任意名字有填写就渲染 -->
        <?php if (!empty($_POST['par2fname']) || !empty($_POST['par2lname'])): ?>
        <div class="row">
            <div class="input-field col s6">
                <input id="par2fname" type="text" value="<?php echo htmlspecialchars($_POST['par2fname'] ?? ''); ?>">
                <label class="active" for="par2fname">First Name</label>
            </div>
            <div class="input-field col s6">
                <input id="par2lname" type="text" value="<?php echo htmlspecialchars($_POST['par2lname'] ?? ''); ?>">
                <label class="active" for="par2lname">Last Name</label>
            </div>
        </div>
        <?php endif; ?>

        <!-- 联系方式、地址行都可按照上述逻辑加判断，对应字段为空就不渲染 -->
    </div>
</div>
<?php endif; ?>

可选替代方案：前端处理

如果你不想改动PHP代码，也可以用JS监听打印事件，隐藏空字段对应的元素，不过兼容性比PHP方案差：

// 打印前隐藏空内容
window.addEventListener('beforeprint', () => {
  // 处理文本输入框
  document.querySelectorAll('input[type="text"]').forEach(input => {
    if (input.value.trim() === '') {
      input.closest('.row').style.display = 'none';
    }
  })
  // 处理单选组
  const radioGroups = new Set(Array.from(document.querySelectorAll('input[type="radio"]')).map(i => i.name));
  radioGroups.forEach(group => {
    const hasChecked = document.querySelector(`input[name="${group}"]:checked`);
    if (!hasChecked) {
      document.querySelector(`input[name="${group}"]`).closest('.row').style.display = 'none';
    }
  })
})
// 打印完成后恢复元素显示
window.addEventListener('afterprint', () => {
  document.querySelectorAll('.row').forEach(row => row.style.display = '');
})

内容的提问来源于stack exchange，提问作者M. Straw