Webページを印刷すると印刷ビューが表示されず、空白が表示されます

Question

印刷が必要なWebページにテーブルを作成しました。メインページには、印刷する必要があるテーブルとコンテンツだけを表示する新しいタブを開く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; 
     } 
    }