Drukowanie wielu stron za pomocą kodu Javascript

Question

Mam stronę internetową, na której użytkownicy klikają przycisk Czytaj więcej, aby mogli wyświetlić pozostałe informacje na stronie. Ciekaw jestem, jak mogłem to zrobić, aby użytkownicy nie musieli drukować osobno każdej strony. Chciałbym móc zrobić tak, żebym mógł mieć skrypt, który zawierałby pokrewne strony. Jeśli ktoś mógłby mi pomóc i wskazał mi właściwy kierunek, byłoby to bardzo cenne. Potrzebuję tej funkcjonalności do pracy we wszystkich przeglądarkach.

Dzięki

Answer 1

To, czego trzeba będzie użyć, to arkusz stylów wykorzystujący style mediów. Jest to zasadniczo jak posiadanie dwóch oddzielnych arkuszy stylów; jeden do drukowania i drugi do oglądania. Aby zachować ostrożność w przepustowości, pozostaw puste, dopóki żądanie nie zostanie wysłane. W sprawie zdarzenia wypełnij formularz printarea, aby wykonać cały wydruk. Proponuję zajrzeć do jQuery i ich żądania ładowania i ajax dla tego.

@media screen 
    { 
    #screenarea 
     { 
     display: block; 
     } 
    #printarea 
     { 
     display: none; 
     } 
    } 
@media print 
    { 
    #screenarea 
     { 
     display: none; 
     } 
    #printarea 
     { 
     display: block; 
     } 
    } 

Answer 2

Moje przeczucie pierwszy powiedział mi, że wymagałoby to rozwiązanie jest na serwerze, ponieważ funkcja window.print drukuje tylko to, co znajduje się w bieżącym dokumencie, i że trzeba napisać kod serwera produkować stronę internetową składający się ze wszystkich stron, które chcesz wydrukować, i wywołaj window.print z tej strony.

Ale można zrobić dla ciebie jQuery, pobierając strony do wydrukowania za pomocą funkcji .load, a następnie po załadowaniu wszystkich stron wywołaj window.print. Jeśli z jakiegoś powodu nie możesz użyć jQuery, możesz napisać cały układ hydrauliczny samodzielnie za pomocą XHR.

Trudno podać bardziej szczegółową odpowiedź bez żadnych informacji o strukturze aplikacji internetowej.

Answer 3

myślę, że można je wydrukować na iframe wewnątrz warstwą

Dzeije się przykładem (niezbyt ładne, ale pracuje dla idei):

http://www.fffast.com/scripts/script_iframing.shtml

Answer 4

W ogólnie rzecz biorąc, nie używałbyś JavaScript, aby uzyskać dostęp do wielu stron i drukować je. (Jeśli jest to w ogóle możliwe, to brzmi jak byłoby to trochę hack.)

Zamiast tego, to prawdopodobnie chcesz mieć jedną stronę, która zawiera wszystkie informacje, które mają zostać wydrukowane, CSS stylu dla printability, który użytkownik mógłby przeglądać i móc drukować. (W tym przypadku możesz łatwo użyć JavaScriptu do rozpoczęcia akcji drukowania.)

Być może link "drukuj wszystko", który kieruje użytkownika do strony (lub otwiera stronę w nowym target), która zawiera wszystkie informacje do druku?

Można nawet posunąć się o krok dalej i uczynić go nieco bardziej dynamicznym. Może mieć pola wyboru obok nagłówków dla każdej sekcji informacji i przycisk "wydrukuj wybrane", który wysłałby selekcje do serwera i wyrenderowałby tylko wybraną informację na stronie "drukuj wszystko".

Po prostu czuję, że jako użytkownik przylega to bardziej do least astonishment niż do czegoś, co drukuje rzeczy, których nawet nie pobrałem w pierwszej kolejności (gdzie również ryzykujesz wysłanie zbyt dużej ilości do drukarki użytkownika i marnowanie ich zasobów).

Edit:

Innym podejściem, które właśnie przyszło mi do głowy. Czy cała treść musi znajdować się na oddzielnych stronach? Może po prostu wstaw zawartość domyślnie ukrytą, a link "czytaj więcej" pokazuje skojarzone div. W takim razie wszystko, co jest potrzebne do drukowania, to wspomniany styl mediów CSS. Przeglądając w przeglądarce, mogą one oddzielnie rozwijać/zwijać sekcje informacji, ale po wydrukowaniu strony wszystko jest rozszerzane.

Answer 5

Po masz całą zawartość na jednej stronie internetowej (przy użyciu iniekcji lub proces serwera), strony formatowania wykorzystuje atrybuty CSS do druku @media np

@media print { 
    h1 {page-break-before: always;} 
} 

Inne atrybuty są „PAGE- break-after "i" page-break-inside ", z których druga pomaga uniknąć przerw w treści.