11

Google マップでは、「印刷」リンクをクリックすると、画面に表示されているものとまったく同じではなく、ほとんど同じ情報の異なる形式のバージョンがプリンターに送信されるというこのビットが行われていました。

彼らはこの概念から大きく離れたようで (人々はそれを理解していなかったと思います)、ほとんどの Web サイトには記事などの「印刷版」があります。

しかし、ページの「印刷に適した」バージョンが、別のページを作成せずにプリンターに送信されるような Web ページを作成したい場合は、どうすればよいでしょうか?

4

13 に答える 13

7

この効果を得るには、印刷を直接対象とする CSS スタイルシートと、画面を直接対象とする別の CSS スタイルシートを作成します。

リンク タグを使用します。

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

スタイルシートをドキュメントに埋め込みます。

非表示にするのは簡単です。任意のスタイルシートでブロック スタイルを非表示に設定するだけで、表示されなくなります。例えば：

.newStyle1 {
    display: none;
}

のスタイルに設定されているものはnewStyle1表示されません。

于 2008-09-17T16:31:15.467 に答える
3

CSSの@mediaルールを使用して、印刷の代替ルールを定義できます。これは、ナビゲーションを非表示にし、印刷に合わせてスタイルを変更するためによく使用されます。

@media print {
  .sidebar { display: none; }
}

印刷用に別のスタイルシートをリンクすることもできます。

<link rel="stylesheet" href="print.css" type="text/css" media="print" />
于 2008-09-17T16:36:13.613 に答える
2

メディアを印刷として指定すると、css でこれを行うことができます。

于 2008-09-17T16:28:20.557 に答える
1

印刷スタイルシートを使用します。

編集:フォローアップに関しては、通常、CSS を使用してページに追加することはできません。

1 つのオプションは、ページに印刷専用のコンテンツを含め、画面スタイルシートでは非表示にすることです。ただし、CSS がなくてもページが意味をなすことを確認する必要があります。

もう 1 つのオプションは、生成されたコンテンツを使用することですが、これは Internet Explorer 7 以前ではサポートされておらず、かなり制限される可能性があります。

印刷専用のコンテンツが画像の場合は、一般的な画像置換技術の 1 つを使用してそれを交換できます。

于 2008-09-17T16:29:20.027 に答える
1

必要に応じて、別の方法として、ページの「印刷」ボタンを使用してページを変更し、javascript 'window.print();' を実行することもできます。ブラウザの印刷ダイアログを表示します。

于 2008-09-17T16:30:26.433 に答える
1

利用可能なオプションがいくつかあります。

  • わずかに異なるデータを印刷する新しいウィンドウを開くことができます。
  • ページ レイアウトを変更するために使用できる CSS スタイルもあります。
  • 最後に、画面、印刷物、点字リーダーなどに完全に異なるスタイル シートを指定できます。

例えば<link href="css/print.css" type="text/css" rel="stylesheet" media="print" />

CSS2 印刷リファレンスも参照してください。

于 2008-09-17T16:31:47.740 に答える
0

メディアタイプに固有のcssルールを定義できます。以下は、Webページに表示されるフォントサイズと印刷されるフォントサイズを指定するcssの例（http://www.w3.org/TR/CSS2/media.htmlのセクション7.2.1からコピー）です。

 @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

または、スタイルシートをページに含めるときに適用するメディアを指定することもできます。

 <link href="webstyles.css" type="text/css" rel="stylesheet" media="screen"/>
 <link href="printstyles.css" type="text/css" rel="stylesheet" media="print"/>
 <link href="commonstyles.css" type="text/css" rel="stylesheet" media="screen,print"/>
于 2008-09-17T16:36:28.493 に答える
0

さらに別のオプションは、iframe.contentWindow.print（）を呼び出す非表示のIFRAMEを用意することです。これにより、希望どおりに印刷される非表示のレイアウトを作成できます。

もちろん、さらに優れた解決策は、ファイルをPDFにエクスポートし、ユーザーがその方法で印刷できるようにすることです。PDFは、最高品質の出力、期間を生成します。ただし、ユーザーがジャンプするのはもう1つのフープであるため、経験則は次のとおりです。

  • 印刷レイアウトが重要な場合のPDF
  • レイアウトよりも純粋なテキストの方が重要な場合のHTML
于 2008-09-17T16:37:39.413 に答える
0

CSS を使用すると、特定の種類のメディア用のスタイルシートを作成できます。つまり、ページを印刷するときにのみ適用されるスタイルシートを作成して、ページを別の方法でフォーマットすることができます。

そのスタイルシートのスタイルシート リンクに media="print" 属性を含めるだけです。

このA List Apart の記事は、この件に関して非常に優れているようです。

于 2008-09-17T16:33:07.193 に答える
0

メディアに基づいてさまざまなスタイル シートを使用しようとしましたが、必要なすべてのオプションを取得するのに苦労しました。それ以来、通常は (Fusebox) フレームワークの別の入り口にリダイレクトします (つまり、index.php の代わりに print.php)。 ) は、追加のフラグ/定数を設定することを除いて、本質的に同じファイルです。

ページに関連付けられた XSL ファイルで、メニューやテーブルの列などを除外するなど、そのフラグ/定数に基づいて追加の作業を行います。

すなわち (ページには、パスワードを画面に表示するためにユーザーがクリックする必要があるリンクが表示されます。印刷版にはパスワードが印刷されています。)

if (!BOOL_PRINT)
  echo "<TD class=\"tbl_teams_scroll_item\"><SPAN class=\"span_password_hidden\" id=\"span_password_{\$team_id}\" onClick=\"RevealPassword('{\$team_id}','{\$password}');\"><xsl:value-of select=\"/PAGE/TEXTS/HIDDEN\" /></SPAN></TD>\n";
else
  echo "TD class=\"tbl_teams_scroll_item\"><xsl:value-of select=\"PASSWORD\" /></TD>\n";
于 2008-09-17T16:33:45.413 に答える
0

nsayerは、印刷ボタンで画面のレイアウトを変更してから、window.print()

これは、おそらく多くの人が見落としているソリューションであり、ユーザーがもう少し WYSIWYG を必要としていると思われる場合に検討する必要があります。「これを印刷する」のではなく、シート シートのメディア タイプを変更する「印刷に適した」リンクである必要があります。

jqueryを使用すると、次のようなことができます（チェックされていません）：

$(document).ready(function(){
    $("#printFriendly").click(function(){
       $(link[rel=link][media=screen]).remove();
       $(link[rel=link][media=print]).attr("media","screen");
    });
});
于 2008-09-17T20:09:45.330 に答える
0

CSS でできることはすべて、印刷スタイルシートで実行できます。これは、画面バージョンに表示される印刷バージョンのコンテンツを非表示にしたり、印刷時に表示したい画面バージョンのコンテンツを非表示にしたりできることを意味します。適切なスタイルシートの適切なセクションに display:none を適用するだけです。

また、印刷版ではテキストのサイズをポイント単位で設定することをお勧めします (これは、画面版では悪い考えです。ここではピクセル、em、またはパーセンテージに固執してください)。ピクセルからポイントへのマッピングは解像度デバイスによって異なるため、印刷されるポイント サイズがどこにあるかについては、普遍的な合意があります。

于 2008-09-25T17:48:35.327 に答える
0

最も簡単な方法は、CSS メディア タイプを使用することです。含める CSS ファイルごとに、使用する場所を指定できます: 画面上、印刷時、ハンドヘルド用、スクリーン リーダー用、またはこれらのさまざまな組み合わせ。

例: <link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">

これは CSS2 以降の標準であり、現在ではほとんどのブラウザがサポートしています。詳細については、http ://www.w3.org/TR/CSS2/media.html をご覧ください。

于 2008-09-17T16:30:43.843 に答える