javascriptを使用して、特定のDIV内のコンテンツだけを印刷する
クロムやInternet Explorerの右ボタンを押して、印刷するときに、特定のDIV要素内のコンテンツだけを印刷することをお勧めすることができます。 この場合には、JavaスクリプトやjQueryを使用して簡単に解決することができます。
いくつかjavascript / jQueryスクリプトでテストして、次のコードが正常に動作していることを確認しました。
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // IE >= 10에 필요
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
// Source: stackoverflow
その後、 ...に囲まれた領域が印刷されます。
たまに特定の部分を印刷から排除して印刷されないようにする必要があります。 場合には、次のようなjQueryのスクリプトを使用してクリックしたときに非表示にして、印刷してもいいでしょう。
var $ = jQuery;
$(function(){
$(".hidecontent").hide();
$(".showcontent").on("click", function(){
$(".hidecontent").toggle();
});
});
上記の方法が思うように動作しない場合は、インターネットで必要なソリューションが出ていることがありますので、検索を介して様々な方法を試してみてください。
参考までに、Webページを印刷するとき、たまに上の余白、印刷の難しさを経験する場合が目撃されます。 このような場合、CSSを使用して、余白を調整して印刷する方法を考えることができます。 このような状況で使用できるように、印刷時にwrapper要素に特定のクラスを追加した後の余白などが調整されるようにすることができます。
$("button").click(function(){
$("body").addClass("intro");
});
上記のように addClass メソッドを使用してクリックをすると、特定のタグにクラスが追加されるようにして、CSSでレイアウトを指定します（addClass メソッドの詳細については、 ここを参照してください）。
例えば、 WordPress 掲示板プラグインKBoardで内容を印刷する場合、環境に応じて、印刷時に上部に余白が生じることがあります。 このような場合には、いくつかの解決方法があるが、上記の方法も一つの解決方法になることがあります。
Javascriptを/ jQueryテンプレート/ PHPスクリプト：
機能を直接実装することの難しさを経験したり、時間を節約したい場合 WordPress プラグインなど、さまざまな種類のコードを販売する CodeCanyonで、必要な機能（例えば、スライダー）のJavascript / jQueryテンプレートやPHPスクリプトがあるか検索を試みることができます。
