在写后台管理系统中。我们往往需要实现做数据的导入导出功能。这次先写导入的功能部分，导出功能暂时先不写。
#### 示例一：是基于vue的前端UI框架iview写的。具体代码如下所示。
~~~
<style lang="less">
.info-btn {
position: relative;
width: 44px;
height: 24px;
z-index: 1;
.input-page {
position: absolute;
left: 0;
top: 0;
width: 44px;
height: 24px;
border-color: #57c5f7;
outline: none;
background-color: transparent;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
font-size: 8px;
// display: none;
color: #fff;
z-index: 99;
}
.info-font {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 24px;
z-index:2;
}
}
</style>
// 隐藏了导入文件的按钮。使用自定义的按钮
<Button type="info" @change="importf()" class="info-btn">
<input type="file" @change="importf()" class="input-page" />
<span class="info-font">导入</span>
</Button>
~~~
为了容易区别，我把js的代码提取出来
~~~
data: {
rABS: false
}
// 具体方法
importf () {//导入
let that =this;
let file = event.target.files;
if (!file) { return; }
var f = file[0];
{
var reader = new FileReader();
var name = f.name;
reader.onload = function (e) {
var data = e.target.result;
var wb;
if (that.rABS) {
wb = XLSX.read(data, { type: 'binary' });
} else {
var arr = that.fixdata(data);
wb = XLSX.read(btoa(arr), { type: 'base64' });
}
// 打印出excel文件转成普通的json数据
console.log(JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])))
};
if (that.rABS) reader.readAsBinaryString(f);
else reader.readAsArrayBuffer(f);
}
},
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;
}
~~~
示例二：纯原生js写的导入功能
[转载于纯原生的js实现excel文件的导入功能](https://www.jianshu.com/p/044c183edf42)
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
</head>
<body>
<input type="file" onchange="importf(this)" />
<div id="demo"></div>
<script>
var rABS = false;
//导入功能
function importf(obj) {
if (!obj.files) { return; }
var f = obj.files[0];
{
var reader = new FileReader();
var name = f.name;
reader.onload = function (e) {
var data = e.target.result;
var wb;
if (rABS) {
wb = XLSX.read(data, { type: 'binary' });
} else {
var arr = fixdata(data);
wb = XLSX.read(btoa(arr), { type: 'base64' });
}
document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
};
if (rABS) reader.readAsBinaryString(f);
else reader.readAsArrayBuffer(f);
}
}
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;
}
</script>
</body>
</html>
- mui框架
- toast提示框的使用
- 星级评分
- 上拉刷新和下拉加载里超链接失效的原因
- confirm确认框的使用
- 取消下拉刷新和上拉加载的border
- 解决使用加载的方式捕捉不到dom
- css样式篇
- css3实现0.5像素的边框
- css3样式中的border-radius的圆角边框
- css面试篇之红色十字架
- css样式~~用图片模拟单选框radio的功能
- div设置绝对定位以后，文字实现居中
- 设置input里面字体颜色和大小
- js知识篇
- javascript篇~~九九乘法表
- js~跳转提示页面
- js~实现60秒倒计时
- 正则表达式之保留小数点后两位小数
- 数组操作方法篇
- Array.prototype.filter()的用法
- 使用正则去除空格
- jQuery知识篇
- jQuery~~模仿radio图片切换
- 下拉菜单的滑动效果
- jQuery点击切换字体颜色
- jQuery实现图片和字体图标颜色的切换
- 左侧菜单之当前点击菜单展开，其他菜单收缩
- jQuery全选或全部不选
- 实现子菜单的收缩和展开
- 小程序
- 小程序~调用豆瓣api数据的问题
- 实现毫秒级倒计时
- 条件渲染-wx:if语句
- 实现两个页面共存
- wxss样式问题
- 修改按钮默认的border-radius
- 移动端
- 安卓底部按钮浮上来的解决方法
- excel(xlsx) to json
- vue
- 事件
- 某个元素的点击事件
- 阻止子事件的冒泡
- excel文件的导入功能（解析成json数据）
- iview框架
- render函数
- iview不支持键盘事件的解决方法
- 路由传参
- 搜索框template的基本写法
- watch监听
- 路由发生变化，数据没有更新？
- 动态组件
- 刷新组件
- 前端小功能
- 搜索框
- axios
- axios公共请求方法
- cookie的简单使用
- 微信扫码登录功能
- pc端微信扫码登录-内嵌网页版
- MongoDB
- 安装与配置
- 布局
- js判断打开是PC端还是移动端
- 自适应布局方案-视口布局
- js实现加密和解密的公共方法
- js实现正则表达式匹配的文字加上标签
- python
- 解决pip升级不成功的原因
- Django
- runserver 失败的原因