如何打印通过按钮动态生成的含输入项的div集合？

API 探路者

2026-8-2

解决方案

一、实现批量打印所有参考项

核心思路是通过临时容器收集所有参考项内容，统一触发打印：

遍历页面中所有生成的newReferenceDiv元素
复制每个参考项的内容并移除编辑/删除按钮
将处理后的内容存入临时容器，打印完成后清理容器

示例JavaScript代码

// 绑定打印按钮点击事件（替换成你的打印按钮ID）
document.getElementById('printBtn').addEventListener('click', function() {
    // 创建临时打印容器，移出视口避免干扰原页面
    const printWrapper = document.createElement('div');
    printWrapper.style.position = 'absolute';
    printWrapper.style.top = '-9999px';
    printWrapper.style.left = '-9999px';
    
    // 遍历所有参考项容器
    const allRefs = document.querySelectorAll('.newReferenceDiv');
    allRefs.forEach(refDiv => {
        // 复制当前参考项节点
        const printRef = refDiv.cloneNode(true);
        // 删除其中的编辑、删除按钮（替换成你实际的按钮类名）
        const actionButtons = printRef.querySelectorAll('.edit-btn, .delete-btn');
        actionButtons.forEach(btn => btn.remove());
        printWrapper.appendChild(printRef);
    });
    
    // 临时容器加入页面，触发打印
    document.body.appendChild(printWrapper);
    window.print();
    // 打印完成后移除临时容器
    setTimeout(() => document.body.removeChild(printWrapper), 50);
});

二、打印时隐藏编辑/删除按钮

推荐使用CSS媒体查询，无需修改JS逻辑，直接控制打印样式：

/* 打印时隐藏操作按钮 */
@media print {
    .edit-btn, .delete-btn {
        display: none !important;
    }
    /* 可选：优化打印时的只读输入框样式 */
    .newReferenceDiv input[readonly] {
        border: none;
        background: #fff;
        box-shadow: none;
    }
}