【前端读取Excel】

前端读取excel

有一些情况我们并不需要保存Excel到本地，这种情况就可以选择直接在前端把数据拿出来

使用layui读取Excel

Html代码

    <div class="layui-form-item">
                    <label class="layui-form-label">导入手机号</label>
                    <div class="layui-input-block">
                        <input type="file" class="layui-btn layui-btn-primary" id="Import" multiple="multiple">
                        <button type="button" class="layui-btn" id="ExportTemplate">
                            <i class="layui-icon">&#xe67c;</i>下载模板
                        </button>
                    </div>
                   
                </div>

JS代码

 layui.use(['form', 'layedit', 'laydate', 'table', 'element'], function () {
        var form = layui.form,//表单
            $ = layui.$,//jquery
            table = layui.table,//表格
            layer = layui.layer,//基础
            laypage = layui.laypage,//分页
             element = layui.element,
            laydate = layui.laydate,//日期
        excel = layui.excel;//导出表格
         var UserInfo = [];//用于存储excel导入的接收短信用户信息
//导出功能
    var Template = [];
        Template.push({
            phone:"133321133131"
        })
        Template.unshift({
            phone: '联系电话'
        });
        $("#ExportTemplate").click(function () {
            LAY_EXCEL.exportExcel(Template, '营销业务手机导出模板.xlsx', 'xlsx');
        });

//导入功能
  $("#Import").change(function (e) {
            try {
                var files = e.target.files;
                excel.importExcel(files, {
                    fields: {
                        'phone': 'A'
                    }
                }, function (data) {
                    var userinfo = data[0].sheet1;
                    for (var i = 1; i < userinfo.length; i++)
                    {
                        UserInfo.push(
                            userinfo[i].phone
                        );
                    }
                });
            } catch (e) {
                layer.alert(e.message);
            }
           
        });



        });

使用xlsx.core.js

前端代码

	<input type="file" id="files" />
		

JS代码

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
		<script src="js/xlsx.core.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("#files").change(function(e){
				console.log("上传了")
				var files = e.target.files;
				console.log(files)
				var fileReader = new FileReader();
				console.log(fileReader)
				fileReader.onload = function (ev){
					console.log("进入")
					console.log(this.result);
					try {
						var data = ev.target.result,
	
							//以二进制流方式读取得到表格中数据  
							workbook = XLSX.read(data, { type: 'binary' }),
							info = [];//存储获取到的数据  
					} catch (e) {
						alert('文件类型不正确');
						return;
					}
					console.log(workbook)
					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]));
						}
					}
					console.log(info)
				}
				//以二进制方式打开文件  
				fileReader.readAsBinaryString(files[0]);
			})
		</script>

需要JS包直接留言，不想放在CSDN上，放上面你们下载需要C币。恶心。