4

I have a problem when I'm wrapping images with an anchor tag in the header in a page that is rendered as PDF.

When I wrap an image with anchor tag in the header the image gets rendered OK, but without the tag i.e. not clickable.

Text and other images in the body(content) of the page get's rendered with the tag correctly.

How can I use anchor tag on images in PDF header? I suspect it has something to do with: 

position: running(header);

This is my page:

<apex:page controller="quotePDFController" title="Quote" renderAs="PDF" sidebar="false" showHeader="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0">
<head>
    <style type="text/css" media="print">
        @page {
            size: A4;
            margin-left: 1cm;
            margin-right: 1cm;
            margin-top: 4.5cm;
            margin-bottom: 1.8cm;

            @top-center {
                content: element(header);
            }

            @bottom-right {
                content: counter(page) "-" counter(pages);
                font-family: "Arial" "Sans-Serif";
                font-size: 10px !important;
                font-variant: normal;
                font-weight: 400;
                line-height: 20px;
                color: #000000;
                padding-right: 5px;
                padding-bottom: 120px;
            }

            @bottom-left {
                content: "TEST";
                font-family: "Sans-Serif";
                font-size: 7px !important;
                font-variant: normal;
                font-weight: 400;
                line-height: 20px;
                color: #000000;
                padding-left: 5px;
                padding-bottom: 115px;
            }                
        }

        body {
            font-family: "SansSerif";
            font-size:9px;
        }

        div.header {
            padding: 10px;
            position: running(header);
        }

        div.footer {
            display: block;
            padding: 5px;
            position: running(footer);
        }


    </style>
</head>
<div class="header">
    <div>
        <a href="https://google.com">
            /* here <a> doesn't work */       
            <img align="left" src="{!$Resource.LOGO}" height="75px"/>
        </a>
    </div>
    <div style="margin-top: 10px;">
        <a href="https://google.com">
            /* here <a> doesn't work */       
            <img align="right" src="{!$Resource.ISO9001Logo}" height="50px"/>            
        </a>
    </div>
</div>
<div class="footer"/>
<div class="content">
   /* here all is good */       
</div>

Thank you,

Improve this question

1 Answer 1

Reset to default
3

align is deprecated attribute for img tag in HTML5 and renderAs PDF is pretty strict with HTML/CSS guidelines, quoting from MDN web docs:

Aligns the image with its surrounding context. Use the float and/or vertical-align CSS properties instead of this attribute.

You could use float or some other CSS way as mentioned in documentation.

(image-link style is needed to make whole image act as a href link)

With rest of your code except with following change it seems to be working fine for me:

<style>
    a.image-link {
        /* display link as inline block to make image act as href's content */
        display: inline-block;
        /* remove the stubborn underline */
        text-decoration: none;
    }
</style>

<div class="header">
    <div>
        <a href="https://google.com" style="float: left;" class="image-link">
            <img src="{!$Resource.LOGO}" height="75px"/>
        </a>
    </div>
    <div style="margin-top: 10px;" style="float: right;">
        <a href="https://google.com" class="image-link">
            <img align="right" src="{!$Resource.ISO9001Logo}" height="50px"/>            
        </a>
    </div>
</div>

Protip: One of the effective way to debug PDF rendering in Visualforce page is to remove renderAs="PDF", then inspect element to see what's funky stuff is going on with HTML/CSS generation.

Improve this answer
3
  • Thank you for the response! Yes, I've tried removing align but it still doesn't wrap the image. It does create the anchor right under the image. It makes this blue line directly below it. It feels like it's doing so before the image is rendered.
    – Anton Solomin
    Commented Feb 10, 2020 at 15:58
  • I see, that is quite annoying issue. Please review my updated answer. td-lr; you need to add display: inline-block; text-decoration: none; on href to make whole image clickable. Hope it works, let us know. Cheers! :)
    – Raul
    Commented Feb 10, 2020 at 16:15
  • Yes! You are the boss!
    – Anton Solomin
    Commented Feb 10, 2020 at 16:22

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .