3

「印刷に適した」ページではないため、検索結果を表示する表を印刷するオプションをユーザーから要求されました。ボタンを使用して開き、元のテーブルから入力される、印刷に適したページを作成しました。新しいページには、必要に応じて元のテーブルの「ゼブラ ストライプ」が表示されます。しかし、印刷プレビュー (ブラウザー メニュー > [ファイル] > [印刷プレビュー]) を表示すると、ストライピングはなくなりました。フォントの変更が表示されます。他のすべてのスタイルの変更が表示されます。ただし、ストライピングに影響を与える TR シェーディングは変換されません。

これが私のコードです：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="ISO-8859-1">
    <meta http-equiv="expires" value="Thu, 16 Mar 2000 11:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <script type="text/javascript" src="/pkc/jscripts/jquery_current.js"></script>
    <title>Product Knowledge Center - Results</title>
    <style>
      body{
        font-family: arial;
      }
      div{
        font-size: 12pt;
      }
      .odd{ background: #DDDDDD; }
      .even{ background: #FFFFFF; }
      .hdrSpan{ 
        width: 200px;
        display: inline; 
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="divHeader">
      <span class="hdrSpan">Line</span>
      <span id="spnLine"></span><br />
      <span class="hdrSpan">Company</span>
      <span id="spnCompany"></span><br />
      <span class="hdrSpan">State</span>
      <span id="spnState"></span><br />
      <span class="hdrSpan">Eff. Date</span>
      <span id="spnEffDt"></span>
    </div>
    <br />
    <hr />
    <div id="divResults">
    </div>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#spnLine").text(window.opener.$('[name="Line"] option:selected').text());
        $("#spnCompany").text(window.opener.$('[name="Company"] option:selected').text());
        $("#spnState").text(window.opener.$('[name="State"] option:selected').text());
        $("#spnEffDt").text(window.opener.$('[name="effectiveDate"]').val());
        $("#divResults").html(window.opener.$("#idResults").html());
        $("#resultsTbl tr").removeAttr("onclick");
      });
    </script>
  </body>
</html>

明らかなように、コードは非常に単純で複雑ではありません。ストライピングが印刷版に表示されない理由がわかりません。

4

2 に答える 2

4

このオプションは、Webページを印刷するときにユーザーが直接構成するかどうかに依存するため、できることはあまりありません。理想的には、ユーザーは印刷に多かれ少なかれインクを使用するかどうかを決定する必要があります。

Webkitブラウザには回避策があります。CSSに以下のコードを追加することで、背景色の印刷を強制できます。

-webkit-print-color-adjust: exact;

FirefoxおよびIEでは、ページ設定ダイアログのオプションをチェックすることで設定できます。

于 2013-01-15T13:14:21.117 に答える
2

プリンターのセットアップには、通常、印刷の背景色/画像のオプションが含まれています。

これが最良の答えです。これまでのところ (15 分?)。そして、私が使用したものとしてフラグを立てます。ページの読み込みにアラートを追加し、印刷物にストライピングを表示する方法をユーザーに伝え、次の問題に取り掛かりました...

于 2012-12-07T19:23:38.917 に答える