Open excel file before read it using javascript

2.8k views Asked by At

I just want to open excel file before reading the uploaded excel file, i am using xlsx.read javascript API to read uploaded excel file, before that i need to open the file because the file is being password protected, i have shared the both concepts read excel file and open excel file can anyone please let me know how to open the using xlsx.read

Excel Reader using Javascript:

<html>

<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" onclick="UploadProcess()" />
<br/>

<div id="ExcelTable"></div>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/xlsx.full.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/jszip.js"></script>
<script type="text/javascript">
    function UploadProcess() {
    //Reference the FileUpload element.
    var fileUpload = document.getElementById("fileUpload");
    

    //Validate whether File is valid Excel file.
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xls|.xlsx)$/;
    if (regex.test(fileUpload.value.toLowerCase())) {
        if (typeof (FileReader) != "undefined") {
            var reader = new FileReader();

            //For Browsers other than IE.
            if (reader.readAsBinaryString) {
                reader.onload = function (e) {
                    GetTableFromExcel(e.target.result);
                };
                reader.readAsBinaryString(fileUpload.files[0]);
            } else {
                //For IE Browser.
                reader.onload = function (e) {
                    var data = "";
                    var bytes = new Uint8Array(e.target.result);
                    for (var i = 0; i < bytes.byteLength; i++) {
                        data += String.fromCharCode(bytes[i]);
                    }
                    GetTableFromExcel(data);
                };
                reader.readAsArrayBuffer(fileUpload.files[0]);
            }
        } else {
            alert("This browser does not support HTML5.");
        }
    } else {
        alert("Please upload a valid Excel file.");
    }
};
function GetTableFromExcel(data) {
    //Read the Excel File data in binary
    var workbook = XLSX.read(data, {
        type: 'binary'
    });

    
    //get the name of First Sheet.
    var Sheet = workbook.SheetNames[0];

    //Read all rows from First Sheet into an JSON array.
    var excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[Sheet]);

    //Create a HTML Table element.
    var myTable  = document.createElement("table");
    myTable.border = "1";

    //Add the header row.
    var row = myTable.insertRow(-1);

    //Add the header cells.
    var headerCell = document.createElement("TH");
    headerCell.innerHTML = "Id";
    row.appendChild(headerCell);

    headerCell = document.createElement("TH");
    headerCell.innerHTML = "Name";
    row.appendChild(headerCell);

    headerCell = document.createElement("TH");
    headerCell.innerHTML = "Country";
    row.appendChild(headerCell);
    
    headerCell = document.createElement("TH");
    headerCell.innerHTML = "Age";
    row.appendChild(headerCell);
    
    headerCell = document.createElement("TH");
    headerCell.innerHTML = "Date";
    row.appendChild(headerCell);
     
     headerCell = document.createElement("TH");
    headerCell.innerHTML = "Gender";
    row.appendChild(headerCell);


    //Add the data rows from Excel file.
    for (var i = 0; i < excelRows.length; i++) {
        //Add the data row.
        var row = myTable.insertRow(-1);

        //Add the data cells.
        var cell = row.insertCell(-1);
        cell.innerHTML = excelRows[i].Id;

        cell = row.insertCell(-1);
        cell.innerHTML = excelRows[i].Name;

        cell = row.insertCell(-1);
        cell.innerHTML = excelRows[i].Country;
        
        cell = row.insertCell(-1);
        cell.innerHTML = excelRows[i].Age;
        
        cell = row.insertCell(-1);
        cell.innerHTML = excelRows[i].Date;
        
        cell = row.insertCell(-1);
        cell.innerHTML = excelRows[i].Gender;
    }
    

    var ExcelTable = document.getElementById("ExcelTable");
    ExcelTable.innerHTML = "";
    ExcelTable.appendChild(myTable);
 };
</script>
</html>

Open or Download Excel File using Javascript:

<html>
<body>
   <input type="button" onclick='window.open("test.xlsx")' value="Open File">
   <script type="text/javascript">      
    var request = new XMLHttpRequest();
    request.open("GET", "C:\Users\user\Downloads\test.xlsx");       
    request.responseType = "blob";
    request.onload = function() {
      // set `blob` `type` to `"text/html"`
      var blob = new Blob([this.response], {type:"text/html"});
      var url = URL.createObjectURL(blob);
      var w = window.open(url);
    }
    request.send();             
  </script>
 </body>
</html>
0

There are 0 answers