上传excel文件并读取数据

在前端开发中，可能会遇到前端如何读取Excel文件的数据的需求，(省略一千字。。。)。废话少说，直接上代码。

<!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>

说明：

1. jquery.js的下载地址：http://www.bootcdn.cn/jquery/

2. xlsx.core.min.js的下载地址：https://github.com/SheetJS/js-xlsx/tree/master/dist

posted @ 2017-12-19 16:26  书呆子IT_me  阅读(2653)  评论(0)  编辑  收藏  举报