jquery 如何让js去读取Excel里面的数据

很多时候的很多想法都是和别人一起探讨出来的,并非个人所一个人想出来的。

想法背景:今天和同事探讨需求时候我突然想到能让前端去校验Excel里面已存在的两条员工的数据这样可以避免到服务器C#后端去校验从而减轻服务器的压力

首先得引入xlsx.mini.js文件，可以去官方下载,官方有案例说明,不想的看的话可以下载我的代码到本地看

js 导入Excel后的显示 

//读取本地文件
    function readWorkbookFromLocalFile(file, callback) {
        var reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = function (e) {
            var data = e.target.result;
            var workbook = XLSX.read(data, {
                type: ‘binary‘
            });
            if (callback) callback(workbook);
        };
    }

    function getFile() {
        let files = $(‘#file‘).prop(‘files‘);
        if (files) {
            readWorkbookFromLocalFile(files[0], (workbook) => {
                createTables(workbook.Sheets)
            });
        }
    }
    //将sheets转换为表格
    function createTables(sheets) {
        let div = $(“&lt;div></div>”)
        //遍历每一张sheet表格
        for (let i in sheets) {
            //转换HTML是一个数组对象，分为三部分:meta,title,table
            let table = $(XLSX.utils.sheet_to_html(sheets[i]))[2];
            let $table = $(table)
            $table.attr(“width“, “80%”)
            $table.attr(“border“, “1”)
            $table.attr(“align“, “center“)
            $table.css({
                “margin“: “5%”
            })
            $(“#tableContainer“).append($table)
        }
    }
    $(function () {
        $(“#btn“).click(() => {
            //手动触发文本输入框
            $(“#file“).trigger(“click“);
        })
    })

js 导入Excel导出前的显示 

  function tableToExcel(tableDOM, filename) {
            let tableSheet = XLSX.utils.table_to_sheet(tableDOM);
            openDownloadDialog(sheet2blob(tableSheet), filename + ‘.xlsx‘);
        }
        $(“button“).click(() => {
            let sheetTable = $(“<table></table>”);
            //拷贝一份到需要打印的表格,直接写等于剪切,所以加clone()
            sheetTable.append($(“#myTable”).find(“thead“).clone());
            sheetTable.append($(“<tbody></tbody>”));
            let tbody = sheetTable.find(“tbody“);
            let checkboxs = $(“.checkbox:checked“);
            for (let checkbox of checkboxs) {
                //获取选中行
                let tr = $(checkbox).parents(‘tr‘)[0];
                //拷贝一份到需要打印的表格
                tbody.append($(tr).clone());
            }
            sheetTable.find(“.export–remove“).parent().remove();
            //文件名字可自定义
            tableToExcel(sheetTable[0], “测试“);
        })
        $(“.all–checkbox“).change(() => {
            $(“.checkbox“).prop(“checked“, $(“.all-checkbox“).prop(“checked“));
        })
    })
    function sheet2blob(sheet, sheetName) {
        sheetName = sheetName || ‘sheet1’;
        var workbook = {
            SheetNames: [sheetName],
            Sheets: {}
        };
        workbook.Sheets[sheetName] = sheet; // 生成excel的配置项

        var wopts = {
            bookType: ‘xlsx‘, // 要生成的文件类型
            bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
            type: ‘binary‘
        };
        var wbout = XLSX.write(workbook, wopts);
        var blob = new Blob([s2ab(wbout)], {
            type: “application/octet-stream“
        }); // 字符串转ArrayBuffer
        function s2ab(s) {
            var buf = new ArrayBuffer(s.length);
            var view = new Uint8Array(buf);
            for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) &amp; 0xFF;
            return buf;
        }
        return blob;
    }

    function openDownloadDialog(url, saveName) {
        if (typeof url == ‘object‘ &amp;&amp; url instanceof Blob) {
            url = URL.createObjectURL(url); // 创建blob地址
        }
        var aLink = document.createElement(‘a’);
        aLink.href = url;
        aLink.download = saveName || ”; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
        var event;
        if (window.MouseEvent) event = new MouseEvent(‘click‘);
        else {
            event = document.createEvent(‘MouseEvents‘);
            event.initMouseEvent(‘click‘, true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        }
        aLink.dispatchEvent(event);
    }

能够实现导入和导出功能全靠网上大神，参考文章：

使用xlsx.core.min.js进行导入(表格)导出(Excel)功能_￡漫步 云端彡的博客-CSDN博客
https://www.cnblogs.com/ajaemp/p/12880847.html
使用js-xlsx纯前端导出excel_tianfugui的博客-CSDN博客

代码007普通

打赏 收藏 海报 链接