표시된 div를 어떻게 인쇄합니까 (페이지의 다른 모든 내용을 수동으로 비활성화하지 않고)?
새로운 미리보기 대화 상자를 피하고 싶기 때문에이 내용으로 새 창을 만드는 것은 유용하지 않습니다.
페이지에는 두 개의 테이블이 있으며 그중 하나에는 인쇄하려는 div가 포함되어 있습니다. 테이블은 웹에 시각적 스타일로 스타일이 지정되어 인쇄에 표시되지 않아야합니다.
답변
CSS 만 사용하는 일반적인 솔루션은 다음과 같습니다 . 작동하는 것으로 확인되었습니다.
@media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}대체 접근법은 그리 좋지 않습니다. display요소가 있으면 display:none그 하위 요소가 표시되지 않으므로 사용 하기 까다 롭습니다 . 사용하려면 페이지 구조를 변경해야합니다.
visibility자손에 대한 가시성을 켤 수 있으므로 사용하는 것이 좋습니다. 보이지 않는 요소는 여전히 레이아웃에 영향을 미치므로 section-to-print왼쪽 상단으로 이동 하여 제대로 인쇄됩니다.
답변
최소한의 코드로 더 나은 솔루션을 제공합니다.
다음과 같이 ID가있는 div 안에 인쇄 가능한 부분을 넣으십시오.
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />그런 다음 onclick과 같은 이벤트를 추가하고 (위와 같이) 위에서 한 것처럼 div의 ID를 전달하십시오.
이제 정말 간단한 자바 스크립트를 만들어 봅시다 :
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}이것이 얼마나 간단한 지 주목하십시오. 팝업, 새 창, 미친 스타일링, jquery와 같은 JS 라이브러리가 없습니다. 정말 복잡한 솔루션의 문제 (답변은 복잡하지 않으며 내가 말하고있는 것이 아닙니다)는 모든 브라우저에서 번역되지 않을 것이라는 사실입니다! 스타일을 다르게하려면 스타일 시트 링크 (media = “print”)에 media 속성을 추가하여 확인 된 답변에 표시된대로 수행하십시오.
보풀이없고 가벼우 며 작동합니다.
답변
지금까지의 모든 대답은 매우 결함이 있습니다 . class="noprint"모든 것에 추가 하거나 그 display안에 엉망이 될 것 #printable입니다.
가장 좋은 해결책은 인쇄 할 수없는 물건을 감싸는 래퍼를 만드는 것입니다.
<head>
<style type="text/css">
#printable { display: none; }
@media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>물론 이것은 HTML에서 물건을 조금 움직여서 완벽하지 않습니다 …
답변
jQuery를 사용하면 다음과 같이 간단합니다.
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();답변
답변
이것은 잘 작동합니다 :
<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>이것은 “가시성”에서만 작동합니다. “디스플레이”는하지 않습니다. FF3에서 테스트되었습니다.
답변
나는이 답변 중 전체를 좋아하지 않았습니다. 클래스 (printableArea와 같은 클래스)가 있고 그것을 바로 몸의 자식으로 가지고 있다면 인쇄 CSS에서 다음과 같이 할 수 있습니다 :
body > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}다른 곳에서 printableArea를 찾는 사람들에게는 printableArea의 부모가 표시되어 있는지 확인해야합니다.
body > *:not(.parentDiv),
.parentDiv > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}가시성을 사용하면 많은 간격 문제와 빈 페이지가 발생할 수 있습니다. 가시성으로 인해 요소 공간이 유지되고 숨겨져 표시가 제거되면서 다른 요소가 공간을 차지할 수 있기 때문입니다.
이 솔루션이 작동하는 이유는 모든 요소를 잡는 것이 아니라 신체의 직접적인 자식 만 숨기고 있기 때문입니다. 디스플레이 CSS가있는 아래의 다른 솔루션은 모든 요소를 숨기고 printableArea 내용의 모든 내용에 영향을 미칩니다.
사용자가 클릭하는 인쇄 버튼이 필요하고 표준 브라우저 인쇄 버튼이 동일한 효과를 가지지 않기 때문에 자바 스크립트를 제안하지 않습니다. 정말로 그렇게해야한다면 본문의 html을 저장하고 원하지 않는 모든 요소를 제거한 다음 인쇄하고 html을 다시 추가하십시오. 위에서 언급했듯이 위와 같은 CSS 옵션을 사용할 수 있다면 이것을 피할 것입니다.
참고 : 인라인 스타일을 사용하여 인쇄 CSS에 CSS를 추가 할 수 있습니다.
<style type="text/css">
@media print {
//styles here
}
</style>또는 일반적으로 사용하는 것처럼 링크 태그가 있습니다.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />