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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

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