2012-07-11 2 views
0

클릭시 페이지의 미리 정의 된 div를 인쇄하는 자바 스크립트 인쇄 기능을 사용하고 있습니다. 이 기능은 다음과 같습니다 :클릭 기능을 사용한 후 같은 페이지에서 div를 새로 고침

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

프린터 양식 입력 방법 및 인쇄 사업부은 다음과 같습니다

<body> 
<input type="button" class="button" onclick="printDiv('any printable div')" name="print" value="print" /> 
<div id = "any printable div"> On button click contents here are printed </div> 
</body> 

는 또한 같은 페이지에 J 쿼리 텍스트 윤곽/스크롤을 사용하고 그 함수를 기반으로 작업을 수행합니다.

$(document).ready(function(){ 

모두가 독립적으로 작동합니다. 문제는 인쇄 버튼을 클릭하면 텍스트 이동/스크롤러가 텍스트 스크롤을 중지한다는 것입니다. 스크롤러는 페이지가 새로 고쳐질 때까지 텍스트를 스크롤 할 수 없습니다. 그래서 html 메타 새로 고침을 사용하고 있지만 방문자에게 짜증나는 경험 일 수 있습니다. 나는 iframe에서 스크롤러를 사용하고 싶지 않다.

저는이 시간까지 일부 j- 쿼리와 자바 스크립트 기반 솔루션을 시도했습니다. 스크립트는 새로 고침 (전체 텍스트 블록을 페이드 인하 고 밖으로 페이드 아웃) div는 스크롤러가 조용히 있지만 실제로 텍스트 스크롤을 유지할 수 없습니다.

시간이 주어진 기간에 위에서 설명한 상황에 따라 scroller div를 자동으로 새로 고치는 좋은 j- 쿼리 또는 자바 스크립트 기반 솔루션이 있습니까?

답변

0

변수 이름에 공백을 사용할 수 없습니다. function printDiv(any printable div)은 구문 오류입니다.

대신보십시오 :

function printDiv(elId) {  
    var printContents = document.getElementById(elId).innerHTML;  
    var originalContents = document.body.innerHTML;  
    document.body.innerHTML = printContents;  
    window.print();  
    document.body.innerHTML = originalContents; 
} 
+0

예, 알고 있습니다. 쉽게 이해할 수 있도록 그렇게 적으십시오. 고마워, –

0

난 당신이 여기에 의도가 아니라 전체 페이지보다, 단지 특정 사업부를 인쇄 할 수 있음을 언급 한 것과 가정합니다. 그렇다면이 기능을 수행하기 위해 여기 극단으로 가고 있습니다.

인쇄 할 페이지의 더 예쁜 버전을 만들려면 (메뉴가없는 등) How can I have different CSS when I print or print preview?을보십시오. 이 질문은 인쇄를 위해 다른 CSS 세트를 사용하는 방법을 보여줄 것이므로 display:none;을 인쇄 할 때 표시하지 않으려는 항목으로 설정할 수 있습니다.

하나의 div 만 인쇄하려는 경우 jQuery print element plugin을 볼 수 있습니다. 이것은 당신이 당신의 HTML 링크를 간단한 JS 파일이 다음

$([selector]).printElement();

그냥 요소를 인쇄하는 전화입니다. 예를 들어, 귀하의 방법을 다음과 같이 다시 작성할 수 있습니다.

function printDiv(anyPrintableDiv) { 
    $('#' + anyPrintableDiv).printElement(); 
} 
+0

gutub에서 호스팅되는'jquery.printElement.min.js' 플러그인을 사용할 때 print 함수가 완벽하게 작동하지만 내 서버에서 호스팅 될 때 print 함수가 작동하지 않는다는 사실은 매우 이상합니다. 왜 그런 일이 일어날 지 아십니까? 내 대답을 참조하십시오. 감사, –

관련 문제