DEV Community: Fileforge

Create an Engaging React PDF Viewer: a Step-by-Step Guide

Titouan Launay — Thu, 25 Jul 2024 14:59:18 +0000

Your app needs to integrate PDF viewing, but you don't know where to get started? We've got you covered. Building your own PDF viewer seems daunting. You need to account for text selection, links, zooming, and so on. And there is no real open-source solution! Well until now.

In this article, we will show you how easy it is to set up a fully fledged React PDF viewer, using a new open source library. You can display your pdf documents in a custom viewer component in a matter of minutes.

What to expect from a PDF viewer

Building a good PDF viewer is no easy task. Here is a short list of things you should be paying attention to:

Allow users to zoom and pan as they are used to, either with the mouse wheel, their trackpad or on their phone.
Resolve internal links and references to navigate from page to page, but also for outlines and thumbnails navigation.
Implement the text layer and annotation layer, that are used for links, forms, and for selectable text.
Optimize performance! PDF Files can be extremely heavy, and you must be careful when loading the file and rendering the contents.
Make it relevant to your use cases! A PDF viewer is here to serve a purpose. It should be streamlined and efficient, to keep the focus on the file itself.

Using the Open-Source Fileforge PDF Viewer

Why the Fileforge PDF Viewer

Fileforge's open source PDF viewer is a strong starting point. It leverages the state-of-the-art pdf.js library (over 2.7m weekly downloads) to create a very simple and highly extensible viewer. Here are some elements it ships with, so you don't have to build them again - but still can style them!

A dynamic viewport component that supports all zoom and pan interactions,
Text and annotation layers, including support for PDF form filling,
Radix-style components for the current page, outlines, thumbnails, zoom and so on,
A highly optimized rendering engine, making sure you don't waste resources,
TypeScript ready!

With the Fileforge PDF Viewer, you can just pass a link to your PDF document or PDF file, style the viewer, and voilà, you have a great user experience!

Getting started in your React app

npm install @fileforge/pdfreader@latest

First, let's create a new PDF viewer component in your React app. We will also need to have a PDF file at hand, usually you will need to put it in the public directory of your project. Loading PDF files from remote URLs needs a bit of work for CORS security reasons.

import { Root, Viewport, Pages, Page } from "@fileforge/pdfreader";

const MyPDFReader = () => (
  <Root fileURL="https://pdfobject.com/pdf/sample.pdf">
    <Viewport>
      <Pages>
        <Page>
          <CanvasLayer />
        </Page>
      </Pages>
    </Viewport>
  </Root>
);

We have added the basic skeleton for a viewer, that we can find on the Fileforge docs. (note: if you want a styling headstart with Tailwind, you can copy the samples in the docs!)

Here is what our newly created PDF viewer component looks like in our app.

Let's copy the sample styles found in the documentation, using Tailwind.

import { Root, Viewport, Pages, Page } from "@fileforge/pdfreader";

const MyPDFReader = () => (
  <Root
    className="bg-gray-100 border rounded-md overflow-hidden relative h-[500px]"
    fileURL="https://pdfobject.com/pdf/sample.pdf"
    loader={<div className="p-4">Loading...</div>}
  >
    <Viewport className="p-4 h-full">
      <Pages>
        <Page className="my-4">
          <CanvasLayer />
        </Page>
      </Pages>
    </Viewport>
  </Root>
);

Adding a sidebar with thumbnails for page navigation

A key feature of Fileforge's React PDF viewer is how customizable it is. Let's use another of the provided components, Thumbnails, to create a small sidebar with the page thumbnails. When we click on one of the page previews, the viewer will automatically navigate to the correct page.

import {
  Root,
  Viewport,
  Pages,
  Page,
  Thumbnails,
  Thumbnail,
} from "@fileforge/pdfreader";

const MyPDFReader = () => (
  <Root
    className="bg-gray-100 border rounded-md overflow-hidden relative h-[500px] flex flex-col justify-stretch"
    fileURL="https://pdfobject.com/pdf/sample.pdf"
    loader={<div className="p-4">Loading...</div>}
  >
    <div className="bg-gray-100 border-b p-1 flex items-center justify-center text-sm text-gray-600 gap-2">
      <button
        className="px-2 hover:bg-gray-300 hover:text-gray-900 py-1 rounded-full"
        onClick={function ra() {}}
      >
        Hide Thumbnails
      </button>
      <span className="flex-grow" />
      Page
      <CurrentPage className="bg-white rounded-full px-3 py-1 border text-center" />
      Zoom
      <ZoomOut className="px-3 py-1 -mr-2 text-gray-900">-</ZoomOut>
      <CurrentZoom className="bg-white rounded-full px-3 py-1 border text-center w-16" />
      <ZoomIn className="px-3 py-1 -ml-2 text-gray-900">+</ZoomIn>
      <span className="flex-grow" />
    </div>
    <div className="basis-0 grow min-h-0 relative grid transition-all duration-300 grid-cols-[24rem,1fr]">
      <div className="overflow-y-auto overflow-x-hidden">
        <div className="w-96 overflow-x-hidden">
          <Thumbnails className="flex flex-col gap-4 items-center py-4">
            <Thumbnail className="transition-all w-48 hover:shadow-lg hover:outline hover:outline-gray-300" />
          </Thumbnails>
        </div>
      </div>
      <Viewport className="p-4 h-full">
        <Pages>
          <Page className="my-4">
            <CanvasLayer />
            <TextLayer />
            <AnnotationLayer />
          </Page>
        </Pages>
      </Viewport>
    </div>
  </Root>
);

Here is what our responsive component looks like now:

Taking it further

Fileforge's React PDF Viewer is completely open source and free of charge. You can use it to display documents generated with the Fileforge API! We welcome any contributions, and feel free to get in touch if you have any issues setting it up or would like specific features.

This post was originally published on the Fileforge blog.

Generate Signable PDF Forms with React

Titouan Launay — Thu, 11 Jul 2024 15:55:28 +0000

Why use React to generate PDF Forms?

When Generating PDF Forms, React (or HTML) may not be the first thing that comes to mind! It makes more sense when we compare it with website forms: we want to lay out the form fields, add labels, and make it easy to fill out. React is a great tool for this, and using Fileforge's react-print library and API, we can easily convert the form into a PDF.

Easy and Dynamic Layout

Placing form inputs in React is easy! With a little bit of CSS (or using Tailwind). We can create a dynamic layout that adapts to the user's screen size. We may even add or remove some fields based on the user's input.

Eliminate Manual Tagging

When dealing with E-Signature services, you often have to indicate form and signature fields with special tags such as hidden text. This is hard to control and you don't have precise control on the resulting input. It just feels wrong? Given that we generate our PDF from a React/HTML model, we know where the boxes are (and Fileforge will generate them for you!). Then it's as easy as 1-2-3 to add a signature field.

Creating a PDF Form with react-print

Let's see how we can create a simple PDF form with React and react-print. We will use the following libraries:

@fileforge/react-print: A React library that converts React to HTML ready for PDF generation.
@fileforge/client: A client library to interact with Fileforge's API. Fileforge is free for 500 API calls per month. Get your API key now.

Setting up our Render Function

[!note] Get your API Key
Fileforge's API is free for 500 calls per month. Get your API key now

Let's set up a simple render file that will generate the PDF file. This could be adapted to other languages or frameworks, but we will use React for this example. Here is a sample file, named render.tsx:

import fs from "fs";
import { pipeline } from "stream/promises";

import React from "react";

import { FileforgeClient } from "@fileforge/client";
import { compile } from "@fileforge/react-print";

const onedoc = new FileforgeClient({
  apiKey: process.env.FILEFORGE_API_KEY!,
});

(async () => {
  const file = await onedoc.pdf.generate(await compile(<h1>Hello World!</h1>), {
    options: {},
  });

  await pipeline(file, fs.createWriteStream("form.pdf"));
})();

We can run this file easily using tsx:

npx tsx render.tsx

You should now have a form.pdf file in your directory!

Setting up the Document

Let's change our render.tsx file to include a <Form/> component:

import fs from "fs";
import { pipeline } from "stream/promises";

import React from "react";

import { FileforgeClient } from "@fileforge/client";
import { compile } from "@fileforge/react-print";

import { Form } from './Form.tsx'

const onedoc = new FileforgeClient({
  apiKey: process.env.FILEFORGE_API_KEY!,
});

(async () => {
  const file = await onedoc.pdf.generate(await compile(<Form />), {
    options: {},
  });

  await pipeline(file, fs.createWriteStream("form.pdf"));
})();

Let's also create a simple form in the Form.tsx file:

import React from "react";
import { Tailwind } from "@fileforge/react-print";

const LineInput = ({ label }) => {
  return (
    <div className="flex items-center my-2">
      <div className="font-bold mr-4">{label}</div>
      <div className="grow relative">
        <input className="w-full border-b-2 border-black h-6" />
      </div>
    </div>
  );
};

export const Form = () => {
  return (
    <Tailwind>
      <h1 className="text-2xl font-bold text-center mb-4">Registration Form</h1>
      <p className="mb-4">
        Thanks for your interest in the next event! Please fill out the form
        below to register for the event. We look forward to seeing you there!
      </p>
      <LineInput label="Name" />
      <div className="flex items-center">
        <div className="basis-0 grow mr-4">
          <LineInput label="Email" />
        </div>
        <div className="basis-0 grow">
          <LineInput label="Email" />
        </div>
      </div>
      <p className="my-4">
        I hereby agree to the terms and conditions of the event and give my
        consent to receive marketing communications from the event organizers.
      </p>
      <label htmlFor="DocusignSignHere" className="block mt-4">
        Signature
      </label>
      <input
        name="DocusignSignHere"
        className="w-72 border-b-2 border-black h-24 bg-gray-50"
      />
    </Tailwind>
  );
};

We have created a simple React component for the form inputs, as it will make it easier to add more fields later on. We have also added a signature field at the end of the form.

[!note] Magic Input Names
As you may have noticed, the signature field has a special name: DocusignSignHere. This is a special name that Fileforge will pass when the document is generated. You can use this name to place the signature field in the right place using DocuSign.

Generating the PDF Form using Fileforge

Let's run the render.tsx file again:

npx tsx render.tsx

We now have a form.pdf file in our directory! You can open it in your favorite PDF viewer and see the form we just created.

Transforming the PDF Form into a Signable Document

The PDF file returned by Fileforge contains all our fields as inputs. However, we want the signature field to be replaced by a SignHere tag in DocuSign.

DocuSign provides an easy way to convert PDF fields into DocuSign fields using the PDF Field Transformation feature. Other providers do not support this feature, so you will have to manually place the signature field in the right place.

DocuSign: PDF Field Transformation (Reference), with multiple signees
HelloSign: does not support field transformation
YouSign: does not support field transformation

Conclusion

Using @fileforge/react-print and the Fileforge API, we were able to create a simple PDF Form in just minutes, and we could hand it off to DocuSign for signature. This is a great way to create signable documents for your users, and it's easy to customize the form to your needs.

This post was originally authored on the Fileforge blog.

From Vercel to Monolith, improving API speeds

Titouan Launay — Tue, 25 Jun 2024 09:27:20 +0000

Going serverless was both the best and worst decision we made so far. It went from being why we would ship fast to the reason users would churn.

When we started Fileforge, we were pivoting from an AI startup. We were already a few weeks into the Y Combinator batch, and we needed to launch in days.

Two possibilities at hand: either we build with a major cloud provider and spend days setting up the infrastructure, or we go serverless and ship in hours. The choice would be obvious for most startups, however as we manage documents, we knew that having a close control over the infrastructure would be key.

In the end, what mattered most was how much time we would need to validate the idea. We went serverless.

Challenges with Serverless

To keep things simple, our serverless stack includes Supabase and a Next.js full-stack app, hosted on Vercel. It was easily set-up in an afternoon, and we were able to launch our waitlist the next day, product in a week.

Serverless allowed us to ship fast, but the API latency was a major negative feedback from our users.

Serverless is widely used for production app, where this isn't as much of an issue. To understand better why we were especially impacted by this, let's dive into how a document is generated.

How is a Document Generated?

For our prototype, the objectives were:

Secure: We needed to ensure that the documents were generated in a secure environment. Every step of the process needed to be encrypted, with appropriate access controls.
Versatile: We wanted to support the upload of assets, as this was a major pain point we encountered with existing solutions.
Reasonably Fast: We needed to generate the documents in a few seconds. We set 10 seconds as our target.
Easy to Deploy: We wanted to limit the amount of infrastructure we had to manage.

The best fit for these objectives was to leverage each of our providers' strengths:

Supabase: For the database and bucket-based file storage.
Vercel: For the frontend and API.
PDF Processor: For the actual document conversion.

This resulted in a sequence of steps that looked like this:

Not reinventing the wheel meant we could ship securely and quickly.

Performance Bottlenecks

Document generations would take roughly less than 10 seconds. While this was on-par with our expectations, this was still an issue for our users. It meant that quickly iterating on a document was painful, and that the user experience was subpar.

At that time, the client would make 3 requests to create a document:

Initiate PDF Generation: The client would send a request to the Fileforge API to start the document generation. (~300ms)
Upload Assets: The client would upload the assets to the temporary bucket. (~1s)
Serve PDF: The client would download the PDF. (~6s)

While not much could be done about the two first steps without changing the SDK and API structure, the last step was definitely something we could improve. Using Sentry's tracing feature, we were able to uncover interesting insights.

Out of the 7 seconds it took to generate a PDF, only 3.5 were spent in the PDF Processor. The rest was spent with back and forth between Vercel and Supabase.

Of the 3.5 seconds spent in the PDF processor, most were also spent connecting to Vercel which was acting as a proxy between Supabase and the PDF Processor.

With our low volume at the time, most requests to Vercel incurred a cold start, compounded with the networking overhead between Vercel and Supabase, resulting in a latency of up to 500ms per request.

Moving to a Monolith

Two key takeways from our analysis:

Storage needed to be moved as close as possible to the proxy serving the assets.
The number of steps needed to generate a document needed to be reduced to avoid client-server roundtrips. A side effect would be that the API would be easier to understand

We also encountered issues specific to our use case when processing files, especially with the serverless functions hard limits on memory and execution time.

Planning and Execution

To address these issues, while limiting the amount of work dedicated to non-feature work, we decided to move the document API to a monolith.

Vercel and Supabase would be kept and used for user authentication, data storage, and other non-document related tasks.
The document generation API would be moved to a monolith, hosted using ECS on AWS. Asset storage would happen on S3, in the same region the generation API call was made.

Moving to a monolith would also allow us better control over API requests, and as such move our 3 client-server requests to a single one.

Moving to a single request meant we could simplify our cross-region asset management, as we were certain that assets would be stored in a single region.

Technical Stack

Document API endpoints would be moved from Next.js routes to a specific monolithic service. We chose to use fastify, a Node.js framework known for its speed and low overhead. Combined with fastify-multipart and fastify-swagger, the API was quickly set up.

The fastify approach fit our requirement of contract-based development, as we could easily define the API contract first, then implement the logic.

The system is auto-scaled on ECS, and allows for an easy cross-region deployment.

Performance Improvements

Let's have a look at the new sequence of steps:

From 9 steps, we are down to 6. The client now only needs to make a single request to generate a document.

New Performance Traces

Back in Sentry, here are the new traces:

The end-to-end generation now only takes 3.6 seconds, with 2.5 seconds spent in the PDF Processor. Billing operations have been moved to asynchronous, and the client now only needs to wait for the PDF to be generated.

There is still room for improvement, as almost 1 second is spent checking for authorization in the Fileforge API and Supabase. This will be the next focus of our optimization efforts.

API Speed Metrics

In the end, here are the metrics reported by Sentry:

API Endpoint	Average Latency	95th Percentile Latency
(Old) Initiate PDF Generation	1.11s	1.42s
(Old) Upload Assets (Estimated)	1s	3s
(Old) Generate PDF	7.35s	9.78s
(Old) Total	9.46s	12.2s
(New) Generate PDF	3.67s	5.41s
(New) Total	3.67s	5.41s
Improvement	61.2%	55.7%

Looking Forward

The move to a monolith was a success, and we will now tackle the remaining elements, moving our PDF rendering services closer to our API, and changing the authentication flow.

Let's cut generation time by half, again.

This blog post was originally published on the Fileforge blog.

PDF 2.0, what's new?

pierredorge — Tue, 02 Apr 2024 17:21:02 +0000

Introduction

Overview

Adobe Systems, the creator of the Portable Document Format (PDF), has seen PDF become a ubiquitous tool for viewing and interacting with documents.
Over 25 years since its inception, PDF has evolved significantly and was adopted as an open international standard in 2008.
The latest milestone in this evolution is the release of PDF version 2.0 by the International Organization for Standards (ISO) on July 28.
This update is the result of an 8-year collaborative effort involving experts across various disciplines and countries, with Adobe engineers playing a significant role.

The new 971-page PDF 2.0 specification enhances document security, accessibility, and the handling of graphically **rich media* including 3D models, video, geospatial data, and advanced print features.

What's new?

Improved security

PDF 2.0 incorporates advanced encryption with support for 256-bit AES encryption, supports Unicode characters in passwords, and introduces an unencrypted wrapper for encryption details, aiding applications like Acrobat Reader in decryption.

Improved accessibility

Accessibility has been enhanced through an extended tagging architecture, the addition of text-to-speech features for images and a braille reader. Making content more accessible to users with disabilities.

Rich media support

The 2.0 version also supports PRC (a popular 3D modeling language) which enriches the PDF experience with advanced tools for interacting with rich 3D content.

Geospatial capabilities are greatly expanded, allowing for sophisticated interactions with GIS data (Geospatial information systems) and the exchange of geographic content such as satellite imagery, astronomy, city mappings and more.
Another significant improvement in the geospatial field is the support for coordinate systems, enabling geospatial objects to be associated with a spatial reference point or projection.

Improvements in color accuracy

PDF 2.0 also brings significant advancements in color management for print workflows, including page-level output profiles, black point compensation, and spectrally defined colors, improving color accuracy and management across various printing scenarios.

Create PDFs with Tailwind

Titouan Launay — Thu, 21 Mar 2024 23:23:54 +0000

As a developer, creating PDFs seems like a simple task. We build frontends with modern toolkit in just hours, how could static documents be any harder?

PDF was invented in 1993 by Adobe as a cross-platform document format. The format itself focuses on being portable rather than interactive - an orthogonal approach to HTML and CSS. While the latter defines a box model, the former has an imperative approach. In a nutshell, an HTML rectangle is a set of 4 lines in PDF.

This approach is the strength of PDF and the reason it is so widely used: it always looks the same. HTML on the other hand relies on many factors from screen size to browser version. What if we could bring the layout capacities of HTML to PDF?

Create your first PDF with React and Tailwind

The open-source library react-print-pdf brings a set of components and wrappers we can use to build beautiful PDFs in minutes.

Compile to HTML

The challenge with Tailwind is that it is a dynamic CSS framework. It relies on a JavaScript runtime to generate the final CSS. This is a problem for PDF generation, as we require a static file. We will first convert to static HTML, then to PDF.

For this, we will use the <Tailwind> component from react-print-pdf. This component will detect all the Tailwind classes and generate the final CSS. We can then use the compile function to convert the React tree to HTML.

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

const getHTML = async () => {
  return compile(
    <Tailwind>
      <h1 className="text-4xl font-bold">
        Invoice #123
        <Footnote>
          <p className="text-sm">This is a demo invoice</p>
        </Footnote>
      </h1>
    </Tailwind>
  );
};

When calling getHTML, we will get the following HTML:

<!doctype html>
<html>
  <head>
    <style>
      .text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
      }
      .font-bold {
        font-weight: 700;
      }
      .text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }
    </style>
  </head>
  <body>
    <h1 class="text-4xl font-bold">
      Invoice #123
      <div class="footnote">
        <p class="text-sm">This is a demo invoice</p>
      </div>
    </h1>
  </body>
</html>

Converting the HTML to PDF

There are several ways to convert this HTML to a PDF:

Use Fileforge as a client-side or server-side API, that will support all features such as headers, footers, and page numbers.
If on the client side, you can use react-to-print to use the browser's print dialog. This is cheap option but will not support advanced features and may introduce a lot of visual bugs.
Use a server-side headless browser such as puppeteer to convert the HTML to PDF. This is the most reliable free option, but requires a server. If you need to use it in production, we recommend you use Gotenberg.

Here is an example on how to convert the HTML to PDF using Fileforge:

import { FileforgeClient } from "@fileforge/client";
import { getHTML } from "./getHTML";
import fs from "fs";

const ff = new FileforgeClient({
  apiKey: process.env.FILEFORGE_API_KEY
});

const { file } = await ff.pdf.generate(await getHTML());

file.pipe(fs.createWriteStream("invoice.pdf");

That's it! You now have a beautiful PDF invoice generated from your React app. You can use most of Tailwind features as well as the components from react-print-pdf to create advanced layouts. Check out the documentation for more information.

Under the hood: dynamic styles

If you have made it this far, you may be wondering how the dynamic styles are converted to static CSS. Tailwind brings a specific set of challenges as it is a utility-first framework. Let's have a look at the usual Tailwind generation process:

Tailwind parses the files specified in your tailwind.config.js and generates a set of classes.
It then uses a PostCSS plugin to replace the classes in your CSS with the actual styles.
It then uses a JavaScript runtime to generate the final CSS, deduplicating and minifying it.

This works fine as a build tool, but bringing just-in-time compilation to PDF generation is a challenge. On serverless and browser environments, there is no file system and we need to detect dynamic classes in the React tree.

The approach that the Tailwind component uses is similar to the one in react-email. The Tailwind React component parses its children tags and detects the classes. It then uses a browserified version of Tailwind to generate the final CSS. This is then injected in the HTML. Not as easy as it sounds!

This blog post was originally posted on the Fileforge blog.

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

Titouan Launay — Thu, 22 Feb 2024 05:20:42 +0000

Why Use React to Generate Documents?

The React Ecosystem

React is the leading javascript framework for building user interfaces. It is widely used, has a large community and package ecosystem. While React focuses on interactive interfaces, it has recently expanded to server-side rendering and static site generation. While this is not its primary use case, the JSX templating syntax and the component-based architecture make it very well suited for static components, such as websites or documents.

Advantages of Using React for Document Generation

Using React to generate documents has several advantages:

Reusability: React components can be reused across different documents, making it easy to maintain a consistent look and feel.
Customization: React components can be easily customized with props, making it easy to create different versions of the same document.
Data-driven: React components can be data-driven, making it easy to generate documents from structured data.

How Does it Work?

The underlying principle of using React to generate documents is that React components can be rendered to HTML. This HTML can then be converted to a PDF or other document format using various methods, with respective trade-offs in terms of performance, flexibility and complexity.

Writing Your First Document with React

In this simple step by step guide, we will create a simple receipt using the library react-print-pdf. This library is created and maintained by Onedoc, and is designed to make it easy to generate PDFs from React components.

Local Environment Setup

For this tutorial, we will be using a Next.js project. You can use any other React project, but Next.js is a great choice for server-side rendering and static site generation.

Run these commands to get you started. They will create a new Next.js project and install the necessary dependencies:

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

When prompted, select to use TypeScript and Tailwind CSS.

Now that our project is set up, we can start creating our receipt. We will start the development server to see our changes live:

npm run dev

Let's also open this project in your favorite code editor. If you use VSCode, you can just run code . in the terminal.

Create an API Route

Next.js handles routes by creating a route.ts file in the app directory. The folders and subfolders in the app directory are automatically mapped to routes. We will create a new file app/api/receipt/routets to handle the receipt generation.

import { NextApiRequest } from "next";
import { NextResponse } from "next/server";

export const GET = async (req: NextApiRequest) => {
  const receipt = {
    id: 1,
    date: "2021-01-01",
    total: 100,
  };

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

Create the Receipt Component

With react-print-pdf we can easily compile React components to PDF. Let's create a new file called app/documents/Receipt.tsx:

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

Install the `react-print-pdf` Package

react-print-pdf allows several drivers, including Onedoc and PrinceXML. For this tutorial, we will use Onedoc as you can generate unlimited documents with a simple watermark.

First, you should head to the Onedoc app and create an account. Once you have an account, you will get your API key on your dashboard page.

Once you have your API key, you can add it to your .env file (or create a new one if it doesn't exist):

ONEDOC_API_KEY=your-api-key

This document is automatically loaded by Next.js and is available in the process.env object.

Now we can install the react-print-pdf and @onedoc/client packages.

npm i -s @onedoc/react-print @onedoc/client

Generate the PDF

Let's get back into our API route in app/api/receipt/route.ts and add the required code to build the PDF:

import { NextApiRequest } from "next";
import { NextResponse } from "next/server";
import { compile } from "@onedoc/react-print";
import { Receipt } from "@/documents/Receipt";
import { Onedoc } from "@onedoc/client";

const onedoc = new Onedoc(process.env.ONEDOC_API_KEY);

export const GET = async (req: NextApiRequest) => {
  const receipt = {
    id: 1,
    date: "2021-01-01",
    total: 100,
  };

  const { file, error } = await onedoc.render({
    html: await compile(Receipt()),
  });

  if (error) {
    return NextResponse.json({ error }, { status: 500 });
  }

  const pdfBuffer = Buffer.from(file);

  // Return the PDF
  return new Response(pdfBuffer, {
    headers: {
      "Content-Type": "application/pdf",
    },
  });
};

If you open your web browser and go to http://localhost:3000/api/receipt, you should see a PDF file! Your first document is now generated with React.

Using a Template

While our document generation is now working, the receipt is very basic. We can use a template to make it look more professional. Let's head to the example receipt template provided by react-print-pdf.

We can just copy and paste the template in our app/documents/Receipt.tsx file, making sure to add an export call. We can also tweak a few things to adapt it to our React structure.

import { Footnote, Tailwind } from "@onedoc/react-print";

export const Receipt = ({
  id,
  date,
  total,
}: {
  id: number;
  date: string;
  total: number;
}) => (
  <Tailwind>
    <div className="font-sans">
      <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]" />
      <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]" />
      <div className="bg-slate-100 -rotate-12 -z-10 absolute -left-[200em] -right-[200em] h-[100vh] top-[75vh]" />
      <main className="text-slate-800 pt-24 h-[90vh] flex flex-col">
        <svg
          version="1.1"
          id="Layer_1"
          xmlns="http://www.w3.org/2000/svg"
          x="0px"
          y="0px"
          viewBox="0 0 24 24"
          className="mx-auto w-32 mb-12 fill-blue-800"
        >
          <g>
            <path
              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
            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
            C21.46,17.45,22.45,15.01,22.45,12.12z"
            />
            <path d="M4.91,19.78c1.4,1.26,3.03,2.12,4.9,2.48v-6.32L4.91,19.78z" />
          </g>
        </svg>
        <h1 className="text-center text-2xl text-slate-800">
          Receipt from Acme Inc.
        </h1>
        <p className="pt-2 text-slate-400 text-center">Receipt #{id}</p>
        <div className="p-12 flex-grow bg-white rounded-2xl rounded-t-none shadow-xl shadow-black/10">
          <div className="flex justify-between gap-4">
            <div>
              <div className="text-sm text-gray-400 font-bold uppercase pb-1">
                Amount paid
              </div>
              <div className="flex gap-4 items-center">${total}</div>
            </div>
            <div>
              <div className="text-sm text-gray-400 font-bold uppercase pb-1">
                Date
              </div>
              <div className="flex gap-4 items-center">
                {new Date(date).toLocaleString()}
              </div>
            </div>
            <div>
              <div className="text-sm text-gray-400 font-bold uppercase pb-1">
                Payment method
              </div>
              <div className="flex gap-4 items-center font-mono">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="1200"
                  height="800"
                  version="1.1"
                  viewBox="-96 -98.908 832 593.448"
                  className="h-4"
                >
                  <path
                    fill="#ff5f00"
                    strokeWidth="5.494"
                    d="M224.833 42.298h190.416v311.005H224.833z"
                    display="inline"
                  ></path>
                  <path
                    fill="#eb001b"
                    strokeWidth="5.494"
                    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"
                  ></path>
                  <path
                    fill="#f79e1b"
                    strokeWidth="5.494"
                    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"
                    className="e"
                  ></path>
                </svg>
                0911
              </div>
            </div>
          </div>
          <h2 className="text-slate-600 font-bold text-sm py-6 pt-12 uppercase">
            Summary
          </h2>
          <div className="bg-slate-100 px-6 py-2 rounded-md">
            <table className="w-full">
              <tr className="border-b text-slate-500">
                <td className="py-4">Basic Pro Plan</td>
                <td className="py-4">$12.99</td>
              </tr>
              <tr className="font-bold text-slate-700">
                <td className="py-4">Amount charged</td>
                <td className="py-4">$12.99</td>
              </tr>
            </table>
          </div>
          <hr className="my-6" />
          This is some additional content to to inform you that Acme Inc. is a
          fake company and this is a fake receipt. This is just a demo to show
          you how you can create a beautiful receipt with Onedoc.{" "}
          <Footnote>
            Some additional conditions may apply. This template comes from the
            react-print library, available at https://react.onedoclabs.com/
          </Footnote>
        </div>
      </main>
    </div>
  </Tailwind>
);

Let's also update our API route to pass the receipt data to the component:

import { NextApiRequest, NextApiResponse } from "next";
import { NextResponse } from "next/server";
import { compile } from "@onedoc/react-print";
import { Receipt } from "@/documents/Receipt";
import { Onedoc } from "@onedoc/client";

const onedoc = new Onedoc(process.env.ONEDOC_API_KEY);

export const GET = async (req: NextApiRequest) => {
  const receipt = {
    id: 1,
    date: "2021-01-01",
    total: 100,
  };

  const { file, error } = await onedoc.render({
    html: await compile(Receipt(receipt)),
  });

  if (error) {
    return NextResponse.json({ error }, { status: 500 });
  }

  const pdfBuffer = Buffer.from(file);

  // Return the PDF
  return new Response(pdfBuffer, {
    headers: {
      "Content-Type": "application/pdf",
    },
  });
};

Let's refresh our web browser and go to http://localhost:3000/api/receipt. You should now see a beautiful receipt!

Considerations and Best Practices

Data-Driven Documents

In this tutorial, we hardcoded the receipt data. In a real-world application, you would likely fetch the receipt data from an API or a database. This is very easy to do with your backend framework of choice, and you can pass the data to the React component as props.

Performance Considerations

Generating PDFs can be a CPU-intensive task, especially for complex documents. You should consider offloading the PDF generation to a separate service or a background job to avoid blocking the main thread. Onedoc provides a REST API that you can use to generate PDFs in the background.

Improving your Documents

Using React makes it super easy to update and extend your documents. You can have a look at other examples using the react-print-pdf library to see how you can create more complex documents, such as invoices, reports, or even entire books.

This article was originally published on the Onedoc blog