如何将数组数据放入表格并实现打印？求替代document.write方案

核心问题拆解 #

你当前的需求可以拆成两个关键点：

1. 把test类元素的内容规整到打印表格的行列中，而非堆在单个单元格里
2. 替换掉不推荐使用的document.write()方法

为什么不推荐document.write()？ #

document.write()在现代前端开发中属于过时写法：它会直接干扰文档流，若在文档加载完成后调用，甚至会清空整个页面内容。更优的替代方案是直接构建HTML字符串后通过innerHTML插入，或者用DOM API创建元素再追加到页面中，这两种方式都更安全可控。

实现规整表格的思路 #

你之前把所有内容塞进单个<td>里，自然没法形成规整的表格。正确的做法是：

• 遍历test元素时，把每个元素的内容对应成表格的一行（或一个单元格）
• 用模板字符串或DOM拼接的方式，把这些内容组装成完整的表格结构

优化后的完整代码 #

let contentList = [];

function printDiv() {
    const targetElements = document.getElementsByClassName("test");
    // 收集所有目标元素的文本内容，去除多余空格
    for(let i = 0; i < targetElements.length; i++){
        contentList.push(targetElements[i].textContent.trim());
    }

    // 打开打印窗口，添加尺寸参数
    const printWindow = window.open('', '', 'height=600,width=800');
    // 处理弹出窗口被拦截的情况
    if (!printWindow) {
        alert('请允许浏览器弹出窗口权限，否则无法完成打印');
        return;
    }

    // 用innerHTML构建完整打印页面，替代document.write
    printWindow.document.body.innerHTML = `
        <html>
            <head>
                <title>打印内容</title>
                <style>
                    table { border-collapse: collapse; width: 100%; margin-top: 20px; }
                    th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
                    h1 { text-align: center; color: #333; }
                </style>
            </head>
            <body>
                <h1>Div内容汇总</h1>
                <table>
                    <tbody>
                        ${contentList.map(item => `<tr><td>${item}</td></tr>`).join('')}
                    </tbody>
                </table>
            </body>
        </html>
    `;

    // 等待页面渲染完成后再触发打印
    printWindow.onload = function() {
        printWindow.print();
        printWindow.close(); // 打印完成后自动关闭窗口
        contentList.length = 0; // 清空数组，避免下次打印重复内容
    };
}

代码细节说明 #

1. 替代document.write()：通过innerHTML直接构建包含样式、结构的完整HTML页面，更易维护且不会干扰文档流
2. 规整表格结构：用Array.map()遍历内容数组，把每个元素转换成独立的表格行<tr><td>...</td></tr>，再拼接成完整的表格主体
3. 体验优化：
   • 添加了表格样式，让打印效果更美观
   • 增加了弹出窗口拦截的判断提示
   • 打印完成后自动关闭窗口，减少用户操作
   • 用trim()去除文本内容的多余空格，避免表格里出现空行

如果后续需要扩展多列（比如工单、日期分栏），只需要调整map里的模板字符串即可，示例如下：

// 假设contentList是包含工单和日期的对象数组：[{workOrder: '工单1', date: '2024-01-01'}, ...]
${contentList.map(item => `<tr><td>${item.workOrder}</td><td>${item.date}</td></tr>`).join('')}

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