ASP.NET MVC实现表格新窗口打开并自动打印的问题

方法一：改进原生JavaScript实现（无需额外库） #

问题根源是你只复制了表格的HTML内容到新窗口，但未同步表格的样式规则，导致排版错乱。修改后的代码会把原页面的表格样式同步到新窗口，同时优化渲染逻辑：

按钮代码 #

<div class="line-btn">
    <input type="button" value="print" onclick="printTable()" class="btn fl btn-print">
</div>

（将submit改为button，避免触发默认表单提交行为）

改进后的JavaScript函数 #

function printTable() {
    const printContent = document.getElementById("x");
    const windowName = 'Print' + new Date().getTime();
    const printWindow = window.open('', windowName, 'width=800,height=600,left=100,top=100');

    // 嵌入表格核心样式，保证排版与原页面一致
    const styleText = `
        <style>
            .tableMain { width: 100%; border-collapse: collapse; }
            .thMain, .tdMain { border: 1px solid #ddd; padding: 8px; text-align: left; }
            .thMain { background-color: #f2f2f2; }
            .trMain:nth-child(even) { background-color: #f9f9f9; }
            /* 隐藏打印不需要的元素（可按需调整） */
            .chkCheckBoxId, .tdMain a { display: none; }
        </style>
    `;

    // 写入完整HTML结构，包含样式与表格内容
    printWindow.document.write(`
        <html>
            <head>
                <title>打印表格</title>
                ${styleText}
            </head>
            <body>
                ${printContent.innerHTML}
            </body>
        </html>
    `);

    printWindow.document.close();
    
    // 等待内容渲染完成后触发打印，避免渲染不完整
    printWindow.onload = function() {
        printWindow.focus();
        printWindow.print();
        printWindow.close();
    };
}

关键优化点 #

• 直接嵌入表格样式，确保新窗口内排版和原页面一致
• 新增隐藏冗余元素的规则（如复选框、编辑链接），可根据需求调整
• 调整新窗口尺寸与位置，保证内容正常渲染
• 通过onload事件确保内容加载完成后再执行打印

方法二：简化DataTables Print按钮实现（仅保留打印功能） #

如果你倾向于用DataTables的方案，只需引入必要资源，关闭所有多余功能（搜索、分页等），仅启用打印按钮：

1. 引入必要资源（页面头部） #

<!-- DataTables核心CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<!-- DataTables Buttons CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">

<!-- jQuery（DataTables依赖） -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- DataTables核心JS -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<!-- DataTables Print按钮JS -->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>

2. 表格初始化代码（页面底部） #

$(document).ready(function() {
    $('#x').DataTable({
        // 关闭所有不需要的功能
        searching: false,
        paging: false,
        ordering: false,
        info: false,
        // 仅显示打印按钮
        dom: 'B',
        buttons: [
            {
                extend: 'print',
                text: '打印',
                // 自定义打印内容：隐藏不需要的元素
                customize: function(win) {
                    $(win.document.body).find('.chkCheckBoxId').hide();
                    $(win.document.body).find('.tdMain a').hide();
                }
            }
        ]
    });
});

3. 移除原有自定义按钮与函数 #

DataTables会自动生成打印按钮，无需手动添加按钮元素和printTable函数。

优势 #

• 完全关闭DataTables的冗余功能，仅保留打印按钮
• 自动同步表格样式，打印时不会出现排版错乱
• 通过customize选项可灵活调整打印内容

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