html+JS 实现对excel的导入和导出
csdh11 2024-12-28 12:01 21 浏览
先看效果：
需求：
1、取到外箱下面的所有子包
2、 PSN和箱号一一对应
3、需要将子包的内容，截取对应的数据，整合到一个excel中
一、我们需要用到xlsx.full.min.js 这个js文件，用于导入和导出excel的，可以自行下载
二、创建html脚本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="file" id="file-input" />
<input type="file" id="file-input2" />
<input type="button" id="btn" value="导出到excel"/>
<table id="table" border="1" cellspacing="0" cellpadding="0" width="1500px">
<thead>
<tr>
<th>厂内外箱*箱号</th>
<th>箱号</th>
<th>PSN</th>
<th>P/N</th>
<th>MPN</th>
<th>vendor Code</th>
<th>Date Code</th>
<th>Let NO.</th>
<th>QTY</th>
<th>Manufactuer</th>
<th>Country of Qrigin</th>
<th>MFG Code</th>
<th>Ver</th>
</tr>
<tbody></tbody>
</thead>
</table>
</html>三、 添加第一个按钮和第二个按钮导入excel的js事件
①、这里第一个按钮导入之后，取到外箱，得到对应的子包，保存在{a:[a1,a2]} 这样的对象格式中，createDynamicObject 这个方法是实现该功能的
②、$('#file-input2').click() 这个事件，是导入第二张excel后，取到PSN和箱号，然后和第一张表取到的对象进行对比，然后将子包的数据动态添加到表格中
<script src="js/jquery.js"></script>
<script src="js/xlsx.full.min.js"></script>
<script src="js/export.js"></script>
<script>
var arr=[];
var arr1=[];
let values=[];
let myObject=null;
let cool={};
function createDynamicObject(keys, valuesArray) {
var obj = {};
for (var i = 0; i < arr1.length; i++) {
var key = arr1[i];
var value = values.length > i ? values[i] : [];
obj[key] = Array.isArray(value) ? value : [value];
}
return obj;
}
$('#file-input').change(function(e){
var file=e.target.files[0];
var reader=new FileReader();
reader.onload=function(e){
var data=e.target.result;
var wk=XLSX.read(data,{type:'binary'});
var sheetName=wk.SheetNames[0];
var sheet=wk.Sheets[sheetName];
var len1=sheet['!ref'].split(':')[1];
var len=parseInt(len1.substring(1,len1.length));
let j=0;
console.log(len)
for(var i=2;i<len;i++){
if(sheet[`E${i}`]!= undefined){
let wx=sheet[`E${i}`].v;
if(wx=='外箱'){
let pn=sheet[`F${i}`].v;
arr[j]=i;
arr1[j]=pn;
j++;
}
}
}
for(let ii=0;ii<arr.length;ii++){
values[ii]=[];
let ii_1=0;
for(let jj=arr[ii];ii<=arr.length-1&&jj<arr[ii+1];jj++){
let wx1=sheet[`E${jj}`].v;
if(wx1=='小包'){
let pn1=sheet[`H${jj}`].v;
values[ii][ii_1]=pn1;
ii_1++;
}
}
}
myObject = createDynamicObject(arr1, values);
}
reader.readAsBinaryString(file);
})
$('#file-input2').change(function(e){
var file1=e.target.files[0];
var reader1=new FileReader();
reader1.onload=function(e){
var data1=e.target.result;
var wk=XLSX.read(data1,{type:'binary'});
var sheetName=wk.SheetNames[0];
var sheet=wk.Sheets[sheetName];
var len1_1=sheet['!ref'].split(':')[1];
var len_1=parseInt(len1_1.substring(1,len1_1.length));
let j=0;
for(var a=2;a<len_1;a++){
let k=sheet[`B${a}`].v;
let v=sheet[`C${a}`].v;
cool[k]=v;
}
var table=$('#table');
Object.keys(cool).forEach(key=>{
Object.keys(myObject).forEach(key_1=>{
if(key==key_1){
for(var j=0;j<myObject[key_1].length;j++){
let tr=$('<tr></tr>');
let num1=cool[key];
let td0=$(`<td class="num_1">${key_1}*${num1}</td>`);
tr.append(td0);
let td1=$(`<td class="num_1">${num1}</td>`);
tr.append(td1);
let num2=myObject[key_1][j];
let td2=$(`<td class="num_1">${num2.substring(48,48+27)}</td>`);
tr.append(td2);
let td3=$(`<td class="num_1">${num2.substring(6,6+8)}</td>`);
tr.append(td3);
let td4=$(`<td class="num_1" width="200px">${num2.substring(16,16+16)}</td>`);
tr.append(td4);
let td5=$(`<td class="num_1" >${num2.substring(33,33+6)}</td>`);
tr.append(td5);
let td6=$(`<td class="num_1">${num2.substring(41,41+4)}</td>`);
tr.append(td6);
let td7=$(`<td class="num_1">${num2.substring(77,77+5)}</td>`);
tr.append(td7);
let td8=$(`<td class="num_1">${num2.substring(83,83+3)}</td>`);
tr.append(td8);
let td9=$(`<td class="num_1">${num2.substring(87,87+7)}</td>`);
tr.append(td9);
let td10=$(`<td class="num_1">${num2.substring(96,96+5)}</td>`);
tr.append(td10);
let td11=$(`<td class="num_1">${num2.substring(103,103+6)}</td>`);
tr.append(td11);
let td12=$(`<td class="num_1">${num2.substring(111,111+1)}</td>`);
tr.append(td12);
$('tbody').append(tr);
}
}
})
});
}
reader1.readAsBinaryString(file1);
});三、导出excel ，自己封装了个js，export.js
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}); // 字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
return blob;
}
function openDownloadDialog(url, saveName) {
if (typeof url == 'object' && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
var event;
if (window.MouseEvent) event = new MouseEvent('click');
else {
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}
在html里面调用：
$('#btn').click(function(){
var table1 = document.querySelector("#table");
var sheet = XLSX.utils.table_to_sheet(table1);//将一个table对象转换成一个sheet对象
openDownloadDialog(sheet2blob(sheet),'下载.xlsx');
})
整体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="file" id="file-input" />
<input type="file" id="file-input2" />
<input type="button" id="btn" value="导出到excel"/>
<table id="table" border="1" cellspacing="0" cellpadding="0" width="1500px">
<thead>
<tr>
<th>厂内外箱*箱号</th>
<th>箱号</th>
<th>PSN</th>
<th>P/N</th>
<th>MPN</th>
<th>vendor Code</th>
<th>Date Code</th>
<th>Let NO.</th>
<th>QTY</th>
<th>Manufactuer</th>
<th>Country of Qrigin</th>
<th>MFG Code</th>
<th>Ver</th>
</tr>
<tbody></tbody>
</thead>
</table>
<script src="js/jquery.js"></script>
<script src="js/xlsx.full.min.js"></script>
<script src="js/export.js"></script>
<script>
var arr=[];
var arr1=[];
let values=[];
let myObject=null;
let cool={};
function createDynamicObject(keys, valuesArray) {
var obj = {};
for (var i = 0; i < arr1.length; i++) {
var key = arr1[i];
var value = values.length > i ? values[i] : [];
obj[key] = Array.isArray(value) ? value : [value];
}
return obj;
}
$('#file-input').change(function(e){
var file=e.target.files[0];
var reader=new FileReader();
reader.onload=function(e){
var data=e.target.result;
var wk=XLSX.read(data,{type:'binary'});
var sheetName=wk.SheetNames[0];
var sheet=wk.Sheets[sheetName];
var len1=sheet['!ref'].split(':')[1];
var len=parseInt(len1.substring(1,len1.length));
let j=0;
console.log(len)
for(var i=2;i<len;i++){
if(sheet[`E${i}`]!= undefined){
let wx=sheet[`E${i}`].v;
if(wx=='外箱'){
let pn=sheet[`F${i}`].v;
arr[j]=i;
arr1[j]=pn;
j++;
}
}
}
for(let ii=0;ii<arr.length;ii++){
values[ii]=[];
let ii_1=0;
for(let jj=arr[ii];ii<=arr.length-1&&jj<arr[ii+1];jj++){
let wx1=sheet[`E${jj}`].v;
if(wx1=='小包'){
let pn1=sheet[`H${jj}`].v;
values[ii][ii_1]=pn1;
ii_1++;
}
}
}
myObject = createDynamicObject(arr1, values);
}
reader.readAsBinaryString(file);
})
$('#file-input2').change(function(e){
var file1=e.target.files[0];
var reader1=new FileReader();
reader1.onload=function(e){
var data1=e.target.result;
var wk=XLSX.read(data1,{type:'binary'});
var sheetName=wk.SheetNames[0];
var sheet=wk.Sheets[sheetName];
var len1_1=sheet['!ref'].split(':')[1];
var len_1=parseInt(len1_1.substring(1,len1_1.length));
let j=0;
for(var a=2;a<len_1;a++){
let k=sheet[`B${a}`].v;
let v=sheet[`C${a}`].v;
cool[k]=v;
}
var table=$('#table');
Object.keys(cool).forEach(key=>{
Object.keys(myObject).forEach(key_1=>{
if(key==key_1){
for(var j=0;j<myObject[key_1].length;j++){
let tr=$('<tr></tr>');
let num1=cool[key];
let td0=$(`<td class="num_1">${key_1}*${num1}</td>`);
tr.append(td0);
let td1=$(`<td class="num_1">${num1}</td>`);
tr.append(td1);
let num2=myObject[key_1][j];
let td2=$(`<td class="num_1">${num2.substring(48,48+27)}</td>`);
tr.append(td2);
let td3=$(`<td class="num_1">${num2.substring(6,6+8)}</td>`);
tr.append(td3);
let td4=$(`<td class="num_1" width="200px">${num2.substring(16,16+16)}</td>`);
tr.append(td4);
let td5=$(`<td class="num_1" >${num2.substring(33,33+6)}</td>`);
tr.append(td5);
let td6=$(`<td class="num_1">${num2.substring(41,41+4)}</td>`);
tr.append(td6);
let td7=$(`<td class="num_1">${num2.substring(77,77+5)}</td>`);
tr.append(td7);
let td8=$(`<td class="num_1">${num2.substring(83,83+3)}</td>`);
tr.append(td8);
let td9=$(`<td class="num_1">${num2.substring(87,87+7)}</td>`);
tr.append(td9);
let td10=$(`<td class="num_1">${num2.substring(96,96+5)}</td>`);
tr.append(td10);
let td11=$(`<td class="num_1">${num2.substring(103,103+6)}</td>`);
tr.append(td11);
let td12=$(`<td class="num_1">${num2.substring(111,111+1)}</td>`);
tr.append(td12);
$('tbody').append(tr);
}
}
})
});
}
reader1.readAsBinaryString(file1);
});
$('#btn').click(function(){
var table1 = document.querySelector("#table");
var sheet = XLSX.utils.table_to_sheet(table1);//将一个table对象转换成一个sheet对象
openDownloadDialog(sheet2blob(sheet),'下载.xlsx');
})
</script>
</body>
</html>希望能给大家一些启发，能帮到大家！
相关推荐
- SpringBoot+LayUI后台管理系统开发脚手架
-
源码获取方式：关注，转发之后私信回复【源码】即可免费获取到！项目简介本项目本着避免重复造轮子的原则，建立一套快速开发JavaWEB项目（springboot-mini），能满足大部分后台管理系统基础开...
- Spring Boot+Vue全栈开发实战，中文版高清PDF资源
-
SpringBoot+Vue全栈开发实战，中文高清PDF资源，需要的可以私我：）SpringBoot致力于简化开发配置并为企业级开发提供一系列非业务性功能，而Vue则采用数据驱动视图的方式将程序...
- 2021年超详细的java学习路线总结—纯干货分享
-
本文整理了java开发的学习路线和相关的学习资源，非常适合零基础入门java的同学，希望大家在学习的时候，能够节省时间。纯干货，良心推荐！第一阶段：Java基础...
- 探秘Spring Cache:让Java应用飞起来的秘密武器
-
探秘SpringCache：让Java应用飞起来的秘密武器在当今快节奏的软件开发环境中，性能优化显得尤为重要。SpringCache作为Spring框架的一部分，为我们提供了强大的缓存管理能力，让...
- 3，从零开始搭建SSHM开发框架(集成Spring MVC)
-
目录本专题博客已共享在(这个可能会更新的稍微一些)https://code.csdn.net/yangwei19680827/maven_sshm_blog...
- Spring Boot中如何使用缓存?超简单
-
SpringBoot中的缓存可以减少从数据库重复获取数据或执行昂贵计算的需要，从而显著提高应用程序的性能。SpringBoot提供了与各种缓存提供程序的集成，您可以在应用程序中轻松配置和使用缓...
- 我敢保证，全网没有再比这更详细的Java知识点总结了，送你啊
-
接下来你看到的将是全网最详细的Java知识点总结，全文分为三大部分：Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点，别眨眼，从小白到大佬、零基础到精通，你绝...
- 1，从零开始搭建SSHM开发框架(环境准备)
-
目录本专题博客已共享在https://code.csdn.net/yangwei19680827/maven_sshm_blog1，从零开始搭建SSHM开发框架（环境准备）...
- 做一个适合二次开发的低代码平台，把程序员从curd中解脱出来-1
-
干程序员也有好长时间了，大多数时间都是在做curd。现在想做一个通用的curd平台直接将我们解放出来；把核心放在业务处理中。用过代码生成器，在数据表设计好之后使用它就可以生成需要的controller...
- 设计一个高性能Java Web框架（java做网站的框架）
-
设计一个高性能JavaWeb框架在当今互联网高速发展的时代，构建高性能的JavaWeb框架对于提升用户体验至关重要。本文将从多个角度探讨如何设计这样一个框架，让我们一起进入这段充满挑战和乐趣的旅程...
- 【推荐】强&牛!一款开源免费的功能强大的代码生成器系统!
-
今天，给大家推荐一个代码生成器系统项目，这个项目目前收获了5.3KStar，个人觉得不错，值得拿出来和大家分享下。这是我目前见过最好的代码生成器系统项目。功能完整，代码结构清晰。...
- Java面试题及答案总结(2025版持续更新)
-
大家好，我是Java面试分享最近很多小伙伴在忙着找工作，给大家整理了一份非常全面的Java面试场景题及答案。...
- Java开发网站架构演变过程-从单体应用到微服务架构详解
-
Java开发网站架构演变过程，到目前为止，大致分为5个阶段，分别为单体架构、集群架构、分布式架构、SOA架构和微服务架构。下面玄武老师来给大家详细介绍下这5种架构模式的发展背景、各自优缺点以及涉及到的...
- 本地缓存GuavaCache(一)（guava本地缓存原理）
-
在并发量、吞吐量越来越大的情况下往往是离不开缓存的，使用缓存能减轻数据库的压力，临时存储数据。根据不同的场景选择不同的缓存，分布式缓存有Redis，Memcached、Tair、EVCache、Aer...
- 一周热门
- 最近发表
- 标签列表
-
- mydisktest_v298 (34)
- document.appendchild (35)
- 头像打包下载 (61)
- acmecadconverter_8.52绿色版 (39)
- word文档批量处理大师破解版 (36)
- server2016安装密钥 (33)
- mysql 昨天的日期 (37)
- parsevideo (33)
- 个人网站源码 (37)
- centos7.4下载 (33)
- mysql 查询今天的数据 (34)
- intouch2014r2sp1永久授权 (36)
- 先锋影音源资2019 (35)
- jdk1.8.0_191下载 (33)
- axure9注册码 (33)
- pts/1 (33)
- spire.pdf 破解版 (35)
- shiro jwt (35)
- sklearn中文手册pdf (35)
- itextsharp使用手册 (33)
- 凯立德2012夏季版懒人包 (34)
- 冒险岛代码查询器 (34)
- 128*128png图片 (34)
- jdk1.8.0_131下载 (34)
- dos 删除目录下所有子目录及文件 (36)