纯前端读取Excel文件数据

使用xlsx插件进行读取,引入插件:

<script src="${ctxStatic}/sheetjs/xlsx.full.min.js"></script>

<script src="${ctxStatic}/sheetjs/xlsx.core.min.js"></script>

1.导入文件

<input id="btnFile" class="btn btn-file" name="upfile" type="file" style="display: none" value="导入Excel"></input>

<button id="btnImport" class="btn-mini btn-danger btn-express" type="button">导入Excel</button>

<span class="download"><a href="${ctx}/import/template">下载模板</a></span>

使用隐藏的导入按钮来处理文件的change事件:

$("#btnImport").on("click", function (e) {//将input[file]隐藏,点击按钮才触发上传文件

            $("#btnFile").trigger("click")

});

2.对导入的文件进行处理

$("#btnGqFile").on("change", function (ev) {

//console.log(ev.target.files[0]);

var reader = new FileReader();

reader.onload = function (e) {

        try {

                var data = e.target.result;

                var workbook = XLSX.read(data, { type: 'binary' }); // 以二进制流方式读取得到整份excel表格对象

                var sheetNames = workbook.SheetNames; // 工作表名称集合

                var worksheet = workbook.Sheets[sheetNames[0]]; // 只读取第一张sheet

                //var html = XLSX.utils.sheet_to_html(worksheet);//解析成html

                //$("#demo").html(html)//将解析的html放入表格

                var workData = XLSX.utils.sheet_to_json(worksheet);//解析成json数据

                console.log(JSON.stringify(workData));

                var rowLength = $("#subTable tr").length;

                if(rowLength > 1){

                    if(confirm("确认要覆盖原有明细吗?")){

                            //alert("不保留");

                            var gqTable = document.getElementById('subTable');

                            for(let i=rowLength-1;i>0;i--){

                                    gqTable.deleteRow(i);

                            }

                    }

                }

                setTable(workData);

        } catch (err) {

                console.log(err);

                alert("文件类型不正确,请确认!");

                return false;

            }

};

// 以二进制方式打开文件

reader.readAsBinaryString(ev.target.files[0]);

});

3. 解析workBook对象的方法

XLSX.utils.sheet_to_csv:生成CSV格式

XLSX.utils.sheet_to_txt:生成纯文本格式

XLSX.utils.sheet_to_html:生成HTML格式

XLSX.utils.sheet_to_json:输出JSON格式

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容