Excel 到 html 导出

Excel to html export

提问人：shadow777 提问时间：6/12/2018 更新时间：10/21/2022 访问量：222

问：

当我将数据从 excel 导出到 html 时，它像这样导出表格

    <table border=0 cellpadding=0 cellspacing=0 width=1438 
    style='border-collapse:
    collapse;table-layout:fixed;width:1078pt'>

是否可以以某种方式添加属性：

   class="table table-bordered table-condensed"

到已经导出的数据？

我之所以问，是因为我有JS函数，可以在单击时将行突出显示为不同的颜色，但它需要指向表格类的链接。或者也许还有其他方法可以将JS与表联系起来？

提前致谢

JavaScript HTML Excel

评论

答：

0赞 Cobus Kruger 6/12/2018 #1

您可以在运行时添加它。

var element = document.getElementById("table");
element.classList.add("table");
element.classList.add("table-bordered");
element.classList.add("table-condensed");

根据您拥有的表数量，选择器可能需要更改。

1赞 Samuel Hulla 6/12/2018 #2

是的，简单的jQuery就可以了。

$(document).ready(function(){

  $('table').addClass("table table-bordered table-condensed");

});

评论

0赞 shadow777 6/12/2018
这就是我一直在寻找的。谢谢！我还有一个问题。有没有一种简单的方法来存储那些突出显示的行？我的意思是，当我关闭页面并重新打开它时，突出显示的单元格也会被突出显示。如果我突出显示某些单元格，而其他计算机上的其他人将打开该页面，则单元格将保持突出显示状态。
0赞 Samuel Hulla 6/12/2018
@Karol取决于您如何突出显示它们。它可能有点复杂，因为 javascript（以及 jQuery）只是暂时的！从技术上讲，在AJAX的帮助下，它可能是可行的，但仍然可能不是最佳的。此外，您可能应该为此创建一个单独的问题......
1赞 Parthis 10/21/2022 #3

您好，我创建了一个简单的 HTML 页面，用于转换 excle 文件并以 tabel 格式在 HTML 中显示该数据。您可以检查代码

const excel_file = document.getElementById('excel_file');

excel_file.addEventListener('change', (event) => {

  if (!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type)) {
    document.getElementById('excel_data').innerHTML = '<div class="alert alert-danger">Only .xlsx or .xls file format are allowed</div>';

    excel_file.value = '';

    return false;
  }

  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]], {
      header: 1
    });

    if (sheet_data.length > 0) {
      var table_output = '<table class="table table-striped table-bordered">';

      for (var row = 0; row < sheet_data.length; row++) {

        table_output += '<tr>';

        for (var cell = 0; cell < sheet_data[row].length; cell++) {

          if (row == 0) {

            table_output += '<th>' + sheet_data[row][cell] + '</th>';

          } else {

            table_output += '<td>' + sheet_data[row][cell] + '</td>';

          }

        }

        table_output += '</tr>';

      }

      table_output += '</table>';

      document.getElementById('excel_data').innerHTML = table_output;
    }

    excel_file.value = '';

  }

});
.container {
  height: 25%;
}
<html>

<head>
  <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({
      google_ad_client: "ca-pub-4529508631166774",
      enable_page_level_ads: true
    });
  </script>
  <meta charset="utf-8" />
  <title>Webslesson Demo | How to Display Excel Data in HTML Table using JavaScript</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/xlsx.full.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="card">
      <div class="card-header"><b>Select Excel File</b></div>
      <div class="card-body">

        <input type="file" id="excel_file" />

      </div>
    </div>
    <div class="container">
      <div id="excel_data" class="mt-5"></div>
    </div>
  </div>

</body>

</html>

上一个：简单的 Web 模板

下一个：JavaScript - 保存突出显示的行