Użycie JQuery do otwarcia wyskakującego okna i wydrukowania

Po chwili utworzyłem wtyczkę lightbox przy użyciu jQuery, która ładowałaby adres URL podany w łączu do lightboxa. Kod jest bardzo prosty:Użycie JQuery do otwarcia wyskakującego okna i wydrukowania

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

a link będzie wyglądał tak:

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

Wtyczka może również przyjmować argumenty za szerokość, wysokość, inny adres URL i więcej danych, aby przejść.

Problem, z którym teraz borykam się, to drukowanie lightboksa. Ustawiłem go tak, aby lightbox miał przycisk drukowania na górze pudełka. Ten link otworzy nowe okno i wydrukuje to okno. Wszystko to jest kontrolowane przez wtyczkę lightbox. Oto, jak wygląda ten kod:

$('.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(); 
});

Problem polega na tym, że skrypt nie oczekuje na załadowanie okna. Chce wydrukować w momencie pojawienia się okna. W rezultacie, jeśli kliknę przycisk "anuluj" w oknie dialogowym drukowania, będzie on ponownie pojawiał się ponownie, aż do momentu załadowania okna. Kiedy po raz pierwszy próbowałem drukować, dostałem pustą stronę. Możliwe, że okno nie zakończyło ładowania.

Potrzebuję znaleźć sposób na zmianę poprzedniego bloku kodu, aby poczekać, aż okno się załaduje, a następnie wydrukuje. Czuję, że powinien istnieć łatwy sposób, aby to zrobić, ale jeszcze go nie znalazłem. W tym celu, albo muszę znaleźć lepszy sposób na otwarcie okna wyskakującego i wydrukowanie ze skryptu lightbox w oknie nadrzędnym, bez naprzemiennego wyświetlania kodu strony w wyskakującym okienku.

Źródło

2010-04-08 TJ Kirchner

Należy umieścić funkcję drukowania w pliku widoku-details.php i nazywają to po załadowaniu pliku przez albo za pomocą <body onload="window.print()"> lub $(document).ready(function() { window.print(); });

Źródło

2010-04-08 21:12:19

Cóż, próbuję to zrobić bez dodawania kodu do pliku view-details.php, ponieważ ten plik nie musi wiedzieć, że jest drukowany. W ten sposób nie muszę dodawać snippitu kodu do każdego pliku ładowanego do lightboksa. –

Dlaczego używasz window.open, jeśli ładujesz go do Lightbox? Jeśli używasz jQuery do załadowania kodu HTML za pośrednictwem AJAX, możesz użyć funkcji .load() w jQuery i uruchomić drukowanie za pomocą wywołania zwrotnego onSuccess. –

Ponieważ nie mogę drukować bardzo dobrze z lightboksa. Mam wokół siebie całe to czarne tło. Wygląda i drukuje lepiej we własnym oknie. To interesujący pomysł, używając .load(), ale nie chcę, aby zawartość była drukowana zaraz po załadowaniu lightboxa. Tylko wtedy, gdy użytkownik kliknie link do drukowania, chcę, aby to pole zostało wydrukowane. –

Czy jesteś pewien, że nie można zmieniać kod HTML w oknie popup ?

Jeśli możesz, dodaj <script> tag na końcu HTML popup, a nazywają window.print() wewnątrz niego. Wtedy nie zostanie wywołana, dopóki nie załaduje się HTML.

Źródło

2010-04-08 21:12:55

Nie chcę zmieniać kodu HTML w oknie popup ... ale może mógłbym dodać onload = "window.print()" do załadowanego html ... pozwól mi zagrać z tym pomysłem trochę –

Gotowy! Znalazłem pomysł tutaj

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

W tym przykładzie są ładowane puste okienko do obiektu, klonuje zawartość elementu mają być wyświetlane, a dołączany go organowi przedmiotu. Ponieważ już wiedziałem, co zawartość szczegółów widoku (lub jakiejkolwiek strony ładuję w lightboxie), musiałem po prostu sklonować tę zawartość i załadować ją do obiektu. Potem wystarczy wydrukować ten obiekt. Ostateczny wynik wygląda tak:

$('.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(); 
});

miałem jedną małą wadę w tym arkuszu stylu używałem w widoku-details.php używał odnośniki względne. Musiałem zmienić to na bezwzględny link. Powodem jest to, że okno nie ma przypisanego adresu URL, więc nie ma względnej pozycji do narysowania.

Działa w przeglądarce Firefox. Muszę przetestować go również w innych głównych przeglądarkach.

Nie wiem, jak dobrze to rozwiązanie działa, gdy masz do czynienia z obrazami, filmami lub innymi intensywnymi procesami. Chociaż w moim przypadku działa całkiem dobrze, ponieważ właśnie ładuję tabele i wartości tekstowe.

Dzięki za wejście! Dałeś mi pomysły, jak sobie z tym poradzić.

Źródło

2010-04-08 21:55:40

Użycie JQuery do otwarcia wyskakującego okna i wydrukowania

Odpowiedz

Powiązane problemy