├── .gitignore
├── README.md
├── components
└── GeneratePDF.js
├── package.json
├── pages
├── _app.js
├── api
│ └── people.js
└── index.js
├── public
├── favicon.ico
└── vercel.svg
├── styles
├── Home.module.css
└── globals.css
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 |
33 | # vercel
34 | .vercel
35 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Generate PDF using Next JS
2 |
3 | A simple and basic technique to convert your json api to pdf file using Next JS and [jsPDF AutoTable](https://github.com/simonbengtsson/jsPDF-AutoTable).
4 |
5 | ## Install jsPDF-AutoTable
6 |
7 | `yarn add jspdf jspdf-autotable` or `npm install jspdf jspdf-autotable`
8 |
9 | 
10 |
11 |
--------------------------------------------------------------------------------
/components/GeneratePDF.js:
--------------------------------------------------------------------------------
1 | import jsPDF from 'jspdf'
2 | import 'jspdf-autotable'
3 |
4 | export default function GeneratePDF({ person }) {
5 |
6 | function generate() {
7 | const doc = new jsPDF()
8 |
9 | doc.autoTable({
10 | head: [['Name', 'Age', 'Address']],
11 | body:
12 | person.map(({ name, age, address }) => {
13 | return [
14 | name,
15 | age,
16 | address
17 | ]
18 | }),
19 | })
20 |
21 | doc.save('persons.pdf')
22 | }
23 |
24 | return (
25 |
26 |
27 |
28 | )
29 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nextjs-generate-pdf",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start"
9 | },
10 | "dependencies": {
11 | "jspdf": "^2.3.1",
12 | "jspdf-autotable": "^3.5.14",
13 | "next": "10.2.3",
14 | "react": "17.0.2",
15 | "react-dom": "17.0.2"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 |
3 | function MyApp({ Component, pageProps }) {
4 | return
5 | }
6 |
7 | export default MyApp
8 |
--------------------------------------------------------------------------------
/pages/api/people.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 |
3 | export default (req, res) => {
4 | res.status(200).json([
5 | {
6 | name: 'Jerome Villaruel',
7 | age: '23',
8 | address: 'Philippines'
9 | },
10 | {
11 | name: 'Richlyn Hermosilla',
12 | age: '18',
13 | address: 'Philippines'
14 | },
15 | {
16 | name: 'Lisa Manoban',
17 | age: '23',
18 | address: 'South Korea'
19 | },
20 | {
21 | name: 'Jennie Kim',
22 | age: '24',
23 | address: 'South Korea'
24 | },
25 | {
26 | name: 'Roseanne Park',
27 | age: '23',
28 | address: 'South Korea'
29 | },
30 | {
31 | name: 'Kim Jisoo',
32 | age: '25',
33 | address: 'South Korea'
34 | }
35 | ])
36 | }
37 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 | import styles from '../styles/Home.module.css'
3 | import GeneratePDF from '../components/GeneratePDF'
4 |
5 | export default function Home({ people }) {
6 | return (
7 |
8 |
9 |
Create Next App
10 |
11 |
12 |
13 |
14 |
15 |
16 | Next JS Convert HTML to PDF
17 |
18 |
19 |
20 | {people.map(({ name }, i) => (
21 | -
22 | { name }
23 |
24 | ))}
25 |
26 |
29 |