1

私は現在、データベースから取得したデータを表示する HTML を使用して印刷可能なドキュメントに取り組んでいます。ドキュメントの見栄えを良くするために HTML/CSS を使用するという考えですが、これは印刷専用になります。

ドキュメントは、データベースからのデータがどのように表示されるかを制御するテーブルを使用してレイアウトされます。

重要な要件の 1 つは、ドキュメントが A4 の 2 面のみをカバーする必要があることです。ただし、フィールド サイズが非常に大きいため、データベースから取得するデータは多少予測できません。そのため、データベースの 1 行がドキュメントの 1 行に等しいことを保証できません。

したがって、テーブルのサイズが HTML によって制御され、テーブルが定義よりも大きくなる原因となるデータベースからの出力を非表示にするソリューションを使用したいと考えています。

次のCSSスタイルが定義されています

table.noQual
{
page-break-inside: avoid;
width: 100%;
border: 0px;
font-family:"Verdana","sans-serif";color:black;
overflow-y:hidden;
display:block;
max-height:50px !important;
}

これは画面上では完全に機能しますが、印刷するとすべてのデータベース コンテンツが表示されるため、テーブルが 50px を超えてページを超えてしまいます。

画面だけでなくプリンターからもコンテンツを非表示にするにはどうすればよいですか?

4

2 に答える 2

1

@media印刷スタイルシートまたは既存のスタイルシート内の印刷セクションを指定しましたか?

デフォルトでは、スタイルシートは画面上で正常に機能します (ご存じのとおり)。ただし、印刷用の CSS スタイルシートを明示的に指定しない限り、ページを印刷するときは、ブラウザーのデフォルト スタイル (通常は 15pt Times New Roman など) がデフォルトになります。

解決策 1: 2 番目の印刷スタイルシートを追加する
HTML ヘッドに以下の両方のタグを含めます。

<link rel="stylesheet" type="text/css" href="screenstyles.css" media="screen" /> <link rel="stylesheet" type="text/css" href="printstyles.css" media="print" />

次に、必要なフォーマット スタイルを からscreenstyles.cssにコピーしますprintstyles.css(または、両方<link rel="" />の を画面スタイルシートにリンクします)。

@media解決策 2: スタイルシートは 1 つだけですが、その中にprint があります
単一の CSS スタイルシートは次のようになりmedia=""ます (css リンクの rel タグから を省略します:

/*Normal css*/
table.noQual {
    page-break-inside: avoid;
    width: 100%;
    border: 0px;
    font-family: "Verdana","sans-serif";
    color:black;
    overflow-y: hidden;
    display: block;
    max-height:50px !important;
}
@media print {
    /*Everything inside here will be used to style the printed product*/
    table.noQual {
        page-break-inside: avoid;
        width: 100%;
        border: 0px;
        font-family: "Verdana","sans-serif";
        color:black;
        overflow-y: hidden;
        display: block;
        max-height: 50px !important;
    }
}
于 2013-03-11T09:54:42.667 に答える
0

実際のデータが何であるか、またはデータがどのような形式であるかを知らなければ、解決策を提供することは困難です。設定された文字数の後にテキストを切り詰めるために、javascript を挿入したい場合があります。(同じことができる [非標準] CSS がいくつかあると言われました。)

それ以外の場合は、テーブルでピクセルの高さを使用することから問題が発生すると思います。cmおそらく、「現実世界」の測定値に変換される または同様の単​​位を使用することをお勧めします。印刷メディアのスタイル設定に関して考慮すべき情報を次に示します。

メディア タイプを使用して、印刷専用のカスタム CSS を作成することも検討してください。

于 2012-07-25T14:27:17.947 に答える