@media print {
.noPrint{
display:none;
}
}
h1{
color:#f6f6;
}<h1>
print me
</h1>
<h1 class="noPrint">
no print
</h1>
<button onclick="window.print();" class="noPrint">
Print Me
</button>스 니펫 확장
나는 이것에 대한 또 다른 우아한 솔루션을 발견했습니다.
다음과 같은 ID로 div 안에 인쇄 가능한 부분을 배치하십시오.
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
이제 정말 간단한 자바 스크립트를 만들어 보겠습니다.
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
출처 : SO 답변
-------------------다음은 순수한 CSS 버전입니다.
.example-print {
display: none;
}
@media print {
.example-screen {
display: none;
}
.example-print {
display: block;
}
}<div class="example-screen">You only see me in the browser</div>
<div class="example-print">You only see me in the print</div>스 니펫 확장
이 SO 링크 에 따르면 특정 div를 인쇄 할 수 있습니다.
w=window.open();
w.document.write(document.getElementsByClassName('report_left_inner')[0].innerHTML);
w.print();
w.close();
나는 이것을보고 싶다
예 http://jsfiddle.net/35vAN/
<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('', 'my 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="mydiv">
This will be printed. 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 Div" onclick="PrintElem('#mydiv')" />
</body>
</html>
아래 코드가 도움이 될 수 있습니다.
<html>
<head>
<script>
function printPage(id)
{
var html="<html>";
html+= document.getElementById(id).innerHTML;
html+="</html>";
var printWin = window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status =0');
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
</script>
</head>
<body>
<div id="block1">
<table border="1" >
</tr>
<th colspan="3">Block 1</th>
</tr>
<tr>
<th>1</th><th>XYZ</th><th>athock</th>
</tr>
</table>
</div>
<div id="block2">
This is Block 2 content
</div>
<input type="button" value="Print Block 1" onclick="printPage('block1');"></input>
<input type="button" value="Print Block 2" onclick="printPage('block2');"></input>
</body>
</html>
innerHTML을 추가하고 제거하면 모든 javascript, css 등이 두 번로드되고 이벤트가 두 번 실행되고 (나에게 발생 함) 다음과 같이 jQuery 및 CSS를 사용하여 콘텐츠를 숨기는 것이 좋습니다.
function printDiv(selector) {
$('body .site-container').css({display:'none'});
var content = $(selector).clone();
$('body .site-container').before(content);
window.print();
$(selector).first().remove();
$('body .site-container').css({display:''});
}
div "site-container"는 모든 사이트를 포함하므로 다음과 같은 함수를 호출 할 수 있습니다.
printDiv('.someDiv');
출처
https://stackoverflow.com/questions/22089845