+ Start a Discussion
ckumckum 

Unable to display image in MS Word Doc

Hi,

 

I have a created a VF Page using contentType='application/msWord'. When I open this page this gives me a Word Doc. In this page I have included one image using static resource. now when i open this page I cant see the Images on the Doc, it just shows the X tag. All data is coming correctly. Static Resource cache control is Public.

 Pasting the code below:

<apex:page standardController="opportunity" extensions="TEST_Quote_DOC" contentType="application/rtf" cache="true" standardStylesheets="false"> <script src="/soap/ajax/13.0/connection.js"></script> <script src="/soap/ajax/13.0/plsoql.js"></script> <script src="/soap/ajax/13.0/functions.js"></script> <head><style type="text/css"> @page { @bottom-center { font-size:10px; content: "Test Plainview, Inc. • 35 South Service Road • Plainview, New York 11803 Phone: 516-694-6700 • Fax: 516-694-6715 • www.Test.com "; } @bottom-right { font-size:10px; content: counter(page); } } </style></head> <apex:form > <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="right" > <apex:image value="{!$Resource.TestLogo}" /> </td> </tr> </table> <br></br> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <apex:outputLabel value="Date: {!TODAY()} " style="font-size:80%; font:Arial, Helvetica, sans-serif;"/> </td> </tr> <tr> <td> &nbsp; </td> </tr> <tr> <td> <apex:outputLabel value="{!oppCustomer}" style="font-size:80%; font:Arial, Helvetica, sans-serif;"/> </td> </tr> <tr> <td> <apex:outputLabel value="{!oppBillingStreet}" style="font-size:80%; font:Arial, Helvetica, sans-serif;"/> </td> </tr> <tr> <td> <apex:outputLabel value="{!oppBillingCity}" style="font-size:80%; font:Arial, Helvetica, sans-serif;"/> </td> </tr> <tr> <td width='90px'> <apex:outputLabel value="{!oppBillingState} , {!oppBillingZip}" style="font-size:80%; font:Arial, Helvetica, sans-serif;"/> </td> </tr> <tr> <td> &nbsp; </td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="5%"> <b><apex:outputLabel value="Attention:&nbsp;&nbsp;" style="font-size:80%; font:Arial, Helvetica, sans-serif;"/></b> </td> <td> <apex:outputLabel value="{!oppPriContName}" style="font-size:80%; font:Arial, Helvetica, sans-serif;"/> </td> </tr> <tr> <td width="5%"> <b><apex:outputLabel value="" style="font-size:80%; font:Arial, Helvetica, sans-serif;"/></b> </td> <td style="font-size:80%; font:Arial, Helvetica, sans-serif;"> <b>T:</b><apex:outputLabel value=" {!oppPriContPhone}" /> </td> </tr> <tr> <td width="5%"> <b><apex:outputLabel value="" style="font-size:80%; font:Arial, Helvetica, sans-serif;"/></b> </td> <td style="font-size:80%; font:Arial, Helvetica, sans-serif;"> <b>F:</b><apex:outputLabel value=" {!oppPriContFax}" /> </td> </tr> <tr> <td width="5%"> <b><apex:outputLabel value="" style="font-size:80%; font:Arial, Helvetica, sans-serif;"/></b> </td> <td style="font-size:80%; font:Arial, Helvetica, sans-serif;"> <b>e-mail:</b><apex:outputLabel value=" {!oppPriContEmail}" /> </td> </tr> </table> <br/> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="5%"> <b><apex:outputLabel value="Reference:&nbsp;&nbsp;" style="font-size:80%; font:Arial, Helvetica, sans-serif;"/></b> </td> <td> <apex:outputLabel value="{!oppNumber}" style="font-size:80%; font:Arial, Helvetica, sans-serif;"/> </td> </tr> <tr> <td> &nbsp; </td> </tr> <tr> <td colspan='2'> <apex:outputLabel value="Test Plainview is pleased to submit the following quotation:" style="font-size:80%; font:Arial, Helvetica, sans-serif;"/> </td> </tr> </table> <apex:pageBlock > <br/> <table border='1' width="100%" class="list" cellpadding="0" cellspacing="0"> <tbody border='1' style="background-color: #FFFFAA;"> <tr class="headerRow"> <th width="5%" scope="col" class="" style="font-size:80%; font:Arial, Helvetica, sans-serif;"> Item </th> <th width="20%" scope="col" class="" style="font-size:80%; font:Arial, Helvetica, sans-serif;"> Part Number </th> <th width="30%" scope="col" class="" style="font-size:80%; font:Arial, Helvetica, sans-serif;"> Description </th> <th width="15%" scope="col" class="" style="font-size:80%; font:Arial, Helvetica, sans-serif;" align='center'> Quantity </th> <th width="15%" scope="col" class="" style="font-size:80%; font:Arial, Helvetica, sans-serif;" align='center'> Unit Price </th> <th width="15%" scope="col" class="" style="font-size:80%; font:Arial, Helvetica, sans-serif;" align='center'> Delivery (Weeks ARO) </th> </tr> </tbody> </table> <table width="100%" border='1' cellpadding="0" cellspacing="0"> <apex:repeat value="{!OppProducts}" var="op"> <tr> <td width="5%" valign="top" align='center'> <apex:outputLabel style="font-size:80%; font:Arial, Helvetica, sans-serif;" id="temp1" value="{!op.Counter}" /> </td> <td width="20%" valign="top" align='center'> <span style="padding: 2px 0px 2px 7px;text-align:left"> <apex:outputLabel style="font-size:80%; font:Arial, Helvetica, sans-serif;" id="temp2" value="{!op.productName}" /> </span> </td> <td width="30%" valign="top"> <apex:outputLabel style="font-size:80%; font:Arial, Helvetica, sans-serif;" id="temp3" value="{!op.description}" /> </td> <td width="45%" valign="top" > <apex:outputPanel id="opQR"> <table border='1' width="100%" cellpadding="0" cellspacing="0"> <apex:repeat value="{!op.LSTQR}" var="QR"> <tr > <td width="33%" align='right' > <apex:outputLabel style="font-size:80%; font:Arial, Helvetica, sans-serif;" value="{!QR.quantity} " id="txtQuantity" />&nbsp;&nbsp; </td> <td width="33.5%" align='right' > <apex:outputLabel style="font-size:80%; font:Arial, Helvetica, sans-serif;" value="{!QR.unitprice} " id="lblUnitPrice" />&nbsp;&nbsp; </td> <td width="33.5%" align='right'> <apex:outputLabel style="font-size:80%; font:Arial, Helvetica, sans-serif;" value="{!QR.ARO} " id="lblARO" />&nbsp;&nbsp; </td> </tr> </apex:repeat> </table> </apex:outputPanel> </td> </tr> </apex:repeat> </table> </apex:pageBlock> <br></br> <table border='1' width="100%" cellpadding="0" cellspacing="0"> <tr> <td style="font-size:80%; font:Arial, Helvetica, sans-serif;"> <b> Note: </b><apex:outputLabel value=" {!oppNote} " id="lblARO" />&nbsp;&nbsp; </td> </tr> </table> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="5%"> <b><apex:outputLabel value="Terms:" style="font-size:80%; font:Arial, Helvetica, sans-serif;" /></b> </td> <td> <apex:outputLink value="www.Test.com/PLNTerms&Conditions" id="theLink" style="font-size:80%; font:Arial, Helvetica, sans-serif;">www.Test.com/PLNTerms&Conditions</apex:outputLink> </td> </tr> <tr><td>&nbsp;</td></tr> <tr> <td colspan='2'> <apex:outputLabel style="font-size:80%; font:Arial, Helvetica, sans-serif;" value="This condition is valid until {!QValidDate}." style="font-size:80%; font:Arial, Helvetica, sans-serif;" /> </td> </tr> <tr><td>&nbsp;</td></tr> <tr> <td colspan='2' style="font-size:80%; font:Arial, Helvetica, sans-serif;" > <p> <b> Test Plainview reserves the right to provide an updated quotation after reviewing any items that are currently undefined or to be determined.</b> </p> </td> </tr> <tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr> <tr> <td colspan='2' style="font-size:80%; font:Arial, Helvetica, sans-serif;"> <p> Once again thank you for the opportunity to fulfill your requirements on this important program. If you have any questions, please do not hesitate to contact the undersigned at {!oppOwnerPhone} or via e-mail at {!oppOwnerEmail}. </p> </td> </tr> </table> <br/> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td> <apex:outputLabel value="Regards," style="font-size:80%; font:Arial, Helvetica, sans-serif;" /> </td> </tr> <tr> <td> <apex:outputLabel value="{!oppOwnerName}" style="font-size:80%; font:Arial, Helvetica, sans-serif;" /> </td> </tr> <tr> <td> <apex:outputLabel value="Regional Sales Manager" style="font-size:80%; font:Arial, Helvetica, sans-serif;" /> </td> </tr> <tr><td>&nbsp;</td></tr> <tr> <td width='500px'> <apex:outputLabel value="cc: {!oppRep}" style="font-size:80%; font:Arial, Helvetica, sans-serif;" /> </td> </tr> <tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr> <tr> <td> <b><apex:outputLabel value="Notes & Stipulation:" style="font-size:80%; font:Arial, Helvetica, sans-serif;" /></b> </td> </tr> </table> <br/> <table width="100%" class="list" cellpadding="0" cellspacing="0"> <tbody> <tr class="headerRow"> <th width="5%" scope="col" class="" style="font-size:83%; font:Arial, Helvetica, sans-serif;" align='center'> S.N. </th> <th width="95%" scope="col" class="" style="font-size:83%; font:Arial, Helvetica, sans-serif;" align='left'> Description </th> </tr> </tbody> </table> <table width="100%" class="list" cellpadding="0" cellspacing="0"> <apex:repeat value="{!QuoteNotes}" var="QN"> <tr> <td width="5%" align='center' valign="top"> <apex:outputLabel style="font-size:80%; font:Arial, Helvetica, sans-serif;" value="{!QN.NoteOrder}" /> </td> <td width="95%"> <apex:outputLabel style="font-size:80%; font:Arial, Helvetica, sans-serif;" value="{!QN.Description}" /> </td> </tr> </apex:repeat> </table> </apex:form> </apex:page>

 There is one more issue. How can I add Header and Footer in the above Word Doc? Kindly Help ASAP.

Thanks

 

 

Best Answer chosen by Admin (Salesforce Developers) 
ckumckum

Hey Stephan, Thanks for all your efforts. Finally I found the solution for the same. We dont need to make sites for the above issue. We can just create a new Document in Salesforce with our image, and can use its absolute Path in the image src.

 

Cheers!!!!!!!!

 

ckum

All Answers

stephanstephan

I suspect this is because the src URLs for images on your page are relative vs absolute URLs.

 

One thing you might try is adding a base tag to your head to specify the base path.

 

...stephan

ckumckum
This is working fine with PDF. Image is coming perfect in PDF but not in Word Doc. To resolve this issue I have tried using Force.com Sites: In that I created a page with only image in it and added that page in site. Then istead of static resource in the image now I am using URL of the site

<img src="http://1.testco.cs3.force.com/" />

But still image is not coming :-(

 

If I use any other image from any other site say <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /> , then it shows this google image, but force.com site image from the url is not coming.

 

I dont know where am I going wrong. I have also added all the required VF Pages in the "Enabled Visualforce Page Access".

 

Please let me know if anyone can help me with  this.

 

Regards,

ckum

stephanstephan

The reason this works via PDF generation is that the conversion is being done server side. When images are embedded, they are being fetched in the context of the running user.

 

When you specify something like contentType='application/msWord', we're not actually creating a Word doc on the server. We're simply setting the content-type header and returning the HTML. The browser associates the content-type to the associated application (Word in this case) and passes it the HTML. Word knows how to read HTML and convert it to a doc, and then displays the resulting document. 

 

The problem, aside from the absolute vs. relative path issues I described earlier, is likely that the images being included are not accessible to an unauthenticated user. Internally, Word tries to fetch the image and gets a login page back, which it doesn't know how to handle.

 

So the only way this is going to work is if the images in your VF page are (1) specified with an absolute URL, and (2) accessible to unauthenticated users.

 

...stephan

 

ckumckum

How do I need to do this? Please tell me,  My static resource is Public, Visualforce Pages and Classes are added in the Enable Site Visualforce Pages and Apex Classes. My path given is also Absolute. But even then its not working. :(

 

Kindly Help!!!

 

Thanks, 

ckum

stephanstephan
What I would try is first seeing how the page renders with an html content type. If you log out of salesforce, can you still access the page? If so then view source on the page. Make sure that all img tags have absolute paths in the src attribute.
ckumckum

My Path in the View Source is also Absolute, but still Image doesn't appear. :(

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head></head><img src="https://ap1.salesforce.com/servlet/servlet.ImageServer?id=0159000000013hq&oid=00D90000000HpZS&lastMod=1268373505000" /></html>

 

This is the View Source code.

 

I can access this outside Salesforce also in different browser, but still no success. :(

 

Please Help!!!!!!!!1

 

 

Thanks,

ckum

ckumckum

Hey Stephan, Thanks for all your efforts. Finally I found the solution for the same. We dont need to make sites for the above issue. We can just create a new Document in Salesforce with our image, and can use its absolute Path in the image src.

 

Cheers!!!!!!!!

 

ckum

This was selected as the best answer
ckumckum

Now I have one more Issue which I also posted in my first post. I want to add Header and Footer in this Word Doc. Tried using Static resources, using Documents. Any idea how can I solve this.

@page { @bottom-center { font-size:10px; content: "Test"; } @bottom-right { font-size:10px; content: counter(page); } }

 

This is the code in static resource and document. and i have also tried using HTML in my page

<head><style type="text/css"> @page { @bottom-center { font-size:10px; content: "Test"; } @bottom-right { font-size:10px; content: counter(page); } } </style></head>

 

Can anyone help me with this.

 

Thanks,

ckum

stephanstephan

Glad you got the image issue sorted out. I noticed in your example your image was in the head, but whatever.

 

As far as CSS styling, this is probably an issue with what Word can and can't handle when it converts from html to doc. You may want to Google that or follow up with Microsoft, as it's not really a Visuaforce issue. 

ckumckum

Thanks Stephan,  I will do some google on it.

 

Cheers!!!!!

 

ckum