如何打印在HTML页角JS

的特定部分

<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-查看装入>

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

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

我在做什么错了？

请注意我使用的POS打印机80毫米宽度，dats我在printsection宽度= 80毫米。

来源

2015-10-06 Devesh Agrawal

怎么样myprint（）函数？ – felipsmartins

这应该涵盖你：http://stackoverflow.com/questions/22189544/print-a-div-using-javascript-in-angularjs-single-page-aplication –

我的打印程序是： \t $ scope。myprint = function（）{ \t \t window.print（）; \t} –

您可以使用简单的函数替换页面并打印。

<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.

来源

2015-10-06 16:41:36

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

#printSection{ 
    visibility: visible; 
}

和它所有的父母，因为你隐藏所有的人都用body *{ ... }

来源

2015-10-06 16:47:51

隐藏身体* {...}后，我想让#printscreen可见... –

不，你不是。你正在做'#printsection * {'这将会做所有的孩子，而不是该部分本身。正如我所说，你隐藏了所有的父母。 –

的我很确信必须使用CSS media rules - @media打印，上这个案例。请看：

<!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 */ 
}

来源

2015-10-06 16:50:30 felipsmartins

感谢您的回复。这里的问题是我不打印主要的东西。在子页面中，我只想打印一些特定部分。 –

@DeveshAgrawal因此，只需将您的特定规则放入'@media print {}'或'@media screen {}' – felipsmartins

如何打印在HTML页角JS

回答

相关问题