Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
hylim1215hylim1215 

how to add watermark to visualforce PDF ?

Hi, i have this watermark added to my visualforce PDF but it actually override all my text. 
<img src="{!URLFOR($Resource.tran_watermark)}" width="100%" height="100%" style="position:fixed; background-repeat:repeat; left:0cm; top:0cm; z-index:0; display:{!IF(quote.status == 'approved', 'none', '')}"/>


How can i push the watermark (png file) to the back?
Best Answer chosen by hylim1215
pconpcon
The way I would do this is instead of inserting an img I would put a CSS class on the PDF's body.  Then I would selectively render out the CSS stanza based on the status.
  
<apex:page standardController="Quote" renderAs="pdf" applyBodyTag="false">
    <head>
        <style type="text/css" media="print">
            <apex:outputPanel layout="none" render="{!IF(Quote.status == 'approved', true, false)}">
                .watermark {
                    background-repeat: repeat;
                    background-image: url("{!URLFOR($Resource.tran_watermark)}");
                }
            </apex:outputPanel>
        </style>
    </head>
    <body class="watermark">
        <!-- PDF stuff goes here -->
    </body>
</apex:page>
NOTE: This code has not been tested and may contain typographical or logical errors

All Answers

pconpcon
The way I would do this is instead of inserting an img I would put a CSS class on the PDF's body.  Then I would selectively render out the CSS stanza based on the status.
  
<apex:page standardController="Quote" renderAs="pdf" applyBodyTag="false">
    <head>
        <style type="text/css" media="print">
            <apex:outputPanel layout="none" render="{!IF(Quote.status == 'approved', true, false)}">
                .watermark {
                    background-repeat: repeat;
                    background-image: url("{!URLFOR($Resource.tran_watermark)}");
                }
            </apex:outputPanel>
        </style>
    </head>
    <body class="watermark">
        <!-- PDF stuff goes here -->
    </body>
</apex:page>
NOTE: This code has not been tested and may contain typographical or logical errors
This was selected as the best answer
hylim1215hylim1215
Thanks pcon! that works! but it should be 'rendered' instead of 'render' :)
saqib nasirsaqib nasir
Hi pcon,

I am trying to watermark  PDF document Saved in Salesforce not a visualforce rendered as PDF.
I have tried to follow your instructions but did not get any sucess :( Below you will find an example which i am trying currently?
Could you please check where i am making a mistake ?

<apex:page controller="TestPdfWaterMark" applyBodyTag="false" >
        <head>
            <style type="text/css" media="print">
                <apex:outputPanel layout="none" rendered="true">
                    .watermark {
                        background-repeat: repeat;
                        background-image: url("{!URLFOR($Resource.watermarkExample)}");
                        background-position: center;
                    }
                </apex:outputPanel>
            </style>
    </head>    
        <body class= "watermark">
               <apex:iframe width="1000" height="1000" src="data:pdf;base64,{!pdf}"/>
        </body>
</apex:page>A




Thanks in Advance !!

 
pconpcon
Saqib,

The only way I can think to do this would be to make a floating div that has 100% width and height and apply the watermark to that.  You'd have to make sure it has a z-index above your iframe.  The code you have above just renders the watermark behind the iframe and is not visible.  You may however be better off using a service like Cloudinary (http://cloudinary.com/) to watermark the PDF data directly and then show that to the end user.  Here (http://cloudinary.com/blog/adding_watermarks_credits_badges_and_text_overlays_to_images) is an example of how to do it.
Staci CaraStaci Cara

Hi pcon, 

thank you for your support so far. Do you know what I need to change in order for me not to add an img but a text line e.g. confidential?

Thank you in advance! 
pconpcon
@Staci, You'd want to look at the CSS property ::before or ::after in conjuction with content attribute.  You can see what I'm talking about on the mozilla documenation [1].  I don't know if this will work inside of a PDF with their rendering engine.  You might also be able to do it without that by creating a 100% width and height element that has a lower Z index and modifying the style of the text with CSS.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/::before
sophian smithssophian smiths
Add Watermark in PDF Software Watermark it all over the page, that way even if printed to PDF it would require too much work to edit the watermarks PDF is ever secure, but making editing a real pain will dether most, also make it so it's watermarked enough but not so the regular user suffers. visit at:- https://www.osttopstapp.com/pdf-watermark.html