# 🎓 Create Unlimited FREE PDF's (No Integrations/Fees) **URL:** \ **Category:** Community Resources\ **Tags:** tutorial\ **Created:** [May 24, 2023, 10:59pm UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116 "2023-05-24T22:59:16Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\ **Post date:** [May 24, 2023, 10:59pm UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/1 "2023-05-24T22:59:16Z")
[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/d/8d3037985cf9e90a2369613f0d456a779bdbd0a7.jpeg "🎓 Glide Tutorial - Create Unlimited FREE PDF's") ](https://www.youtube.com/watch?v=KH5bQ2NKtZ8) **What’s going on Gliders!** Here’s a simple, straightforward way of creating unlimited free PDF’s in Glide without other services or integrations! **Step 1: Setup The Table** 1. Add a “Template” column in your table and name it “PDF/Template”. 2. Paste some HTML as the Template. 3. Add some “Replacements” to make it dynamic. 4. Add a “Construct URL” column in your table and name it “PDF/Link”. 5. Add “Https” as the Protocol. 6. Add “[html2pdf.loqode.repl.co](http://html2pdf.loqode.repl.co)” as the Host. 7. Add 1 Query Parameter. 8. Type “PDF” as a Parameter name and select the PDF/Template column as the custom value. **Step 2: Create The “Generate PDF” Button** 1. Head to the layout screen. 2. Create a button, select “Open Link” as the action, then add the “PDF/Link” as the URL. 3. Click the button… And magic happens! This method is totally free, and while it doesn’t automatically upload the PDF to your Glide app. it allows you or your clients to create as many PDF’s as you want! The template is 100% customisable, and you can even use Tailwind CSS to style the template if it tickles your fancy. If anyone ever needs a hand with getting this up & running, or anything else Glide related, don’t hesitate to reach out or join my [free Glide community.](https://www.skool.com/loqode) ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [May 24, 2023, 11:55pm UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/2 "2023-05-24T23:55:35Z")
What software do you use for screencasts. I like the transitions when moving around the screen. ---
**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\ **Post date:** [May 25, 2023, 12:09am UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/3 "2023-05-25T00:09:23Z")
It’s called Screen Studio. Slower than other tools (like Loom) in many ways, but if you can deal with slow export times and don’t mind uploading to Youtube/Loom before sharing it’s pretty neat! ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [May 25, 2023, 12:31am UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/4 "2023-05-25T00:31:51Z")
Interesting, thanks for sharing! ---
**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\ **Post date:** [May 25, 2023, 12:36am UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/5 "2023-05-25T00:36:36Z")
My pleasure! Not a _fully_ automated way to generate PDF’s, but only takes a second or two to download and upload/send/attach the PDF from there… ---
**Author:** ![garha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/garha/32/59551_2.png) [@garha](https://community.glideapps.com/u/garha)\ **Post date:** [May 26, 2023, 2:19pm UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/6 "2023-05-26T14:19:17Z")
Hi in my app, dont work, the page dont load. i´ll send you my code html? ---
**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\ **Post date:** [May 26, 2023, 9:01pm UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/7 "2023-05-26T21:01:11Z")
Sure! Send it through. Everything should be working 🧐 ---
**Author:** ![garha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/garha/32/59551_2.png) [@garha](https://community.glideapps.com/u/garha)\ **Post date:** [May 28, 2023, 9:43am UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/8 "2023-05-28T09:43:57Z")
I’m sorry it worked now. I had put the complete url so the https had been duplicated in the link column. Thanks so much for sharing this content! ---
**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\ **Post date:** [May 28, 2023, 11:59am UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/9 "2023-05-28T11:59:33Z")
Hello! Does this work converting a webpage into a PDF? ---
**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\ **Post date:** [May 28, 2023, 12:46pm UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/10 "2023-05-28T12:46:28Z")
You’re very welcome!! Glad you sorted it out 👍 ---
**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\ **Post date:** [May 28, 2023, 12:51pm UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/11 "2023-05-28T12:51:56Z")
That’s the basic premise! It takes the HTML you use in your PDF template, renders it as a webpage, then triggers the Print/Save As PDF functionality of your browser. Quite versatile and lightweight 😁 ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [May 28, 2023, 5:43pm UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/12 "2023-05-28T17:43:08Z")
I like it…might use it for personal projects. I’m just afraid that this will break /go unmaintained at some point, so I probably won’t use it for client work unless I’m mistaken. Really need a way to get permalinks for PDFs this easily. ---
**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\ **Post date:** [May 28, 2023, 6:01pm UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/13 "2023-05-28T18:01:37Z")
Hola @Loqode May you show me a short/simple HTML code to use it as template to test your nice tool? I have some problems to replicate your steps and can’t get it to work well (not your fault… I’m sure it’s me 🥴) In the end, I’d like to replicate this [HTML page](https://docraptor.com/templates/invoice/invoice.USLetter.html) and get a PDF file later (it’s just an example) but I can’t find the flaw in my setup. Thanks! ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [May 28, 2023, 6:04pm UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/14 "2023-05-28T18:04:25Z")
I also imagine that if you want dynamic line items, tables, sections, etc. you’d have to craft all of that in some sort of template/join list column combination? ---
**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\ **Post date:** [May 28, 2023, 11:33pm UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/15 "2023-05-28T23:33:53Z")
Totally get where you’re coming from! I built this for a client so I have no plans of ever taking the app down, but if you want I can send over the source code so you can create your own free instance of the app? That way you can safely deploy it for any of your client work 👍 As for the dynamic line items, you’re spot on. Two separate Tables as follows: **Line Items:** Each individual Line Item has a **Template Column** (e.g. “HTML”) where the info is dynamic. ```auto // For example:
  • ITEM - PRICE
    • ``` **Invoice** Then the Invoice table has a **Relation Column** (Pulling in all the related Line Items), a **Joined List Column** (joining all of Line Item’s “HTML” columns, separated by new line or nothing (no commas), and a **Template Column** that pulls info from current invoice as well as the joined HTML from related Line Items. ```auto // For example, the Template Column would look something like:

    NAME

    // The final HTML (used to create the PDF) will look something like:

    🎓 Loqode Students

    ``` And the beauty is that since it’s all HTML based you can make the PDF as complex or as simple as you want, and it stays dynamic as the related Line Items or Invoice is updated/edited. I’m filming a follow-up video explaining all of this and will post shortly 😁 ---
    **Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\ **Post date:** [May 28, 2023, 11:42pm UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/16 "2023-05-28T23:42:48Z")
    You can **definitely** create the invoice you linked! It will take a little knowledge of HTML to get it done, but it’s 100% possible. An example of the simplest HTML you could try is: ```auto // Most Basic

    Invoice #123

    // Or a basic table:
    Name Email
    Marco Volpato teacher@loqode.com
    ``` The table will look as follows in the pdf: | Name | Email | | --- | --- | | Marco Volpato | teacher@loqode.com | And you can then continue to build it out from there 👍 ---
    **Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\ **Post date:** [May 29, 2023, 2:17am UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/17 "2023-05-29T02:17:28Z")
    Thanks Marco! I found my error, your “PDF” parameter is case sensitive 🤯 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/6/4659eac6c03e2b101843bda366f1672dc58385d9.png) and now my [example](https://html2pdf.loqode.repl.co/?PDF=%3Cstyle%3E%0A%2F*%20%0AImport%20the%20desired%20font%20from%20Google%20fonts.%20%0A*%2F%0A%40import%20url(%27https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DMontserrat%3Awght%40400%3B600%3B700%26display%3Dswap%27)%3B%0A%0A%2F*%20%0ADefine%20all%20colors%20used%20in%20this%20template%20%0A*%2F%0A%3Aroot%7B%0A%20%20--font-color%3A%20black%3B%0A%20%20--highlight-color%3A%20%2360D0E4%3B%0A%20%20--header-bg-color%3A%20%23B8E6F1%3B%0A%20%20--footer-bg-color%3A%20%23BFC0C3%3B%0A%20%20--table-row-separator-color%3A%20%23BFC0C3%3B%0A%7D%0A%0A%40page%7B%0A%20%20%2F*%0A%20%20This%20CSS%20highlights%20how%20page%20sizes%2C%20margins%2C%20and%20margin%20boxes%20are%20set.%0A%20%20https%3A%2F%2Fdocraptor.com%2Fdocumentation%2Farticle%2F1067959-size-dimensions-orientation%0A%0A%20%20Within%20the%20page%20margin%20boxes%20content%20from%20running%20elements%20is%20used%20instead%20of%20a%20%0A%20%20standard%20content%20string.%20The%20name%20which%20is%20passed%20in%20the%20element()%20function%20can%0A%20%20be%20found%20in%20the%20CSS%20code%20below%20in%20a%20position%20property%20and%20is%20defined%20there%20by%20%0A%20%20the%20running()%20function.%0A%20%20*%2F%0A%20%20size%3AUS-Letter%3B%0A%20%20margin%3A8cm%200%203cm%200%3B%0A%0A%20%20%40top-left%7B%0A%20%20%09content%3Aelement(header)%3B%0A%20%20%7D%0A%0A%20%20%40bottom-left%7B%0A%20%20%09content%3Aelement(footer)%3B%0A%20%20%7D%0A%7D%0A%0A%2F*%20%0AThe%20body%20itself%20has%20no%20margin%20but%20a%20padding%20top%20%26%20bottom%201cm%20and%20left%20%26%20right%202cm.%0AAdditionally%20the%20default%20font%20family%2C%20size%20and%20color%20for%20the%20document%20is%20defined%0Ahere.%0A*%2F%0Abody%7B%0A%20%20margin%3A0%3B%0A%20%20padding%3A1cm%202cm%3B%0A%20%20color%3Avar(--font-color)%3B%0A%20%20font-family%3A%20%27Montserrat%27%2C%20sans-serif%3B%0A%20%20font-size%3A10pt%3B%0A%7D%0A%0A%2F*%0AThe%20links%20in%20the%20document%20should%20not%20be%20highlighted%20by%20an%20different%20color%20and%20underline%0Ainstead%20we%20use%20the%20color%20value%20inherit%20to%20get%20the%20current%20texts%20color.%0A*%2F%0Aa%7B%0A%20%20color%3Ainherit%3B%0A%20%20text-decoration%3Anone%3B%0A%7D%0A%0A%2F*%0AFor%20the%20dividers%20in%20the%20document%20we%20use%20an%20HR%20element%20with%20a%20margin%20top%20and%20bottom%20%0Aof%201cm%2C%20no%20height%20and%20only%20a%20border%20top%20of%20one%20millimeter.%0A*%2F%0Ahr%7B%0A%20%20margin%3A1cm%200%3B%0A%20%20height%3A0%3B%0A%20%20border%3A0%3B%0A%20%20border-top%3A1mm%20solid%20var(--highlight-color)%3B%0A%7D%0A%0A%2F*%0AThe%20page%20header%20in%20our%20document%20uses%20the%20HTML%20HEADER%20element%2C%20we%20define%20a%20height%20%0Aof%208cm%20matching%20the%20margin%20top%20of%20the%20page%20(see%20%40page%20rule)%20and%20a%20padding%20left%0Aand%20right%20of%202cm.%20We%20did%20not%20give%20the%20page%20itself%20a%20margin%20of%202cm%20to%20ensure%20that%0Athe%20background%20color%20goes%20to%20the%20edges%20of%20the%20document.%0A%0AAs%20mentioned%20above%20in%20the%20comment%20for%20the%20%40page%20the%20position%20property%20with%20the%20%0Avalue%20running(header)%20makes%20this%20HTML%20element%20float%20into%20the%20top%20left%20page%20margin%0Abox.%20This%20page%20margin%20box%20repeats%20on%20every%20page%20in%20case%20we%20would%20have%20a%20multi-page%0Ainvoice.%0A*%2F%0Aheader%7B%0A%20%20height%3A8cm%3B%0A%20%20padding%3A0%202cm%3B%0A%20%20position%3Arunning(header)%3B%0A%20%20background-color%3Avar(--header-bg-color)%3B%0A%7D%0A%0A%2F*%0AFor%20the%20different%20sections%20in%20the%20header%20we%20use%20some%20flexbox%20and%20keep%20space%20between%0Awith%20the%20justify-content%20property.%0A*%2F%0Aheader%20.headerSection%7B%0A%20%20display%3Aflex%3B%0A%20%20justify-content%3Aspace-between%3B%0A%7D%0A%0A%2F*%0ATo%20move%20the%20first%20sections%20a%20little%20down%20and%20have%20more%20space%20between%20the%20top%20of%20%0Athe%20document%20and%20the%20logo%2Fcompany%20name%20we%20give%20the%20section%20a%20padding%20top%20of%205mm.%0A*%2F%0Aheader%20.headerSection%3Afirst-child%7B%0A%20%20padding-top%3A.5cm%3B%0A%7D%0A%0A%2F*%0ASimilar%20we%20keep%20some%20space%20at%20the%20bottom%20of%20the%20header%20with%20the%20padding-bottom%0Aproperty.%0A*%2F%0Aheader%20.headerSection%3Alast-child%7B%0A%20%20padding-bottom%3A.5cm%3B%0A%7D%0A%0A%2F*%0AWithin%20the%20header%20sections%20we%20have%20defined%20two%20DIV%20elements%2C%20and%20the%20last%20one%20in%0Aeach%20headerSection%20element%20should%20only%20take%2035%25%20of%20the%20headers%20width.%0A*%2F%0Aheader%20.headerSection%20div%3Alast-child%7B%0A%20%20width%3A35%25%3B%0A%7D%0A%0A%2F*%0AFor%20the%20logo%2C%20where%20we%20use%20an%20SVG%20image%20and%20the%20company%20text%20we%20also%20use%20flexbox%0Ato%20align%20them%20correctly.%0A*%2F%0Aheader%20.logoAndName%7B%0A%20%20display%3Aflex%3B%0A%20%20align-items%3Acenter%3B%0A%20%20justify-content%3Aspace-between%3B%0A%7D%0A%0A%2F*%0AThe%20SVG%20gets%20set%20to%20a%20fixed%20size%20and%20get%205mm%20margin%20right%20to%20keep%20some%20distance%0Ato%20the%20company%20name.%0A*%2F%0Aheader%20.logoAndName%20svg%7B%0A%20%20width%3A1.5cm%3B%0A%20%20height%3A1.5cm%3B%0A%20%20margin-right%3A.5cm%3B%0A%7D%0A%0A%2F*%0ATo%20ensure%20the%20top%20right%20section%20%22Invoice%20%23100%22%20starts%20on%20the%20same%20level%20as%20the%20Logo%20%26%0AName%20we%20set%20a%20padding%20top%20of%201cm%20for%20this%20element.%0A*%2F%0Aheader%20.headerSection%20.invoiceDetails%7B%0A%20%20padding-top%3A.5cm%3B%0A%7D%0A%0A%2F*%0AThe%20H3%20element%20%22ISSUED%20TO%22%20gets%20another%2025mm%20margin%20to%20the%20right%20to%20keep%20some%20%0Aspace%20between%20this%20header%20and%20the%20client%27s%20address.%0AAdditionally%20this%20header%20text%20gets%20the%20hightlight%20color%20as%20font%20color.%0A*%2F%0Aheader%20.headerSection%20h3%7B%0A%20%20margin%3A0%20.75cm%200%200%3B%0A%20%20color%3Avar(--highlight-color)%3B%0A%7D%0A%0A%2F*%0APut%20some%20margin%20between%20the%20%22DUE%20DATE%22%20and%20%22AMOUNT%22%20headings.%0A*%2F%0Aheader%20.headerSection%20div%3Alast-of-type%20h3%3Alast-of-type%7B%0A%20%20margin-top%3A.5cm%3B%0A%7D%0A%0A%2F*%0AThe%20paragraphs%20within%20the%20header%20sections%20DIV%20elements%20get%20a%20small%202px%20margin%20top%0Ato%20ensure%20its%20in%20line%20with%20the%20%22ISSUED%20TO%22%20header%20text.%0A*%2F%0Aheader%20.headerSection%20div%20p%7B%0A%20%20margin-top%3A2px%3B%0A%7D%0A%0A%2F*%0AAll%20header%20elements%20and%20paragraphs%20within%20the%20HTML%20HEADER%20tag%20get%20a%20margin%20of%200.%0A*%2F%0Aheader%20h1%2C%0Aheader%20h2%2C%0Aheader%20h3%2C%0Aheader%20p%7B%0A%20%20margin%3A0%3B%0A%7D%0A%0A%2F*%0AThe%20invoice%20details%20should%20not%20be%20uppercase%20and%20also%20be%20aligned%20to%20the%20right.%0A*%2F%0Aheader%20.invoiceDetails%2C%0Aheader%20.invoiceDetails%20h2%7B%0A%20%20text-align%3Aright%3B%0A%20%20font-size%3A1em%3B%0A%20%20text-transform%3Anone%3B%0A%7D%0A%0A%2F*%0AHeading%20of%20level%202%20and%203%20(%22DUE%20DATE%22%2C%20%22AMOUNT%22%20and%20%22INVOICE%20TO%22)%20need%20to%20be%20written%20in%20%0Auppercase%2C%20so%20we%20use%20the%20text-transform%20property%20for%20that.%0A*%2F%0Aheader%20h2%2C%0Aheader%20h3%7B%0A%20%20text-transform%3Auppercase%3B%0A%7D%0A%0A%2F*%0AThe%20divider%20in%20the%20HEADER%20element%20gets%20a%20slightly%20different%20margin%20than%20the%20%0Astandard%20dividers.%0A*%2F%0Aheader%20hr%7B%0A%20%20margin%3A1cm%200%20.5cm%200%3B%0A%7D%0A%0A%2F*%0AOur%20main%20content%20is%20all%20within%20the%20HTML%20MAIN%20element.%20In%20this%20template%20this%20are%0Atwo%20tables.%20The%20one%20which%20lists%20all%20items%20and%20the%20table%20which%20shows%20us%20the%20%0Asubtotal%2C%20tax%20and%20total%20amount.%0A%0ABoth%20tables%20get%20the%20full%20width%20and%20collapse%20the%20border.%0A*%2F%0Amain%20table%7B%0A%20%20width%3A100%25%3B%0A%20%20border-collapse%3Acollapse%3B%0A%7D%0A%0A%2F*%0AWe%20put%20the%20first%20tables%20headers%20in%20a%20THEAD%20element%2C%20this%20way%20they%20repeat%20on%20the%0Anext%20page%20if%20our%20table%20overflows%20to%20multiple%20pages.%0A%0AThe%20text%20color%20gets%20set%20to%20the%20highlight%20color.%0A*%2F%0Amain%20table%20thead%20th%7B%0A%20%20height%3A1cm%3B%0A%20%20color%3Avar(--highlight-color)%3B%0A%7D%0A%0A%2F*%0AFor%20the%20last%20three%20columns%20we%20set%20a%20fixed%20width%20of%202.5cm%2C%20so%20if%20we%20would%20change%0Athe%20documents%20size%20only%20the%20first%20column%20with%20the%20item%20name%20and%20description%20grows.%0A*%2F%0Amain%20table%20thead%20th%3Anth-of-type(2)%2C%0Amain%20table%20thead%20th%3Anth-of-type(3)%2C%0Amain%20table%20thead%20th%3Alast-of-type%7B%0A%20%20width%3A2.5cm%3B%0A%7D%0A%0A%2F*%0AThe%20items%20itself%20are%20all%20with%20the%20TBODY%20element%2C%20each%20cell%20gets%20a%20padding%20top%0Aand%20bottom%20of%202mm.%0A*%2F%0Amain%20table%20tbody%20td%7B%0A%20%20padding%3A2mm%200%3B%0A%7D%0A%0A%2F*%0AThe%20cells%20in%20the%20last%20column%20(in%20this%20template%20the%20column%20containing%20the%20total)%0Aget%20a%20text%20align%20right%20so%20the%20text%20is%20at%20the%20end%20of%20the%20table.%0A*%2F%0Amain%20table%20thead%20th%3Alast-of-type%2C%0Amain%20table%20tbody%20td%3Alast-of-type%7B%0A%20%20text-align%3Aright%3B%0A%7D%0A%0A%2F*%0ABy%20default%20text%20within%20TH%20elements%20is%20aligned%20in%20the%20center%2C%20we%20do%20not%20want%20that%0Aso%20we%20overwrite%20it%20with%20an%20left%20alignment.%0A*%2F%0Amain%20table%20th%7B%0A%20%20text-align%3Aleft%3B%0A%7D%0A%0A%2F*%0AThe%20summary%20table%2C%20so%20the%20table%20containing%20the%20subtotal%2C%20tax%20and%20total%20amount%20%0Agets%20a%20width%20of%2040%25%20%2B%202cm.%20The%20plus%202cm%20is%20added%20because%20our%20body%20has%20a%202cm%20padding%0Abut%20we%20want%20our%20highlight%20color%20for%20the%20total%20row%20to%20go%20to%20the%20edge%20of%20the%20document.%0A%0ATo%20move%20the%20table%20to%20the%20right%20side%20we%20simply%20set%20a%20margin-left%20of%2060%25.%0A*%2F%0Amain%20table.summary%7B%0A%20%20width%3Acalc(40%25%20%2B%202cm)%3B%0A%20%20margin-left%3A60%25%3B%0A%20%20margin-top%3A.5cm%3B%0A%7D%0A%0A%2F*%0AThe%20row%20containing%20the%20total%20amount%20gets%20its%20background%20color%20set%20to%20the%20highlight%20%0Acolor%20and%20the%20font%20weight%20to%20bold.%0A*%2F%0Amain%20table.summary%20tr.total%7B%0A%20%20font-weight%3Abold%3B%0A%20%20background-color%3Avar(--highlight-color)%3B%0A%7D%0A%0A%2F*%0AThe%20TH%20elements%20of%20the%20summary%20table%20are%20not%20on%20top%20but%20the%20cells%20on%20the%20left%20side%0Athese%20get%20a%20padding%20left%20of%201cm%20to%20give%20the%20highlight%20color%20some%20space.%0A*%2F%0Amain%20table.summary%20th%7B%0A%20%20padding%3A4mm%200%204mm%201cm%3B%0A%7D%0A%0A%2F*%0AAs%20only%20the%20highlight%20background%20color%20should%20go%20to%20the%20edge%20of%20the%20document%0Abut%20the%20text%20should%20still%20have%20the%202cm%20distance%2C%20we%20set%20the%20padding%20right%20to%20%0A2cm.%0A*%2F%0Amain%20table.summary%20td%7B%0A%20%20padding%3A4mm%202cm%204mm%200%3B%0A%20%20border-bottom%3A0%3B%0A%7D%0A%0A%2F*%0AThe%20content%20below%20the%20tables%20is%20placed%20in%20a%20ASIDE%20element%20next%20to%20the%20MAIN%20element.%0ATo%20ensure%20this%20element%20is%20always%20at%20the%20bottom%20of%20the%20page%2C%20just%20above%20the%20page%20%0Afooter%2C%20we%20use%20the%20Prince%20custom%20property%20%22-prince-float%22%20with%20the%20value%20bottom.%0A%0ASee%20Page%20Floats%20on%20https%3A%2F%2Fwww.princexml.com%2Fhowcome%2F2021%2Fguides%2Ffloat%2F.%0A*%2F%0Aaside%7B%0A%20%20-prince-float%3A%20bottom%3B%0A%20%20padding%3A0%202cm%20.5cm%202cm%3B%0A%7D%0A%0A%2F*%0AThe%20content%20itself%20is%20shown%20in%202%20columns%20we%20use%20flexbox%20for%20this.%0A*%2F%0Aaside%20%3E%20div%7B%0A%20%20display%3Aflex%3B%0A%20%20justify-content%3Aspace-between%3B%0A%7D%0A%0A%2F*%0AEach%20%22column%22%20has%20a%20width%20of%2045%25%20of%20the%20document.%0A*%2F%0Aaside%20%3E%20div%20%3E%20div%7B%0A%20%20width%3A45%25%3B%0A%7D%0A%0A%2F*%0AThe%20list%20with%20the%20payment%20options%20has%20no%20bullet%20points%20and%20no%20margin.%0A*%2F%0Aaside%20%3E%20div%20%3E%20div%20ul%7B%0A%20%20list-style-type%3Anone%3B%0A%20%20margin%3A0%3B%0A%7D%0A%0A%2F*%0AThe%20page%20footer%20in%20our%20document%20uses%20the%20HTML%20FOOTER%20element%2C%20we%20define%20a%20height%20%0Aof%203cm%20matching%20the%20margin%20bottom%20of%20the%20page%20(see%20%40page%20rule)%20and%20a%20padding%20left%0Aand%20right%20of%202cm.%20We%20did%20not%20give%20the%20page%20itself%20a%20margin%20of%202cm%20to%20ensure%20that%0Athe%20background%20color%20goes%20to%20the%20edges%20of%20the%20document.%0A%0AAs%20mentioned%20above%20in%20the%20comment%20for%20the%20%40page%20the%20position%20property%20with%20the%20%0Avalue%20running(footer)%20makes%20this%20HTML%20element%20float%20into%20the%20bottom%20left%20page%20margin%0Abox.%20This%20page%20margin%20box%20repeats%20on%20every%20page%20in%20case%20we%20would%20have%20a%20multi-page%0Ainvoice.%0A%0AThe%20content%20inside%20the%20footer%20is%20aligned%20with%20the%20help%20of%20line-height%203cm%20and%20a%20%0Aflexbox%20for%20the%20child%20elements.%0A*%2F%0Afooter%7B%0A%20%20height%3A3cm%3B%0A%20%20line-height%3A3cm%3B%0A%20%20padding%3A0%202cm%3B%0A%20%20position%3Arunning(footer)%3B%0A%20%20background-color%3Avar(--footer-bg-color)%3B%0A%20%20font-size%3A8pt%3B%0A%20%20display%3Aflex%3B%0A%20%20align-items%3Abaseline%3B%0A%20%20justify-content%3Aspace-between%3B%0A%7D%0A%0A%2F*%0AThe%20first%20link%20in%20the%20footer%2C%20which%20points%20to%20the%20company%20website%20is%20highlighted%20%0Ain%20bold.%0A*%2F%0Afooter%20a%3Afirst-child%7B%0A%20%20font-weight%3Abold%3B%0A%7D%0A%0A%3C%2Fstyle%3E%0A%3C!--%20The%20header%20element%20will%20appear%20on%20the%20top%20of%20each%20page%20of%20this%20invoice%20document.%20--%3E%0A%3Cheader%3E%0A%20%20%3Cdiv%20class%3D%22headerSection%22%3E%0A%20%20%20%20%3C!--%20As%20a%20logo%20we%20take%20an%20SVG%20element%20and%20add%20the%20name%20in%20an%20standard%20H1%20element%20behind%20it.%20--%3E%0A%20%20%20%20%3Cdiv%20class%3D%22logoAndName%22%3E%0A%20%20%20%20%20%20%3Csvg%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2240%25%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22black%22%20%2F%3E%0A%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20%20%20%3Ch1%3ELogo%20%26amp%3B%20Name%3C%2Fh1%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C!--%20Details%20about%20the%20invoice%20are%20on%20the%20right%20top%20side%20of%20each%20page.%20--%3E%0A%20%20%20%20%3Cdiv%20class%3D%22invoiceDetails%22%3E%0A%20%20%20%20%20%20%3Ch2%3EInvoice%20%23100%3C%2Fh2%3E%0A%20%20%20%20%20%20%3Cp%3E%0A%20%20%20%20%20%20%20%2007%20March%202021%0A%20%20%20%20%20%20%3C%2Fp%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3C!--%20The%20two%20header%20rows%20are%20divided%20by%20an%20blue%20line%2C%20we%20use%20the%20HR%20element%20for%20this.%20--%3E%0A%20%20%3Chr%20%2F%3E%0A%20%20%3Cdiv%20class%3D%22headerSection%22%3E%0A%20%20%20%20%3C!--%20The%20clients%20details%20come%20on%20the%20left%20side%20below%20the%20logo%20and%20company%20name.%20--%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%3Ch3%3EInvoice%20to%3C%2Fh3%3E%0A%20%20%20%20%20%20%3Cp%3E%0A%20%20%20%20%20%20%20%20%3Cb%3EClient%20Name%3C%2Fb%3E%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20123%20Alphabet%20Road%2C%20Suite%2001%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20Indianapolis%2C%20IN%2046260%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%3Ca%20href%3D%22mailto%3Aclientname%40clientwebsite.com%22%3E%0A%20%20%20%20%20%20%20%20%20%20clientname%40clientwebsite.com%0A%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20317.123.8765%0A%20%20%20%20%20%20%3C%2Fp%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C!--%20Additional%20details%20can%20be%20placed%20below%20the%20invoice%20details.%20--%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%3Ch3%3EDue%20Date%3C%2Fh3%3E%0A%20%20%20%20%20%20%3Cp%3E%0A%20%20%20%20%20%20%20%20%3Cb%3E07%20April%202021%3C%2Fb%3E%0A%20%20%20%20%20%20%3C%2Fp%3E%0A%20%20%20%20%20%20%3Ch3%3EAmount%3C%2Fh3%3E%0A%20%20%20%20%20%20%3Cp%3E%0A%20%20%20%20%20%20%20%20%3Cb%3E%243%2C500%3C%2Fb%3E%0A%20%20%20%20%20%20%3C%2Fp%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fheader%3E%0A%0A%3C!--%20The%20footer%20contains%20the%20company%27s%20website%20and%20address.%20To%20align%20the%20address%20details%20we%20will%20use%20flexbox%20in%20the%20CSS%20style.%20--%3E%0A%3Cfooter%3E%0A%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Fcompanywebsite.com%22%3E%0A%20%20%20%20%20%20companywebsite.com%0A%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%3Ca%20href%3D%22mailto%3Acompany%40website.com%22%3E%0A%20%20%20%20%20%20company%40website.com%0A%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%3Cspan%3E%0A%20%20%20%20%20%20317.123.8765%0A%20%20%20%20%3C%2Fspan%3E%0A%20%20%20%20%3Cspan%3E%0A%20%20%20%20%20%20123%20Alphabet%20Road%2C%20Suite%2001%2C%20Indianapolis%2C%20IN%2046260%0A%20%20%20%20%3C%2Fspan%3E%0A%3C%2Ffooter%3E%0A%0A%3C!--%20In%20the%20main%20section%20the%20table%20for%20the%20separate%20items%20is%20added.%20Also%20we%20add%20another%20table%20for%20the%20summary%2C%20so%20subtotal%2C%20tax%20and%20total%20amount.%20--%3E%0A%3Cmain%3E%0A%20%20%3Ctable%3E%0A%20%20%20%20%3C!--%20A%20THEAD%20element%20is%20used%20to%20ensure%20the%20header%20of%20the%20table%20is%20repeated%20if%20it%20consumes%20more%20than%20one%20page.%20--%3E%0A%20%20%20%20%3Cthead%3E%0A%20%20%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%20%20%3Cth%3EItem%20Description%3C%2Fth%3E%0A%20%20%20%20%20%20%20%20%3Cth%3ERate%3C%2Fth%3E%0A%20%20%20%20%20%20%20%20%3Cth%3EAmount%3C%2Fth%3E%0A%20%20%20%20%20%20%20%20%3Cth%3ETotal%3C%2Fth%3E%0A%20%20%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%3C%2Fthead%3E%0A%20%20%20%20%3C!--%20The%20single%20invoice%20items%20are%20all%20within%20the%20TBODY%20of%20the%20table.%20--%3E%0A%20%20%20%20%3Ctbody%3E%0A%20%20%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cb%3EItem%20Names%20Goes%20Here%3C%2Fb%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20Description%20goes%20here%0A%20%20%20%20%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3E%0A%20%20%20%20%20%20%20%20%20%20%24100%0A%20%20%20%20%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3E%0A%20%20%20%20%20%20%20%20%20%204%0A%20%20%20%20%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3E%0A%20%20%20%20%20%20%20%20%20%20%24400.00%0A%20%20%20%20%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cb%3ELorem%20Ipsum%3C%2Fb%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20Description%20goes%20here%0A%20%20%20%20%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3E%0A%20%20%20%20%20%20%20%20%20%20%24250%0A%20%20%20%20%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3E%0A%20%20%20%20%20%20%20%20%20%202%0A%20%20%20%20%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3E%0A%20%20%20%20%20%20%20%20%20%20%24500.00%0A%20%20%20%20%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cb%3EDolor%20Set%20Amit%20Caslum%3C%2Fb%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20Description%20goes%20here%0A%20%20%20%20%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3E%0A%20%20%20%20%20%20%20%20%20%20%24300%0A%20%20%20%20%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3E%0A%20%20%20%20%20%20%20%20%20%201%0A%20%20%20%20%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3E%0A%20%20%20%20%20%20%20%20%20%20%24300.00%0A%20%20%20%20%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%3C%2Ftbody%3E%0A%20%20%3C%2Ftable%3E%0A%20%20%3C!--%20The%20summary%20table%20contains%20the%20subtotal%2C%20tax%20and%20total%20amount.%20--%3E%0A%20%20%3Ctable%20class%3D%22summary%22%3E%0A%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%3Cth%3E%0A%20%20%20%20%20%20%20%20Subtotal%0A%20%20%20%20%20%20%3C%2Fth%3E%0A%20%20%20%20%20%20%3Ctd%3E%0A%20%20%20%20%20%20%20%20%241200.00%0A%20%20%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%3Cth%3E%0A%20%20%20%20%20%20%20%20Tax%204.7%25%0A%20%20%20%20%20%20%3C%2Fth%3E%0A%20%20%20%20%20%20%3Ctd%3E%0A%20%20%20%20%20%20%20%20%24000.00%0A%20%20%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%3Ctr%20class%3D%22total%22%3E%0A%20%20%20%20%20%20%3Cth%3E%0A%20%20%20%20%20%20%20%20Total%0A%20%20%20%20%20%20%3C%2Fth%3E%0A%20%20%20%20%20%20%3Ctd%3E%0A%20%20%20%20%20%20%20%20%2412%2C000.00%0A%20%20%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%3C%2Ftr%3E%0A%20%20%3C%2Ftable%3E%0A%3C%2Fmain%3E%0A%3C!--%20Within%20the%20aside%20tag%20we%20will%20put%20the%20terms%20and%20conditions%20which%20shall%20be%20shown%20below%20the%20invoice%20table.%20--%3E%0A%3Caside%3E%0A%20%20%3C!--%20Before%20the%20terms%20and%20conditions%20we%20will%20add%20another%20blue%20divider%20line%20with%20the%20help%20of%20the%20HR%20tag.%20--%3E%0A%20%20%3Chr%20%2F%3E%0A%20%20%3Cdiv%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%3Cb%3ETerms%20%26amp%3B%20Conditions%3C%2Fb%3E%0A%20%20%20%20%20%20%3Cp%3E%0A%20%20%20%20%20%20%20%20Please%20make%20payment%20within%2030%20days%20of%20issue%20of%20the%20invoice.%0A%20%20%20%20%20%20%3C%2Fp%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%3Cb%3EPayment%20Options%3C%2Fb%3E%0A%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EPaypal%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3ECredit%20Card%3C%2Fli%3E%0A%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Faside%3E) looks fine as PDF using your tool… great! Saludos! ---
    **Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\ **Post date:** [May 29, 2023, 2:27am UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/18 "2023-05-29T02:27:54Z")
    Fantastic!! Glad to hear you sorted it out 👍 Forgot to mention that it’s case sensitive, thanks for pointing that out 💪 ---
    **Author:** ![Leung](https://avatars.discourse-cdn.com/v4/letter/l/71e660/32.png) [@Leung](https://community.glideapps.com/u/Leung)\ **Post date:** [July 26, 2023, 9:09am UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/19 "2023-07-26T09:09:33Z")
    Can i ask that, how can i do a version that will not triggers the Print/Save As PDF? ---
    **Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\ **Post date:** [July 26, 2023, 7:25pm UTC](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/20 "2023-07-26T19:25:42Z")
    I’m not quite sure what you’re asking/what the use case is… But if all you want to do is display the HTML you can view it natively using a rich-text component. [Next page](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116.md?page=2)