0

I have an apex page where I am using HTML tags mandatorily. Here , I need to convert it to PDF. Using renderAs PDF is misplacing the alignments and messed up in Apex page. Please find my Apex Page code below. Can someone please let me know where is the problem?

Apex Page

    <apex:page showHeader="false" standardStylesheets="false" sidebar="false"
    standardController="Sample_Order_Form_abv__c" extensions="SaveAsPdfExtension"
    contentType="{! renderedContentType }" >



<style>
.container {
    overflow:auto;
}

.triangle {
  border-bottom: 15px solid #000;
  border-left: 10px solid ;
  border-right: 10px solid ;
  width: 0;
  height: 0;
}

.circle2
{
width:50px;
height:50px;
border-radius:50%;
font-size:5px;
color:#000000;
line-height:500px;
text-align:center;
background:#ffffff
}

.circle
{
background-color: #FFFFFF;   width: 20px;
   height: 20px;
   border-radius: 50%;
   line-height: 5px;
   text-align: center;
   border: 2px solid #000000;
   color: #ffffff;
   z-index: 10;
   font-family: "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light",         "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:5; font-stretch:normal; 
   font-size: 5px;

}

.rectangle2
{
     width: 73.3%;
     height: 50%
     margin:5 auto;
     border-top:1px solid #000000;
     border-bottom:1px solid #000000;
     border-left:1px solid #000000;
     border-right:1px solid #000000;
     border-bottom-width:medium;
     border-left-width:medium;
     border-right-width:medium;
     border-top-width:medium;
}

.arrow-right {
    width: 10; 
    height: 10; 
    border-top: 60px solid ;
    border-bottom: 60px solid ;

    border-left: 60px solid black;
}
.right-arrow {
   display: inline-block; 
    display: &#9654;
    position: relative;
    background: black;
    padding: 15px;
}
.container1 {
    float:left;
}

.container2 {
    overflow:visible;
}

.image {
background:url(!$Resource.image_R);
background-size:80px 60px;/*Image Size - This will help you*/
background-repeat:no-repeat;
}
.sidebyside {
    float:left; 
    width:20px; 
    height:20px; 
    border-style:solid; 
    margin:0px;
}

.sidebyside1 {
    float:left; 
    width:20px; 
    height:20px;
    border-style:solid; 
    margin-left:20px;
}

.sidebyside2 {
    float:right; 
    width:20px; 
    height:20px;
    border-style:solid; 
    margin-left:0px;
}
.belowdiv {
    width:300px; 
    height:100px; 
    border-style:solid; 
    margin:5px;
}
</style>

<table align="right">
  <tr>
    <td> 
      <font size="5"> <b>{!SOF.Form_ID_abv__c}</b></font>
    </td>
  </tr>
</table>
<br></br><br></br>
<table align="left">
   <tr>
    <td>
     <img src="{!$Resource.Humira}" width="300" height="300"/> 
    </td>
     <td>
    </td> <td>
    </td>
    <td>
    </td>
     </tr>
  </table>
   <table align="right">
     <tr>
    <td>
     <div style="width:500px;float: right;height:100px;border:1px solid #000;" > <center><font size="5">  <br> The form is uniquely coded </br> And valid for 1 time use only </font> <br><font size="3" > A new form is required for each subsequent order.  </font></br></center></div>
    </td>
   </tr>
   </table>
   <br>
   </br>
   <br>
   </br>
    <br>
   </br>
    <br>
   </br>
    <br>
   </br>
    <br>
   </br>

  <table align="right">
  <tr>
    <td>
<img src="{!$Resource.SampleRequest}" width="400" height="200"/>
    </td>
  </tr>
</table>

<br></br>
<table align="left">
 <tr>
   <td>
<div id="rectangle" style="width:1300px; height:50px; background-color:black" >  <center><font size="4" color="#FFFFFF">  <br> ATTENTION PRACTITIONER : PLEASE FILL IN ALL BLANK FIELDS TO ENSURE TIMELY DELIVERY </br> </font></center></div>
   </td>
 </tr>
</table>    
<br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br>

<font size="5"> <br></br> Deliver To:  </font> 

<table align="right" width="40%">
 <tr>
   <td>
  <font size="5"> Instructions for Requesting Humira </font>
   </td>
   </tr>
 <tr>
   <td>
   <font size="5">Sample Product: </font>
   </td>
 </tr>
 <tr>
   <td>
     <div id="rectangle" style="width:20px; height:20px; background-color:black" > <center><font size="4" color="#FFFFFF"> 1 </font></center> </div> 
     <font style="3"> Practitioner listed must <b> SIGN , SELECT </b> </font>
   </td>
   </tr>
   <tr>
    <td>
     <b>PROFESSIONAL DESIGNATION </b> and  
   </td>
 </tr>
  <tr>
    <td>
     <b> DATE </b> the form
    </td>
  </tr>
  <tr>
    <td>
     <div id="rectangle" style="width:20px; height:20px; background-color:black" > <center><font size="4" color="#FFFFFF"> 2 </font></center> </div> 
      <b> Return form : </b> Fax to 1-844-206-2772 or 
   </td>
  </tr>
   <tr>

      <td>
       Email to AOR@knipper.com 
       </td> 
   </tr>
   <tr>
    <td>
     <div id="rectangle" style="width:20px; height:20px; background-color:black" > <center><font size="4" color="#FFFFFF"> 3 </font></center> </div> 
      If address is incorrect , please update
    </td>
   </tr>
   <tr>
     <td>
       (No P.O. Boxes , please)
       <hr></hr>
       <br> </br>
     <hr></hr>

     </td>
   </tr>


 </table>


<table width="30%">

 <tr>
   <td> 
 <br></br>
   </td>
 </tr>

  <tr>
   <td> 
 <br></br>
   </td>
 </tr>

  <tr>
   <td> 
 <br></br>
   </td>
 </tr>

  <tr>
   <td> 
      <left><font size="4"> {!SOF.Vendor_Tracking_Number_abv__c}  </font> </left> 
   </td>
 </tr>


 <tr>
   <td>
  <left><font size="4"> {!SOF.Account_abv__r.Name} , </font> </left> 
   </td>


 </tr>

 <tr>
   <td> 
 <br></br>
   </td>
 </tr>
 <tr>
 <td>
   <left><font size="4"> {!SOF.Address_Line_1_abv__c}  </font> </left> 
   </td>
   </tr>


    <tr>
   <td> 
 <br></br>
   </td>
 </tr>

    <tr>
 <td>
   <left><font size="4"> {!SOF.Address_Line_2_abv__c}  </font> </left> 
   </td>
   </tr>

    <tr>
   <td> 
 <br></br>
   </td>
 </tr>

    <tr>
 <td>
   <left><font size="4"> {!SOF.City_State_Zip_abv__c}  </font> </left> 
   </td>
   </tr>

    <tr>
   <td> 
 <br></br>
   </td>
 </tr>

   <tr>
 <td>
   <left><font size="4"> Phone: {!SOF.Account_abv__r.Phone}  </font> </left> 
   </td>





 <td>
   <left><font size="4"> Fax: {!SOF.Account_abv__r.Fax}  </font> </left> 
   </td>

   </tr>
     <tr>
   <td> 
 <br></br>
   </td>
 </tr>


   <tr>
 <td>
   <left><font size="4"> State License #: {!SOF.Address_abv__r.License_vod__c }  </font> </left> 
   </td>
   </tr>

    <tr>
   <td> 
 <br></br>
   </td>
 </tr>


    <tr>
 <td>
   <left><font size="4"> Rep. Territory#: {!SOF.Territory_abv__c}  </font> </left> 
   </td>
   <td>


   </td>

   </tr>

    <tr>
   <td> 
 <br></br>
   </td>
 </tr>


</table>








<left><font size="4" face="verdana">Deliveries can be received on (circle)    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      Tue &nbsp;&nbsp; Wed &nbsp;&nbsp; Thu &nbsp;&nbsp; Fri &nbsp;&nbsp; </font> </left> <br> </br>

<table width="35%">
 <tr>
   <td> 
 <br></br>
   </td>
 </tr>

  <tr>
   <td> 
 <br></br>
   </td>
 </tr>

</table>

<div class="container2"><div id="rectangle" style="width:1300px; height:50px; background-color:black" >  <center><font size="4" color="#FFFFFF">  <br> You &nbsp;&nbsp; will &nbsp;&nbsp; receive &nbsp;&nbsp; the &nbsp;&nbsp; following &nbsp;&nbsp; prescription &nbsp;&nbsp; sample(s) </br> </font></center></div>
<div style="width:1300px;float: center;height:150px;border:5px solid #000;" > <center><font size="5">  <br> <b>{!SOF.Proprietary_Name_abv__c}   <img src="{!$Resource.Image_R}" width="30" height="30"/> {!SOF.Established_Name_abv__c} &nbsp;&nbsp;  {!SOF.Dosage_Strength_abv__c} &nbsp;&nbsp;&nbsp; {!SOF.NDC_abv__c}  &nbsp;&nbsp;&nbsp; Qty: {!SOF.Quantity_abv__c} </b>  </br> </font></center></div></div>

<table align="center">
<tr>
  <td>
     <img src="{!$Resource.SignDate}" width="1300" height="600"/> 
  </td>
</tr>

</table>
 <br>For questions, please call your HUMIRA Sales Representatives or the J.Knipper and Company Hotline at 1-800-250-1774.</br>
 <font size="5"> <b><br>Please refer to the provided full Prescribing Information (PI)  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; EXPIRES &nbsp;&nbsp;  {!ExpDate}
   </br>
<br>or visit http://www.rxabbvie.com/pdf/humira.pdf for full PI.</br>
<br> Full Prescribing Information is also available by calling </br>
<br>1-800-633-9110.</br></b> </font>

<table align="left">
  <tr>
    <td>
   <img src="{!$Resource.Circle}" width="700" height="50"/> 
    </td>
  </tr>
</table>
<table align="right">
  <tr>   
    <td>
     <img src="{!$Resource.AbbvieImage}" width="300" height="100"/> 
  </td>
</tr>

</table>
<br></br><br></br><br></br> <br></br><br></br><br></br> <br></br><br></br><br></br> <br></br><br></br><br></br> 


  <table align="center">
  <tr>
    <td> 
      <font size="5"> <b>{!SOF.Form_ID_abv__c}</b></font>
    </td>
  </tr>
</table>


    <hr/>
    <!-- A little bit of info about the page's rendering; 
         see how it changes when saved as a PDF. -->
   <!-- contentType: <apex:outputText value=" {! renderedContentType }"/><br/>
    renderingService: <apex:outputText value=" {! renderingService }"/><br/> -->
</apex:page>

Please find here the screenshots of both HTML (it is the desired output) and PDF (erroneous output)

enter image description here enter image description here

7
  • Check if there is any link on you vf page ? – MIX DML Feb 3 '16 at 7:10
  • No, I am not having any hyperlink here. – Testing_SFDC Feb 3 '16 at 7:12
  • You can provide screen shot of your generated vf page. This will help ppl to find problem in your code. – MIX DML Feb 3 '16 at 7:13
  • Please find the screenshots attached. Second one is the desired in HTML. First one is PDF errorneous. – Testing_SFDC Feb 3 '16 at 7:21
  • which part is overriding here...I don't see any incorrect alignment ? – MIX DML Feb 3 '16 at 7:34
1

I believe the pdf rendering engine struggles a bit with some CSS styles, which can make normal "modern" positioning using divs and floats inconsistent.

I find for this use case its better to strip back the CSS as much as possible, relying more on tables, inline style definitions and good old <font> tags, and less on divs, floats and classes.

3
  • But that will create lots of problem and may also discrepancies between html and PDF versions. Can you please help me with workaround in Jquery or Javascripts for the same ? – Testing_SFDC Feb 3 '16 at 9:07
  • the pdf rendering doesn't really work well with things like jquery either! You really need two versions of the content - one formatted for html with divs, classes and everything else to make it responsive and cross-browser; the other formatted for PDF in a more fixed, structured way. Refer to developer.salesforce.com/docs/atlas.en-us.200.0.pages.meta/… for limitations and recommendations - looks like more recent vf versions have improved support for css slightly but imo it's not great yet. – Alex McDonald Feb 3 '16 at 9:17
  • Specifically at that link, take notice of changes needed to page tag and structure for Css class definitions to work. – Alex McDonald Feb 3 '16 at 9:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.