关于js-xlsx的简单使用
关于js-xlsx的简单使用
最近要做一个东西用到对excel的操作，就是在前端将excel加载进来，操作后再生成excel，在网上找了很多种办法，能够实现的demo是下面这个：
纯前端利用 js-xlsx 实现 Excel 文件导入导出功能示例，
官方的文档请看这：js-xlsx，
以下是我自己实现的功能，前端框架使用的是bootstrap；
使用时上传excel文件，进行自己的操作，然后点击下载，具体的细节还要根据自己的需求来改，这里只是一个例子
我的excel格式：
demo：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>demo</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script> <style type="text/css">
/*
* Base structure
*/
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
border: 0;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
/*
* Main content
*/
.main {
padding: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 50%;
}
</style> <script type="text/javascript">
// 为所有checkbox添加点击事件，不用就去掉
function iCheck(id) {
var table = document.getElementById("myTable");
var row = table.getElementsByTagName("tr");
var col = row[0].getElementsByTagName("th"); var idEle = document.getElementById(id);
var idTds = idEle.getElementsByTagName("td");
var idInput = idTds[idTds.length - 1].getElementsByTagName("input");
// 往上查找同组的
for (var i = id; i > 0; --i) {
var ele = document.getElementById(i);
var tds = ele.getElementsByTagName("td");
var input = tds[tds.length - 1].getElementsByTagName("input");
if(idInput[0].checked == true)
input[0].checked = true;
else
input[0].checked = false;
if(tds[1].innerHTML != "")
break;
}
// 往下查找同组的
for (var i = id + 1; i < row.length; ++i) {
var ele = document.getElementById(i);
var tds = ele.getElementsByTagName("td");
if(tds[1].innerHTML != "")
break;
var input = tds[tds.length - 1].getElementsByTagName("input");
if(idInput[0].checked == true)
input[0].checked = true;
else
input[0].checked = false;
}
} /*
table -> json -> excel
*/
$(function() {
$("#mainButton").click(function() {
var json = Table2Json("myTable"); function Table2Json(tableid) {
var txt = "[";
var table = document.getElementById(tableid);
var row = table.getElementsByTagName("tr");
var col = row[0].getElementsByTagName("th");
for (var j = 1; j < row.length; j++) {
var tds = row[j].getElementsByTagName("td");
var input = tds[tds.length - 1].getElementsByTagName("input");
var r = "{";
for (var i = 1; i < col.length - 1; i++) {
r += "\"" + col[i].innerHTML + "\"\:\"" + tds[i].innerHTML + "\",";
}
if(input[0].checked == true)
{
r += "\"" + col[col.length - 1].innerHTML + "\"\:\"" + 1 + "\",";
}
else
{
r += "\"" + col[col.length - 1].innerHTML + "\"\:\"" + 0 + "\",";
}
r = r.substring(0, r.length - 1)
r += "},";
txt += r;
}
txt = txt.substring(0, txt.length - 1);
txt += "]";
return txt;
} downloadExl(JSON.parse(json));
});
}); /*
excel -> json -> table
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; //是否将文件读取为二进制字符串 function importf(obj) {//导入
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的数据
//document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );
var jsonArray = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
document.getElementById("myTableBody").innerHTML = "";
for(var i = 0; i < jsonArray.length; ++i)
{
var temp = jsonArray[i];
if(temp.StepName == null)
temp.StepName = "";
if(i == 1 || i == 2)
document.getElementById("myTableBody").innerHTML += '<tr id="' + i + '"><td>'+ (i + 1) + '</td><td>' + temp.StepName + '</td><td>' + temp.NodeName +
'</td><td><input type="checkbox" checked="true" onclick="iCheck(' + i + ')" disabled="disabled" /></td></tr>';
else
document.getElementById("myTableBody").innerHTML += '<tr id="' + i + '"><td>'+ (i + 1) + '</td><td>' + temp.StepName + '</td><td>' + temp.NodeName +
'</td><td><input type="checkbox" onclick="iCheck(' + i + ')" /></td></tr>';
}
};
if(rABS) {
reader.readAsArrayBuffer(f);
}else {
reader.readAsBinaryString(f);
}
} function fixdata(data) { //文件流转BinaryString
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;
} var tmpDown; //导出的二进制对象
function downloadExl(json, type) {
var tmpdata = json[0];
json.unshift({});
var keyMap = []; //获取keys
for (var k in tmpdata) {
keyMap.push(k);
json[0][k] = k;
}
var tmpdata = [];//用来保存转换好的json
json.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到D10
var tmpWB = {
SheetNames: ['updateProcess'], //保存的表标题
Sheets: {
'updateProcess': 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); //创建对象超链接
var a = document.getElementById("hf"); var dateObj = new Date();
var year = dateObj.getFullYear();
var month = dateObj.getMonth()+1;//月 (注意：月份+1)
var date = dateObj.getDate();//日
var day = dateObj.getDay();
var hours = dateObj.getHours();//小时
var minutes = dateObj.getMinutes();//分钟
var seconds = dateObj.getSeconds();//秒 a.href = href; //绑定a标签
a.download = "updateStep" + "-" + year + "-" + month + "-" + date + "-" +
hours + "-" + minutes + "-" + seconds + ".xlsx";
a.click(); //模拟点击实现下载
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 = 0
while (n > 0) {
m = n % 26 + 1
s = String.fromCharCode(m + 64) + s
n = (n - m) / 26
}
return s
} </script> </head> <body>
<!-- 导航条 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">demo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home Page<span class="sr-only">(current)</span></a></li>
<li><a href="">demo</a></li>
<li><a href="">demo</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">demo<span class="caret"></span></a>
<ul class="dropdown-menu"> </ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav> <!-- 内容 -->
<div class="container-fluid">
<div class="row"> <!-- 侧边栏 -->
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#"><span class="badge">#</span> demo<span class="sr-only">(current)</span></a></li>
<li><a href="#"><span class="badge">1</span> demo</a></li>
<li><a href="#"><span class="badge">2</span> demo</a></li>
<li><a href="#"><span class="badge">3</span> demo</a></li>
</ul>
<ul class="nav nav-sidebar">
<li class="active"><a href="#"><span class="badge">#</span> have a try<span class="sr-only">(current)</span></a></li>
<li><object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/ballclock/ballclock.swf?" width="340" height="220"><param name="movie" value="http://cdn.abowman.com/widgets/ballclock/ballclock.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object></li>
</ul>
</div> <!-- 主体 -->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="page-header">
<h2>1.上传excel文件（<a href="#">没有文件点击这里下载，请忽略</a>）</h2>
</div>
<div class="form-group">
<input type="file" id="inputFile" onchange="importf(this)">
<p class="help-block">注意格式：excel内容表头前2列请使用StepName，NodeName</p>
</div>
<br/> <div class="page-header">
<h2>2.demo</h2>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered" id="myTable">
<thead>
<tr>
<th>demo1</th>
<th>demo2</th>
<th>demo3</th>
<th>demo4</th>
</tr>
</thead>
<tbody id="myTableBody">
<tr>
<td>1</td>
<td>demo</td>
<td>demo</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>2</td>
<td>demo</td>
<td>demo</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>3</td>
<td>demo</td>
<td>demo</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>4</td>
<td>demo</td>
<td>demo</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>3</td>
<td>demo</td>
<td>demo</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>4</td>
<td>demo</td>
<td>demo</td>
<td><input type="checkbox" /></td>
</tr>
</tbody>
</table>
</div>
<br/> <div class="page-header">
<h2>3.点击生成excel文件</h2>
</div>
<button type="button" class="btn btn-primary btn-lg btn-block" id="mainButton">生成Excel</button>
<!--
<a class="btn btn-warning btn-lg btn-block" href="/cgi-bin/test.py" role="button">Python生成Excel</a>
-->
<a href="" download="updateStep.xlsx" id="hf">
</div> </div> </div> <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
</body>
</html>
题外话，大神js小游戏：http://abowman.com/
关于js-xlsx的简单使用的更多相关文章
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- [转]九个Console命令，让js调试更简单
转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html ...
- JS实现的简单横向伸展二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
- JS代码的简单重构与优化
JS代码的简单重构与优化(适合新手) 原文 http://www.cnblogs.com/similar/p/5016424.html Demo . 1 //bad if (age > 20) ...
- JS+html实现简单的飞机大战
摘要:通过原生的js+html实现简单的飞机大战小游戏效果,如图所示: 实现代码如下: 1.自己的飞机实现 飞机html: <!DOCTYPE html> <html lang=&q ...
- swfobject.js 2.2简单使用方法
swfobject.js 2.2简单使用方法 官方网址介绍http://code.google.com/p/swfobject/wiki/documentation 用法:html部分<div ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
随机推荐
- leetcode 222.Count Complete Tree Nodes
完全二叉树是从左边开始一点点填充节点的,因此需要计算所有的节点的个数. 则分别从左边和右边来进行传递的,当左右是完全二叉树的时候,其节点个数就是pow(2,h)-1. /** * Definition ...
- Python全栈之路----常用模块----序列化（json&pickle&shelve)模块详解
把内存数据转成字符,叫序列化:把字符转成内存数据类型,叫反序列化. Json模块 Json模块提供了四个功能:序列化:dumps.dump:反序列化:loads.load. import json d ...
- selenium环境搭建-python自动化脚本测试
站在朋友的肩膀上学习!!! 前提:python环境已经搭建完成 1.安装selenium 命令行输入“pip install selenium"一键式安装 2.检查Selenium是否安装成 ...
- css详细笔记
CSS中的块级元素与行内元素 块级元素特性: 1.占据一整行,总是重起一行并且后面的元素也必须另起一行显示. 2.内联元素特性: 3.和其他内联元素显示在同一行. 块级元素列举如下: div(文档分区 ...
- Cookie保存用户名和密码
首次登录: 第二次登录: 百度网盘: 链接: https://pan.baidu.com/s/12W4B5-Bfyc_021oyVYkEJw 提取码: r55h
- OSI七层网络模型浅析
OSI七层网络模型(从下往上): 物理层(Physical):设备之间的数据通信提供传输媒体及互连设备,为数据传输提供可靠的 环境.可以理解为网络传输的物理媒体部分,比如网卡,网线,集线器,中继器,调 ...
- Oracle深入学习
一.甲骨文公司介绍 甲骨文公司,是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩.1989年正式进入中国市场. 2013年,甲骨文已超越 IBM ,成为继 Microsoft 后全球第二大 ...
- RabbitMQ全网资料收集
RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然在同步消息通讯的世界里有很多公开标准 ...
- 【Jest】笔记二：Matchers匹配器
一.前言 什么是匹配器? 我们可以把匹配器看成,testng断言,这么理解就可以了 二.常用的匹配器 test('two plus two is four', () => { expect(2 ...
- sql注入-推断是否存在SQL注入-加法和减法
这里我们需要区分一下数字型和字符串型: 数字型:不需要使用单引号来表示 其他类型:使用单引号来表示 综合上述,我们可以发现我们的例子是数字型的,这样我们就可以使用加法和减法来判断了. 加法,我们在参数 ...