Next.js jsPDF-Autotable Example to Insert JSON API Data Info in Table inside PDF Doc in Javascript

Welcome folks today in this blog post we will be making a next.js app in which we will be converting json api data in table in pdf document using jspdf and jspdf-autotable library in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new next.js app as shown below

npx create-next-app sampleapp

And now you need to go to into directory as shown below

cd sampleapp

And after that you need to install the below libraries using the below command as shown below

npm i jspdf

npm i jspdf-autotable

And after that you will see the below directory structure of the next.js app as shown below

And now first of all you need to go to api folder and create the file called people.js where we will copy pasting the different users that you want to insert inside the table in pdf document

api/people.js

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default (req, res) => {
  res.status(200).json([
    {
      name: 'Jerome Villaruel',
      age: '23',
      address: 'Philippines'
    },
    {
      name: 'Richlyn Hermosilla',
      age: '18',
      address: 'Philippines'
    },
    {
      name: 'Lisa Manoban',
      age: '23',
      address: 'South Korea'
    },
    {
      name: 'Jennie Kim',
      age: '24',
      address: 'South Korea'
    },
    {
      name: 'Roseanne Park',
      age: '23',
      address: 'South Korea'
    },
    {
      name: 'Kim Jisoo',
      age: '25',
      address: 'South Korea'
    }
  ])
}

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default (req, res) => {

res.status(200).json([

{

age: '23',

address: 'Philippines'

{

age: '18',

address: 'Philippines'

{

age: '23',

address: 'South Korea'

{

age: '24',

address: 'South Korea'

{

age: '23',

address: 'South Korea'

{

age: '25',

address: 'South Korea'

}

])

}

Now if you run the next.js app using the below command as shown below

npm run dev

Now if you go to localhost:3000/api/people it will show the json response as shown below

Now we need to go to index.js file and copy paste the following code

index.js

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import GeneratePDF from '../components/GeneratePDF'

export default function Home({ people }) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Next JS Convert HTML to PDF
        </h1>
        <div>
          <ul>
            {people.map(({ name }, i) => (
              <li key={i}>
                { name }
              </li>
            ))}
          </ul>
        </div>
        <GeneratePDF person={ people } />
      </main>
    </div>
  )
}

export async function getStaticProps() {
  const res = await fetch('http://localhost:3000/api/people')
  const people = await res.json()

  return {
    props: {
      people
    }
  }
}

import Head from 'next/head'

import styles from '../styles/Home.module.css'

import GeneratePDF from '../components/GeneratePDF'

export default function Home({ people }) {

return (

<Head>

<title>Create Next App</title>

</Head>

Next JS Convert HTML to PDF

</h1>

<div>

<ul>

{people.map(({ name }, i) => (

{ name }

</li>

))}

</ul>

</div>

</main>

</div>

)

}

export async function getStaticProps() {

const res = await fetch('http://localhost:3000/api/people')

const people = await res.json()

return {

props: {

people

}

As you can see we are using the map operator to loop through all the people array of objects. Here we are printing the name of the person. And then we are passing the person data to the component using the getStaticProps() method. And for this we are making the fetch http get request to the server and it returns the json response.

And now if you go to localhost:3000 you will see the below result as shown below