Question

我正在尝试使用php和javascript构建计费系统。为此，我需要在新标签中打印一些内容。我为此目的使用以下代码。变量 divElements 包含需要打印的表格的内部html。

var print_body =
                  '<!DOCTYPE html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="style.css" type="text/css"></link></head><body style="background:none"><table class="dop" id="table" border="1" style="border-collapse:collapse;border-style:solid">'+
                  divElements +'</table></body>';
                //Print  Page
                  newWin= window.open("");
                  newWin.document.write(print_body);
                  newWin.print();

使用类 dop 我试图隐藏不需要的元素。在打印预览中，设计正确显示，但在进行打印输出时，隐藏的元素在纸张中打印。我认为问题是打印函数在样式加载之前运行。请帮我解决这个问题。

thanku

Answer 1

不确定这是否可以回答您的问题，但您可以将样式表加载到打印视图中，也可以将display: none;设置为元素。

这是我使用的功能：

function print() {
    var popup = window.open('', 'print', 'height=600,width=700,scrollbars=yes');
    popup.document.write('<html><head><title>TITLE</title>');
    var printStylePath = '/Content/print.css';
    popup.document.write('<link rel="stylesheet" href="' + printStylePath + '" type="text/css" />');
    popup.document.write('</head><body>');
    popup.document.write(printBody);
    popup.document.write('</body>');
    popup.document.write('</html>');
    popup.document.close();
    popup.focus();
    popup.print();
    popup.close();
    return true;
}

Answer 2

尝试，

打印前调用document.close

var print_body = '<!DOCTYPE html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="style.css" type="text/css"></link></head><body style="background:none"><table class="dop" id="table" border="1" style="border-collapse:collapse;border-style:solid">'+
                  divElements +'</table></body>';
                //Print  Page
                  newWin= window.open("");
                  newWin.document.write(print_body);
                  newwin.document.close();
                  newWin.print();

Answer 3

在你的css中使用@media，如下所示：

@media screen {
    p {
        font-family: verdana,sans-serif;
        font-size: 14px;
    }
}

@media print {
    p {
        font-size: 20px;
        color: red;
    }
}

因此，要隐藏或不为打印机显示的元素为其定义@media print。

有关@media checkout this link

的更多资源

Javascript打印显示隐藏的元素

3 个答案: