html+JS 实现对excel的导入和导出
csdh11 2024-12-28 12:01 15 浏览
先看效果：
需求：
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>希望能给大家一些启发，能帮到大家！
相关推荐
- 用Python轻松修改Word文件的作者和时间，打造自己的专属效率工具
-
你是否曾经遇到过需要批量修改Word文件的作者、创建时间或修改时间的情况？手动操作不仅费时费力，还容易出错。可以用Python编写一个小工具，轻松解决这个问题！无论你是编程新手还是有一定经验的...
- 插件开发js代码划分（js插件编写）
-
在开发Chrome插件时，将JavaScript代码拆分成多个模块而非集中放置，主要基于性能优化、可维护性提升和浏览器插件特性适配等多方面的考量。以下是具体原因及区别分析：一、拆分的核心原因...
- 5分钟掌握Python中的标准输入、标准输出、标准错误
-
读取用户输入从标准输入获取输入：user_input=input("Impartyourwisdom:")print(f"Youshared:{user_input}")...
- 高大上的解答:在 'packages.pyi' 中找不到引用 'urllib3'
-
DeepSeek的一句代码：...
- Flask 入门教程（flask快速入门）
-
目录什么是Flask？环境配置与安装第一个Flask应用：HelloWorld路由与视图函数模板与Jinja2表单处理与用户输入...
- 每日一库之 Go 语言开发者的神器—Gotx
-
点击上方蓝色“Go语言中文网”关注我们，领全套Go资料，每天学习Go语言简介Gotx是一个Go语言（Golang）的解释器和运行环境，只有单个可执行文件，绿色、跨平台，无需安装任何Go语言环境就可...
- MySQL性能调优工具包制作（mysql性能调整）
-
一、最终工具包内容mysql_tuning_toolkit/├──scripts/#核心脚本│├──sysbench-pro.sh#...
- 掌握TensorFlow核心用法:从安装到实战的完整指南
-
一、为什么TensorFlow值得学习？作为全球使用最广泛的开源机器学习框架，TensorFlow已累计获得超过17万GitHub星标，支撑着Google搜索、Waymo自动驾驶、NASA卫星图像分析...
- 如何把PY 打包成EXE安装文件（pypy 打包exe）
-
将Python脚本打包成EXE文件通常使用第三方工具实现，以下是详细步骤和注意事项：...
- Pygame Zero 详细使用教程（python zerorpc）
-
PygameZero是一个基于Pygame的简化游戏开发框架，特别适合初学者和快速原型开发。它隐藏了许多底层的复杂性，使得开发者可以更专注于游戏逻辑的实现。本文将通过分析提供的代码，详细介绍如...
- Stable diffusion AI画图辅助脚本 Script 的使用(二)
-
本篇为脚本使用介绍的第二部分，主要介绍Promptmatrix提示词矩阵以及UltimateSDUpscale终极SD放大这两个脚本，同时也简单介绍一下如何编写自己的脚本。1、Promp...
- 一文明白Python 的import如何工作
-
Pythonimport系统的基础知识Python的import系统是该语言设计的关键部分，允许模块化编程和代码的轻松重用。了解这个系统对任何Python程序员都很重要，因为它决定了代码的结构...
- Highlight.js - 前端的代码语法高亮库
-
千辛万苦写了篇技术分享，贴了一堆代码，兴高采烈地发到了自己的博客网站上。结果却发现代码全是白底黑字，字体还难看得很，你瞬间就没了兴致。能不能让网页也能像IDE那样，做带语法高亮的炫酷显示呢？来看一...
- xbox xsx/s ps2模拟器 战神12,北欧女神2 配置教程
-
xsxxss下载PS2独立模拟器，Retroarch全能模拟器地址。...
- RetroArch 着色器、金手指怎么用? 重返复古游戏萤幕滤镜效果
-
自从上次分享RetroArch模拟器的一些技巧后，许多模拟器新用户对老旧游戏机感到好奇，为什么游戏画面看起来会有很多马赛克。这主要是因为当年的游戏开发商是针对当时的屏幕进行设计的，所以在现在的高分辨率...
- 一周热门
- 最近发表
-
- 用Python轻松修改Word文件的作者和时间，打造自己的专属效率工具
- 插件开发js代码划分（js插件编写）
- 5分钟掌握Python中的标准输入、标准输出、标准错误
- 高大上的解答:在 'packages.pyi' 中找不到引用 'urllib3'
- Flask 入门教程（flask快速入门）
- 每日一库之 Go 语言开发者的神器—Gotx
- MySQL性能调优工具包制作（mysql性能调整）
- 掌握TensorFlow核心用法:从安装到实战的完整指南
- 如何把PY 打包成EXE安装文件（pypy 打包exe）
- Pygame Zero 详细使用教程（python zerorpc）
- 标签列表
-
- 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)
- 反恐24小时电话铃声 (33)
- 冒险岛代码查询器 (34)
- 128*128png图片 (34)
- jdk1.8.0_131下载 (34)