打印網頁將不會顯示打印視圖並打印空白

Question

我在需要打印的網頁中創建了表格。在主頁上，我有一個printerFriendly按鈕，打開一個新選項卡，顯示我需要打印的表格和內容。當我轉到新選項卡並嘗試打印或獲取打印預覽時，它是完全空白的。我能做些什麼來解決這個問題？我也使用angularjs。這發生在Chrome和IE中。任何幫助表示讚賞。 *如果需要顯示任何代碼，請告知。不知道它是代碼還是打印設置。

這段代碼獲得內容出現在打印預覽 修訂

@media print { 

    body *{ 
     font-family: 'Open Sans', sans-serif; 
     font-size: 12px; 
     font-weight: 500; 
     color: #101010; 
     background: #f6f5fa; 
     visibility: hidden; 
    } 
    #section-to-print, #section-to-print *{ 
    visibility: visible; 
    } 
    #section-to-print { 
    position:absolute; 
    left:0; 
    top:0; 
    } 

    #section-to-print2, #section-to-print2 *{ 
    visibility: visible; 
    } 
    #section-to-print2 { 
    position:absolute; 
    left:0; 
    top:0; 
    } 

} 

Answer 1

請檢查下面的代碼，在打印預覽其展示內容。

JS Fiddle

HTML：

<a href="javascript:window.print()">Print this page</a> 
    <br> 
    <div id="section-to-print"> 
     I crea ted tables in a web page that I need to print. On the main page I have a printerFriendly button that opens a new tab that shows just the table and content I need printed. When I go to the new tab and try to print or get a print preview, it is completely blank. There is some setting or something in the code I can do to fix this? I am also using angularjs. This happens in Chrome and IE. Any help is appreciated. *If any code needs to be shown, please let know. Not sure if it is the code or the print settings. 
    </div> 

CSS：以上

 @media print { 
     body *{ 
      font-family: 'Open Sans', sans-serif; 
      font-size: 12px; 
      font-weight: 500; 
      color: #101010; 
      background: #f6f5fa; 
      visibility: hidden; 
     } 
     #section-to-print, #section-to-print *{ 
     visibility: visible; 
     } 
     #section-to-print { 
     position:absolute; 
     left:0; 
     top:0; 
     } 
    }