How to Display Excel Sheet in HTML Page

Excel Preview On Html

There is an easy way you can embed the workbook into your web page, but you have to host it on OneDrive and then get an embed link from there:

https://support.office.com/en-us/article/Share-it-Embed-an-Excel-workbook-on-your-web-page-or-blog-from-OneDrive-804e1845-5662-487e-9b38-f96307144081

Here is an example:

https://www.spreadsheetsmadeeasy.com/how-to-capitalize-names-in-excel/

How to embed excel file on html

Open that excel file and save it as html... i think you can use the code there...
If you also need to do some editing in your web page... it will be a little more difficult

Open excel file through normal html link

HTTP is a stateless protocol. What that means for you is that when your users download a file from the intranet via http, they are downloading a copy, rather than the original. Any changes they make will only appear in their copy, and then you end up with loads of copies of the same workbook with different, possibly overlapping changes. You don't want that!

And also ... how are your users even going to upload their changes?

You need to create a shared folder on your network and put the workbook there. You can then use the file:///SERVER/PATH/FILE.xls format in your <a /> links on your intranet to direct your user to the actual file on the server.

I would recommend you start by creating a simple html doc on your desktop to get familiar with the file:/// path format.
Eg

<html>
    <head />
    <body>
        <a href="file:///SERVER/PATH/FILE.xls">Click</a>
    <body>
 <html>

save that in notepad and rename the extension from .txt to .html.

You can also type file:/// paths straight into windows explorer's address bar which allow for testing paths without resorting to the html document mentioned above.

UNFORTUNATELY! It seems that the browsers default behavior is to always download a link rather than open it (even if it is a local resource), so if you actually want to open it then you must resort to changing your browser intranet permissions to allow JS to access local resources, which then allows you to use the technique below.

This article (http://www.codeproject.com/Articles/113678/How-to-execute-a-Local-File-using-HTML-Application) uses

<script type="text/javascript" language="javascript">
    function RunFile() {
    WshShell = new ActiveXObject("WScript.Shell");
    WshShell.Run("c:/windows/system32/notepad.exe", 1, false);
    }
</script>

to open notepad. You can use command line arguments with Excel.exe (https://support.office.com/en-za/article/Command-line-switches-for-Excel-321cf55a-ace4-40b3-9082-53bd4bc10725) to tell it what the file path is...

Excel.exe "C:\PATH\Excel.xls"

ASP.NET Core MVC - How to display data from Excel into HTML table before inserting into the DB

You can use JavaScript to monitor the status of the file, then read the file and load it through xlsx.full.

You can refer to my test code below:

    <div class="container">
    <h2 class="text-center mt-4 mb-4">Convert Excel to HTML Table using JavaScript</h2>
    <div class="card">
            <div class="card-header"><b>Select Excel File</b></div>
            <div class="card-body">
                <input type="file" name="file" id="excel_file" />
                <input type="button" name="display" value="Show Data" id="btnShow" onclick="ShowData()" class="btn btn-primary" />
            </div>
    </div>
    <div id="excel_data" class="mt-5"></div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonyous" />
<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>
<script>
    var table_output = "";
    var excel_file = document.getElementById("excel_file");
    excel_file.addEventListener("change",(event) =>{

        var reader = new FileReader();

        reader.readAsArrayBuffer(event.target.files[0]);

        reader.onload = function(event){
            var data = new Uint8Array(reader.result);

            var work_book = XLSX.read(data,{type:'array'});

            var sheet_name = work_book.SheetNames;

            var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]],{hearder:1});
            
            if(sheet_data.length > 0)
            {
                table_output += '<table class="table table-striped table-bordered">';

                table_output += '<thead><tr><th>First Name </th><th> Last Name </th><th> AdmissionYear </th><th> RegistrationNo </th></tr></thead>';
                table_output += '<tbody>';

                for(var row = 0; row < sheet_data.length; row++)
                {
                    table_output += '<tr>';
                    table_output += '<td>' + sheet_data[row].FirstName + '</td>';
                    table_output += '<td>' + sheet_data[row].LastName + '</td>';
                    table_output += '<td>' + sheet_data[row].AdmissionYear + '</td>';
                    table_output += '<td>' + sheet_data[row].RegistrationNo + '</td>';
                    table_output += '</tr>';
                }

                table_output += '</tbody></table>';
            }
        }
    })
    function ShowData()
    {
        document.getElementById("excel_data").innerHTML = table_output;
    }

</script>

Test Result:
Sample Image
When file is selected and ShowData is clicked:

Hope this can help you.

How to Display Excel Sheet in HTML Page

Excel Preview On Html

How to embed excel file on html

Open excel file through normal html link

ASP.NET Core MVC - How to display data from Excel into HTML table before inserting into the DB

Related Topics

Leave a reply