function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Leafen SandyLeafen Sandy 

Excel preview issue

Hi, I want to upload and preview an excel file in my visualforce page (preferably without using a controller). I got a website which does the same work as I want. Attaching for reference ( http://oss.sheetjs.com/ ) And when I tried to replicate a same kind in my visualforce page using the same page's source (I uploaded and referred all script and other css files), excel file is just keeps loading in the drop zone but its unable to display the preview of the file.

User-added image


Following is my entire modified code.  
 
<apex:page showHeader="false" contentType="text/html" docType="html-5.0">


<html>
    <head>
        <title>SheetJS Live Grid Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="icon" type="image/png" href="{!URLFOR($Resource.upload, '/upload/logo.png')}" />
        <link rel="stylesheet" href="{!URLFOR($Resource.upload, '/upload/sheetjs.css')}"/>
    </head>
    <body>
        <script src="{!URLFOR($Resource.upload, '/upload/alertify.js')}"></script>
        <script src="{!URLFOR($Resource.upload, '/upload/jquery.min.js')}"></script>
        <script src="{!URLFOR($Resource.upload, '/upload/jquery.handsontable.full.js')}"></script>

        <link rel="stylesheet" media="screen" href="{!URLFOR($Resource.upload, '/upload/jquery.handsontable.full.css')}"/>
        <link rel="stylesheet" media="screen" href="{!URLFOR($Resource.upload, '/upload/samples.css')}"/>
        <link rel="stylesheet" media="screen" href="{!URLFOR($Resource.upload, '/upload/alertify.css')}"/>

        <div id="body">
            <div id="left">
                <div id="logo">
                    <a href="http://sheetjs.com"><img src="{!URLFOR($Resource.upload, '/upload/logo.png')}" class="logo" alt="SheetJS Logo" width="128px" height="128px" /></a>
                </div>
            <div id="drop">Drop a file here</div>
            <h3> Choose a worksheet:</h3>
            <div id="buttons"></div>
        </div>
        <div id="right">
            <div id="header">
                <pre id="out"></pre>
                <h2>SheetJS In-Browser Live Grid Demo</h2>
                <h3>
                    Drop a spreadsheet in the box to the left to see a preview.<br/>
                    Need a file?  Why not the <a href="https://obamawhitehouse.archives.gov/sites/default/files/omb/budget/fy2014/assets/receipts.xls">OMB FY 2014 Federal Receipts?</a>
                </h3>
                <table id="tt">
                  <tr><td colspan="6"><a href="http://github.com/SheetJS/SheetJS.github.io">View This Page Source</a>; <a href="http://github.com/SheetJS/js-xlsx">XLSX Library</a> (for parsing)</td></tr>
                  <tr>
                    <th>File Formats</th>
                    <td><a href="http://github.com/SheetJS/js-xlsx">Library Source</a></td>
                    <td><a href="http://SheetJS.github.io/js-xlsx">Interactive Demo</a></td>
                    <td><a href="http://npm.im/xlsx">"xlsx" on npm</a></td>
                    <td><a href="https://travis-ci.org/SheetJS/js-xlsx">node CI status</a></td>
                    <td><a href="stress.html">browser stress test</a></td>
                  </tr>
                </table>
            </div>
            <div id="hot" style="overflow: scroll" class="handsontable"></div>
            <div id="footnote">
                <h3>
                    This particular parser assumes that <b>the first row of the table is a header.</b><br/>
                    For parsing a more general file, check the Interactive Demos
                </h3><br/>
                <h3>The entire process occurs within your browser <br />
                    <b>NO SPREADSHEET DATA IS SENT TO ANY SERVER (parsing and rendering done in your browser)</b><br/></h3>
                <h3>This is a work in progress.  Every bit helps.  Please email <a href="mailto:dev@sheetjs.com">dev@sheetjs.com</a> with your feedback.</h3>
                <h3>Follow us on Twitter <a href="https://twitter.com/SheetJS">@SheetJS</a></h3>
            </div>
        </div>

        <script src="{!URLFOR($Resource.upload, '/upload/shim.js')}"></script>
        <script src="{!URLFOR($Resource.upload, '/upload/xlsx.full.min.js')}"></script>
        <script src="{!URLFOR($Resource.upload, '/upload/dropsheet.js')}"></script>
        <script src="{!URLFOR($Resource.upload, '/upload/main.js')}"></script>

        <script src="{!URLFOR($Resource.upload, '/upload/spin.js')}"></script>

        <script type="text/javascript">
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-36810333-1']);
          _gaq.push(['_setDomainName', 'sheetjs.com']);
          _gaq.push(['_setAllowLinker', true]);
          _gaq.push(['_trackPageview']);

          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();
        </script>
        </div>
    </body>
</html>
</apex:page>



Kindly let me know if anything is missed out or where exactly I'm going away. Thanks, Leafen.