選択したdivを印刷する代わりにページを完成させる方法

div1とdiv2という2つのdivがあります。選択したdivを印刷する代わりにページを完成させる方法

印刷中のdiv2要素に適用された元のCSSスタイルを維持します。

div1の中にコンテンツを印刷したくないのですが、内側はdiv2です。

印刷するには？

2010-12-07 Bharanikumar

この

<style type="text/css"> 
@media print 
{ 
body * { visibility: hidden; } 
.div2 * { visibility: visible; } 
.div2 { position: absolute; top: 40px; left: 30px; } 
} 
</style>

出典

2010-12-07 06:28:08

これはiPadで正しく動作していません。 –

ページの一部ではなくページ全体を印刷することができます。したがって、2つのオプションがあります.1つの要素の内容を新しいページにコピーして印刷するか、他の要素が印刷されないようにすることができます。

メディアCSSを使用して、印刷から1つの要素を非表示にすることができます。例：

@media print { 

    .div1 { display: none; } 

}

出典

2010-12-07 06:24:38 Guffa

はjQueryのためのjqPrintプラグインを見てくださいしてみてください。私の次のソリューションを使用してhttp://plugins.jquery.com/project/jqPrint

出典

2010-12-07 06:51:23 Vinblad

もしあれば、あなたのWebページから特定のdivコンテンツを印刷することができますあなたの全ページを印刷したくない。

<html> 
<head> 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script> 



<script type="text/javascript"> 

    function PrintElem(elem) 
    { 
     Popup($(elem).html()); 
    } 

    function Popup(data) 
    { 
     var mywindow = window.open('', 'new div', 'height=400,width=600'); 
     mywindow.document.write('<html><head><title>my div</title>'); 
     /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />'); 
     mywindow.document.write('</head><body >'); 
     mywindow.document.write(data); 
     mywindow.document.write('</body></html>'); 

     mywindow.print(); 
     mywindow.close(); 

     return true; 
    } 

</script> 
</head> 
<body> 

<div id="yourdiv"> 
    Div you want to print. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante. 
</div> 

<div> 
    This will not be printed. 
</div> 

<div id="anotherdiv"> 
    Nor will this. 
</div> 

<input type="button" value="Print" onclick="PrintElem('#yourdiv')" /> 

</body> 
</html>

Live Demo

出典

2013-07-17 07:13:04 Hardik

<script type="text/javascript"> 
    function printDiv() {  
    var printContents = document.getElementById('Your printable div').innerHTML; 
    var originalContents = document.body.innerHTML; 
    document.body.innerHTML = printContents; 
    window.print(); 
    document.body.innerHTML = originalContents; 
    } 
</script>

出典

2015-03-13 06:59:32 Gopinath

キャンセルをクリックするともう一度私のために印刷されません... –

@ChrisHappyおそらく、イベントリスナーが削除されている/ document.body.innerHTMLが置き換えられたときに失われたと考えています – DanTheMan

使用printAreaとjQueryのプラグインの特定のdiv内容を印刷します。ここから簡単な統合ガイドが見つかりました。How to print a specific area of the web page using jQuery

PrintArea jQuery Pluginを使用するには、次のコードだけが必要です。

<script> 
$(document).ready(function(){ 
    $("#printButton").click(function(){ 
     var mode = 'iframe'; 
     var close = mode == "popup"; 
     var options = { mode : mode, popClose : close}; 
     $("div.printableArea").printArea(options); 
    }); 
}); 
</script>

出典

2016-04-28 11:10:38 JoyGuru

-1

<script type="text/javascript"> 
    function printDiv() {  
    var printContents = document.getElementById('Your printable div').innerHTML; 
    var originalContents = document.body.innerHTML; 
    document.body.innerHTML = printContents; 
    window.print(); 
    document.body.innerHTML = originalContents; 
    } 
</script>

出典

2016-09-23 06:06:01

簡単な方法

@media print { 
    body > div { display:none; } 
    body .div { display:block; } 
}

出典

2016-11-30 11:52:25

また、それはjQueryのを使用して行うことができます。

<script> 
function printArea(){ 
    $('body').css('visibility', 'hidden'); 
    $('.div2').css('visibility', 'visible'); 
    window.print(); 
} 
</script>

出典

2017-06-17 07:11:56

私はあなたが身体を隠すことができると思いますその中に何かを見せて – mplungjan

.class-toggle { display: inline-block; } 
#div1, #div2 { display: none; }

function classToggle() { 
    $('#div1').addClass('class-toggle'); 
} 

classToggle();

を次にあなたがイベントで遊ぶことができますどのように処理するかを処理するハンドラで、出力をに出力します。

出典

2017-12-28 16:38:03 RickShaw

選択したdivを印刷する代わりにページを完成させる方法

答えて

関連する問題