How to Generate Documents with React - A Step-by-Step Guide

1
npx create-next-app@14 pdf-document-generation --ts --tailwind --app --eslint --no-src-dir --import-alias="@/*"
2
cd pdf-document-generation
3
npm install

1
npm run dev

1
import { NextApiRequest } from "next";
2
import { NextResponse } from "next/server";
3

4
export const GET = async (req: NextApiRequest) => {
5
  const receipt = {
6
    id: 1,
7
    date: "2021-01-01",
8
    total: 100,
9
  };
10

11
  return NextResponse.json({ receipt });
12
};

1
export const Receipt = () => {
2
  return <h1>Receipt</h1>;
3
};

1
FILEFORGE_API_KEY=your-api-key

1
npm i -s @fileforge/react-print @fileforge/client

1
import { NextApiRequest } from "next";
2
import { NextResponse } from "next/server";
3
import { compile } from "@fileforge/react-print";
4
import { Receipt } from "@/documents/Receipt";
5
import { FileforgeClient } from "@fileforge/client";
6

7
const fileforge = new FileforgeClient({
8
  apiKey: process.env.FILEFORGE_API_KEY,
9
});
10

11
export const GET = async (req: NextApiRequest) => {
12
  const receipt = {
13
    id: 1,
14
    date: "2021-01-01",
15
    total: 100,
16
  };
17

18
  const { file, error } = await fileforge.render({
19
    html: await compile(Receipt()),
20
  });
21

22
  if (error) {
23
    return NextResponse.json({ error }, { status: 500 });
24
  }
25

26
  const pdfBuffer = Buffer.from(file);
27

28
  // Return the PDF
29
  return new Response(pdfBuffer, {
30
    headers: {
31
      "Content-Type": "application/pdf",
32
    },
33
  });
34
};

1
import { Footnote, Tailwind } from "@fileforge/react-print";
2

3
export const Receipt = ({
4
  id,
5
  date,
6
  total,
7
}: {
8
  id: number;
9
  date: string;
10
  total: number;
11
}) => (
12
  <Tailwind>
13
    <div className="font-sans">
14
      <div className="bg-gradient-to-r from-blue-600 to-blue-400 -z-10 absolute -left-[2cm] right-[25vw] -skew-y-12 h-[100vh] bottom-[95vh]" />
15
      <div className="bg-gradient-to-r from-blue-600 to-blue-800 -z-20 absolute left-[75vw] -right-[2cm] -skew-y-12 h-[100vh] bottom-[90vh]" />
16
      <div className="bg-slate-100 -rotate-12 -z-10 absolute -left-[200em] -right-[200em] h-[100vh] top-[75vh]" />
17
      <main className="text-slate-800 pt-24 h-[90vh] flex flex-col">
18
        <svg
19
          version="1.1"
20
          id="Layer_1"
21
          xmlns="http://www.w3.org/2000/svg"
22
          x="0px"
23
          y="0px"
24
          viewBox="0 0 24 24"
25
          className="mx-auto w-32 mb-12 fill-blue-800"
26
        >
27
          <g>
28
            <path
29
              d="M22.45,12.12c0-2.91-0.99-5.33-3.03-7.34C17.42,2.76,14.96,1.74,12,1.74c-2.93,0-5.4,1.02-7.43,3.05
30
            C2.56,6.8,1.55,9.26,1.55,12.15c0,0.84,0.11,1.63,0.27,2.37l9.71-7.65h5.01v14.58c1.06-0.5,2.03-1.13,2.91-1.99
31
            C21.46,17.45,22.45,15.01,22.45,12.12z"
32
            />
33
            <path d="M4.91,19.78c1.4,1.26,3.03,2.12,4.9,2.48v-6.32L4.91,19.78z" />
34
          </g>
35
        </svg>
36
        <h1 className="text-center text-2xl text-slate-800">
37
          Receipt from Acme Inc.
38
        </h1>
39
        <p className="pt-2 text-slate-400 text-center">Receipt #{id}</p>
40
        <div className="p-12 flex-grow bg-white rounded-2xl rounded-t-none shadow-xl shadow-black/10">
41
          <div className="flex justify-between gap-4">
42
            <div>
43
              <div className="text-sm text-gray-400 font-bold uppercase pb-1">
44
                Amount paid
45
              </div>
46
              <div className="flex gap-4 items-center">${total}</div>
47
            </div>
48
            <div>
49
              <div className="text-sm text-gray-400 font-bold uppercase pb-1">
50
                Date
51
              </div>
52
              <div className="flex gap-4 items-center">
53
                {new Date(date).toLocaleString()}
54
              </div>
55
            </div>
56
            <div>
57
              <div className="text-sm text-gray-400 font-bold uppercase pb-1">
58
                Payment method
59
              </div>
60
              <div className="flex gap-4 items-center font-mono">
61
                <svg
62
                  xmlns="http://www.w3.org/2000/svg"
63
                  width="1200"
64
                  height="800"
65
                  version="1.1"
66
                  viewBox="-96 -98.908 832 593.448"
67
                  className="h-4"
68
                >
69
                  <path
70
                    fill="#ff5f00"
71
                    strokeWidth="5.494"
72
                    d="M224.833 42.298h190.416v311.005H224.833z"
73
                    display="inline"
74
                  ></path>
75
                  <path
76
                    fill="#eb001b"
77
                    strokeWidth="5.494"
78
                    d="M244.446 197.828a197.448 197.448 0 0175.54-155.475 197.777 197.777 0 100 311.004 197.448 197.448 0 01-75.54-155.53z"
79
                  ></path>
80
                  <path
81
                    fill="#f79e1b"
82
                    strokeWidth="5.494"
83
                    d="M640 197.828a197.777 197.777 0 01-320.015 155.474 197.777 197.777 0 000-311.004A197.777 197.777 0 01640 197.773z"
84
                    className="e"
85
                  ></path>
86
                </svg>
87
                0911
88
              </div>
89
            </div>
90
          </div>
91
          <h2 className="text-slate-600 font-bold text-sm py-6 pt-12 uppercase">
92
            Summary
93
          </h2>
94
          <div className="bg-slate-100 px-6 py-2 rounded-md">
95
            <table className="w-full">
96
              <tr className="border-b text-slate-500">
97
                <td className="py-4">Basic Pro Plan</td>
98
                <td className="py-4">$12.99</td>
99
              </tr>
100
              <tr className="font-bold text-slate-700">
101
                <td className="py-4">Amount charged</td>
102
                <td className="py-4">$12.99</td>
103
              </tr>
104
            </table>
105
          </div>
106
          <hr className="my-6" />
107
          This is some additional content to to inform you that Acme Inc. is a
108
          fake company and this is a fake receipt. This is just a demo to show
109
          you how you can create a beautiful receipt with Fileforge.{" "}
110
          <Footnote>
111
            Some additional conditions may apply. This template comes from the
112
            react-print library, available at
113
            https://docs.fileforge.com/getting-started/general/welcome
114
          </Footnote>
115
        </div>
116
      </main>
117
    </div>
118
  </Tailwind>
119
);

1
import { NextApiRequest, NextApiResponse } from "next";
2
import { NextResponse } from "next/server";
3
import { compile } from "@fileforge/react-print";
4
import { Receipt } from "@/documents/Receipt";
5
import { FileforgeClient } from "@fileforge/client";
6

7
const fileforge = new Fileforge({
8
  apiKey: process.env.FILEFORGE_API_KEY,
9
});
10

11
export const GET = async (req: NextApiRequest) => {
12
  const receipt = {
13
    id: 1,
14
    date: "2021-01-01",
15
    total: 100,
16
  };
17

18
  const { file, error } = await fileforge.pdf.generate(
19
    await compile(Receipt(receipt)),
20
    {
21
      options: {},
22
    }
23
  );
24

25
  if (error) {
26
    return NextResponse.json({ error }, { status: 500 });
27
  }
28

29
  const pdfBuffer = Buffer.from(file);
30

31
  // Return the PDF
32
  return new Response(pdfBuffer, {
33
    headers: {
34
      "Content-Type": "application/pdf",
35
    },
36
  });
37
};