2017-06-16 7 views
6

私はGWTを使って作成されたWebアプリケーションを維持しています。これは、歴史的にはGoogle Chromeでのみ動作するように開発されました。なぜGoogle Chromeは表とセルの枠線、セルの背景色を印刷しないのですか?

システムから抽出できるいくつかの「レポート」があります。これが実装される方法は、次のとおりです。まず、レポートのhtmlが作成され、画面のセクションに表示されます(これは正しく動作します)。その後、レポートを印刷するためのボタンがあります。このアクションは、オンスクリーン・レポートを作成するのと同じ方法で(htmlテーブル内の)情報を持つhtmlを生成し、htmlファイルを作成して印刷に送信します。

これは、モンスターがその顔を示す場所です! (タム・ダム・ダムム - ドラマティック・ミュージック)。

Google Chromeはバージョン59.0.3071.86に更新されているため、印刷すると表/セルの枠線と背景色が失われます。

は、私はそれが生成されたHTMLをどうするcomethingていたかもしれないと思ったが、実際には、私は

<!DOCTYPE html> 
<html> 
    <head> 
     <style>table, th, td {border: 1px solid black !important;}</style> 
     <title>title</title> 
    </head> 
    <body> 
     <h2>Add a border to a table:</h2> 
     <table> 
     <tr> 
      <th>Firstname</th> 
      <th>Lastname</th> 
     </tr> 
     <tr> 
      <td>Peter</td> 
      <td>Griffin</td> 
     </tr> 
     <tr> 
      <td>Lois</td> 
      <td>Griffin</td> 
     </tr> 
     </table> 
    </body> 
</html> 

する印刷時のhtmlを強制する場合、テーブルはまだ正しく印刷されません(これも見られていますChromeの印刷プレビュー(はい、バックグラウンド画像を印刷するオプションが選択されている場合でも))。テーブルのタグ自体にテーブルをスタイルすると、同じことが起こります。ような何か:

<table style="border: 1px solid black !important;"> 

は、私がアイデアをので、私は誰もが同様の問題になったかどうかを尋ねる、または私が試すことができるかについてどんな考えを持っています。

ありがとうございます。

そして、これは "重複の可能性"の問題と同じ問題ではないと言います。私は過去に「背景色」の問題を抱えていましたが、私はそれを修正しました。この場合(そしてコードスニペットが示すように)、テーブル境界のように解釈されないスタイルがあるようです。そしてクロム59.0.3071.86以前はすべてが機能していたので、5年ぶりに解決されたのではなく、新しい問題のようです。

そして、さらに別のさらに少し説明する編集:私のWebアプリケーションで

どこかに、「印刷報告書」を読み、ほとんどのボタンがあります。これにより、htmlファイルが生成され、印刷されます。 私は、生成されたhtmlを、私の問題を払拭する単純なものに置き換えました。 だから、毎回私は「レポート印刷」を押して、私は「力」、これは生成されたHTMLであることを:私はまた

body { -webkit-print-color-adjust: exact; } 

を使用する方法

<!DOCTYPE html> 
<html> 
    <head> 
     <style>table, th, td {border: 1px solid black !important;} body { -webkit-print-color-adjust: exact; } </style> 
     <title>title</title> 
    </head> 
    <body> 
     <h2>Add a border to a table:</h2> 
     <table> 
     <tr> 
      <th>Firstname</th> 
      <th>Lastname</th> 
     </tr> 
     <tr> 
      <td bgcolor="#FF0000">Peter</td> 
      <td>Griffin</td> 
     </tr> 
     <tr> 
      <td>Lois</td> 
      <td>Griffin</td> 
     </tr> 
     </table> 
    </body> 
</html> 

お知らせ、私はスタイリングのようないくつかのバリエーションを試してみました表のように:

<table style="border: 1px solid black !important;"> 

や体

<body style="-webkit-print-color-adjust: exact;"> 

として、これは私が何を得る

Table with Borders and TD's Background

ただし、印刷プレビュー「ポップス」です:

私はちょうど私の遍在HTMLの表示方法を表示するには、「HTML形式のテストベッド」から画像を追加します だから、

I preview some mistake

、どちらbackgound色が表示されます(私は信じているように、他のSOのユーザーに起こるが、その解決策をここで働いていない)も、テーブルの罫線を行います。

その他の編集:

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
     @media print { 
      body { -webkit-print-color-adjust: exact; } 
      table, th, td {border: 1px solid black !important;} 
     } 
     </style> 
     <title>title</title> 
    </head> 
    <body> 
     <h2>Add a border to a table:</h2> 
     <table> 
     <tr> 
      <th>Firstname</th> 
      <th>Lastname</th> 
     </tr> 
     <tr> 
      <td bgcolor=\"#FF0000\">Peter</td> 
      <td>Griffin</td> 
     </tr> 
     <tr> 
      <td>Lois</td> 
      <td>Griffin</td> 
     </tr> 
    </table> 
    </body> 
</html> 

が、私は前と同じ結果を得る次のように私は、「プリント固有のCSSルール」を定義しようとしました。また、(もしかしたらこれは関連しているかもしれませんし、多分そうではないかもしれません)テーブルの幅などを定義すると、印刷時にスタイリングが正しく表示されますが、テーブルの境界線は隠れています/存在しない/ 1つ選んだ)。

FINAL EDIT - 回避策: は、私が問題自体を解決することができませんでした、そしてそれがなぜ起こるか私は本当に理解していません。

私がやった方法だった:私は、印刷ボタンを押したとき、私は回避策が働いて取得された、と私は答えとしてそれをここにいない投稿、まだそれが誰かを助けることができるホッピングてる行うことができました何 、私は(私はそれが印刷したいと思うように)印刷したいhtmlだけを持つ新しいウィンドウを開き、javascriptを使ってページがロードされた後に印刷させます。 このようにして、正しい書式で印刷します。

運がいいと言う人もあれば、「黒い魔法」を言う人もいます。私は「完了!次へ」と言う。 (私が最初の問題を理解していないという事実に満足していないとは限りません)。

+0

[Chromeで印刷背景色]の可能な重複(https://stackoverflow.com/questions/2392366/print-background-colours-in-chrome) –

+0

ちょうど昨日は見ました同じ[質問も](https://stackoverflow.com/questions/44571567/print-angular-webpage-with-css-styling-applied-to-it) –

+0

そうではありません。とにかくありがとう。 – camilo

答えて

0

テーブルのタグの中で直接スタイルを試しましたか?

<table border="1px" bgcolor="green"> 
<tr> 
<td>ANYTHING RANDOM 
</td> 
</tr> 
</table> 

D.

関連する問題