JSFiddle - React, Tailwind, and code Playground

HTML

<script lang="javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js"></script>

<table>
  <tr>
    <td>
    <button onclick="importData()">選擇檔案</button>
    </td>
    <td>
    <div id="FileName">未選擇任何檔案</div>
    </td>
  </tr>
</table>
<div id="result1"></div>

CSS

button {
  background-color: #EFEFEF; /* Green */
  border-width:1px;
  border-style:solid;
  color: black;
  padding: 3px 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}
#FileName{font-size: 14px;}

JavaScript

function importData() {
  let input = document.createElement('input');
  input.type = 'file';
  input.onchange = _ => {
            FileName.innerHTML = input.value.replace('C:\\fakepath\\','');
            parseExcelFile1(input);
        };
  input.click();  
}

function parseExcelFile1(inputElement) {
  var files = inputElement.files || [];
  if (!files.length) return;
  var file = files[0];
 
  console.time();
  var reader = new FileReader();
  reader.onloadend = function(event) {
    var arrayBuffer = reader.result;
    // debugger

    var options = { type: 'array' };
    var workbook = XLSX.read(arrayBuffer, options);
    console.timeEnd();

    var sheetName = workbook.SheetNames
    var sheet = workbook.Sheets[sheetName]
    result1.innerHTML = XLSX.utils.sheet_to_html(sheet)
  };
  reader.readAsArrayBuffer(file);
  inputElement ='';
}