如何打印在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

回答

相關問題