Next.js: "Extracting" HTML on route load?

[vilvadot]

I have a question, and I can't manage to find the answer in the docs.

I would like to get the HTML the server is going to render on a route so I can connect it to a service that turns that HTML into a PDF, in order to server side render pages as PDF.

Can someone shed any light on where I could plug in this? Im playing around in server.js but I cant manage to get the HTML..

The idea is as follows:

1.- You enter in /document/:id/pdf/ route
2.- The HTML string is processed by a HTML to PDF script on the server (or possibly is sent to an external service)
3.- The server renders the page and serves the PDF document file to the user.

Any info is greatly appreciated. Thanks.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

[vilvadot]

I saw I can get the HTML at context.renderPage() on _document.js but I can't access renderPage() on the rest of pages.

static async getInitialProps(context) {
    const page = context.renderPage();
    const props = await super.getInitialProps(context);
    return props
  }

[sergiodxa]

I think you will need a custom server to do that. That way you can render the page, get the HTML before sending it to the user and create your PDF.

[arunoda]

@albertovilva You can check the SSR caching example on how exactly you can do that.

It includes whole HTML output with scripts. May be you can get rid of that by using some RegExp or using a library like cheerio.

[vilvadot]

Thank you very much guys, did it!

[timneutkens]

@albertovilva I'm pretty interested in what you made 😄 maybe provide it as an example for Next? 😄 💯

[vilvadot]

@timneutkens Sure! What I did was, in certain routes (those followed by /pdf) it triggers renderToHTML and processes the stringified HTML vía https://www.npmjs.com/package/html-pdf to generate a PDF. Working with styled components.

Not sure if too much moving parts for an example, let me know if I shall simplify it or follow any guidelines to PR as an example.

[timneutkens]

That's nice. Will give it a try and create an example 😄

[vilvadot]

Great! Let me know if you need any help.

[Rhjulskov]

Hi @timneutkens & @albertovilva,
Did any of you have an example of this, you'r willing to share? :)

[vilvadot]

Hi @Rhjulskov I ended up not going that route. What I did is:

Create a High order component with my print logic:

1. Get HTML from body document.querySelector("body")
2. on ComponentDidMount send a POST to my backend sending and object with the HTML string.
3. Show a loader to the user while the file is being generated
4. On the response of the POST my backend sends back an URL with the PDF on it. Change the browser location to that and bam! the user gets a nice PDF

Cool thing about this is that you can wrap any page in this HOC(High Order Component) and you get PDF print with the same components.

I have this working in production, let me know if you need any more help.

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.