Question

我一直在使用javascript来使表格标题粘在我的页面上。我正在每页使用多个表，并且粘性标头运行良好。我现在正在尝试添加打印表格的功能，并成功地为每个表格实现了打印按钮。

但是，向下滚动表格后，我在打印表格时遇到问题。表格标题在表格的中途打印掉。我正在寻找一种方法，当按下打印按钮时，可以将页眉位置重置到表格顶部。

有人能指出我正确的方向吗？

我已在下面附加了我当前的JavaScript。

document.getElementById("wrap").addEventListener("scroll", function(){
    var translate = "translate(0,"+this.scrollTop+"px)";
    this.querySelector("thead").style.transform = translate;
});

document.getElementById("wrap2").addEventListener("scroll", function(){
    var translate = "translate(0,"+this.scrollTop+"px)";
    this.querySelector("thead").style.transform = translate;
});

document.getElementById("wrap3").addEventListener("scroll", function(){
    var translate = "translate(0,"+this.scrollTop+"px)";
    this.querySelector("thead").style.transform = translate;
});


function printDiv1() {
    window.frames["print_frame"].document.body.innerHTML = 
    document.getElementById("printableTable").innerHTML;
    window.frames["print_frame"].window.focus();
    window.frames["print_frame"].window.print();
}

function printDiv2() {
    window.frames["print_frame"].document.body.innerHTML = 
    document.getElementById("printableTable2").innerHTML;
    window.frames["print_frame"].window.focus();
    window.frames["print_frame"].window.print();
}

function printDiv3() {
    window.frames["print_frame"].document.body.innerHTML = 
    document.getElementById("printableTable3").innerHTML;
    window.frames["print_frame"].window.focus();
    window.frames["print_frame"].window.print();
}

解决此问题的最佳方法是使用以下代码，但是，这使打印功能完全无法工作。

function printDiv1() {
    var translate = "translate(0,"+this.scrollTop+"px)";
    this.querySelector("thead").style.transform = translate;
    window.frames["print_frame"].document.body.innerHTML = 
    document.getElementById("printableTable2").innerHTML;
    window.frames["print_frame"].window.focus();
    window.frames["print_frame"].window.print();
}

如果有人知道一种解决方案，当我按下打印按钮时，该解决方案可以让我将页眉位置重置到表格顶部，请告诉我。

预先感谢，格里高

Answer 1

您可以在样式表中使用@media打印，然后覆盖赋予其固定位置的样式。

@media print {
   // These styles are only applied when printing
}

例如，像这样的东西...

@media print {
    thead {
        position: static !important;
    }
}

还有其他设置打印样式的方法，例如创建单独的样式表并像这样调用它...注意 media =“ print”

<link rel="stylesheet" type="text/css" href="print.css" media="print">

这里是good article的打印样式。

Answer 2

我设法通过在打印之前使用JavaScript滚动到表格顶部来使其工作。这会将标题强制返回到表的顶部。

这是我的工作职能：

function printDiv1() {
    document.getElementById("wrap").scrollTop = 0;

    setTimeout(
        function(){
            window.frames["print_frame"].document.body.innerHTML = 
            document.getElementById("printableTable").innerHTML;
            window.frames["print_frame"].window.focus();
            window.frames["print_frame"].window.print();
        }
    , 500);

}

如果在按下“打印”按钮之前滚动了表格，则粘性页眉会向下打印一半

2 个答案: