Question

父页

<div class="row">
    <div class="col-md-3">
        link 1
        link 2
        link 3
        .
        .
        .
    </div>
</div>

<div class="col-md-9">
    <div ng-view></div>
</div>

点击链接时，子页面将加载到ng-view＆gt;

<table class='table table-bordered'>
    <tr>
        <td>
            this is my screen view
            when user clicks a link in parent page 
            specific contentd loaded here
        </td>
    </tr>
</table>    


<button type="button" class="btn btn-success btn-md" ng-click="myprint()" >
    <span class="glyphicon glyphicon-print"></span> Print
</button>


<div id ="printsection">
    <table style="width:80mm;">
        <tr style="text-align: center;">
            <td>this is my print view contents
                send these contents 
                to print to printer
            </td>
        </tr>
    </table>
</div>

上面的子页面有2个部分。屏幕视图和打印部分。

我想当用户点击打印按钮时，打印部分内容发送到打印机。

我已经为媒体打印定义了这些CSS规则。

print.css

body {
    background-color: white;
    color: black;
    font-family: Times,"Times New Roman",Garamond, serif;
}
body * {
    visibility: hidden;
}
#printsection * {
    visibility: visible;
}
#printsection {
    position: absolute;
    left: 0;
    top: 0;
}

问题在于点击打印按钮，它隐藏了所有内容，甚至是打印部分。

我做错了什么？

请注意我使用的POS打印机宽度为80毫米，打印部分宽度= 80毫米。

Answer 1

您可以使用简单功能替换页面并进行打印。

<button onclick="printElement('my-section')">Print</button>

function printElement(id) {
    var printHtml = document.getElementById(id).outerHTML;
    var currentPage = document.body.innerHTML;
    var elementPage = '<html><head><title></title></head><body>' + printHtml + '</body>';
    //change the body
    document.body.innerHTML = elementPage;
    //print
    window.print();
    //go back to the original
    document.body.innerHTML = currentPage;
}

您是否设置了在单击打印按钮时将可见性更改为“printsection”的可见性？

我会使用以下css规则来提高可见性。

display:none, display:block.

Answer 2

您没有使printSection本身可见。和所有的父母一样。所以你必须做这样的事情：

#printSection{
    visibility: visible;
}

所有这些都是父母，因为你用body *{ ... }

隐藏了所有这些父母

Answer 3

我很确定在这种情况下必须使用CSS media rules - @media print。看看：

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <style>

        @media all {
            /* media-specific rules, suitable for all devices. */
        }

        @media screen {
            /* acreen media-specific rules */
        }

        @media only print {
            /* Intended for paged material and for documents
               viewed on screen in print preview mode .*/
            main {
                display: none;
            }
        }
    </style>
</head>
<body>
    <main>
        <button onclick="window.print()">Print</button>
        <h1>hello</h1>
        <p>Some paragraph</p>
    </main>

    <div id="print-section">
        <h2>subtitle</h2>
        <table border="1" width="50%">
            <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>C</td>
                <td>D</td>
            </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

因此，当用户按CTRL + P或点击调用window.print()按钮时，将会打印main标记之外的所有内容。这是最好的方法。

来自文档：
语法：

@media <media-query> {
  /* media-specific rules */
}

如何在HTML页面Angular JS中打印特定部分

3 个答案: