Help

Re: Base -> HTML -> PDF

2011 0
cancel
Showing results for 
Search instead for 
Did you mean: 

Base -> HTML -> PDF

This “show and tell” is based on a project I worked on for the Computer Museum of America (see this post: TimeLine of Computer History).

Airtable Pro plans can make use of the Page Designer block, but if you don’t have a Pro plan or want something that is a bit more customisable, then this might work for you.

Really, this is about outputting base data into a PDF, but uses HTML as an interim step. The benefit of HTML is that is hugely customisable and, by using CSS, you can pick from a huge range of colours, fonts, layouts and so on.

Possible use cases for this might include product catalogues, invoices, brochures, data reports and so on. Or even large format wall displays 100ft long :slightly_smiling_face:

The code I used in the CMOA project was very specific to that piece of work, so this is a more generic way to get similar results, with a number of code improvements added along the way.

You can find the code in this repo:

Here, you can find the index.html file which pulls the Airtable data via the API and renders it in a web page; you can also find an example PDF output, based on the base I describe below.

My base for this example looks like this:

base.png

To make your base work with the script that generates the HTML, you need to follow a similar field convention - each data column is paired with a styling column. So, “Name” is paired with “NameStyling”, “InOffice” is paired with “InOfficeStyling” and so on. The “styling” columns takes HTML element types values - h1, h2, h3, p etc. In HTML images need a source attribute and so are treated a bit differently in the script, but if you have an image attachment, put the HTML tag “img” in its paired styling column.

Customisation

The HTML file needs some customisation to get it to work with your base:

Title

title: 'The Presidents of Mount Rushmore',

The title appears at the top of the web page, edit it to match your report, catalogue.

Base Config

var app_id = "YOUR APP ID HERE"; var api_key = "YOUR API KEY HERE"; var table = 'YOUR TABLE NAME HERE'; var view = 'YOUR VIEW NAME HERE';

Edit the Base configuration parameters to match your base.

Record Fields

Record fields is an array which tells the script which data fields should be displayed in the HTML & PDF files. It assumes there is a “styling” field to go with each data field

var record_fields = ['Name', 'Image', 'InOffice', 'Paragraph1']

Edit the names of the fields in array to match those in your base.

Layout

The layout in this example file is that each field appears in a full-width div, with the order of elements within a record being defined by the order of the elements in the Record Fields array. See image below where the divs have been coloured to illustrate.

divs.png

Obviously, other layouts could be defined and the containers for each data element need not be full width. I’ve got some simple CSS in the script that defines image widths, font sizes and a few other things.

For the data and layout I’ve shown here, I’ve also added a page break after every fourth record so that the records sit nicely on the finished PDF (this would probably need to be changed for you depending upon your data and desired layout).

Running the script

I run the script from Atom (my code editor) using a “live server” package, which provides a local development web server. However, if you don’t have this sort of environment (or similar) set up, then just edit the file with a text editor and double click it to open it in a browser.

Once your data is rendered on the web page page, select “Print” from your browser menu and select save as PDF.

A few thoughts…

  • I’m sure I’ve missed something out here, so feel free to post a question if the script isn’t working for you
  • If you’re not a coder, I would still encourage you to have a go at this if it is of interest to you - I’ve tried to keep the things you need to change to a minimum. Just edit carefully and you should be OK.
  • If you are a coder…feel free to let me know of any improvements to the code :slightly_smiling_face:

This is just one layout and it won’t suit every use case, but if you have (or know someone who has) modest HTML skills, you should be able to get your Airtable data into a layout that’s right for you. If anyone is interested in a custom layout for their base/use case, happy to talk to you about undertaking this as a project - DM me for more details.

JB

7 Replies 7

Yep - this is a good choice. And it looks like you’re also using Vue (another good choice). And HTML is an ideal pathway for data to flow into PDF documents or any sort of reporting process for the reasons you cite.

I take a little different architectural approach, but I do use HTML to get there.

I start with server-side code instead of a web browser app. This allows me to not only control the precision of the data and layout but also makes it possible to automate the process - i.e., the PDFs can regenerate as they need.

The HTML is “constructed” at the server and then transformed into a PDF document without the need for rendering. This has performance advantages when you have a thousand PDFs to build in a few minutes. But most important I don’t want any browser-specific issues to creep in. The disadvantage is that I don’t get to use Vue (sadly). I must create everything using the sanitized CSS available. Perhaps there’s a way to introduce Vue into that process, but I never considered it. Hmmm…

Very cool approach.

Hi @Bill.French - yes, uses Vue JS

I should also have mentioned:

  • You could easily use this approach to construct a more complex document, e.g. Front Page, Main Body (likely lots of repeating sections, e.g. presidents or products), Back Page
  • This approach isn’t suitable for displaying base data on a website. All of the code is client-side, so if the web page was public, viewers would be able to inspect the page and could see API keys.

Yeah, I saw that, but then read your comments closely and realized this was not an issue since it’s designed to run in a trusted environment. Enterprising users of this code could move it to a public host such as NodeJS or Firebase and push the credentials into more secure accessibility.

So, for someone who wanted to create reports in a closed and controlled manner where automation is not required, this could be an ideal pathway. But, they would also not be restricted from adding automated processes at the client using timing loops, etc.

Gosia_Mitros
4 - Data Explorer
4 - Data Explorer

Hi @JonathanBowen. This looks like it would be very useful for a project I’m working on. If the code still works, is there any chance you could share it again? Thank you :slightly_smiling_face:

Hi @Gosia_Mitros - haven’t looked at this in a while, but try the link above again - it should be visible now

@JonathanBowen Wow, thank you very much! I’ll check it out.