2021-01-22

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>11</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;font-size: 12px;}

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

.padr20{padding-right:20px;}.padl20{padding-left:20px;}

.padtb20{padding-bottom:10px;padding-top:10px;}

.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;}

table,table tr{width:100%;}

table td{word-break: keep-all;white-space:nowrap;}

.areabody{width:100%;height:150px;overflow:auto;border:1px solid #ccc;}

.marb30{margin-bottom:30px;}

.loading{background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left:0;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 class="areabody marb30" 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 class="areabody" id="areaBody2"></div>

<textarea style="width: 0;height: 0" id="area_all"></textarea>

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

<!--<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>-->

<button style="margin-left:30px;" onclick="contact_sort()">合并排序</button>

<button style="margin-left:30px;" onclick="export_excel()">导出</button>

</div>

<div style="width: 0;height: 0;display:none;">

<table id="mytable" border="1" cellpadding="0" cellspacing="1" width="100%" ></table>

</div>

<div id="price" class="areabody" style="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; // 如果只取第一张表，就取消注释这行

                }

            }

            persons.sort(function(a, b) {

                return (a.name + '').localeCompare(b.name + '')

            })

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

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

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

var html='<table style="border-collapse: collapse">'

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

html+='<tr style="border-bottom:1px solid #ccc;">';

for(var key in persons[i]){

  html+='<td style="padding:10px 20px 10px 0">'+persons[i][key]+'</td>'

}

html+='</tr>'

}

html+='</table>'

$('#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; // 如果只取第一张表，就取消注释这行

                }

            }

            persons.sort(function(a, b) {

                return (a.name + '').localeCompare(b.name + '')

            })

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

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

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

            var html='<table style="border-collapse: collapse">'

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

                html+='<tr style="border-bottom:1px solid #ccc;">';

                for(var key in persons[i]){

                    html+='<td style="padding:10px 20px 10px 0">'+persons[i][key]+'</td>'

                }

                html+='</tr>'

            }

            html+='</table>'

$('#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='<table>'

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

            html+='<tr class="mydiv">' ;

            for(var key in result[i]){

                html+='<td style="padding:20px 20px 0 0">'+result[i][key]+'</td>'

            }

            html+='</tr>'

        }

        html+='</table>'

$('#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.each(function (item) {

arr1.each(function (_item) {

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

                    result.push(item)

                }

            })

        })

if(result.length>0){

            var html='<table>'

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

                html+='<tr class="mydiv">' ;

                for(var key in result[i]){

                    html+='<td style="padding:20px 20px 0 0">'+result[i][key]+'</td>'

                }

                html+='</tr>'

            }

            html+='</table>'

$('#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.each(function (item) {

arr1.each(function (_item) {

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

                    result.push(item)

                }

})

        })

if(result.length>0){

            var html='<table>'

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

                html+='<tr class="mydiv">' ;

                for(var key in result[i]){

                    html+='<td style="padding:20px 20px 0 0">'+result[i][key]+'</td>'

                }

                html+='</tr>'

            }

            html+='</table>'

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

}else{

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

}

}

function contact_sort() {

        var arr1=$('#area').val(),arr2=$('#area2').val(),result=[];

        arr1=JSON.parse(arr1);

        if(arr1.length>0){

            result=arr1;

        }

        if(arr2.length>0){

            arr2=JSON.parse(arr2);

            result=result.concat(arr2);

        }

        result.sort(function(a, b) {

            return (a.name + '').localeCompare(b.name + '')

        })

        $('#area_all').val(JSON.stringify(result));

        var html='<table style="border-collapse: collapse">'

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

            html+='<tr class="padl20" style="border-bottom:1px solid #ccc;"><td class="padr20 padtb20"><input type="checkbox" style="width:20px;height:20px;" name="checkbox" value="'+i+'"/></td>';

            html+='<td class="padr20 padtb20">'+result[i].name+'</td><td class="padr20 padtb20">'+result[i].price+'</td><td class="padr20 padtb20">'+result[i].url+'</td>'

            html+='</tr>'

        }

        html+='</table>';

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

    }

function export_excel() {

    let result=[],allArr=$('#area_all').val();

        allArr=JSON.parse(allArr);

$('input[name="checkbox"]:checked').each(function(){

    let theVal=$(this).val();

    console.log(theVal);

    console.log(allArr[theVal]);

            result.push(allArr[theVal]);

        });

let html='';

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

            html+='<tr class="mydiv">' ;

            for(var key in result[i]){

                html+='<td style="padding:20px 20px 0 0">'+result[i][key]+'</td>'

            }

            html+='</tr>'

        }

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

        tableToExcel('mytable');

}

var tableToExcel = (function() {

    var uri = 'data:application/vnd.ms-excel;base64,',

        template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',

        base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },

        format = function(s, c) {

            return s.replace(/{(\w+)}/g,

                function(m, p) { return c[p]; }) }

    return function(table, name) {

        if (!table.nodeType) table = document.getElementById(table)

        var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}

        window.location.href = uri + base64(format(template, ctx))

    }

})()

</script>

</body>

</html>

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

推荐阅读更多精彩内容

  • 2021-01-19
    <!DOCTYPE html> js解析excel html{margin:0;padding:...
    不负好时光阅读 191评论 0赞 0
  • 前端面试题
    css相关 1. 万能居中 1.margin: 0 auto;水平 2.text-align: center;水平...
    chaocc阅读 962评论 0赞 2
  • 自习编程
    十年自习编程 作者：彼得·诺维格 为什么大家都这么着急？ 走进任何一家书店，你就会看到教自己Java24小时内除了...
    朱梦轩阅读 206评论 0赞 0
  • 十年内自学编程
    研究人员(Bloom(1985)、Bryan&Harter(1899年)、Hayes(1989)、Simmon&C...
    陈湘江阅读 210评论 0赞 0
  • 2021-01-22
    十年内自学编程 彼得·诺维格 为什么大家都这么着急？ 走进任何一家书店，您将看到如何在24小时内教会自己Java，...
    陈龙阅读 192评论 0赞 0