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 按價(jià)格排序(可切換排序)</button>-->

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

<!--<button style="margin-left:30px;" onclick="setname()">兩個(gè)表，按媒體名稱仑最，找重復(fù)值</button>-->

<!--<button style="margin-left:30px;" onclick="seturl()">兩個(gè)表，按鏈接，找重復(fù)值</button>-->

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

<button style="margin-left:30px;" onclick="export_excel()">導(dǎo)出</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標(biāo)簽綁定change事件，一上傳選中的.xls文件就會(huì)觸發(fā)該函數(shù)

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

? ? ? ? ? ? ? ? }) // 以二進(jìn)制流方式讀取得到整份excel表格對(duì)象

? ? ? ? ? ? ? ? var persons = []; // 存儲(chǔ)獲取到的數(shù)據(jù)

? ? ? ? ? ? } catch (e) {

? ? ? ? ? ? ? ? console.log('文件類型不正確');

? ? ? ? ? ? ? ? return;

? ? ? ? ? ? }

? ? ? ? ? ? // 表格的表格范圍土浸，可用于判斷表頭是否數(shù)量是否正確

? ? ? ? ? ? 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 + '')

? ? ? ? ? ? })

? ? ? ? ? ? //在控制臺(tái)打印出來表格中的數(shù)據(jù)

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();

? ? ? ? };

? ? ? ? // 以二進(jìn)制方式打開文件

? ? ? ? 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'

? ? ? ? ? ? ? ? }) // 以二進(jìn)制流方式讀取得到整份excel表格對(duì)象

? ? ? ? ? ? ? ? var persons = []; // 存儲(chǔ)獲取到的數(shù)據(jù)

? ? ? ? ? ? } catch (e) {

? ? ? ? ? ? ? ? console.log('文件類型不正確');

? ? ? ? ? ? ? ? return;

? ? ? ? ? ? }

? ? ? ? ? ? // 表格的表格范圍褂删，可用于判斷表頭是否數(shù)量是否正確

? ? ? ? ? ? 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 + '')

? ? ? ? ? ? })

? ? ? ? ? ? //在控制臺(tái)打印出來表格中的數(shù)據(jù)

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();

? ? ? ? };

? ? ? ? // 以二進(jìn)制方式打開文件

? ? ? ? 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;">暫無(wú)<span style="color:#f29702">【重復(fù)名稱】</span>的數(shù)據(jù)膀跌！</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;">暫無(wú)<span style="color:#ff0000">【重復(fù)鏈接】</span>的數(shù)據(jù)！</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>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末固灵，一起剝皮案震驚了整個(gè)濱河市捅伤，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌巫玻，老刑警劉巖丛忆，帶你破解...
    沈念sama閱讀 218,204評(píng)論 6贊 506
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異仍秤，居然都是意外死亡熄诡，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門诗力，熙熙樓的掌柜王于貴愁眉苦臉地迎上來凰浮，“玉大人，你說我怎么就攤上這事苇本⊥嗉耄” “怎么了？”我有些...
    開封第一講書人閱讀 164,548評(píng)論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵瓣窄，是天一觀的道長(zhǎng)笛厦。 經(jīng)常有香客問我，道長(zhǎng)俺夕，這世上最難降的妖魔是什么裳凸？ 我笑而不...
    開封第一講書人閱讀 58,657評(píng)論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮劝贸，結(jié)果婚禮上姨谷，老公的妹妹穿的比我還像新娘。我一直安慰自己映九，他們只是感情好菠秒，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著氯迂，像睡著了一般践叠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上嚼蚀，一...
    開封第一講書人閱讀 51,554評(píng)論 1贊 305
  • 城市分裂傳說
    那天禁灼，我揣著相機(jī)與錄音，去河邊找鬼轿曙。 笑死弄捕，一個(gè)胖子當(dāng)著我的面吹牛僻孝，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播守谓，決...
    沈念sama閱讀 40,302評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼穿铆，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來了斋荞？” 一聲冷哼從身側(cè)響起荞雏，我...
    開封第一講書人閱讀 39,216評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎平酿，沒想到半個(gè)月后凤优，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,661評(píng)論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡蜈彼，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年筑辨，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片幸逆。...
    茶點(diǎn)故事閱讀 39,977評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡棍辕，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出还绘，到底是詐尸還是另有隱情楚昭，我是刑警寧澤，帶...
    沈念sama閱讀 35,697評(píng)論 5贊 347
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布蚕甥，位于F島的核電站哪替，受9級(jí)特大地震影響栋荸，放射性物質(zhì)發(fā)生泄漏菇怀。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評(píng)論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一晌块、第九天 我趴在偏房一處隱蔽的房頂上張望爱沟。 院中可真熱鬧，春花似錦匆背、人聲如沸呼伸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評(píng)論 0贊 22
  • 一樁弒父案钝尸，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)括享。三九已至，卻和暖如春珍促，著一層夾襖步出監(jiān)牢的瞬間铃辖，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評(píng)論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國(guó)打工猪叙， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留娇斩，地道東北人仁卷。 一個(gè)月前我還...
    沈念sama閱讀 48,138評(píng)論 3贊 370
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像犬第，于是被迫代替她去往敵國(guó)和親锦积。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容

  • <!DOCTYPE html> js解析excel html{margin:0;padding:...
    不負(fù)好時(shí)光閱讀 191評(píng)論 0贊 0
  • css相關(guān) 1. 萬(wàn)能居中 1.margin: 0 auto;水平 2.text-align: center;水平...
    chaocc閱讀 964評(píng)論 0贊 2
  • 十年自習(xí)編程 作者：彼得·諾維格 為什么大家都這么著急歉嗓？ 走進(jìn)任何一家書店丰介，你就會(huì)看到教自己Java24小時(shí)內(nèi)除了...
    朱夢(mèng)軒閱讀 206評(píng)論 0贊 0
  • 研究人員(Bloom(1985)、Bryan&Harter(1899年)遥椿、Hayes(1989)基矮、Simmon&C...
    陳湘江閱讀 210評(píng)論 0贊 0
  • 十年內(nèi)自學(xué)編程 彼得·諾維格 為什么大家都這么著急？ 走進(jìn)任何一家書店冠场，您將看到如何在24小時(shí)內(nèi)教會(huì)自己Java家浇，...
    陳龍閱讀 193評(píng)論 0贊 0