html2canvas doesnt render my div correctly

Im using html2canvas so i can download as pdf a created div that contains an invoice info in React.

const handleGeneratePDF = async () => { const element = folioRef.current if (!element) { return } const canvas = await html2canvas(element, { scale: 2, }) const data = canvas.toDataURL('image/png') const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: 'a4', }) const imgProperties = pdf.getImageProperties(data) const pdfWidth = pdf.internal.pageSize.getWidth() const pdfHeight = (imgProperties.height * pdfWidth) / imgProperties.width pdf.addImage(data, 'PNG', 0, 0, pdfWidth, pdfHeight) pdf.save('examplepdf.pdf') }

I use useRef so i can get the reference of the specific sheet, in a modal i check that everything is okay but as soon as i print, the downloaded file is broken.

Downloaded pdf

Original div

<div id='folio-pdf' ref={folioRef} className='relative w-[800px] min-h-[1100px] bg-white mx-auto' > {items.map((item) => { const emisor = selectedInvoice?.emisor || {} const totales = selectedInvoice?.totales || {} const numeroFactura = selectedInvoice?.numeroFactura || '' const fechaExpedicion = selectedInvoice?.fechaExpedicion || '' const lineas = selectedInvoice?.lineas || [] const observaciones = selectedInvoice?.observaciones || '' return ( <div key={item.id} style={{ position: 'absolute', left: `${item.x}px`, top: `${item.y}px`, width: `${item.w}px`, height: `${item.h}px`, }} > {item.type === 'texto' && <TextItem content={item.content} />} {item.type === 'imagen' && <ImageItem url={item.content} />} {item.type === 'QR' && ( <QrTributario nif={emisor.identificacion?.nif || ''} numserie={numeroFactura} fecha={fechaExpedicion} importe={totales.totalFactura || 0} width={item.w} height={item.h} /> )} {item.type === 'emisor' && ( <EmisorItem emisor={{ razonSocial: emisor.razonSocial || '', nif: emisor.identificacion?.nif || '', direccion: [ emisor.direccion?.calle || '', emisor.direccion?.cp || '', emisor.direccion?.ciudad || '', emisor.direccion?.pais || '', ] .filter(Boolean) .join(', '), telefono: emisor.telefono || '', email: emisor.email || '', }} {...item} /> )} {item.type === 'destinatario' && ( <DestinatarioItem destinatario={{ razonSocial: emisor.razonSocial || '', nif: emisor.identificacion?.nif || '', direccion: [ emisor.direccion?.calle || '', emisor.direccion?.cp || '', emisor.direccion?.ciudad || '', emisor.direccion?.pais || '', ] .filter(Boolean) .join(', '), telefono: emisor.telefono || '', email: emisor.email || '', }} {...item} /> )} {item.type === 'totales' && ( <Totales totales={totales} emisor={emisor} /> )} {item.type === 'fecha' && ( <FechaItem fecha={fechaExpedicion} {...item} /> )} {item.type === 'numero' && ( <NumeroItem numero={selectedInvoice.numero} {...item} /> )} {item.type === 'observaciones' && ( <ObservacionesItem observaciones={observaciones} {...item} /> )} {item.type === 'lineas' && ( <LineasItem lineas={lineas} width={item.w} height={item.h} /> )} {item.type === 'logoverifactu' && ( <LogoVerifactuItem width={item.w} height={item.h} /> )} {item.type === 'tabla' && ( <TableItem item={item} items={items} setItems={setItems} /> )} </div> ) })} </div>

I suspect that its due to scroll that the file is broken