2021-01-19

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js解析excel</title>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

    <script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>

<style>

html{margin:0;padding:0px;}

body{margin:0;padding:20px;}

.mydiv{padding:10px;font-size:12px;border-bottom:1px dotted #eee;}

.mydiv .name{display:inline-block;width:200px;margin-right:30px;}

.mydiv .url{display:inline-block;width:400px; margin-right:30px;}

.mydiv .price{display:inline-block;width:100px;color:#ff0000;}

.loading{background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left0;top:0;}

.sk-chase {width: 40px;height: 40px;position: absolute;left:50%;top:50%;margin:-20px 0 0 -20px;animation: sk-chase 2.5s infinite linear both;}

.sk-chase-dot {width: 100%;height: 100%;position: absolute;left: 0;top: 0; animation: sk-chase-dot 2.0s infinite ease-in-out both; }

.sk-chase-dot:before { content: ''; display: block; width: 25%; height: 25%; background-color: #000; border-radius: 100%; animation: sk-chase-dot-before 2.0s infinite ease-in-out both; }

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }

.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }

.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }

.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }

.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }

.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }

.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }

.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }

.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }

.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }

.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }

.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {

  100% { transform: rotate(360deg); }

}

@keyframes sk-chase-dot {

  80%, 100% { transform: rotate(360deg); }

}

@keyframes sk-chase-dot-before {

  50% {

transform: scale(0.4);

  } 100%, 0% {

transform: scale(1.0);

  }

}

</style>

</head>

<body>

<input type="file" id="excel-file"><textarea style="margin-left:30px;" id="area"></textarea>

<div style="margin:10px auto 10px;font-weight:bold;">表1 解析到文本框</div>

<div style="margin-bottom:40px;height:200px;overflow-y:auto;border:1px solid #ccc;" id="areaBody"></div>

<input type="file" id="excel-file2"><textarea style="margin-left:30px;" id="area2"></textarea>

<div style="margin:10px auto 10px;font-weight:bold;">表2 解析到文本框</div>

<div style="height:200px;overflow-y:auto;border:1px solid #ccc;" id="areaBody2"></div>

<div style="margin:30px auto;" >

<!-- <button onclick="setprice()">按价格从低到高排序</button> -->

<button onclick="setprice($('#area'))">表1 按价格排序(可切换排序)</button>

<button style="margin-left:30px;" onclick="setprice($('#area2'))">表2 按价格排序(可切换排序)</button>

<button style="margin-left:30px;" onclick="setname()">两个表，按媒体名称，找重复值</button>

<button style="margin-left:30px;" onclick="seturl()">两个表，按链接，找重复值</button>

</div>

<div id="price" style="min-height:500px"></div>

<div class="loading" id="loading" style="display:none;">

<div class="sk-chase" >

  <div class="sk-chase-dot"></div>

  <div class="sk-chase-dot"></div>

  <div class="sk-chase-dot"></div>

  <div class="sk-chase-dot"></div>

  <div class="sk-chase-dot"></div>

  <div class="sk-chase-dot"></div>

</div>

</div>

<script>

    //给input标签绑定change事件，一上传选中的.xls文件就会触发该函数

    $('#excel-file').change(function(e) {

$('#loading').show();

        var files = e.target.files;

        var fileReader = new FileReader();

        fileReader.onload = function(ev) {

            try {

                var data = ev.target.result

                var workbook = XLSX.read(data, {

                    type: 'binary'

                }) // 以二进制流方式读取得到整份excel表格对象

                var persons = []; // 存储获取到的数据

            } catch (e) {

                console.log('文件类型不正确');

                return;

            }

            // 表格的表格范围，可用于判断表头是否数量是否正确

            var fromTo = '';

            // 遍历每张表读取

            for (var sheet in workbook.Sheets) {

                if (workbook.Sheets.hasOwnProperty(sheet)) {

                    fromTo = workbook.Sheets[sheet]['!ref'];

                    console.log(fromTo);

                    persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));

                    // break; // 如果只取第一张表，就取消注释这行

                }

            }

            //在控制台打印出来表格中的数据

            console.log(persons);

localStorage.setItem('globalArr',JSON.stringify(persons)); 

            $("#area").val(JSON.stringify(persons));

var html='<div>'

for(var i=0;i<persons.length;i++){

html+='<div class="mydiv"><span class="name">'+persons[i].name+'</span><span class="url">'+persons[i].url+'</span><span class="price">'+persons[i].price+'</span></div>'

}

html+='</div>'

$('#areaBody').html(html);

$('#loading').hide();

        };

        // 以二进制方式打开文件

        fileReader.readAsBinaryString(files[0]);

    });

$('#excel-file2').change(function(e) {

$('#loading').show();

        var files = e.target.files;

        var fileReader = new FileReader();

        fileReader.onload = function(ev) {

            try {

                var data = ev.target.result

                var workbook = XLSX.read(data, {

                    type: 'binary'

                }) // 以二进制流方式读取得到整份excel表格对象

                var persons = []; // 存储获取到的数据

            } catch (e) {

                console.log('文件类型不正确');

                return;

            }

            // 表格的表格范围，可用于判断表头是否数量是否正确

            var fromTo = '';

            // 遍历每张表读取

            for (var sheet in workbook.Sheets) {

                if (workbook.Sheets.hasOwnProperty(sheet)) {

                    fromTo = workbook.Sheets[sheet]['!ref'];

                    console.log(fromTo);

                    persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));

                    // break; // 如果只取第一张表，就取消注释这行

                }

            }

            //在控制台打印出来表格中的数据

            console.log(persons);

localStorage.setItem('globalArr2',JSON.stringify(persons)); 

            $("#area2").val(JSON.stringify(persons));

var html='<div>'

for(var i=0;i<persons.length;i++){

html+='<div class="mydiv"><span class="name">'+persons[i].name+'</span><span class="url">'+persons[i].url+'</span><span class="price">'+persons[i].price+'</span></div>'

}

html+='</div>'

$('#areaBody2').html(html);

$('#loading').hide();

        };

        // 以二进制方式打开文件

        fileReader.readAsBinaryString(files[0]);

    });

function sortId(a,b){ 

      return a.price-b.price;;

    }

function sortId2(a,b){ 

      return b.price-a.price; 

    }

let flag=true;

function setprice(obj){

var arr=obj.val();

arr=JSON.parse(arr);

if(flag){

arr.sort(sortId);

}else{

arr.sort(sortId2);

}

flag=!flag;

var result=arr;

var html='<div>'

for(var i=0;i<result.length;i++){

html+='<div class="mydiv"><span class="name">'+result[i].name+'</span><span class="url">'+result[i].url+'</span><span class="price">'+result[i].price+'</span></div>'

}

html+='</div>'

$('#price').html(html);

}

function setname(){

var arr1=localStorage.getItem('globalArr'),arr2=localStorage.getItem('globalArr2');

arr1=JSON.parse(arr1),arr2=JSON.parse(arr2);

var result = [];

        arr2.forEach(item =>{

arr1.forEach(_item =>{

if(_item.name === item.name){

result.push(item)

}

})           

        })

if(result.length>0){

var html='<div>'

for(var i=0;i<result.length;i++){

html+='<div class="mydiv"><span class="name">'+result[i].name+'</span><span class="url">'+result[i].url+'</span><span class="price">'+result[i].price+'</span></div>'

}

html+='</div>'

$('#price').html(html);

}else{

$('#price').html('<div style="color:#666;">暂无<span style="color:#f29702">【重复名称】</span>的数据！</div>');

}

}

function seturl(){

var arr1=localStorage.getItem('globalArr'),arr2=localStorage.getItem('globalArr2');

arr1=JSON.parse(arr1),arr2=JSON.parse(arr2);

var result = [];

        arr2.forEach(item =>{

arr1.forEach(_item =>{

if(_item.url === item.url){

result.push(item)

}

})           

        })

if(result.length>0){

var html='<div>'

for(var i=0;i<result.length;i++){

html+='<div class="mydiv"><span class="name">'+result[i].name+'</span><span class="url">'+result[i].url+'</span><span class="price">'+result[i].price+'</span></div>'

}

html+='</div>'

$('#price').html(html);

}else{

$('#price').html('<div style="color:#666;">暂无<span style="color:#ff0000">【重复链接】</span>的数据！</div>');

}

}

</script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,864评论 6赞 494
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,175评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,401评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,170评论 1赞 286
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,276评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,364评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,401评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,179评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,604评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,902评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,070评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,751评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,380评论 3赞 319
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,077评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,312评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,924评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,957评论 2赞 351

推荐阅读更多精彩内容