+ Start a Discussion
SFTerrSFTerr 

VF code for printing badge

Hi, trying to print one badge page from below code, but for some reason it prints 2nd page which is completely blank.
Any idea what I'm mising here?
<apex:page sidebar="false" showHeader="false" standardStylesheets="false" standardController="Project_Attendance__c">
<script type="text/javascript">
        var __sfdcSessionId = '{!GETSESSIONID()}';
        </script>
        <script src="../../soap/ajax/29.0/connection.js"
              type="text/javascript"></script>
<apex:outputPanel layout="block" styleClass="standardBackground"/>

<style>
@page {
size: 110mm 90mm;
margin: 0px;
padding: 0mm;
}

.divFirstName{
font-weight:bold;
font-family:Arial;
font-size: 13pt;
text-transform:uppercase;
width: 110mm;
text-align:center;
}

.divLastName {
font-weight:bold;
font-family:Arial;
font-size:20pt;
width: 110mm;
text-align:center;
}

.divCompany{
font-weight:bold;
font-family:arial;
font-size:24pt;
width: 110mm;
text-align:center;
max-height:80px;
}

.divType{
font-weight:bold;
font-family:Arial;
font-size:30pt;
width: 110mm;
text-align:center;
max-height:50px;
}

td { text-align:center; }
div { overflow:hidden; }

table { width:110mm; height:90mm; margin:0; padding:0; border-collapse:collapse;  }

body {
font-family:Arial ;
font-size:14px;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

                <script type="text/javascript">
                $(document).ready(function() {

                                var originalFontSize = 12;
                                var sectionWidth = $('.divFirstName').width();

                                $('span').each(function(){
                                                var spanWidth = $(this).width();
                                                var newFontSize = (sectionWidth/spanWidth) * originalFontSize;
                                                var newSize = newFontSize/1.2;
                                                if (newFontSize > 50) { newFontSize=50; }
                                                $(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"});
                                });

                                setupPage();
                });
                </script>

<apex:form >

<table>
  <tr>
    <td>
                <div class="divFirstName"><span><apex:outputText value="{!Project_Attendance__c.First_Name__c}"></apex:outputText></span></div>
    </td>
  </tr>
  <tr>
    <td>
                <div class="divLastName"><apex:outputText value="{!Project_Attendance__c.Last_Name__c}"></apex:outputText></div>
    </td>
  </tr>
  <tr>
    <td>
                <div class="divCompany"><apex:outputText value="{!Project_Attendance__c.Company__c}"></apex:outputText></div>
    </td>
    </tr>
     <tr>
    <td>
                <div class="divType"><apex:outputText value="{!Project_Attendance__c.Badge_Type__c}"></apex:outputText></div>
    </td>
    </tr>
</table>

<script type="text/javascript"> 
window.onload=function(){self.print();} 
</script> 
</apex:form>
</apex:page>

Thank you in advance