html+JS 实现对excel的导入和导出

摘要：①、这里第一个按钮导入之后，取到外箱，得到对应的子包，保存在{a:[a1,a2]} 这样的对象格式中，createDynamicObject 这个方法是实现该功能的

先看效果：

需求：

1、取到外箱下面的所有子包

2、 PSN和箱号一一对应

3、需要将子包的内容，截取对应的数据，整合到一个excel中

一、我们需要用到xlsx.full.min.js 这个js文件，用于导入和导出excel的，可以自行下载

二、创建html脚本

厂内外箱*箱号箱号 PSN P/N MPN vendor Code Date Code Let NO. QTY Manufactuer Country of Qrigin MFG Code Ver

三、添加第一个按钮和第二个按钮导入excel的js事件

①、这里第一个按钮导入之后，取到外箱，得到对应的子包，保存在{a:[a1,a2]} 这样的对象格式中，createDynamicObject 这个方法是实现该功能的

②、$('#file-input2').click 这个事件，是导入第二张excel后，取到PSN和箱号，然后和第一张表取到的对象进行对比，然后将子包的数据动态添加到表格中

三、导出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"}); // 字符串转ArrayBufferfunction 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'); })

整体代码如下：

厂内外箱*箱号箱号 PSN P/N MPN vendor Code Date Code Let NO. QTY Manufactuer Country of Qrigin MFG Code Ver var arr=; var arr1=; let values=; let myObject=null; let cool={}; function createDynamicObject(keys, valuesArray) { var obj = {}; for (var i = 0; i 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{ Object.keys(myObject).forEach(key_1=>{ if(key==key_1){ for(var j=0;j'); let num1=cool[key]; let td0=$(`${key_1}*${num1}`); tr.append(td0); let td1=$(`${num1}`); tr.append(td1); let num2=myObject[key_1][j]; let td2=$(`${num2.substring(48,48+27)}`); tr.append(td2); let td3=$(`${num2.substring(6,6+8)}`); tr.append(td3); let td4=$(`${num2.substring(16,16+16)}`); tr.append(td4); let td5=$(`${num2.substring(33,33+6)}`); tr.append(td5); let td6=$(`${num2.substring(41,41+4)}`); tr.append(td6); let td7=$(`${num2.substring(77,77+5)}`); tr.append(td7); let td8=$(`${num2.substring(83,83+3)}`); tr.append(td8); let td9=$(`${num2.substring(87,87+7)}`); tr.append(td9); let td10=$(`${num2.substring(96,96+5)}`); tr.append(td10); let td11=$(`${num2.substring(103,103+6)}`); tr.append(td11); let td12=$(`${num2.substring(111,111+1)}`); 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'); })

希望能给大家一些启发，能帮到大家！

来源：群星满天空

标签： excel html js

本文地址：http://news.43b.com.cn/a/94434.html

免责声明：本站系转载，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与本站联系，我们将在第一时间删除内容!