人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptで以下のプラグインを使って<div>で指定した箇所のみを印刷させたいのですが、
https://cunelwork.co.jp/blog/web/jquery-jprintarea/
指定範囲のみ印刷できるjQueryプラグイン「jPrintArea.js」
<div>で指定した箇所にある画像を表示させています。
このプラグインを使って画像を印刷させるとその画像がA4サイズの半分くらいになります。
これをA4サイズいっぱいに拡大させる方法がわかりません。
https://cunelwork.co.jp/blog/web/jquery-jprintarea/
こちらのサイトを見ると印刷範囲を

<div id="printarea">
?印刷したい内容?
</div>

このようにくくるのですが、この<div id="printarea">の中にCSSなどで画像を拡大させてしまうと、通常の画面上でも画像が大きくなってしまいます。これを印刷時のみにA4サイズいっぱいに拡大、あるいはあらかじめ指定したサイズに拡大させることはできるのでしょうか? 例えば、印刷時のみに有効なCSSを使う?などを考えてみましたが、いい方法があれば是非教えてください。





●質問者: kajironpu
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3

例えば、印刷時のみに有効なCSSを使う?などを考えてみましたが、いい方法があれば是非教えてください。

それで良いんじゃないでしょうか。

<div id="printarea" class="printarea">
 ?
</div>
@media print {
 .printarea img {
 width: 200px;
 height: 200px;
 }
}

というような感じで。
対象の領域には、クラス属性をつけて、そのクラスに対してスタイルを指定するほうが良いです。
# そんな作りのプラグイン :-/

あと、その jPrintArea.js というやつは外部スタイルシートしか反映してないので、印刷用のメディアクエリの指定も外部スタイルシートに混ぜておく必要があります。

style タグの指定を反映させたいということであれば、プラグインを直さなくちゃいけません。
こんな感じに修正します。

jQuery(document).ready(function($){
 $.jPrintArea=function(el){
 var iframe=document.createElement('IFRAME');
 var doc=null;
 $(iframe).attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
 document.body.appendChild(iframe);
 doc=iframe.contentWindow.document;
 var links=window.document.getElementsByTagName('link');
 for(var i=0;i<links.length;i++)
 if(links[i].rel.toLowerCase()=='stylesheet')
 doc.write('<link type="text/css" rel="stylesheet" href="'+links[i].href+'"></link>');
 // ★ここから
 $("style").each(function() {
 doc.write('<style>' + this.textContent + '</style>');
 });
 // ★ここまで
 doc.write('<div class="'+$(el).attr("class")+'">'+$(el).html()+'</div>');
 doc.close();
 iframe.contentWindow.focus();
 iframe.contentWindow.print();
 alert('指定された範囲のみプリントします');
 document.body.removeChild(iframe);
 }
});

kajironpuさんのコメント
a-kuma3さん、ありがとうございました。 無事うまくいきました。クラス属性をつけてからスタイルを指定するのですね。 始めhtmlのファイルの中に直接styleを入れようとしましたが、シンプルに外部styleシートに入れてみたら無事サイズが大きくなりました。あとはA4にピッタリ収まるように調整を書けてみます。ありがとうございます。

kajironpuさんのコメント
またまた、教えてください。 印刷する<DIV>の範囲の画像ですが、テーブルで囲ってみました。 A4サイズに収まるサイズも650pxにするといけそうです。 しかし実際、印刷してみると、画像を埋め込んだテーブルが左によっています。 いろいろ調べて、ブロックで囲って、left,rightにマージンをautoにしてみたのですが、やはり左によったままです。これを用紙の中央に印刷したいのです。 なぜでしょうか? @media print { .printarea1 img { display: block; margin-left: auto; margin-right: auto; width:650px; } }

a-kuma3さんのコメント
その印刷したいページの内容を見ていませんのでふわっとした回答になりますが、コメントに書かれた CSS は、あくまでも画像に対する指定です。 margin の左右の auto は、それを囲むエリアの中央に表示するという指定なので、その画像が配置されている td の幅が、用紙に対して 100% じゃないと真ん中に来ません。

kajironpuさんのコメント
ありがとうございます。画像に対する指定というところで、もしかして?と思いまして再度確認したところ、あくまでtableの中での移動ということだったのですね。tableのほうにCSSで、同様にmargin autoを入れたら、ちゃんとtableが紙の中央に印刷されるようになりました。本当にありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ