本文是单纯用前端实现导入导出Excel的功能。
说明：
1、导入要求导入的数据是文本格式。
2、导出是导出json数据到excel文件
demo的githup地址：/hushaohhy/imexport
代码如下：
1、通过以下命令行安装js-xlsx，在dist中复制出xlsx.full.min.js引入到页面中 。
js-xlsx的github地址：/SheetJS/js-xlsx
cnpm install xlsx
2、封装的js代码如下：
/* 读取部分的操作start *//*FileReader共有4种读取方法：1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。2.readAsBinaryString(file)：将文件读取为二进制字符串3.readAsDataURL(file)：将文件读取为Data URL4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'*/var wb;//读取完成的数据var rABS = false; //是否将文件读取为二进制字符串//文件流转BinaryStringfunction fixdata(data) {var o = "",l = 0,w = 10240;for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));return o;}//导入function importfun(obj,callback) {if(!obj.files) {return;}var f = obj.files[0];var reader = new FileReader();reader.onload = function(e) {var data = e.target.result;if(rABS) {wb = XLSX.read(btoa(fixdata(data)), {//手动转化type: 'base64'});} else {wb = XLSX.read(data, {type: 'binary'});}//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字//wb.Sheets[Sheet名]获取第一个Sheet的数据callback(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]))};if(rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);}}/* 读取部分的操作end *//* 导出部分的操作start */var tmpDown; //导出的二进制对象function downloadExl(obj,json,callback,type) {var tmpdata = json[0];json.unshift({});var keyMap = []; //获取keys//keyMap =Object.keys(json[0]);for (var k in tmpdata) {keyMap.push(k);json[0][k] = k;}var tmpdata = [];//用来保存转换好的jsonjson.map((v, i) => keyMap.map((k, j) => Object.assign({}, {v: v[k],position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)}))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {v: v.v});var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10var tmpWB = {SheetNames: ['mySheet'], //保存的表标题Sheets: {'mySheet': Object.assign({},tmpdata, //内容{'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域})}};tmpDown = new Blob([s2ab(XLSX.write(tmpWB,{bookType: (type == undefined ? 'xlsx':type),bookSST: false, type: 'binary'}//这里的数据是用来定义导出的格式类型))], {type: ""}); //创建二进制对象写入转换好的字节流var href = URL.createObjectURL(tmpDown); //创建对象超链接obj.dom.href = href; //绑定a标签obj.dom.download = obj.filename;// 下载的文件名callback();setTimeout(function() { //延时释放URL.revokeObjectURL(tmpDown); //用URL.revokeObjectURL()来释放这个object URL}, 100);}//字符串转字符流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;}// 将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。function getCharCol(n) {let temCol = '',s = '',m = 0while (n > 0) {m = n % 26 + 1s = String.fromCharCode(m + 64) + sn = (n - m) / 26}return s}/* 导出部分的操作end *//* 这是导入导出公用的方法 */// 将最后返回的数据按照自己定义的字段进行格式化function formatfun(res,obj,callback) {var result = [];// 将返回的结果经过格式化后返回for(var i=0;i<res.length;i++) {// 外层循环，遍历所有的数据var result_json = {};// 每一次的外层循环进行一次置空for(var j=0;j<obj.format.length;j++) {// 内层循环将Excel中的标题替换为相应的字段var old = obj.format[j].old;var _new = obj.format[j].new;result_json[_new] = res[i][old];}result.push(result_json)}callback(result)}var imExPortPlugin = {"import":function (obj) {importfun(obj.dom,function (res) {// console.log(res)formatfun(res,obj,function (data) {obj.success(data);// 返回最终结果})})},"export":function (obj) {var jsono = obj.data;// 需要导出的数据formatfun(jsono,obj,function (res) {// 转化格式成功// res为转化格式后的数组downloadExl(obj,res,function () {// 下载成功obj.success()})})}}
3、html代码如下：
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script type="text/javascript" src="../js/js-xlsx/xlsx.full.min.js"></script><title>js导入导出excel</title></head><body><input type="file" id="file"><a href="javascript:void(0)" id="export">导出</a></body></html><script type="text/javascript" src="../js/imex_port.js"></script><script>window.onload = function () {var file = document.getElementById("file")var exp = document.getElementById("export")file.onchange = function() {var _this = this;// 需要注意要导入的Excel文件最好把数据格式转为文本格式imExPortPlugin.import({"dom":_this,// 导入文件时的input dom"format":[{"old":"序号","new":"id"},{"old":"时间","new":"time"},{"old":"操作员","new":"operator"},{"old":"内容","new":"content"},],"success":function (res) {console.log("最终结果",res)}//导入成功后的回调})}exp.onclick = function () {var _this = this;imExPortPlugin.export({"data":[{"id":1,"time":"-08-01"},{"id":2,"time":"-08-02"},{"id":3,"time":"-08-03"},{"id":4,"time":"-08-04"},{"id":5,"time":"-08-05"}],"format":[{"old":"id","new":"序号"},{"old":"time","new":"时间"},],"dom":_this,"filename":"测试文件.xlsx","success":function () {console.log("导出成功")}})}}</script>
4、导入的excel的数据格式如下图：
