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>
