打印格內容的JavaScript

我打印HTML低於打印格內容的JavaScript

<div id="DivIdToPrint" style="border:1px solid #000000;"> 
fdghgjhghjkjk 
<div id="in">TO be are not to be that is the question</div> 
</div>

和JavaScript代碼是：

function printDiv() 
{ 
var divToPrint=document.getElementById('DivIdToPrint'); 
var newWin=window.open('','Print-Window','width=400,height=400,top=100,left=100'); 
newWin.document.open(); 
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>'); 
newWin.document.close(); 
setTimeout(function(){newWin.close();},10); 

}

我想打印「DivIdToPrint」分區，但不「在」 DIV內容顯示。

來源

2011-10-17 salma

在您的JS代碼添加樣式隱藏「在」分區<style>#in {display:none}</style>，像這樣：

function printDiv() 
{ 
var divToPrint=document.getElementById('DivIdToPrint'); 
var newWin=window.open('','Print-Window','width=400,height=400,top=100,left=100'); 
newWin.document.open(); 
    newWin.document.write('<html><head><style>#in {display:none}</style><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>'); 
newWin.document.close(); 
setTimeout(function(){newWin.close();},10); 

}

來源

2011-10-17 08:42:33

我很高興它爲你工作。謝謝。 –

正確的方式做到這一點，就是用@media print設置display:none

@media print { 
    .in {display:none} 
}

沒有使用Javascript！

來源

2011-10-17 08:39:40 kan

rawString = document.getElementById('DivIdToPrint').innerHTML; 
unwanted = document.getElementById('in').outerHTML; 
whatuwant = rawString.replace(unwanted, '');

來源

2011-10-17 08:40:24

我寫了打印使用內部的IFrame，而不是一個新的窗口元素的功能。該函數使用jQuery。你可以試試看。

function printHtmlElement(elem) 
{ 
    $('.lp_print_frame').remove();  // remove previous iframes. we do not remove them at the end of the function to allow the print to work properly 
    var iframe = $('<iframe class="lp_print_frame" src="about:blank" width="100px" height="100px" />'); // display:block needed for IE 
    $('body').append(iframe); 
    var frameWindow = iframe[0].contentWindow; 

    frameWindow.document.write('<html><head></head><body></body></html>'); 
    frameWindow.document.close(); 

    // copy css from current html 
    var cssElems = $('link,style'); 
    for(var i=0;i<cssElems.length;i++) 
    { 
    var head = frameWindow.document.getElementsByTagName('head')[0]; 
    if (frameWindow.document.importNode) 
     head.appendChild(frameWindow.document.importNode(cssElems[i],true)); 
    else 
     head.appendChild(cssElems[i].cloneNode(true)); 
    } 

    // copy a copy of elem 
    if (frameWindow.document.importNode) 
    frameWindow.document.body.appendChild(frameWindow.document.importNode(elem,true)); 
    else 
    frameWindow.document.body.appendChild(elem); 

    setTimeout(function() {  // timeout is needed for FF 
    if (frameWindow.focus) frameWindow.focus();  // focus is needed for IE 
    frameWindow.print(); 
    iframe.css('display','none'); 
    },1); 
}

來源

2011-11-22 14:13:59 Yaniv

謝謝阿齊茲謝赫，它工作正常。我們可以一次打印兩個不同的div按下面的代碼：

function printDiv() 
{ 
    var divToPrint=document.getElementById('divcostlist'); 
    var clientinfo=document.getElementById('clientinfo'); 
    var newWin=window.open('','Print-Window','width=400,height=400,top=100,left=100'); 
    newWin.document.open(); 
    newWin.document.write('<html><head><style>#in {display:none}</style><body onload="window.print()">'+clientinfo.innerHTML+divToPrint.innerHTML+'</body></html>'); 
    newWin.document.close(); 
    setTimeout(function(){newWin.close();},10); 
}

來源

2013-03-20 11:21:30

第一步。寫下面的JavaScript你的頭標記

<script language="javascript"> 
function PrintMe(DivID) { 
var disp_setting="toolbar=yes,location=no,"; 
disp_setting+="directories=yes,menubar=yes,"; 
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25"; 
    var content_vlue = document.getElementById(DivID).innerHTML; 
    var docprint=window.open("","",disp_setting); 
    docprint.document.open(); 
    docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"'); 
    docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'); 
    docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">'); 
    docprint.document.write('<head><title>My Title</title>'); 
    docprint.document.write('<style type="text/css">body{ margin:0px;'); 
    docprint.document.write('font-family:verdana,Arial;color:#000;'); 
    docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}'); 
    docprint.document.write('a{color:#000;text-decoration:none;} </style>'); 
    docprint.document.write('</head><body onLoad="self.print()"><center>'); 
    docprint.document.write(content_vlue); 
    docprint.document.write('</center></body></html>'); 
    docprint.document.close(); 
    docprint.focus(); 
} 
</script>

第二步裏面。通過onclick事件調用PrintMe（'DivID'）函數。

<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/> 
<div id="divid"> 
here is some text to print inside this div with an id 'divid' 
</div>

來源

2013-04-09 11:40:33

打印格內容的JavaScript

回答

相關問題