如何使用JavaScript定制打印样式，仅实现表格指定部分行内居中

问题根因 #

你调用JS打印时新开了空白窗口，仅注入了表格的通用边框、字体、内边距样式，原页面中给特定元素设置的居中、布局类样式没有同步到打印窗口，所以打印效果和页面视图不一致。直接给所有th/td加text-align: center会导致全表居中，不符合仅部分内容居中的需求。

解决方案 #

给需要居中的单元格设置独立的规则，仅对目标内容生效，不影响其他单元格，有两种常用实现方式：

方式1：加专用类控制（灵活度最高，适合零散位置居中的场景） #

1. 给需要居中的表格单元格（th/td）添加自定义类，比如print-text-center：

<!-- 普通单元格保持默认对齐 -->
<td>普通左对齐内容</td>
<!-- 需要居中的单元格加类 -->
<td class="print-text-center">需要居中的内容</td>

2. 修改打印函数内的注入样式，单独给这个类加居中规则，同时补充你用到的布局类对应的样式，避免顶部签名栏布局错乱：

function printDiv() {
    // 如果需要打印顶部的签名div，把对应元素也加入选择器，比如给签名div加类signature-row，选择器写为'.print-table, .signature-row'
    var divToPrint = document.querySelectorAll('.print-table');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        // 表格基础样式，波斯语内容如需右到左排版可加direction: rtl
        'table th, table td {' +
        'font-family:vazir;' +
        'border:1px solid #000;' +
        'padding:0.5em;' +
        '}' +
        // 仅指定类的内容居中，不影响其他单元格
        '.print-text-center {' +
        'text-align: center;' +
        '}' +
        // 补充签名行的布局样式，适配你用的row类
        '.row {' +
        'display: flex;' +
        'width: 100%;' +
        '}' +
        '.justify-content-around {' +
        'justify-content: space-around;' +
        '}' +
        '</style>';

    divToPrint.forEach((item) => {
        htmlToPrint += item.outerHTML;
    })
    newWin = window.open("");
    newWin.document.write(htmlToPrint);
    // 新增这行确保内容加载完成再触发打印，避免样式错乱
    newWin.document.close();
    newWin.print();
    newWin.close();
}

方式2：按列指定居中（无需修改HTML，适合整列居中的场景） #

如果是整列内容需要居中，不需要修改现有HTML，直接在打印样式中用nth-child选择器指定列即可，比如要让第2、4列全部居中：

/* 写在打印注入的style标签内 */
table th:nth-child(2), table td:nth-child(2),
table th:nth-child(4), table td:nth-child(4) {
    text-align: center;
}

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