• 上传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=" 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

  • 相关阅读:
    总结的反爬虫手段(持续更新)
    爬虫类编程笔记导航
    技术开发流程小公司
    敏捷开发学习笔记(一)
    .NET Framework各版本比较
    linux shell 之 cut
    Hive insert overwrite 出现错误解决方法
    hive join
    linux shell 之 grep
    hive实现not in
  • 原文地址:https://www.cnblogs.com/-bingyan/p/8066429.html
Copyright © 2020-2023  润新知