なぜこのウェブサイトはChrome for Windowsで空白に印刷されますか？私のMacでは完璧です。 （@media print）

Question

私は現在、リストクライアントにその下にあるトランザクションのリストを表示するWebアプリケーションを作成しています。ユーザーは、個々のクライアントのトランザクションログまたはすべてのトランザクションを印刷する機能を持つ必要があります。

私はデータを表示するためにテーブルを使用しています。 @mediaプリントCSSには、次のものがあります。

table{ 
    display:none; 
} 
table.show-data-block{ 
    display:table; 
} 

最初は、すべてのテーブルに.show-data-blockクラスがあります。しかし、私は次のように（クライアント名の隣にある）の印刷ボタンをバインド：何らかの理由で、

もつとも Frustrating Printing Error

\：

Windows用のChromeで

$('.print-log').click(function(e){ 
     $('.show-data-block').removeClass('show-data-block'); 
     //I know, lots of nesting   
     var clientTable=$(this).parent().parent().parent().parent(); 
     if(!$('.'+$(clientTable).data('owns')).length<=0){ 
      $(clientTable).addClass("show-data-block"); 
     } 
     $('.'+$(clientTable).data('owns')).addClass("show-data-block"); 
     window.print(); 
     //just to be safe 
     setTimeout(function(){ 
      $('table').addClass('show-data-block'); 
     },500); 
    }); 

は、これが結果です誰かがボタンを2回クリックすると、正しく表示されます。私のMac（Chrome）では、初めて正しく表示されます。

クライアントとの契約では、Chrome用に開発するだけの贅沢さがあり、Chromeでのみ動作する必要があります。

誰でもこれを解決する方法を知っていますか？私はずっとそれを理解しようとしてきましたが、ユーザー/クライアントはWeb上での印刷の最適化がWeb開発者に与えることのできない最も不満なことの一つではないことを認識していません。 :(

Answer 1

私はこの問題を解決しました。問題の一部は、カスタム書体を使用していたことです。使用したテンプレートが「Open Sans」に設定されています。これは問題を解決しました：

table tr > *{ 
    font-family:"Helvetica",sans-serif !important; 
    /*This ensures the font renders properly.*/ 
    color:#000 !important 
    /*There are no styles setting the font to white but for some reason, this was needed.*/ 
}