Tengo la siguiente estructura en una página:

 export default function FichaTecnica(props) { const data = props.data; return ( <> <Container> <TopData info={data} /> <DataSheet datasheet={data} /> <GraphBox history={data} /> <MapButton hasMap={data.mapa} /> </Container> </> ); } export async function getServerSideProps(context) { const idIndicador = context.params.idIndicador; const res = await fetch( `${process.env.INDICADORES_BASE_URL}/indicadores/${idIndicador}` ); const data = await res.json(); if (res.status === 200) { return { props: { ...data }, }; } else { return { props: { data: [], }, }; } }

Dentro del componente personalizado "" tengo una lista de botones para exportar la información de la página como Excel, Json, CSV y PDF. Ya hice los tres primeros botones, pero no sé por dónde empezar a exportar mi página como PDF.

La idea es exportarlo tal como está, lo que significa que quiero tenerlo con el mismo estilo que tiene con CSS y los componentes de Material UI, por ejemplo, si el sitio web se ve así:

El archivo PDF debería verse así, sé que puedo convertirlo en Canva y hacer algo como Html> img> PDF pero quiero permitir que el usuario seleccione el texto de la página en el PDF.

¡Te agradecería mucho si me puedes dar ideas para empezar!