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を使う?などを考えてみましたが、いい方法があれば是非教えてください。
例えば、印刷時のみに有効な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); } });
その印刷したいページの内容を見ていませんのでふわっとした回答になりますが、コメントに書かれた CSS は、あくまでも画像に対する指定です。
2017/08/31 00:18:39margin の左右の auto は、それを囲むエリアの中央に表示するという指定なので、その画像が配置されている td の幅が、用紙に対して 100% じゃないと真ん中に来ません。
ありがとうございます。画像に対する指定というところで、もしかして?と思いまして再度確認したところ、あくまでtableの中での移動ということだったのですね。tableのほうにCSSで、同様にmargin autoを入れたら、ちゃんとtableが紙の中央に印刷されるようになりました。本当にありがとうございました。
2017/09/01 12:58:06