上传excel文件并读取数据

空城皆是旧梦

已于 2024-05-10 13:09:42 修改

阅读量2.5k

点赞数 3

文章标签： excel 数据前端 xlsx

于 2019-03-01 15:33:40 首次发布

本文链接：https://blog.csdn.net/qq_36012563/article/details/88060541

版权

在前端开发中，可能会遇到前端如何读取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>

说明：

jquery.js的下载地址：http://www.bootcdn.cn/jquery/
xlsx.core.min.js的下载地址：https://www.bootcdn.cn/xlsx/

空城皆是旧梦

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
上传excel文件并读取数据

在前端开发中，可能会遇到前端如何读取Excel文件的数据的需求，代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="js/jquery.js"&gt;&lt;/script&amp
复制链接

扫一扫