上傳excel文件並讀取數據

時間 2019-11-12

標籤上傳 excel 文件讀取數據欄目 Microsoft Office 简体版

原文原文鏈接

在前端開發中，可能會遇到前端如何讀取Excel文件的數據的需求，(省略一千字。。。)。廢話少說，直接上代碼。html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="js/jquery.js"></script>
    <script src="js/xlsx.core.min.js"></script>
    <title>上傳excel文件並讀取數據</title>
</head>

<body>
    <input type="file" id="file">
    <div id="container" style="width: 400px; height: 400px;"></div>
    <script>
        $('#file').change(function (e) {
            var files = e.target.files;

            var fileReader = new FileReader(); // 將文件內容讀入內存
            fileReader.onload = function (ev) { // 當讀取操做成功完成時調用
                // console.log(this.result); // 查看文件輸出內容
                try {
                    var data = ev.target.result,

                        //以二進制流方式讀取獲得表格中數據  
                        workbook = XLSX.read(data, { type: 'binary' }),
                        info = [];//存儲獲取到的數據  
                } catch (e) {
                    alert('文件類型不正確');
                    return;
                }

                var fromTo = '';
                //遍歷每張表讀取  
                for (var sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        fromTo = workbook.Sheets[sheet]['!ref'];
                        info = info.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    }
                }
            };
            //以二進制方式打開文件  
            fileReader.readAsBinaryString(files[0]);
        });  
    </script>
</body>

</html>