Ponownie wyrenderuj komponenty Reactjs do wydrukowania

Question

Mam komponent galerii, który wykorzystuje bieżący rozmiar okna, aby określić, jak duże są elementy galerii. Podłączyłem także zdarzenia zmiany rozmiaru okna, aby zmienić rozmiar elementów galerii podczas zmiany rozmiaru okna.

W przeglądarce Chrome, jeśli użytkownik wydrukuje galerię, elementy nie zostaną zmienione, aby pasowały do ​​drukowanej strony. Zamiast tego używają tylko ostatniego rozmiaru obliczonego dla rozmiaru okna. Dzieje się tak nawet w przypadku przełączania z opcji pionowej na poziomą w opcjach drukowania.

Czy istnieje sposób na wymuszenie reakcji na ponowne renderowanie komponentów podczas otwierania okna dialogowego drukowania i przy zmianie układu strony z portretu na krajobraz? Sądziłem, że okno dialogowe drukowania ponownie wyświetli stronę z nowymi wymiarami, ale wydaje się, że tak nie jest.

Answer 1

Podczas drukowania strony przeglądarka wykonuje migawkę bieżącego modelu DOM i stosuje style nośnika print. Twoim problemem są elementy w twoim DOM zależne od wymiarów ekranu.

Zdarzenia zmiany rozmiaru okna pomogą zmienić układ komponentów, gdy użytkownik zmieni rozmiar ekranu, ale nie są one wyzwalane, gdy użytkownik drukuje. Istnieją jednak sposoby, w których można słuchać zdarzenia, gdy użytkownik wydrukuje stronę.

window.onbeforeprint uruchomi się, gdy użytkownik wydrukuje stronę. W przypadku zdarzenia można zmienić rozmiar ekranu, aby zdarzenia zmiany rozmiaru okna wyzwoliły lub ponownie renderowały komponenty w inny sposób. Nie jest obsługiwany w chrome, chociaż spójrz na this stackoverflow post, wyjaśnia, w jaki sposób można zamiast tego użyć window.matchMedia('print').

Zawsze lepiej polegać na zapytaniach o media CSS niż na wymiary ekranu i zmieniać rozmiar zdarzeń, ale czasami nie zawsze jest to możliwe.

Answer 2

Musisz użyć interfejsu API matchMedia w swoim komponencie. Ale robiąc to sam, będziesz ponownie wymyślać całą masę koła. Łatwiej byłoby użyć istniejącej biblioteki, która się tym zajmuje. Proszę sprawdzić https://www.npmjs.com/package/react-responsive. Zawiera komponenty opakowaniowe oparte na React na matchMedia, więc powinieneś być w stanie szybko go prototypować w swoim projekcie. Dostępne są także wielokątki. Kolejną zaletą jest to, że w interfejsie możesz mieć opcję podglądu wydruku, dzięki której użytkownik może zobaczyć, jak galeria będzie wyglądać w trybie drukowania. W tym celu można użyć funkcji renderowania serwera tej biblioteki, aby symulować tryb drukowania.

PS: Nie jestem w żaden sposób związany z tym projektem.

Answer 3

Korzystanie zapytania mediów kierować pionowym i poziomym drukiem

@media print and (orientation: landscape) { 
    /* landscape styles */ 
    /* write specific styles for landscape e.g */ 
    h1 { 
     color: #000; 
     background: none; 
     } 

     nav, aside { 
     display: none; 
     } 

    } 

@media print and (orientation: portrait) { 
    /* portrait styles */ 
} 

Answer 4

Ponadto rozwiązanie WitVault za I utworzeniu prostą React składnik, który sprawia, że ​​obsługa złożoną print.css znacznie łatwiejsze. Zamiast dodawania klas, identyfikatory itp całym znaczników i tworząc złożoną plik print.css, można korzystać z biblioteki reagować-drukującą następująco:

https://github.com/captray/react-print

Dodaj ten identyfikator do korzenia (lub gdzieś wysoko w drzewie DOM) od aktualnej zawartości (ale wewnątrz w tagu ciała)

<div id="react-no-print"> 

Dodaj div z id 'print-mount, czy cokolwiek zamontować identyfikator chcesz użyć .

<div id="print-mount"></div> 

Tworzenie struktury chcesz dla swojej wersji do druku (które mogą zawierać elementy podrzędne z własnych stylów, aby ułatwić.

var PrintTemplate = require('react-print'); 
var ReactDOM = require('react-dom'); 
var React = require('react'); 

var MyTemplate = React.createClass({ 
    render() { 
     return (
      <PrintTemplate> 
       Your custom HTML or React Components go here, and will replace the existing HTML inside of the "react-no-print" ID, and instead it will render what's inside of your custom template. 
      </PrintTemplate> 
     ); 
    } 
}); 

ReactDOM.render(<MyTemplate/>, document.getElementById('print-mount')); 

Zasadniczo, to czyni swoją wersję do druku, ale to ukryte dopóki Jeśli potrzebujesz tego do przesuwanej galerii, prawdopodobnie chcesz podłączyć się do zdarzenia zmiany suwaka i ponownie wyrenderować (odłączyć stary, zamontować nowy) szablon drukowania. to pomaga!