我自己做的基于SheetJs做的例子

基本思路:

通过<input type="file" >获取选中的本地excel文件流。再通过 FileReader 对象读取文件,然后使用FileReader.onload 事件监听操作

 

FileReader仅用于以安全的方式从用户(远程)系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。 要在JavaScript中按路径名读取文件,应使用标准Ajax解决方案进行服务器端文件读取,如果读取跨域,则使用CORS权限。 

 

 

可以处理对应列,跳过行头,生成JSON

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<html>
<head>
 
    <title>JS-XLSX Live Demo</title>
 
    <style>
        #drop {
            border: 2px dashed #bbb;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            padding: 25px;
            text-align: center;
            font: 20pt bold,"Vollkorn";
            color: #bbb
        }
 
        #b64data {
            width: 100%;
        }
 
        a {
            text-decoration: none
        }
 
        button {
        }
    </style>
 
    <script type="text/javascript" src="dist/xlsx.full.min.js"></script>
    <script type="text/javascript" src="dist/xlsx.core.min.js"></script>
 
    <script type="text/javascript" src="dist/jquery.min.js"></script>
 
</head>
 
<body>
<pre>
<input type="file" name="xlfile" id="xlf" onchange="importf(this)">
</pre>
<pre id="out"></pre>
    <br>
    <div id="demo">
 
 
      </div>
    <div>
        <textarea id='debug' rows="30" cols="100"></textarea>
 
    </div>
 
 
 
 
    <script>
            /*
                  FileReader共有4种读取方法:
                  1.readAsArrayBuffer(file):将文件读取为ArrayBuffer。
                  2.readAsBinaryString(file):将文件读取为二进制字符串
                  3.readAsDataURL(file):将文件读取为Data URL
                  4.readAsText(file, [encoding]):将文件读取为文本,encoding缺省值为'UTF-8'
                               */
            var workbook;//读取完成的数据
            var rABS = false; //是否将文件读取为二进制字符串
 
             
 
 
 
        function importf(obj) {//导入
 
 
            const headers = ["A", "B", "C", "D", "E","F"]; //针对G0107中的表样,做的6列
            const ranges = 4;                              //针对G0107中的表样,跳过的表头
 
 
                if (!obj.files) {
                    return;
                }
                var f = obj.files[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    var data = e.target.result;
                    if (rABS) {
                        workbook = XLSX.read(btoa(fixdata(data)), {//手动转化
                            type: 'base64'
                        });
                    } else {
                        workbook = XLSX.read(data, {
                            type: 'binary'
                        });
                    }
                    var out_json;
 
                    for (var sheetNum = 0; sheetNum < Number(workbook.SheetNames.length); sheetNum++) {
 
                        var first_sheet_name = workbook.SheetNames[sheetNum];
 
                        //var json = XLSX.utils.sheet_to_json(workbook.Sheets[first_sheet_name]);
                        var json = XLSX.utils.sheet_to_json(workbook.Sheets[first_sheet_name],
                            {  header: headers, raw: true, defval:''}
                        );
 
                        debugger;
                        //console.log(json);
 
                        out_json = getOutput(json, 'json');
                        $('#debug').val(out_json);
 
 
                    }
                     
                };
                if (rABS) {
                    reader.readAsArrayBuffer(f);
                } else {
                    reader.readAsBinaryString(f);
                }
            }
 
            function fixdata(data) { //文件流转BinaryString
                var o = "",
                    l = 0,
                    w = 10240;
                for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
                o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
                return o;
        }
 
 
        function getOutput(obj, type) {
            switch (type) {
                case 'json':
                    return JSON.stringify(obj);
                    break;
                case 'obj':
                    return obj;
                    break;
                default:
                    return JSON.stringify(obj);
            }
        }
 
    </script>
 
 
</body>
</html>

  

 

posted @   苦行者的刀  阅读(329)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示