Create PDF with a button

Showcase
1

Hello fellow doc makers,

Over the years it has been asked many times: a button function to create a PDF file. Coda has a native “print & pdf” function, but for occasional users it is hard to find and you have to define some parameters for every print job, which might be be easy for regulars, but not that easy for many of your users.

I have used this native print function a zillion times, but, apart from setting the options over and over, the real pain has been designing your pages (and sub-pages) to get some usable output. It can be done, but it is far from user friendly. My number one irritation has been the impossibility to define page breaks, but there are a few more.

For a while now a pack has been available to convert documents from one format to another: the CloudConvert pack, made by Codan Eric Koleda and free to use for everyone. And - CloudConvert allows you to set Page Breaks!!! (Yes, really).

There have been some other packs dedicated to creating nice PDF’s (like Documint), but they require quite a bit of setup for each print job. These packs allow you to tailor make invoices, certificates, vouchers and many more, but there is a bit of a learning curve and many times you don’t need the sophistication: you just want to print a page to PDF and you want it quick.

CloudConvert allows you to create print-job-buttons in a hurry. It is not complex to use, although there is a bit of figuring out. There are quite a few options, which look intimidating at first, but with a bit of guidance, it is useful for even very inexperienced makers. Makers that have been around for a while can do miracles with this pack.

In order to get your feet wet, I have created a sort of template document to help you implement print-buttons in your documents. This document is a work in progress, but even in it’s current unfinished state it will probably help a lot of people.

This CodeConvert pack offers many benefits for your documents. Many of you are probably using the GMail pack. But a known limitation of the GMail pack is the inability to include attachments. The workaround has been to include a link to a document stored on one of the coda servers, but the workaround has not included a simple way of creating this downloadable document. With smart use of the CloudConvert and the Gmail pack, you can create single button solutions to create a pdf and send an email with a link to this pdf. It is not exactly the same as an attachment, but it is close enough for most recipients of your emails. I will try to add a tutorial for mailing with pdf links in September - but with some perseverance, you will probably figure it out yourself.

The current document shows/explains creating PDF’s for standard print format, as well as label printing. It also gives some insight into printing (large) tables.

I am looking forward to your feedback on the document I am sharing below. This document has only one goal: helping makers create better documents. I will try to implement suggestions to better explain all the the possibilities and options.

There is one notable limitation using the CloudConvert pack: all the output uses one font only, regardless of the source. I hope this will be fixed soon.
EDIT: you can now (June 10, 2025) specify a font family!

Enjoy,
Greetings, Joost

15 Likes
2

what a wonderful contribution @joost_mineur , merci!

1 Like
3

Update: Eric was so kind to add another option to the CloudConvert pack. It is now possible to set a font-family (and some other options, like color and background color) for your output.

For me, this makes all the difference in the world - thank you @Eric_Koleda .

It will take some experimenting to figure out what is possible. You could make a table to setup styles you want to use for different outputs.

I adjusted my template doc to show that it works, but I will have to experiment to figure out what works best.

The template button is using this new option (first page) and the ‘label’ page (2nd page in the template doc) shows one way of setting up a small library of styles.

You can store your setup(s) in a coda Text control or in a table (text or canvas column).

If you copied my template doc before June 10, 2025 (11:00 AM Central Europe time of 5 AM CET USA) you have to make a fresh copy. The CloudConvert pack is automatically updated.

5 Likes
4

super!!! quick question: if i want arial, how do i write this?
“page_styles”, “font-family: Arial”
doesnt work.

1 Like
5

it worked now:
had to write: “*{ font-family: Arial; }”

2 Likes
6

without the asterix in it I suppose :wink:

had to write: “*{ font-family: Arial; }”

1 Like
7

This is indeed the correct syntax - with an asterisk

4 Likes
8

This is great!!! Finally a way of getting PDFs of Coda tables without weird line breaks/missing info. So much customizability too. Thank you!

1 Like
9

Fantastic contribution, thanks @joost_mineur!

Which endpoint is being used under the hood?

I’m checking the API documentation of ‘Convert files’ and ‘Capture websites’ but I don’t see any reference to ‘page_styles’.

Convert Files API | CloudConvert

Thanks!

Pablo

1 Like
10

This is a wonderful solution.
But please share ideas on how to display clickable icons on the page,
for example, social media icons with links in a PDF file.
Previously, before exporting to PDF, I used the following solution:

Hyperlink(“https://www.urlexample.com,”, Image(“https://urlexample.com/logo.png”))

1 Like
11

Hey @Pablo_DV ,

If your question was meant for me: I don’t know the answer. I experimented with the pack and I read the CloudConvert API documentation until I had it working in a useful way (for me).

Greetings,
Joost

1 Like
12

@Pablo_DV checked the formulas I used in the template and found a small mistake:

image
image786×560 71.4 KB

Thank you for letting me know about that!

The ‘variable’ should have been CCMarginRight.

The template code has been fixed.

2 Likes
13

Hello @Silver_Vatsel ,

This is the way this pack works. Perhaps @Eric_Koleda can ‘fix’ this in a future update of this pack.

Greetings,
Joost

1 Like
14

It was meant to you and @Roman_Vesely.

But what part of the documentation is relevant for the pack? For example, I didn’t find any reference to ‘page_styles’ or ‘font-family’, to name an example.

Thanks!

Pablo

15

Hey Pablo,

When using the formula in Coda, it gives some pointers to the possible options. It is a bit sketchy, but it got me started.

On the CloudConvert website the API documentation gives you some info too:

image
image1327×478 69.9 KB

page_styles you have to figure out yourself by trial and error and see what is supported. For me, it was good enough to be able to define Arial as a font family, but you can set color as well (limited to one setting for all of the output). It is plain vanilla html/css.

image
image797×1173 62.7 KB

When editing the code, you have to set the option name and the parameters. The option names get listed at the bottom (after a while - let the cursor just sit as shown in the red ellips). Some of the options give a hint of the possible settings, but it is not very clear. The ones that I figured out are selectable in the options lists I provided in the template.

When I have some time I will write them out in a supplement to my template doc.

Everyone, please share if you find out some option settings that I didn’t cover yet.

Greetings,
Joost

3 Likes
16

Really awesome that you realized that it was just vanilla css. Being able to change the font makes all the difference. Thank you!

I was playing around a bit with the options and line-height also works.
"* { font-family: Arial; line-height: 1.75; }"

To be completely satisfied, I would need to add a ‘margin-bottom’ to the paragraphs, but have not managed to make it work. I tried the following options:

"* { font-family: Arial; line-height: 1.75; } p { margin-bottom: 1em; }"
"* { font-family: Arial; line-height: 1.75; } p { margin-bottom: 16px; }"
"* { font-family: Arial; line-height: 1.75; } p { margin-bottom: 16; }"
"* { font-family: Arial; line-height: 1.75; } p { margin-bottom: 1.5rem; }"

Any ideas?

2 Likes
17

Hey @Pablo_DV ,

I am trying to add multiple html elements into the CSS style box, but that doesn’t seem to work. It seems like only the * element works and everything else is ignored.

Maybe the following one can help you a little bit (the value is a bit high (50pt) to make it clearly visible what is going on). The disadvantage is that is is applied to all elements, like within table rows and other items.

* { font-family: Arial ; 
   padding-bottom: 50pt;
  }

Greetings, Joost

2 Likes
18

Thanks @joost_mineur, I am very often adding tables to the pages I want to export, so unfortunately that doesn’t work for me. But it’s good that you confirmed that other elements are also ignored for you.

@Eric_Koleda first of all thank you for building the amazing CloudConvert pack. Do you know why only the * element works within page_styles?

1 Like
19

Hello @Pablo_DV ,

In my template doc I have a work-around for exporting tables (as text, rather than a table). It is a bit of work to set up, but you can use linefeed(false()) or linefeed(true()) between table rows. Since only one of them is affected by the padding-bottom parameter, you can still export tables and make them look nice.

But I hope @Eric_Koleda will be able to tweak the pack-code so other elements can be formatted as well.

Greetings,
Joost

4 Likes
20

Regarding page_styles, it’s a “synthetic” option I added that injects the provided CSS into the HTML before it is converted to PDF. That’s why you won’t find a reference to it in the CloudConvert documentation.

As for what you can style, there are two complications:

  1. The conversion from rich text to HTML is unpredictable - The Pack relies on Coda to perform this conversion, and there is no guarantee that a paragraph in the doc results in a <p> element in the HTML. It could be (and likely is) using styled <div> elements instead.
  2. CloudConvert doesn’t support all styling - From my brief testing CloudConvert doesn’t honor all CSS styling in the conversion. They don’t see to document what they do support, so it’s a bit of trial and error.
3 Likes