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

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>

<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个部分。 屏幕视图和printsection。

我想要当用户单击打印按钮时，printsection的内容发送到打印机。

我已经为媒体打印定义了这些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;
}

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

我做错了什么？

请注意，我使用的是80mm宽度的POS打印机，我在打印区中将宽度设为80mm。

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;
}

单击打印按钮时，是否设置将“打印区”的可见性更改为可见？

我将使用以下CSS规则进行可见性。

display:none, display:block.

Answer 2

您没有使printSection本身可见。 父母都是一样。 因此，您必须执行以下操作：

#printSection{
    visibility: visible;
}

和所有的父母一样，因为您用body *{ ... }将所有人藏起来了body *{ ... }

Answer 3

我确定在这种情况下，必须使用CSS媒体规则 -@ 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 个解决方案

解决方案1
3 2015-10-06 16:41:36

解决方案2
0 2015-10-06 16:47:51

解决方案3
0 2015-10-06 16:50:30

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

问题描述

3 个解决方案

解决方案1 3 2015-10-06 16:41:36

解决方案2 0 2015-10-06 16:47:51

解决方案3 0 2015-10-06 16:50:30

解决方案1
3 2015-10-06 16:41:36

解决方案2
0 2015-10-06 16:47:51

解决方案3
0 2015-10-06 16:50:30