JQuery를 사용하여 팝업 창을 열고 인쇄하기

라이트 박스에 링크에 지정된 URL을로드하는 jQuery를 사용하여 라이트 박스 플러그인을 만들었습니다. 코드는 정말 간단하다 :JQuery를 사용하여 팝업 창을 열고 인쇄하기

$('.readmore').each(function(i){ 
    $(this).popup(); 
});

및 링크는 다음과 같이 보일 것이다 :

<a class='readmore' href='view-details.php?Id=11'>TJ Kirchner</a>

플러그인도 통과 폭, 높이, 다른 URL, 및 더 많은 데이터에 대한 인수를 사용할 수 있습니다.

지금 직면하고있는 문제는 라이트 박스를 인쇄하는 것입니다. 라이트 박스에 상자 상단에 인쇄 버튼이 있도록 설정했습니다. 이 링크를 클릭하면 새 창이 열리고 해당 창이 인쇄됩니다. 이것은 라이트 박스 플러그인에 의해 모두 제어됩니다. 이 코드는 다음과 같습니다.

$('.printBtn').bind('click',function() { 
    var url = options.url + ((options.url.indexOf('?') < 0 && options.data != "") ? '?' : '&') + options.data; 
    var thePopup = window.open(url, "Member Listing", "menubar=0,location=0,height=700,width=700"); 
    thePopup.print(); 
});

문제는 스크립트가 윈도우가로드 될 때까지 기다리지 않는 것입니다. 창이 나타나는 순간을 인쇄하려고합니다. 결과적으로 인쇄 대화 상자에서 "취소"를 클릭하면 창이로드 될 때까지 여러 번 팝업됩니다. 처음 인쇄 할 때 빈 페이지가 나타났습니다. 윈도우가로드를 끝내지 않았기 때문일 수 있습니다.

이전 코드 블록을 변경하여 창이로드되어 인쇄 될 때까지 기다리는 방법을 찾아야합니다. 이 작업을 쉽게 수행 할 수있는 것처럼 느껴지지만 아직 찾지 못했습니다. 그 중 하나 또는 팝업 창을 열고 팝업 창에서 웹 페이지 코드를 번갈아 표시하지 않고 상위 창에서 라이트 박스 스크립트로 인쇄하는 더 좋은 방법을 찾아야합니다. 당신이 팝업 창에서 HTML을 변경할 수 없습니다

출처

2010-04-08 TJ Kirchner

당신은 당신의보기-details.php 파일의 인쇄 기능을 넣어해야하며, 파일이 하나 <body onload="window.print()"> 또는

출처

2010-04-08 21:12:19

음, view-details.php 파일에 코드를 추가하지 않고이 작업을 수행하려고합니다. 파일이 인쇄되고 있음을 알 필요가 없기 때문입니다. 그렇게하면 라이트 박스에로드하는 모든 파일에 코드 스 니펫을 추가 할 필요가 없습니다. –

Lightbox에서 window.open을로드하는 이유는 무엇입니까? jQuery를 사용하여 HTML을 AJAX를 통해로드하는 경우 jQuery에서 .load() 함수를 사용하고 onSuccess 콜백을 사용하여 인쇄를 트리거 할 수 있습니다. –

라이트 박스에서 잘 인쇄 할 수 없기 때문에. 이 검은 배경을 둘러싼 다. 자체 창에서 더 잘 보이고 인쇄됩니다. .load()를 사용하는 것은 흥미로운 아이디어이지만 라이트 박스가로드 된 직후에 내용이 인쇄되는 것을 원하지 않습니다. 사용자가 인쇄 링크를 클릭 할 때만 상자를 인쇄 할 수 있습니다. –

$(document).ready(function() { window.print(); });를 사용하여로드되면 반드시 그것을 있습니까 전화 ?

가능한 경우 <script> 태그를 팝업 HTML의 끝에 추가하고 window.print()을 호출하십시오. 그런 다음 HTML이로드 될 때까지 호출되지 않습니다.

출처

2010-04-08 21:12:55

팝업 창에서 html 코드를 변경하고 싶지는 않지만 어쩌면 onload = "window.print()"를 html에 추가하여로드 할 수 있습니다. –

알 수 있습니다. 나는 그들이 객체로 빈 팝업 창을로드 표시 할 요소의 내용을 복제,이 예제에서는 여기

http://www.mail-archive.com/[email protected]/msg18410.html

아이디어를 발견하고, 객체의 몸에 추가. 필자는 이미 뷰 세부 정보 (또는 라이트 박스에로드 한 페이지)의 내용을 알고 있었으므로 대신 해당 내용을 복제하여 객체에로드해야했습니다. 그런 다음 해당 객체를 인쇄해야했습니다. 최종 결과는 다음과 같습니다

$('.printBtn').bind('click',function() { 
    var thePopup = window.open('', "Customer Listing", "menubar=0,location=0,height=700,width=700"); 
    $('#popup-content').clone().appendTo(thePopup.document.body); 
    thePopup.print(); 
});

는 내가 상대 링크를 사용했다 뷰 details.php에 사용 된 그 스타일 시트에서 하나의 작은 단점을 가지고 있었다. 나는 그것을 절대적인 연결로 바꾸어야했다. 그 이유는 창에 연관된 URL이 없기 때.에 그릴 상대 위치가 없기 때.입니다.

Firefox에서 작동합니다. 다른 주요 브라우저에서도 테스트해야합니다.

이미지, 비디오 또는 기타 프로세스 집약적 인 솔루션을 처리 할 때이 솔루션이 얼마나 잘 작동하는지 모르겠습니다. 비록 테이블과 텍스트 값을로드하고 있기 때문에 제 경우에는 꽤 잘 작동합니다.입력에 대한

감사합니다! 이 문제를 해결하는 방법에 대한 아이디어를 나에게 주셨습니다.

출처

2010-04-08 21:55:40

JQuery를 사용하여 팝업 창을 열고 인쇄하기

답변

관련 문제