How can I export a Nextjs page as pdf?

Question

I have the following structure on a page:

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: [],
      },
    };
  }
}

Inside the custom component "" I have a a list of buttons to export the information of the page as Excel, Json, CSV and PDF. I've already done the first three buttons, but I don't know where to start to export my page as PDF.

The idea is to export it as it is, meaning that I want to have it with the same style it has with CSS and the Material UI components, for example, if the website looks like this:

The PDF file should look like that, I know I can make it a Canva and make something like Html > img > PDF but I want to allow the user to select the text of the page in the PDF.

I would really appreciate if you can give me ideas to start with!

Answer 1

There are couple of ways to do this

1. An NPM Server side module - more options potentially
2. Client side PDF object formation, lots of challenges - client side dependencies
3. Use a service - cost

For #1 - try something like - https://www.npmjs.com/package/html-pdf?activeTab=readme

For #2 - https://github.com/parallax/jsPDF

For #3 - https://www.htmlpdfapi.com/