js实现导入导出Excel（结合js-xlsx）

本文是单纯用前端实现导入导出Excel的功能。

说明：

1、导入要求导入的数据是文本格式。

2、导出是导出json数据到excel文件

demo的githup地址：https://github.com/hushaohhy/imexport

代码如下：

1、通过以下命令行安装js-xlsx，在dist中复制出xlsx.full.min.js引入到页面中。

js-xlsx的github地址：https://github.com/SheetJS/js-xlsx

cnpm install xlsx

2、封装的js代码如下：

/* 读取部分的操作start */
/*FileReader共有4种读取方法：
1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
2.readAsBinaryString(file)：将文件读取为二进制字符串
3.readAsDataURL(file)：将文件读取为Data URL
4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'*/var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串//文件流转BinaryString
function 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":"2018-08-01"},{"id":2,"time":"2018-08-02"},{"id":3,"time":"2018-08-03"},{"id":4,"time":"2018-08-04"},{"id":5,"time":"2018-08-05"}],"format":[{"old":"id","new":"序号"},{"old":"time","new":"时间"},],"dom":_this,"filename":"测试文件.xlsx","success":function () {console.log("导出成功")}})}}
</script>

4、导入的excel的数据格式如下图：

js实现导入导出Excel（结合js-xlsx）相关推荐

使用js调用接口导出excel
使用js调用接口导出Excel 以下是使用JavaScript调用接口导出Excel文件的一般流程: 客户端向服务器发送请求,请求后端生成Excel文件: 服务器响应该请求,执行Excel生成操作,并 ...
ASP.NET Core 导入导出Excel xlsx 文件
ASP.NET Core 使用EPPlus.Core导入导出Excel xlsx 文件,EPPlus.Core支持Excel 2007/2010 xlsx文件导入导出,可以运行在Windows, Li ...
vue 导入excel插件_Vue框架下实现导入导出Excel、导出PDF
项目需求:开发一套基于Vue框架的工程档案管理系统,用于工程项目资料的填写.编辑和归档,经调研需支持如下功能: Excel报表的导入.导出 PDF文件的导出打印表格经过技术选型,项目组一致决定通过 ...
csv和excel php 解析_PHP 高效导入导出Excel(csv)方法之fgetcsv()和fputcsv()函数
CSV,是Comma Separated Value(逗号分隔值)的英文缩写,通常都是纯文本文件. 一.CSV数据导入函数fgetcsv() fgetcsv() 函数从文件指针中读入一行并解析 CSV ...
mvc npoi导出excel ajax,ASP.Net MVC利用NPOI导入导出Excel
因近期项目遇到所以记录一下: 首先导出Excel: 首先引用NPOI包 http://pan.baidu.com/s/1i3Fosux (Action一定要用FileResult) /// /// 批 ...
epplus保存为流_ASP.NET Core使用EPPlus导入导出Excel
开发过程中,经常会遇到导入导出数据的需求,本篇博客介绍在.NET Core中如何使用EPPlus组件导入导出Excel EPPlus: EPPlus是使用Open Office XML格式(xlsx) ...
java excel data 导入数据_java实现导入导出excel数据
项目需要,要实现一个导入导出excel的功能,于是,任务驱动着我学习到了POI和JXL这2个java操作Excel的插件. 一.POI和JXL介绍 1.POI:是对所有office资源进行读写的一套工 ...
JAVA工具类(17)--Java导入导出Excel工具类ExcelUtil
实战导出就是将List转化为Excel(listToExcel) 导入就是将Excel转化为List(excelToList) 导入导出中会出现各种各样的问题,比如:数据源为空.有重复行等,我自定义 ...
java 动态导入excel_java实现导入导出excel数据
项目需要,要实现一个导入导出excel的功能,于是,任务驱动着我学习到了POI和JXL这2个java操作Excel的插件. 一.POI和JXL介绍 1.POI:是对所有office资源进行读写的一套工 ...

js实现导入导出Excel（结合js-xlsx）

js实现导入导出Excel（结合js-xlsx）相关推荐

最新文章

热门文章