讀取 excel 文件並顯示在 html 中

Question

我有一個包含數據的 excel 文件。 我想使用 JS 或 Angular JS 讀取該文件並在 html / web 頁面中顯示結果。

Answer 1

在瀏覽器中讀取* .xslx文件的非常簡單的方法：

（在那之后使用JS或Angular JS在html /網頁中顯示結果很簡單，盡管我建議在Angular上進行React）

https://catamphetamine.github.io/read-excel-file/

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

import readXlsxFile from 'read-excel-file'

const input = document.getElementById('input')

input.addEventListener('change', () => {
  readXlsxFile(input.files[0]).then((data) => {
    // `data` is an array of rows
    // each row being an array of cells.
  })
})

在上面的示例中， data是原始字符串數據。 通過傳遞schema參數，可以使用嚴格的模式將其解析為JSON。 有關示例，請參閱API文檔。

API文檔： http ： //npmjs.com/package/read-excel-file

Answer 2

SheetsJS / js-xlsx Github存儲庫設計用於在Web開發中使用XLSX文件。 這對您真的很有用。 閱讀此書並學習如何使用它，也無需重新發明輪子。 祝好運。

Answer 3

JsZip非常有效地做到了這一點。 看一看。 並參考鏈接以使用JSZip讀取本地文件，然后您可能需要處理以獲取excel文件中的數據。 瀏覽幫助文檔將使您知道該怎么做。

Answer 4

嘗試這個

<html>
<head>
    <meta charset="utf-8" />
    <title>Convert Excel to 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/xlsx@0.15.1/dist/xlsx.full.min.js"></script>
</head>
<body>
    <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" id="excel_file" />

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

<script>

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 = '';

    }

});

</script>

讀取 excel 文件並顯示在 html 中

問題描述

4 個解決方案

解決方案1
3 2018-03-23 23:42:50

解決方案2
1 2016-01-18 11:03:33

解決方案3
0 2016-01-18 11:07:44

解決方案4
0 2022-09-03 18:21:41

讀取 excel 文件並顯示在 html 中

問題描述

4 個解決方案

解決方案1 3 2018-03-23 23:42:50

解決方案2 1 2016-01-18 11:03:33

解決方案3 0 2016-01-18 11:07:44

解決方案4 0 2022-09-03 18:21:41

解決方案1
3 2018-03-23 23:42:50

解決方案2
1 2016-01-18 11:03:33

解決方案3
0 2016-01-18 11:07:44

解決方案4
0 2022-09-03 18:21:41