Hello, everyone,
I need to create a PDF from a template that requires a dynamic hyperlink. When I tried using a DOC template, the link wasn't generated. When I attempted to use an HTML template, the link was generated, but after converting it to PDF, the link didn't work in the converted PDF.
Could you please suggest a way to create a dynamic hyperlink in a PDF?
Discussion posts and replies are publicly visible
I would have assumed your best bet might be to convert HTML to PDF (though i haven't tried it myself). When you say the hyperling won't work after conversion to a PDF, what else can you tell us about the end result? Is the URL present, or just the plaintext that it had been linked from? What exactly is the configuration you're using in the original source HTML prior to conversion?
Works like a champ for me.
PDF
The HTML is
<!-- ===== description: Attractive invoice with shades of grey and blue as well as plenty of padding. license: MIT attributions: - author: arboshiki link: https://bootsnipp.com/snippets/8MPnQ - author: danfickle link: https://github.com/danfickle/ ===== --> <html> <head> <style> @page { @top-right { content: "Page " counter(page) " of " counter(pages); font-family: sans-serif; padding-right: 15px; } } #invoice{ padding: 0px; } .invoice { position: relative; padding: 15px } .invoice header { padding: 10px 0; margin-bottom: 20px; border-bottom: 1px solid #3989c6 } .invoice .company-details { text-align: right } .invoice .company-details .name { margin-top: 0; margin-bottom: 0 } .invoice .contacts { margin-bottom: 20px } .invoice .invoice-to { text-align: left } .invoice .invoice-to .to { margin-top: 0; margin-bottom: 0 } .invoice .invoice-details { text-align: right } .invoice .invoice-details .invoice-id { margin-top: 0; color: #3989c6 } .invoice main { padding-bottom: 50px } .invoice main .thanks { margin-top: -100px; font-size: 2em; margin-bottom: 50px } .invoice main .notices { padding-left: 6px; border-left: 6px solid #3989c6 } .invoice main .notices .notice { font-size: 1.2em } .invoice table { width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 20px } .invoice table td,.invoice table th { padding: 15px; background: #eee; border-bottom: 1px solid #fff } .invoice table th { white-space: nowrap; font-weight: 400; font-size: 16px } .invoice table td h3 { margin: 0; font-weight: 400; color: #3989c6; font-size: 1.2em } .invoice table .qty,.invoice table .total,.invoice table .unit { text-align: right; font-size: 1.2em } .invoice table .no { color: #fff; font-size: 1.6em; background: #3989c6 } .invoice table .unit { background: #ddd } .invoice table .total { background: #3989c6; color: #fff } .invoice table tbody tr:last-child td { border: none } .invoice table tfoot td { background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa } .invoice table tfoot tr:first-child td { border-top: none } .invoice table tfoot tr:last-child td { color: #3989c6; font-size: 1.4em; border-top: 1px solid #3989c6 } .invoice table tfoot tr td:first-child { border: none } .invoice footer { width: 100%; text-align: center; color: #777; border-top: 1px solid #aaa; padding: 8px 0 } .invoice { font-size: 14px; line-height: 1.4; font-family: sans-serif; } a.logo { display: inline-block; text-decoration: none; } tr, tfoot { page-break-inside: avoid; } div.logo-container { float: left; } </style> </head> <body> <!--Author : @arboshiki--> <div id="invoice"> <div class="invoice"> <div> <header> <div class="row"> <div class="logo-container"> <a class="logo" href="http://example.com"> <img src="images/flyingsaucer.png" alt="Business Logo" /> </a> </div> <div class="col company-details"> <h2 class="name"> <a href="http://example.com">ACME Corp</a> </h2> <div> Unit 1, 123 Main St, Springfield, Ohio, USA, 54325 </div> <div class="email"><a href="mailto:acme@example.com">acme@example.com</a></div> </div> </div> <div style="clear: both;"></div> </header> <main> <div class="row contacts"> <div class="col invoice-to"> <div class="text-gray-light">INVOICE TO:</div> <h2 class="to">John Citizen</h2> <div class="address"> 125 Second Ave, Waterside, California, America </div> <div class="email"><a href="mailto:abc@example.com">abc@example.com</a></div> </div> <div class="col invoice-details"> <h1 class="invoice-id">INVOICE 1-2-3</h1> <div class="date">Date of Invoice: 2025-Mar-25</div> <div class="date">Due Date: 2025-May-25</div> </div> </div> <table border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th>#</th> <th class="text-left">DESCRIPTION</th> <th class="text-right">UNIT PRICE</th> <th class="text-right">AMOUNT</th> <th class="text-right">TOTAL</th> </tr> </thead> <tbody> <tr> <td class="no">1</td> <td class="text-left">Create simple website</td> <td class="unit">$1500.00</td> <td class="qty">1</td> <td class="total">$1500.00</td> </tr> <tr> <td class="no">2</td> <td class="text-left">Social media posts</td> <td class="unit">$100.00</td> <td class="qty">10</td> <td class="total">$1000.00</td> </tr> <tr> <td class="no">3</td> <td class="text-left">Email templates</td> <td class="unit">$150.73</td> <td class="qty">2</td> <td class="total">$301.46</td> </tr> </tbody> <tfoot> <tr> <td colspan="2"></td> <td colspan="2">SUBTOTAL</td> <td>$2801.46</td> </tr> <tr> <td colspan="2"></td> <td colspan="2">TAX 25.00%</td> <td>$700.37</td> </tr> <tr> <td colspan="2"></td> <td colspan="2">GRAND TOTAL</td> <td>$3501.83</td> </tr> </tfoot> </table> <div class="thanks">Thank you!</div> <div class="notices"> <div>NOTICE:</div> <div class="notice">A finance charge of 1.5% will be made on unpaid balances after 30 days.</div> </div> </main> <footer> Invoice was created on a computer and is valid without the signature and seal. </footer> </div> </div> </div> <a href="https://appian.com">appian.com</a> </body> </html>
When generating PDFs from our HTML template, the hyperlinks are appearing as plain text and are not clickable. This poses a challenge as it diminishes the usability of the PDF documents.
Here's a snippet from our HTML template:
In this template, we dynamically insert the LinkToAccessFile and FileName values during our process.
Could you please let me know which service you used to convert it to PDF?
https://appian.rocks/2023/10/23/great-pdfs-with-appian/
BTW, that HTML to PDF rendered is pretty picky and there is a missing space.
Thank you for your support! The link was not clickable in the generated PDF, so just to clarify, I used the same template that you uploaded, but the link is still not clickable. Below is the generated PDF.
Do we use the same plugin? The generated PDF looks completely different.
And when I download your PDF I can click the links. But that might be a feature of the respective PDF viewer. Apple MacOS Preview and Google Chrome in my case.
Stefan Helzle said:Do we use the same plugin?
You never clarified which plug-in you're using for this, to be fair. I have one from "dynamic document generator" but I have no idea whether that's the preferred one.
I had linked to my blog post that covers this. Looking at the process model shows "PDF from HTML" which is different from "HTML to PDF". I had assumptions .... wait ... this makes me a headache --- making assumptions is bad!
Here you go: https://community.appian.com/b/appmarket/posts/html-to-pdf
Stefan Helzle said:I had linked to my blog post that covers this.
My bad, I hadn't checked, maybe I assumed there was just the one (i know, clumsy of me). I got the newer plug-in and your sample HTML generates very nicely, and I can confirm the generated link does work (with your sample HTML and the old plug-in, the link shows up but the formatting is clumsy and the link isn't really clickable).