The Crazy Problems with Creating PDFs on the Frontend

I want to share my experience of building PDF generators. PDF export from HTML pages was always a big problem. A few times we were stuck for weeks while building food tech projects. Being aware that it might cause a problem, I decided to separate our functionality and be able to play with pdf without caring about everything else.

First Story

The first time where I was involved in PDF was an old PHP5 project my company was assigned to our team to rebuild everything from scratch and reduce 10 years of tech debt.

This project was generated reports based on static data, that was acquired from business owners and top managers. It was a survey, where top-level managers can tell about problems they face. The questionnaire was built that way to provoke to reveal the truth, even in complex situations. After that, information gets analyzed and returned with advice on how this can be solved. With a list of steps, that the company should do and overgrow their problems.

Later that data was merged and stored in a database pool of data combined by the same industry.

And after processing the survey you can review industry reports and make long-term predictions.

The first version of that report export was created in 2005. At that time, web-based software was simple and has very limited functionality (weak).

Previous reports were saved in the database as files(sic!). When I received all this data and files with results combined weight was about 1 Gb. That was a huge amount of valuable data at that time. Just try to remember what the internet and phones were like in 2005. ;)

So I know a lot about problems with PDF files. And this article might help you if you want to generate custom invoices, reports, meal plans, and food information, like recipes.

When I realized that we had a huge demand for building PDF export tools, I was ready to jump into it.

Before starting to code, I prepared a list of libraries/npm packages that do PDF documents. I’m thankful to God for those tools from this list. They are evolving and becoming better and better.

I tried different packages, some of them I just reviewed. A lot of them sound promising but didn't meet our needs.

I picked React-PDF. The creator of this package uses an interesting approach, has a good community, and heavily building it.

https://react-pdf.org/

You can read more about ReactPDF v2 here: https://react-pdf.org/blog/announcing-react-pdf-v2

Dev community that uses this package provides some financial support. I'll put a link here - if you want to become a supporter - It'll be awesome.

Open Collective maintains all finances behind. If this article will help to raise additional support = I will be happy. Because it's a good open-sourced library.

link to GitHub of my source

Second Story

At one of the food tech startups, all data was stored in WordPress database and used custom plugins for displaying recipes and ingredients.

The plugin didn’t provide all functionality that we want to give to our users. Our goal was to extend the calculations, based on user preferences. And we don’t have any real opportunity (not joking) to make calculations on the backend side. So we need to joggle with Javascript before we display data at the frontend side.

To make it work as we need to do strange moves: we must generate an HTML page, using pure data from the database.

Then we start our DOM manipulations:

• we hide the main content

• make calculations

• remove some data

• merge some "table cells".

  
  

And only after these manipulations, we were able to finish this HTML page and send it to print from the browser method.

Third story

At the next food project, my partner was responsible for coding PDF export. He is an experienced developer but was going crazy while coding this functionality. During the debugging process, it displays strings like 'hello', '123'...

He was swearing a lot because let's face it - simple things can generate a lot of trouble.

He was stuck for a few days with displaying images in PDF documents. Images can be uploaded in different sizes, different modes: landscape or portrait; and when you display a meal image -> it cannot be shrunk, because it will make a meal looks ugly.

At some point, he sent me an exported document. Inside this document, I saw a picture of an old man with flowers on his head. It was a sign that he completed this part of a project :)

So when someone is working or testing PDF reports -> you can see that he has a lot of PDF docs, downloaded from the web project.

So we were building our module, highly connected to react-pdf. It's far away from ideal. But it worked and could be used by other developers and save time. If you like what we do -> feel free to star our repository on Github.

As proof we're launching this repository, to show how it works and looks. https://github.com/GroceriStar/react-print-pdf

Not sure when it will be ready, but can be a starting point.

Styles look ugly right now, but it's easy to enable styles. My main goal was to be able to adjust things as necessary.

Screenshots:

First published here