loading... Salesforce Cat

Monday, November 24, 2014

Render Visualforce Page As a Word Document

Normally we use Visualforce pages to generate online forms and pages but lately I met with a requirement where Visualforce page should be rendered as an downloadable word document.So in the post I thought of sharing simpler version of my code as some of you may find it useful.

So lets get into work Although you may think rendering a page as a Word document may involve lot of  work all you have to do is add one attribute to <apex:page> tag. That attribute is contentType.

eg:contentType="application/msword#SalesforceCat.doc"

In above example

  • application/msword# means page should be rendered as word document
  • SalesforceCat.doc   means default name of the downloaded document would be SalesforceCat
When you are rendering Visualforce page as a word document please take below points also into consideration
  • Some Visualforce  native page elements such as <apex:pageblock>, <apex:pageblockSection> doesn't have same styling effect on pages rendered as Word document. Therefore it is better you can use standard html tags and do the styling using inling css or  css classes defined within the page.
  •  <Apex:form> or other child  apex form components do not render in document mode therefore use html form elements if your document need to include form components such as radio buttons and text fields..

Visualforce Page Rendered as  Word Document


   Code of the above given Visualforce Page


 <apex:page applyHtmlTag="true" showHeader="true" contentType="application/msword#SalesforceCat.doc"  >  
   <div>  
   <h3>Applicant Refree FeedBack From </h3>  
   </div>  
    <head>  
     <style>   
       body { font-family: 'Arial Unicode MS'; }  
       .caption {  
          background: #cfeef8;  
          height:30px;  
          font-size:15px;;  
          margin-left: -1px; /* Fix FF 1px issue */  
         }  
       .Question  
       {  
        height:30px;   
        background-color:#efefef;   
        border:1px solid #ccc;   
        padding:2px 2px; width:50%;  
       }  
       .Answere  
       {  
         height:30px;    
         border:1px solid #ccc;   
         padding:3px 2px 3px 4px;  
       }    
       .rowstyle {  
        height:50px;  
       }  
       .rowstyle td{width:30%;}  
     </style>  
   </head>  
   <apex:outputPanel >  
   <table border="0"  cellspacing="0" cellpadding="0" id="resultTable" width="100%">  
    <caption style="background: #cfeef8;height:23px;font-weight: bold;font-size: 16px; margin-left: -1px; text-align:left; padding:0 0 0 4px;">Feed Back Questions</caption>  
    <tr>  
    <th class="height:30px; background-color:#efefef; border:1px solid #ccc; padding:2px 2px; width:50%;" >Answere All the Questions</th>  
    </tr>  
    <tr >  
     <td class="Question">  
     <apex:outputLabel value="Radio Button Type Question? ">  
     </apex:outputLabel>  
     </td>  
     </tr>  
     <tr>  
     <td class="Answere">  
       <apex:outputPanel >  
        <input type="radio" name="group1" value="Poor"/> Poor  
        <input type="radio" name="group1" value="Average"/> Average  
        <input type="radio" name="group1" value="Good"/> Good  
        <input type="radio" name="group1" value="Excellent"/> Excellent  
       </apex:outputPanel>  
     </td>  
    </tr>  
    <tr>    
    <td width="400" class="Question">  
     <apex:outputLabel value="Check Box Type Question? ">  
    </apex:outputLabel>  
    </td>  
    </tr>  
     <tr>  
     <td style="height:30px;  border:1px solid #ccc; padding:3px 2px 3px 4px;">  
       <apex:outputPanel >  
         <input type="checkbox" name="vehicle" value="Bike">I have a bike </input>  
         <input type="checkbox" name="vehicle" value="Car">I have a car  </input>  
         <input type="checkbox" name="vehicle" value="Bike">I have a van </input>  
         <input type="checkbox" name="vehicle" value="Car">I have a lorry </input>  
       </apex:outputPanel>  
     </td>  
    </tr>   
    <tr>    
    <td width="400" class="Question" >  
    <apex:outputLabel value="Select List Type Question? ">  
    </apex:outputLabel>  
    </td>  
     </tr>  
     <tr>  
     <td style="height:30px; border:1px solid #ccc; padding:3px 2px 3px 4px;">  
       <apex:outputPanel >  
         <select value="select">  
         <option value="volvo">Volvo</option>  
         <option value="saab">Saab</option>  
         <option value="mercedes">Mercedes</option>  
         <option value="audi">Audi</option>  
        </select>  
       </apex:outputPanel>  
     </td>  
    </tr>    
   </table>  
   </apex:outputPanel>  
    <table width="100%">  
    <tr>  
     <td class="Question">  
      <b>Referee Name</b>  
     </td>  
     <td class="Question">  
      <input type="text" size="35" />  
     </td>  
    </tr>  
    <tr>  
     <td class="Question">  
     <b>Contact Number</b>   
     </td>  
    <td class="Question">  
      <input type="text" size="35" />  
     </td>  
    </tr>  
     <tr>  
     <td class="Question">  
     <b>Date</b>  
     </td>  
     <td class="Question">  
      <input type="text" value="(Enter in DD/MM/YYYY Format" size="35" />  
     </td>  
    </tr>  
    </table>  
 </apex:page>  

No comments:

Post a Comment