Question

我想通过单击“打印”按钮来打印网格html表，因此当我通过以下javascript代码打印时，获取简单的行和列表，如何设置打印窗口表的样式？我已经尝试过以下方法，

function printData() {        
        var myDiv = document.getElementById('tablerecords');
        var newWindow = window.open('', 'SecondWindow', 'toolbar=0,stat=0');//
        var style = newWindow.document.createElement('link');
        style.type = "text/css";
        style.rel = "stylesheet";
        style.href = "~/Styles/PrintTableStyle.css";
        style.media = "all";
        newWindow.document.write("<html><body "+
            " önload='window.print()'>" +
            myDiv.outerHTML +
            "</body></html>");
        newWindow.document.getElementsByTagName("head")[0].appendChild(style);
        newWindow.print();
        newWindow.document.close();
    }

和打印窗口表格的样式在下面

#tablerecords {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

    #tablerecords td, #tablerecords th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    #tablerecords tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    #tablerecords tr:hover {
        background-color: #ddd;
    }

    #tablerecords th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: Black;
        color: white;
    }

Answer 1

我通过在同一页中打开打印窗口解决了自己的问题。并解决了隐藏在打印窗口中的操作列，并通过重新加载当前窗口来防止打印按钮第二次单击失败的问题，这是我的代码。

function printData() {
        var divElements = document.getElementById('tablerecords').outerHTML;
        var oldPage = document.body.innerHTML;
        document.body.innerHTML = "<html><head><title></title></head><body>" + 
        divElements + "</body>";
        $("#tablerecords th:last-child, #tablerecords td:last-child").hide();
        window.print();
        document.body.innerHTML = oldPage;
        location.reload();
    }

如何设置打印窗口的表格样式？

1 个答案: