xlsx.full JS上传(导入,导出)Excel 源码

导入

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上传文件</title>
    <script type="text/javascript" src='./xlsx.full.min.js'></script>
    <style>
        .lqwvje-btn {
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <label id="realBtn" class="lqwvje-btn">
        <input type="file" id="testFile" hidden="hidden">
        上传文件
    </label>


    <script type="text/javascript">
        //原创来自 www.luofenming.com
        //首先监听input框的变动,选中一个新的文件会触发change事件
        document.querySelector("#testFile").addEventListener("change", function () {
            //获取到选中的文件
            var file = document.querySelector("#testFile").files[0];
            if (file.size > 1024 * 1024) {
                alert('当前文件大小:' + Math.floor(file.size / 1024) + 'KB,上传文件不能大于1024KB');
                return false;
            }
            var type = file.name.split('.');
            if (type[type.length - 1] !== 'xlsx' && type[type.length - 1] !== 'xls') {
                alert('只能选择excel文件导入');
                return false;
            }
            const reader = new FileReader();
            reader.readAsBinaryString(file);
            reader.onload = (e) => {
                const data = e.target.result;
                const zzexcel = window.XLS.read(data, {
                    type: 'binary'
                });
                const result = [];
                for (let i = 0; i < zzexcel.SheetNames.length; i++) {
                    const newData = window.XLS.utils.sheet_to_json(zzexcel.Sheets[zzexcel.SheetNames[i]]);
                    result.push(...newData)
                }
                console.log('result', result);
                for (var i = 0; i < result.length; i++) {
                    console.log(JSON.stringify(result[i]));
                }
                //这里可以写执行 post发送到服务端
            }
        });
    </script>
</body>
</html>

导出

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js导出excel</title>
</head>
<body>
    <button onclick="downloadExl(jsono)">导出</button>
    <a href="" download="我是导出来的测试文件.xlsx" id="downloadA"></a>
    <script src="xlsx.full.min.js"></script>
    <script>
        var jsono = [{
            "姓名": "张三",
            "年龄": "30",
            "性别": "男"
        }, {
            "姓名": "李四",
            "年龄": "40",
            "性别": "女"
        }, {
            "姓名": "王五",
            "年龄": "50",
            "性别": "男"
        }];

        var tmpDown; //导出的二进制对象
        function downloadExl(json, type) {
            //根据json数据,获取excel的第一行(例如:姓名、年龄、性别)存至map
            var tmpdata = json[0];
            json.unshift({});
            var keyMap = []; //获取keys
            for (var k in tmpdata) {
                keyMap.push(k);
                json[0][k] = k;
            }
            var tmpdata = [];
            json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
                v: v[k],
                position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)

            }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
                v: v.v
            });

            //设置区域,比如表格从A1到D10
            var outputPos = Object.keys(tmpdata);
            var tmpWB = {
                SheetNames: ['mySheet'], //保存的表标题
                Sheets: {
                    'mySheet': Object.assign({},
                        tmpdata, //内容

                        {
                            '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域
                        })
                }
            };
            //创建二进制对象写入转换好的字节流

            tmpDown = new Blob([s2ab(XLSX.write(tmpWB,
                { bookType: (type == undefined ? 'xlsx' : type), bookSST: false, type: 'binary' }//这里的数据是用来定义导出的格式类型
            ))], {
                type: ""
            });
            var href = URL.createObjectURL(tmpDown); //创建对象超链接
            document.getElementById("downloadA").href = href; //绑定a标签
            document.getElementById("downloadA").click(); //模拟点击实现下载
            setTimeout(function () { //延时释放

                URL.revokeObjectURL(tmpDown); //用URL.revokeObjectURL()来释放这个object URL

            }, 100);
        }

        //字符串转字符流
        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) & 0xFF;
            return buf;
        }

        //将指定的自然数转换为26进制表示。映射关系:[0-25] -> [A-Z]。

        function getCharCol(n) {
            let temCol = '',
                s = '',
                m = 0
            while (n > 0) {
                m = n % 26 + 1
                s = String.fromCharCode(m + 64) + s
                n = (n - m) / 26
            }
            return s
        }
    </script>
</body>
</html>
xlsx.full.min.js 下载地址: https://pan.baidu.com/s/1BZ7h3LlyceMo_eCFMZqoAg 提取码: 1gjs

评论