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

【问题标题】：How to print a specific section in HTML page Angular JS如何在 HTML 页面 Angular JS 中打印特定部分
【发布时间】：2015-10-06 16:34:31
【问题描述】：

父页面

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

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

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

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

我做错了什么？

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

【问题讨论】：

myprint() 例程怎么样？
这应该涵盖你：stackoverflow.com/questions/22189544/…
我的打印例程是：$scope.myprint = function(){ window.print(); }
由于可见性继承，人们无法隐藏有趣部分之上的任何元素。上面与文档子节点深度一样，而不是视觉上。隐藏可打印文本所在容器中的所有其他部分，并隐藏任何没有可打印文本的容器。

标签： javascript html css angularjs

【解决方案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.

【讨论】：

【解决方案2】：

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

#printSection{
    visibility: visible;
}

因为你用body *{ ... }隐藏了他们所有的父母

【讨论】：

不，你不是。你正在做#printsection * {，它将做所有的孩子，而不是那个部分本身。就像我说的，你把所有的父母都藏起来了。

【解决方案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 */
}

【讨论】：

感谢您的回复。这里的问题是我不打印 main 之外的所有内容。在子页面中，我只想打印某些特定部分。
@DeveshAgrawal 所以只需将您的具体规则放入@media print {} 或@media screen {}