首页 > 其他分享 >导入xls到页面

导入xls到页面

时间:2022-12-16 11:26:28浏览次数:60  
标签:slice console url workbook 导入 var xls 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xls的导入</title>
</head>
<body>
    <label for="excel-file" class="btn btn-success">导入Excel文件</label>
<input type="file" name="excel-file" id="excel-file"/>
<br>
<table id="context">
 
</table>
</body>
</html>
<script src="./jquery.js"></script>
<script src="./xlsx.core.min.js"></script>
<script>
    $('#excel-file').change(function(e) {   
        console.log(e);        
            try {
                new Uint8Array([1,2]).slice(0,2);
            } catch (e) {
                console.log("[Uint8Array"+e.description+"]这里使用【Array.slice】。");
                //IE或有些浏览器不支持Uint8Array.slice()方法。改成使用Array.slice()方法
                Uint8Array.prototype.slice = Array.prototype.slice;
            }
            var url=$('#excel-file').val();
            if(!url){return;}
            var suffix=url.substring(url.lastIndexOf(".")+1,url.length);
            if(!(suffix=="xls"||suffix=="xlsx")){
                return alert("文件类型不正确");
            }
            var files = e.target.files;            
            var fileReader = new FileReader();
            fileReader.readAsArrayBuffer(files[0]);// 以二进制方式打开文件
            fileReader.onload = function(ev) {
                $('#excel-file').val('');
                $("#context").html("");
                try {                    
                    var data = ev.target.result;
                    var workbook = XLSX.read(data, { type: 'array'}),
                    persons = [];
                } catch (e) {
                    console.error(e);
                    return alert('文件类型不正确!');
                }
                
                //遍历每张表读取
                for (var sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet],{raw:true, header:1}));
                        console.log(persons)
                        for ( var i = 0; i <persons.length; i++){
                            var person=persons[i];
                            var tr='<tr id="tr-'+i+'">';
                            for (var j = 0; j <person.length; j++){
                                tr+='<td>'+$.trim(person[j]?person[j]:"")+'</td>';
                            }
                            for (var k = 0; k < (6-person.length); k++) {
                                tr+='<td></td>';
                            }
                            if(person.length>1){
                                tr+='<td style="padding:6px;"><a href="javascript:$(\'#tr-'+i+'\').remove();" class="btn btn-danger btn-xs">删除</a></td></tr>';
                                $("#context").append(tr);
                            }
                        }
                        break;// 如果只取第一张表,就把beak注释取消
                    }
                }
            };
        });
</script>

https://github.com/SheetJS/js-xlsx 这个地址下的 dist 下载xlsx.core.min.js文件 教程连接“http://blog.haoji.me/js-excel.html”

标签:slice,console,url,workbook,导入,var,xls,页面
From: https://www.cnblogs.com/Ma-YuHao/p/16986836.html

相关文章

  • 刷新页面怎么实现数字滚动?
    刷新页面,显示动态数据。......
  • Python 导入模块、文件、包、自定义路径包
    测试环境,假设:主文件绝对路径:/home/ubu/py_test/main.py模块文件:/home/ubu/py_test/con.py模块目录:/home/ubu/py_test/modules/tt.py模块目录:/home/ubu/py_test/modules......
  • 如何使用CSS提高页面性能
    一、前言大家好,我是CoderBin,每一个网页都离不开css,但是很多人又认为,css主要是用来完成页面布局的,像一些细节或者优化,就不需要怎么考虑,实际上这种想法是不正确的作为页面......
  • 前端开发系列094-小程序篇之小程序框架页面级文件
    title:前端开发系列094-小程序篇之小程序框架页面级文件tags:categories:[]date:2018-11-2300:00:04本文介绍小程序项目中的页面级文件,这些文件的作用,以及具体的......
  • bootstrap页面标题缩略图
    关于作者:郑云飞,程序员Java(web前端,web后端,oracle数据库ormysql数据库)本文主要来讲解以下内容:1.大屏幕介绍;2.页面标题;3.缩略图;4.警示框;5.Well;6.总结。大屏幕介绍轻量,灵活的......
  • Java:SpringBoot使用EasyExcel实现Excel文件的导出下载和上传导入功能
    SpringBoot使用EasyExcel实现Excel文件的导出下载和上传导入功能文件目录$tree-Itarget.├──README.md├──pom.xml└──src└──main├─......
  • vue页面传参
    vue3中如果是父子或者父孙组件,则利用provide,inject来进行数据传参,并且可各个组件都可以修改。(或者利用传统的一级一级传参props传参)如果不是父子组件,而且兄弟等组件,则利......
  • 键盘弹起来时,页面布局错乱
    html5页面当点击input输入框弹出安卓手机上键盘就会把背景顶了上来,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度。页面布局就乱了,解决方法:原生js:windo......
  • 写文章 带目录的时候 用#(空格)标题 后面用## title,一个页面只有一个H1
    写文章带目录的时候用#(空格)标题后面用##title,一个页面只有一个H1---------------------------------------------生活的意义并不是与他人争高下,而在于享受努力......
  • 新建了一个页面,如论如何也访问不了
    今天新建了一个页面,无论如何也访问不到。于是在router中写了redirect。然后发现竟然是我的路径填写错误。默认成了hashmode,带#的方式。修改mode为history ......