Для вывода React компонента с картой, используя react-leaflet, вам потребуется создать компонент карты с использованием библиотеки react-leaflet. Пример кода для создания компонента с картой выглядит следующим образом:
```jsx
import React from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
const MapComponent = () => {
return (
<MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '400px', width: '400px' }}>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
);
};
export default MapComponent;
```
Для печати компонента на листе А4 так, чтобы его внешний вид полностью совпадал с его отображением на экране, можно воспользоваться CSS медиа-запросами для определения стилей печати. Например, можно использовать следующий CSS код для определения стилей печати:
```css
@media print {
.map-container {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
}
```
Затем добавьте класс `map-container` к компоненту карты:
```jsx
<MapContainer center={[51.505, -0.09]} zoom={13} className="map-container">
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
```
Это позволит увеличить размер компонента карты до полного экрана при печати на листе А4.
Другим способом упростить печать React компонента с картой может быть использование библиотеки `react-to-print`, которая предоставляет простой способ создания кнопки печати для компонентов React. Вы можете использовать эту библиотеку, чтобы создать кнопку печати для вашего компонента карты и легко распечатать его без необходимости настройки CSS для стилей печати.