Jqueryを使用してdivコンテンツを印刷する

jQueryを使用してdivのコンテンツを印刷したいとします。この質問はすでにSOで尋ねられていますが、正しい（作業中の）回答は見つかりません。ここで私はdiv要素printareaの内容を印刷したいJqueryを使用してdivコンテンツを印刷する

<div id='printarea'> 
    <p>This is a sample text for printing purpose.</p> 
    <input type='button' id='btn' value='Print'> 
</div> 
<p>Do not print.</p>

：これは

は私のHTMLです。

私はこの試みた：

$("#btn").click(function() { 
    $("#printarea").print(); 
});

をしかし、ボタンがクリックされたときには、コンソールのエラーを与える：

Uncaught TypeError: $(...).print is not a function

しかし、私は

window.print();

を使用してページ全体を印刷しようとしています

それは働いています。しかし、私は特定のdivの内容を印刷したいだけです。私は多くの場所で回答$("#printarea").print();を見ましたが、これは動作していません。 >$('SelectorToPrint').printElement();

出典

2015-11-16 next2u

。 –

あなたはCSSソリューションを実際に探しています。[this]（http://stackoverflow.com/questions/7440976/how-to-print-a-part-of-my-page-using-jquery）あなたの目的に合わせた簡単な設定 - '.printable'クラスのものを除いて、すべてのページ要素を隠す – SidOfc

良い答えを得たい場合はJavaScriptタグを使うのが良いでしょう：http://meta.stackoverflow.com/質問/ 290244 /示唆編集 - do-questions-need-both-javascriptとjqueryタグ – Anders

jQueryのリサーチに失敗したので、私はJavaScriptに移りました（ご意見ありがとうAnders）。

それはうまくいきます...

HTML

<div id='DivIdToPrint'> 
    <p>This is a sample text for printing purpose.</p> 
</div> 
<p>Do not print.</p> 
<input type='button' id='btn' value='Print' onclick='printDiv();'>

はJavaScript

function printDiv() 
{ 

    var divToPrint=document.getElementById('DivIdToPrint'); 

    var newWin=window.open('','Print-Window'); 

    newWin.document.open(); 

    newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>'); 

    newWin.document.close(); 

    setTimeout(function(){newWin.close();},10); 

}

出典

2015-11-16 12:28:15 next2u

CSS/JS /フォントを失います –

これを使用した後はJSを失うため、使用しないでください。 $（ "。class"）。click（）や$（ "。class"）などの変更やその他のイベント。 –

また、印刷ウィンドウを表示せずにサーバーのタイムアウトが発生することがあります。 –

https://github.com/jasonday/printThis

$("#myID").printThis();

グレートjQueryプラグインは、あなたのコードはのように簡単になります任意のプラグインを使用して、このロジックを選択することができます。

$("#btn").click(function() { 
    //Hide all other elements other than printarea. 
    $("#printarea").show(); 
    window.print(); 
});

出典

2015-11-16 10:11:40 CiaranSynnott

後、この Plugin

を見てみましょ正確に何をすべきか

出典

2015-11-16 10:12:08 ahervin

なし - あなたの

出典

2015-11-16 10:14:03

Mozilaのページにあるすべてのものを印刷しますfirefox – zeddarn

あなたは（printThisのような）追加のプラグインなしでこれを実行したい場合は、私は、これは動作するはずだと思います。アイデアは、印刷される特別なdivを持つことですが、その他のものはCSSを使用して非表示にします。 divがbodyタグの直接の子である場合、これは簡単です。したがって、印刷したいものをそのようなdivに移動する必要があります。 S身分タグの直接の子として、print-meのdivを作成することから始めましょう。その後のdivを印刷するには、このコードを使用する：あなたが必要

$("#btn").click(function() { 
    //Copy the element you want to print to the print-me div. 
    $("#printarea").clone().appendTo("#print-me"); 
    //Apply some styles to hide everything else while printing. 
    $("body").addClass("printing"); 
    //Print the window. 
    window.print(); 
    //Restore the styles. 
    $("body").removeClass("printing"); 
    //Clear up the div. 
    $("#print-me").empty(); 
});

スタイルが、これらは以下のとおりです。

@media print { 
    /* Hide everything in the body when printing... */ 
    body.printing * { display: none; } 
    /* ...except our special div. */ 
    body.printing #print-me { display: block; } 
} 

@media screen { 
    /* Hide the special layer from the screen. */ 
    #print-me { display: none; } 
}

printingクラスが存在しているとき、我々は唯一の@printスタイルを適用すべきである理由は、ページということですユーザがFile -> Printを選択してページを印刷する場合、通常どおりに印刷する必要があります。

出典

2015-11-16 10:30:29 Anders

私はここにすべての非プラグインのアプローチを試みたが、すべてのコンテンツの後に印刷する空白ページを引き起こし、またはその他の問題を抱えていました。ここに私の解決策だ：

HTML：

<body> 
<div id="page-content">   
    <div id="printme">Content To Print</div> 
    <div>Don't print this.</div> 
</div> 
<div id="hidden-print-div"></div> 
</body>

のjQuery：

$(document).ready(function() { 
     $("#hidden-print-div").html($("#printme").html()); 
    });

のCss：

#hidden-print-div { 
     display: none; 
    } 

    @media print { 
     #hidden-print-div { 
      display: block; 
     } 

     #page-content { 
      display: none; 
     } 
    }

出典

2017-02-13 22:02:21

Print only selected element on codepen

HTML：

<div class="print"> 
<p>Print 1</p> 
<a href="#" class="js-print-link">Click Me To Print</a> 
</div> 

<div class="print"> 
<p>Print 2</p> 
<a href="#" class="js-print-link">Click Me To Print</a> 
</div>

はJQuery：作業perfectly.They上記ソリューションの

$('.js-print-link').on('click', function() { 
    var printBlock = $(this).parents('.print').siblings('.print'); 
    printBlock.hide(); 
    window.print(); 
    printBlock.show(); 
});

出典

2017-03-27 08:04:40 Denis

これをランドスケープに変更するにはどうすればよいですか？ – Gagantous

なしCSSを失いませんか/含ま外部CSSファイルを編集する必要がどちらか。私はあなたのCSSを失うことなく、外部のCSSを編集/追加しなければならない完璧なソリューションを見つけました。

HTML：

<div id='printarea'> 
    <p>This is a sample text for printing purpose.</p> 
    <input type='button' id='btn' value='Print' onclick='printFunc();'> 
</div> 
<p>Do not print.</p

はJQuery：あなたはすべての非関連のコンテンツを隠し、その上に `メディア= "印刷"`とのセットアップスタイルシートをできた

function printFunc() { 
    var divToPrint = document.getElementById('printarea'); 
    var htmlToPrint = '' + 
     '<style type="text/css">' + 
     'table th, table td {' + 
     'border:1px solid #000;' + 
     'padding;0.5em;' + 
     '}' + 
     '</style>'; 
    htmlToPrint += divToPrint.outerHTML; 
    newWin = window.open(""); 
    newWin.document.write("<h3 align='center'>Print Page</h3>"); 
    newWin.document.write(htmlToPrint); 
    newWin.print(); 
    newWin.close(); 
    }

出典

2017-11-09 15:34:12 BibanCS

Jqueryを使用してdivコンテンツを印刷する

答えて

関連する問題