HTMLページの選択部分を印刷する方法は？

私は選択された<div>タグをHTMLで印刷しようとしていました。私はこのようにCSSを使ってみました：HTMLページの選択部分を印刷する方法は？

<style media="print"> 
    .onlyscreen { 
    display: none; 
    } 
</style> 

<html> 
    <body> 
    <div class="onlyscreen"> 
     <p>Hello</p> 
     <div> 
     <p> Inner tag</p> 
     </div> 
    </div> 
    <input type="submit" value="Print Report" onclick="window.print()"> 
    </body> 
</html>

"インナータグ"は印刷されません。これは便利なテクニックですが、レイヤーが<div>の場合は失敗します。

また、私はこのJavaScriptを試してみました。その後、

function printContent(id) { 
    str = document.getElementById(id).innerHTML; 
    newwin = window.open('', 'printwin', 'left=100,top=100,width=400,height=400'); 
    newwin.document.write('<HTML>\n<HEAD>\n'); 
    newwin.document.write('<TITLE>Report</TITLE>\n'); 
    newwin.document.write('<script>\n'); 
    newwin.document.write('function chkstate(){\n'); 
    newwin.document.write('if(document.readyState=="complete"){\n'); 
    newwin.document.write('window.close()\n'); 
    newwin.document.write('}\n'); 
    newwin.document.write('else{\n'); 
    newwin.document.write('setTimeout("chkstate()",2000)\n'); 
    newwin.document.write('}\n'); 
    newwin.document.write('}\n'); 
    newwin.document.write('function print_win(){\n'); 
    newwin.document.write('window.print();\n'); 
    newwin.document.write('chkstate();\n'); 
    newwin.document.write('}\n'); 
    newwin.document.write('<\/script>\n'); 
    newwin.document.write('</HEAD>\n'); 
    newwin.document.write('<BODY onload="print_win()">\n'); 
    newwin.document.write(str); 
    newwin.document.write('</BODY>\n'); 
    newwin.document.write('</HTML>\n'); 
    newwin.document.close(); 
}

そしてonclickでこの関数を呼び出します。このスクリプトは、1つの<div>タグで正常に動作しますが、複数のタグでは動作しません。例えば、

<html> 
    <body> 
    <div id="print_thistag"> 
     <p>Hello</p> 
    </div> 
    <div id="print_thistag"> 
     <p>User</p> 
    </div> 
    <input type="submit" value="Print Report" onclick="printContent('print_thistag')"> 
    </body> 
</html>

"Hello"のみが印刷されます。そのような場合、私は何をすべきですか？

出典

2011-11-16 Dhruv

@BalusC - 私の質問を正しく描いてくれてありがとうBalusC :) – Dhruv

基本的に問題は、printContent関数が単一の要素だけで動作するように設計されていることです。

あなたの機能を変更することができ、それが

function printContent(className) { 
    var matchedElements = document.getElementsByClassName(className); 
    var str = ''; 

    for (var i = 0; i < matchedElements.length; i++) { 
     var str = str + matchedElements[i].innerHTML; 
    } 

    var newwin = window.open('', 'printwin', 'left=100,top=100,width=400,height=400'); 

    newwin.document.write('<HTML>\n<HEAD>\n'); 
    newwin.document.write('<TITLE>Report</TITLE>\n'); 
    newwin.document.write('<script>\n'); 
    newwin.document.write('function chkstate(){\n'); 
    newwin.document.write('if(document.readyState=="complete"){\n'); 
    newwin.document.write('window.close()\n'); 
    newwin.document.write('}\n'); 
    newwin.document.write('else{\n'); 
    newwin.document.write('setTimeout("chkstate()",2000)\n'); 
    newwin.document.write('}\n'); 
    newwin.document.write('}\n'); 
    newwin.document.write('function print_win(){\n'); 
    newwin.document.write('window.print();\n'); 
    newwin.document.write('chkstate();\n'); 
    newwin.document.write('}\n'); 
    newwin.document.write('<\/script>\n'); 
    newwin.document.write('</HEAD>\n'); 
    newwin.document.write('<BODY onload="print_win()">\n'); 
    newwin.document.write(str); 
    newwin.document.write('</BODY>\n'); 
    newwin.document.write('</HTML>\n'); 
    newwin.document.close(); 
}

あなたはまた、HTMLを少し変更する必要がありますない要素のidが、次のサンプルのようにCSSクラス名を受け入れます

<html> 
    <body> 
    <div class="print_thistag"> 
     <p>Hello</p> 
    </div> 
    <div class="print_thistag"> 
     <p>User</p> 
    </div> 
    <input type="submit" value="Print Report" onclick="printContent('print_thistag');"> 
    </body> 
</html>

期待どおりに動作します - すべてのdivコンテンツを1つのhtml文字列に集約して印刷します。

ところで、複数の要素に同じIDを割り当てるのは良い方法ではありません。idは一意でなければならず、何らかの形で要素をグループ化したい場合は、上記のサンプルと同じクラスを追加するだけです。

出典

2011-11-17 01:01:49 danyloid

ありがとう、それは動作します:) – Dhruv

HTMLページの選択部分を印刷する方法は？

答えて

関連する問題