Using PagedJS and ReactJS
Create a nice PDF

Set up a react project #

First, let's make a new React project

npx create-react-app

Install the pagedjs npm module #

The pagedjs library is available through a script, a command line or a npm module. We'll focus on the npm module here but feel free to go check their documentation for more solutions.

Install the pagedjs npm module

npm install --save pagedjs

Now you are ready to add style for pagedjs to create your beautiful PDF.

Let's see how we could create a nice PDF from this React component

import './App.css';

function App() {
  return (
    <div className="App">
      <section className="chapter">
        <h2>About</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Duis nibh tortor</p>
      </section>

      <section className="chapter">
        <h2>Chapter 1</h2>
        <p>Lorem ipsum dolor sit amet</p>
      </section>

      <section className="chapter">
        <h2>Chapter 2</h2>
        <p>consectetur adipiscing elit</p>
      </section>

      <section className="chapter">
        <h2>Chapter 3</h2>
        <p>Duis nibh tortor, pellentesque eu suscipit vel</p>
      </section>
    </div>
  );
}

export default App;

The App.css file looks like the following

.App {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 2rem 4rem;
  background-color: #282c34;
}

h2, p {
  color: white;
}

Let's start by defining the size of our pages and the margins. These rules must be added in the public/index.html file.

@page {
  size: A4;
  margin: 20mm 15mm 26mm 15mm;
}

Let's make every start of a new chapter a new page.

h2 {
  break-before: page;
}

Execute pagedjs script when the page loads adding this hook to your component.

useEffect(() => {
  let paged = new Previewer();
  let DOMContent = document.querySelector('App');

  paged.preview(DOMContent, ['./App.css',], document.body).then((flow) => {
    console.log('Rendered', flow.total, 'pages.');
  });
}, []);

Now you'll see, the preview of your PDF directly into the browser

Display custom content through "named strings" #

What if you want to display the name of the chapter you are in at the bottom of the PDF ?

Let's add the following css to the index.html file.

@page {
  @bottom-center { content: string(title); }
}

.chapter > h2 {
  string-set: title content(text);
}

The first block, is used to tell pagedjs to add content in the margin of the PDF, at the bottom center position (check all the positions available).

The second block, is used to make available the title of the chapter to pagedjs, we use the named strings feature from pagedjs to give the content of the h2 tag from every chapter into the named string "title".

Display custom content through HTML attributes #

It is also possible to display content in the PDF declaring custom attributes into the HTML.

First, to every section tag in your component, add a custom attribute data-* where you replace * with whatever name you want to give to your content.

For example adding a data-reference to every chapter.

<section className="chapter" data-reference="001">
  <h2>Chapter 1</h2>
  <p>Lorem ipsum dolor sit amet</p>
</section>

<section className="chapter" data-reference="002">
  <h2>Chapter 2</h2>
  <p>consectetur adipiscing elit</p>
</section>

<section className="chapter" data-reference="003">
  <h2>Chapter 3</h2>
  <p>Duis nibh tortor, pellentesque eu suscipit vel</p>
</section>

Then, add the following to your index.html.

@page {
  @right-middle { content: string(ref); }
}
.chapter {
  string-set: ref attr(data-reference);
}

The first block, is used to tell pagedjs where to display the content (just as before, you can check all the positions available).

The second block, is used to make available the reference to pagedjs, we use the generated text feature from pagedjs.

What's next #

Be sure to check the pagedjs documentation to see all the features available and how you can use them to render beautiful PDFs !

Other Paged.js articles on Doppio #

Using Paged.js - Installation

Paged.js - Installation with React

Paged.js - Installation with Vue 3

Few tips with Paged.js )