Mam w react-leaflet mapkę z markerami. Dodałem funcję, która robi raport PDF do każdego markera i chciałem na koniec raportu dodać obraz przedstawiający kawałek mapki z tym jednym markerem, którego dotyczy raport. Problem mam z wygenerowaniem tego obrazu. Próbuję to zrobić przy pomocy html2canvas. Nie chcę w żaden sposób wyświetlać tego kawałka mapy na ekranie bo za jednym kliknięciem może generować się nawet kilkaset raportów. W const map mam ten kawałek mapy ale dostaję
index.ts:36 Uncaught (in promise) Error: Element is not attached to a Document
at index.ts:36:1
at step (tslib.es6.js:102:1)
at Object.next (tslib.es6.js:83:1)
at tslib.es6.js:76:1
at new Promise (<anonymous>)
at __awaiter (tslib.es6.js:72:1)
at renderElement (index.ts:29:1)
at html2canvas (index.ts:20:1)
at savePDF (App.js:160:1)
at App.js:127:1
(anonymous) @ index.ts:36
step @ tslib.es6.js:102
(anonymous) @ tslib.es6.js:83
(anonymous) @ tslib.es6.js:76
__awaiter @ tslib.es6.js:72
renderElement @ index.ts:29
html2canvas @ index.ts:20
savePDF @ App.js:160
(anonymous) @ App.js:127
await in (anonymous) (async)
(anonymous) @ App.js:127
Promise.then (async)
downloadPDFs @ App.js:124
onClick @ App.js:241
handleClick @ index.es.js:5283
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
api.js:46
const savePDF = async (pdfName, images, details) => {
const bounds = [
[-3000, -3000],
[3000, 3000],
];
const map = (
<div id="map-container" style={{display: 'none'}}>
<MapContainer
crs={L.CRS.Simple}
bounds={bounds}
center={details.locationOnDrawing}
zoom={13}
scrollWheelZoom={false}
>
<ImageOverlay
url={currDrawing}
bounds={bounds}
>
<Marker position={details.locationOnDrawing} />
</ImageOverlay>
</MapContainer>
</div>
);
const input = document.getElementById("map-container");
const canvas = await html2canvas(input);
const imgData = canvas.toDataURL("image/jpg")
console.log(imgData)
const doc = (
<PDF photos={images} map={imgData} details={details}/>
);
const pdfBlob = await pdf(doc).toBlob();
// Save the PDF blob as file
saveAs(pdfBlob, pdfName);
}
Widziałem podobne przykłady wykorzystania html2canvas ale różnica była taka, że elementy, z których były generowane obrazy były renderowane a ja mam tutaj JSX, z którym się nic nie dzieje. Nie wiem czy w tym problem...
React 
JavaScript 
pdf? Bo w takim razie podajesz tam element Reacta (czyli w sumie czyste dane, na podstawie których React dopiero jest w stanie utworzyć obiekt DOM). To może mieć sens, ale nie musi (zależy czy funkcjapdfoczekuje właśnie elementu Reacta czy nie. Bo jeśli oczekuje elementu DOM, to nie zadziała w ten sposób)map? We wklejonym kodzie tylko przypisujesz JSX do tegomap, ale dalej nic z tym nie robisz. może nie wkleiłeś całości?