function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sundhar.mks1.3962649227519546E12sundhar.mks1.3962649227519546E12 

How to preview the excel file in visualforce page?

Hi,

how to view the excel file preview in visualforce page,Is this possible? kindly give any example or code

Thanks.

 
RamuRamu (Salesforce Developers) 
The below discussion thread might help

https://success.salesforce.com/answers?id=90630000000gsbVAAQ
EnreecoEnreeco
If you mean by viewing a VF page as an excel you can see here https://help.salesforce.com/apex/HTViewSolution?id=000003176&language=en_US.
If instead you want to show a preview of an excel file (in an Attachmetn / Document of your ORG?) I think you should use some sort of JS libraries (e.g . http://www.hnwatcher.com/r/953659/Excel-file-preview-in-JavaScript or https://github.com/SheetJS/js-xlsx or http://flexpaper.devaldi.com/ ).

--
May the Force.com be with you!
sundhar.mks1.3962649227519546E12sundhar.mks1.3962649227519546E12
Hi Ramu,

I tried iframe but it's only download,i want to preview the excel document, how it is possible?

======================
<apex:page > 
<apex:iframe src="https://c.na1.content.force.com/servlet/servlet.FileDownload?file=01530000001iage" scrolling="true" id="theIframe"/>
</apex:page>
 
sundhar.mks1.3962649227519546E12sundhar.mks1.3962649227519546E12
Hi ForceLogic,

I have Exported the Excel data but can not display the full view i got a Blobvalue error. When i add the condent type to apex page it only download excel file but not view the page

Actualy  EXcel file Attached to "notes & attachment" in my org.how to view the file?
Thanks.
EnreecoEnreeco
I understand.
So you have to make a visual preview using Javascript or some other tool.
Try this http://oss.sheetjs.com/ tool JS based. You have to pass the content of the Attachment to the page (you can use Remoteactions or simply a getter but you have to use Base64 encoding otherwise you will encounter a Blobvalue error).
This is more tricky than it appears on first sight.

Hope this helps.
sundhar.mks1.3962649227519546E12sundhar.mks1.3962649227519546E12
Hi ForceLogic,

I have used this script with apex page. get the attachment body,Contenttype to SOQl query and bind the body to  {!csvString}" but i did not get the solution

=========================
<script>
        window.location.href = "data:application/pdf;base64,{!csvString}";
    </script> 

Thanks.
EnreecoEnreeco
The only requirement here is that the csvString should be the Attachment.Body field encoded in base64 ( see https://www.salesforce.com/us/developer/docs/apexcode/Content/apex_classes_restful_encodingUtil.htm#apex_System_EncodingUtil_base64Encode ).
Try this previous forum discussion for more details (with excel file download): https://developer.salesforce.com/forums/ForumsMain?id=906F0000000AY1q

This sould help you!

 
sundhar.mks1.3962649227519546E12sundhar.mks1.3962649227519546E12
Hi ForceLogic,

Kindly see my code, I have tried some way what our want to change my code
============================
Page
============================
<apex:page controller="UploadReportValue" contentType="application/vnd.ms-excel"> 
  <apex:form >
  <apex:pageBlock >
    <apex:pageBlockSection >
  <!--   <apex:repeat var="attachment" value="{!attachedFiles.Body}"></apex:repeat>
      <apex:iframe src="/servlet/servlet.FileDownload—file={!attachedFiles.Body}"/> -->
        
     <apex:outputPanel >{!csvString}</apex:outputPanel> 
   </apex:pageBlockSection>
  </apex:pageBlock>
</apex:form> 
<!-- <script>
        window.location.href = "data:application/pdf;base64,{!csvString}";
    </script> -->   
</apex:page>
=========================
Controller
=========================
Public Class UploadReportValue {

    public String getCsvString() {
        return null;
    }
     
    public Blob csvBlob{get; set;}
    public Attachment attachedFiles{get;set;}
    public String xlsHeader {
        get {
            String strHeader = '';
            strHeader += '<?xml version="1.0"?>';
            strHeader += '<?mso-application progid="Excel.Sheet"?>';
            return strHeader;
        }
     }
    public UploadReportValue() {
        attachedFiles = [select Id,body,ContentType from Attachment where parentId =:'a0Zf000000567BR' Limit 1];
    
       csvBlob = attachedFiles.Body;
       String csvString = csvBlob.toString();
       System.debug('============='+csvString);
      }
 }

Thanks.
Sundhar M
 
EnreecoEnreeco
You have to change  
window.location.href = "data:application/pdf;base64,{!csvString}";
with this if the file is an excel XLSX file: 
window.location.href = "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;content-disposition:attachment;base64,{!cvsString}";
Or this if this is a XLS file: 
window.location.href = "data:application/vnd.ms-excel;content-disposition:attachment;base64,{!cvsString}";

In the controller change: 
String csvString = csvBlob.toString();

with this: 
String csvString = EncodingUtil.base64Encode(csvBlob);

Doing this makes the page attribute [contentType="application/vnd.ms-excel"] useless, so remote it.

 
sundhar.mks1.3962649227519546E12sundhar.mks1.3962649227519546E12
Hi ForeLogic,

I have changed but page is empty, no one dispaly on vf page
======================
page
======================
<apex:page controller="UploadReportValue" contentType="application/vnd.ms-excel"> 
  <apex:form >
    <script>
           window.location.href = "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;content-disposition:attachment;base64,        {!csvString}";
    </script> 
    </apex:form>  
</apex:page>
===================
Controller
===================
Public Class UploadReportValue {


    public String getCsvString() {
       return null;
    }    
    public Blob csvBlob{get; set;}
    public Attachment attachedFiles{get;set;}
    public String xlsHeader {
        get {
            String strHeader = '';
            strHeader += '<?xml version="1.0"?>';
            strHeader += '<?mso-application progid="Excel.Sheet"?>';
            return strHeader;
        }
     }
    public UploadReportValue() {
        attachedFiles = [select Id,body,ContentType from Attachment where parentId =:'a0Zf000000567BR' Limit 1];
    
       csvBlob = attachedFiles.Body;
       String csvString = EncodingUtil.base64Encode(csvBlob);
       System.debug('============='+csvString);
      }
      
 }

Thanks.
EnreecoEnreeco
As I said remove the contentType="application/vnd.ms-excel" page attribute and also the spaces after "base64,{!csvString}"
sundhar.mks1.3962649227519546E12sundhar.mks1.3962649227519546E12
Hi ForceLogic,

Sorry i did not get exactly,Removed the contentType  seee the below
==========================
<apex:page controller="UploadReportValue">
  <apex:form >
 <!-- <apex:pageBlock >
    <apex:pageBlockSection >
     <apex:repeat var="attachment" value="{!attachedFiles.Body}"></apex:repeat>
      <apex:iframe src="/servlet/servlet.FileDownload—file={!attachedFiles.Body}"/> 
        
     <apex:outputPanel >{!csvString}</apex:outputPanel> 
   </apex:pageBlockSection>
  </apex:pageBlock>
 -->
    <script>
       window.location.href = "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;content-disposition:attachment;base64,{!csvString}";
    </script> 
    </apex:form>  
</apex:page>
EnreecoEnreeco
I didn't see that you are not setting any value for the getCSVString() method! 
public String getCsvString() {
       if(csvBlob != null) return EncodingUtil.base64Encode(csvBlob);
}

be sure that the Controller constructor is querying an Attachment that is effectively on the ORG (I'm talking about the  [select Id,body,ContentType from Attachment where parentId =:'a0Zf000000567BR' Limit 1]; query )



 
sundhar.mks1.3962649227519546E12sundhar.mks1.3962649227519546E12
Hi ForceLogic,

Can you please change my code,
============================
page
============================
<apex:page controller="UploadReportValue" ContentType="base64,{!csvString}">
  <apex:form >
<script>
       window.location.href = "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;content-disposition:attachment;base64,{!csvString}";
    </script> 
    </apex:form>  
</apex:page>
=========================
Controller
=========================
Public Class UploadReportValue {


    public String getCsvString() {
       return null;
    }    
    public Blob csvBlob{get; set;}
    public Attachment attachedFiles{get;set;}
    public String xlsHeader {
        get {
            String strHeader = '';
            strHeader += '<?xml version="1.0"?>';
            strHeader += '<?mso-application progid="Excel.Sheet"?>';
            return strHeader;
        }
     }
    public UploadReportValue() {
      attachedFiles = [select Id,body,ContentType from Attachment where parentId =:'a0Zf000000567BR' Limit 1];
    
       csvBlob = attachedFiles.Body;
       String csvString = EncodingUtil.base64Encode(csvBlob);
       System.debug('============='+csvString);
        
      }
      
 }

Thanks.
EnreecoEnreeco
Page: 
<apex:page controller="UploadReportValue" >
  <apex:form >
<script>
       window.location.href = "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;content-disposition:attachment;base64,{!csvString}";
    </script> 
    </apex:form>  
</apex:page>
Controller: 
Public Class UploadReportValue {

    
    public String getCsvString() {
       if(csvBlob != null) return EncodingUtil.base64Encode(csvBlob);
       return null;
    }    
    public Blob csvBlob{get; set;}
    public Attachment attachedFiles{get;set;}
    public String xlsHeader {
        get {
            String strHeader = '';
            strHeader += '<?xml version="1.0"?>';
            strHeader += '<?mso-application progid="Excel.Sheet"?>';
            return strHeader;
        }
     }
    public UploadReportValue() {
      attachedFiles = [select Id,body,ContentType from Attachment where parentId =:'a0Zf000000567BR' Limit 1];
    
       csvBlob = attachedFiles.Body;
       String csvString = EncodingUtil.base64Encode(csvBlob);
       System.debug('============='+csvString);
        
      }
      
 }


 
sundhar.mks1.3962649227519546E12sundhar.mks1.3962649227519546E12
Hi ForeLogic.

In the given code only downloaded the attachment. But does not disaply the vf page, how to display the Attachment to vf page without downdloading?i want to view the full data to vf page

Thanks.
EnreecoEnreeco
Hi Sundhar, 
I thought you didn't want anymore to preview the attachment (the code you provided did exactly this, except that it was badly written).
If you want a preview you have to do some research and probably use some Javascript library. 
For some hints read my first question, I've never developer this so I can't show here some code.
Anyway I believe that "http://www.hnwatcher.com/r/953659/Excel-file-preview-in-JavaScript" could do what you want to do.
Hope this helps
Suma GangaSuma Ganga
Hi Enreeco,
Thanks for this post. this helps me alot.
but, i have the problem with IE.the same code is working in Mozilla but not in IE..
can you please help me out.

Thanks in advance.

-- Suma.
rajesh k 10rajesh k 10
Hi,
I have single Excel sheet but this single excel sheet having multiple sheets(means multiple objects each sheet).How to import multiple sheets(means multiple objects with single excel with different sheets).

Using below code i was done import for single excel sheet for single object with but how to do import multiple objects(means i have one excel but this excel having multiple sheets(means multiple objects))
  
<apex:page controller="importDataFromCSVController">
    <apex:form >
        <apex:pagemessages />
        <apex:pageBlock >
            <apex:pageBlockSection columns="4">
                  <apex:inputFile value="{!csvFileBody}"  filename="{!csvAsString}"/>
                  <apex:commandButton value="Import Account" action="{!importCSVFile}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
        <apex:pageBlock >
           <apex:pageblocktable value="{!accList}" var="acc">
              <apex:column value="{!acc.name}" />
              <apex:column value="{!acc.AccountNumber}" />
              <apex:column value="{!acc.Type}" />
              <apex:column value="{!acc.Accountsource}" />
              <apex:column value="{!acc.Industry }" />
        </apex:pageblocktable>
     </apex:pageBlock>
   </apex:form>
</apex:page>
  
public class importDataFromCSVController {
public Blob csvFileBody{get;set;}
public string csvAsString{get;set;}
public String[] csvFileLines{get;set;}
public List<account> acclist{get;set;}
  public importDataFromCSVController(){
    csvFileLines = new String[]{};
    acclist = New List<Account>();
  }
  
  public void importCSVFile(){
       try{
           csvAsString = csvFileBody.toString();
           csvFileLines = csvAsString.split('\n');
            
           for(Integer i=1;i<csvFileLines.size();i++){
               Account accObj = new Account() ;
               string[] csvRecordData = csvFileLines[i].split(',');
               accObj.name = csvRecordData[0] ;            
               accObj.accountnumber = csvRecordData[1];
               accObj.Type = csvRecordData[2];
               accObj.AccountSource = csvRecordData[3];  
               accObj.Industry = csvRecordData[4];                                                                            
               acclist.add(accObj);  
           }
        //insert acclist;
        }
        catch (Exception e)
        {
            ApexPages.Message errorMessage = new ApexPages.Message(ApexPages.severity.ERROR,'An error has occured while importin data Please make sure input csv file is correct');
            ApexPages.addMessage(errorMessage);
        } 
  }
}

Thanks