0

現在、多くの div 、 menu 、および他の多くのレイアウト スタッフを含む Web アプリケーションがあります。ただし、ユーザーが印刷をクリックしたときに欲しいのは、場合によっては2つの画像または1つの画像だけです。既に 2 つの画像の URL を取得しているとします。ページ全体の CSS を削除して、期待どおりに印刷を実行するにはどうすればよいですか? これは私が試したコードです。ページ全体をWebアプリのレイアウトから2つの画像のみに変更するようです? それを防ぐことはできますか？ありがとう：

print.css

<style type="text/css" media="print">
    .img{
        padding:5%;
        height:100%;
        width:40%;
    }
    #img1{
        left:0px;
    }
</style>

js

$("#printBtn").click(function() {
    $("link[media='screen']").attr("href", "print.css");
    window.print();
});

更新しました：

より正確には、現在のページの画像番号を取得することで、この 2 つの画像のみが印刷されます。そのような機能を実行する方法は？

2つのimgのIDをすでに取得していると仮定します。まず、この 2 つの項目に class = 'img' を動的に追加する必要がありますか? 印刷が終わるまでの次のステップは何ですか？ありがとう

<img id="img_34" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
<img id="img_35" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
4

3 に答える 3

1

print cssと は、画面 (Web ページ) にいる間は一緒に使用されませscreen cssん。印刷 css は、メディアが印刷 (印刷) されている場合にのみ参照されます。

印刷コマンドが発行されるたびに、印刷 css が とともに参照され、screen css印刷固有の css プロパティが優先されます。
完了して同じページに戻るときはいつでも、ページは印刷コマンドが発行される前の状態で返されます。

W3から、

印刷する

ページ形式の資料や、印刷プレビュー モードで画面に表示されるドキュメントを対象としています。

特定のケースでは、すべての画像ではなく、2 つの画像のみを印刷する必要があります。そう、

print.css :

img {
    display: none;
}
#img_34, #img_35 {      /*Image id's*/
    display: block;
}

印刷 css を使用してページをテストするには、ブラウザーで印刷プレビューを実行して外観を確認し、 を押しEscてページに戻ります。

print css とガイドラインについて詳しく知りたい場合は、 SmashingMagazineの記事をご覧ください。

于 2012-12-28T09:18:09.983 に答える
1

ページ全体 (つまり) の本文を非表示にすることができます。

CSS の場合:

body {
visiblilty:hidden;
}

次に、div を表示します (画像がレンダリングされる場所)。

#yourdiv{
visibility:visible;
}

次に window.print(); を使用します。どちらが印刷されますか#yourdiv

于 2012-12-28T08:39:50.003 に答える
1

なぜ<link media='screen' />print.css スタイルシートに変更するのですか?

screenとprintスタイルシートを並べて使用する方がよいでしょう。そのためにJavascript / jQueryは必要ありません：

<!-- Default styling -->
<link rel="stylesheet" type="text/css" href="/css/default.css" media="screen" />

<!-- This styling is only used for printing -->
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />

質問に答えるには、ページの下部に div を追加して<div id='print-wrap'></div>、そこにすべての印刷物を配置するだけです。

次に、CSS で次のようなことを行います。

default.css

#print-wrap { display: none; }

print.css

img { display: none; }
#print-wrap { display: block; }
#img_34 { display: block !important; }
#img_35 { display: block !important; }

アップデート

更新された質問に対応する回答を更新しました。印刷ページに 2 つの画像だけを表示したい場合は、他のすべての画像を非表示にし、印刷する画像をdisplay: none;表示するだけです。display: block !important;

于 2012-12-28T08:46:35.553 に答える