网站首页 > 技术文章 正文
先看效果：
需求：
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>希望能给大家一些启发，能帮到大家！
猜你喜欢
- 2025-01-08 SpringBoot+POI导出Excel表格
- 2025-01-08 理解 Next.js 中的 CSR、SSR、SSG、ISR 以及 Streaming
- 2025-01-08 熬夜7天，我总结了JavaScript与ES的25个知识点
- 2025-01-08 Layui 项目前端导出Excel文件总结
- 2025-01-08 [西门子PLC] WinCC 从 SQL 数据库导出数据到 Excel 报表模板
- 2025-01-08 产品说要让excel在线编辑，我是这样做的。
- 2025-01-08 JAVA导出EXCEL表格
- 2025-01-08 js中的import/export
- 2025-01-08 前端必读:如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件
- 2025-01-08 ES6语法之export default与export区别
欢迎 你 发表评论:
- 最近发表
- 标签列表
-
- oraclesql优化 (66)
- 类的加载机制 (75)
- feignclient (62)
- 一致性hash算法 (71)
- dockfile (66)
- 锁机制 (57)
- javaresponse (60)
- 查看hive版本 (59)
- phpworkerman (57)
- spark算子 (58)
- vue双向绑定的原理 (68)
- springbootget请求 (58)
- docker网络三种模式 (67)
- spring控制反转 (71)
- data:image/jpeg (69)
- base64 (69)
- java分页 (64)
- kibanadocker (60)
- qabstracttablemodel (62)
- java生成pdf文件 (69)
- deletelater (62)
- com.aspose.words (58)
- android.mk (62)
- qopengl (73)
- epoch_millis (61)
本文暂时没有评论，来添加一个吧(●'◡'●)