JS导出、导入EXCEL(案例)
插件下载地址:http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js
1、导出excel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js导出excel</title>
</head>
<body>
<button onclick="downloadExl(jsono)">导出</button>
<a href="" download="我是导出来的测试文件.xlsx" id="downloadA"></a> <script src="xlsx.full.min.js"></script>
<script>
var jsono = [{
"姓名": "张三",
"年龄": "30",
"性别": "男"
},{
"姓名": "李四",
"年龄": "40",
"性别": "女"
},{
"姓名": "王五",
"年龄": "50",
"性别": "男"
}];
var tmpDown; //导出的二进制对象
function downloadExl(json, type) {
//根据json数据，获取excel的第一行(例如:姓名、年龄、性别)存至map
var tmpdata = json[0];
json.unshift({});
var keyMap = []; //获取keys
for (var k in tmpdata) {
keyMap.push(k);
json[0][k] = k;
} var tmpdata = [];
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
}); //设置区域,比如表格从A1到D10
var outputPos = Object.keys(tmpdata);
var 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); //创建对象超链接
document.getElementById("downloadA").href = href; //绑定a标签
document.getElementById("downloadA").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>
</body>
</html>
2、导出结果
3、导入excel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js导入excel</title>
</head>
<body>
<input type="file"onchange="importf(this)" />
<div id="excelContent"></div>
<script src="xlsx.full.min.js"></script>
<script>
/**
* 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的数据
*/
var excelJson = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
document.getElementById("excelContent").innerHTML= JSON.stringify( excelJson );
};
if(rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
} //文件流转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;
}
</script>
</body>
</html>
4、导入结果
JS导出、导入EXCEL(案例)的更多相关文章
- .Net MVC 导入导出Excel总结(三种导出Excel方法，一种导入Excel方法) 通过MVC控制器导出导入Excel文件(可用于java SSH架构)
.Net MVC 导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) [原文地址] 通过MVC控制器导出导入Excel文件(可用于java SSH架构) public cl ...
- DevExpress XtraGrid 数据导出导入Excel
// <summary> /// 导出按钮 /// </summary> /// <param name="sender"></param ...
- C# winform 导出导入Excel/Doc 完整实例教程[网上看到的]
还真没做过winform的导出导入,今天上网百度了一下.结果--- 所以还是我自己写个吧.之前做过web的,半搬半做就OK. 1添加引用:Aspose.Cells.dll(我们就叫工具包吧,可以从网上 ...
- asp.net core导出导入excel
使用NPOI导入导出excel,已经封装好Action可以直接调用 导出 效果图 使用方法 定义导出实体 class Student { public int Id { get; set; } pub ...
- 用PHPExcel导出导入Excel
thinkPHP5.0框架 查询数据库调用Excel方法 public function exportlist(){ $orderModel = new OrderModel(); if($start ...
- asp.net Mvc Npoi 导出导入 excel
因近期项目遇到所以记录一下: 首先导出Excel : 首先引用NPOI包 http://pan.baidu.com/s/1i3Fosux (Action一定要用FileResult) /// < ...
- php利用PHPExcel类导出导入Excel用法
PHPExcel类是php一个excel表格处理插件了,下面我来给大家介绍利用PHPExcel类来导入与导出excel表格的应用方法,有需要了解的朋友不防参考参考(PHPExcel自己百度下载这里不介 ...
- js导出成excel
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- C# WinForm 导出导入Excel/Doc 完整实例教程[使用Aspose.Cells.dll]
[csharp] view plain copy 1.添加引用: Aspose.Cells.dll(我们就叫工具包吧,可以从网上下载.关于它的操作我在“Aspose.Cells操作说明 中文版 下载 ...
随机推荐
- 【转载】WebDriver拾级而上·之零 WebDriver理论
Selenium2.0 = Selenium1.0 + WebDriver(也就是说Selenium2.0合并了这两个项目) Selenium1.0可以使用任何编程语言,但是有个先决条件就是必须支 ...
- UVA - 1610 Party Games（聚会游戏）（构造）
题意:输入一个n(2<=n<=1000,n是偶数)个字符串的集合D,找一个长度最短的字符串S(不一定在D中出现),使得D中恰好一半串小于等于S,另一半串大于S.如果有多解,输出字典序最小的 ...
- WIN10怎么查看端口，并杀死进程
在命令行执行一下命令 netstat -ano | findstr "
- jquery播放mp3
$("button").on("click",function(){ $('embed').remove(); $('body'). ...
- CSS3 之高级动画（6）CSS3 clip-path属性实现的几何图形变形动画
clip-path 属性介绍: clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域. 区域内的部分显示,区域外的隐藏. 剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径. ...
- CentOS 7设置开机启动服务，添加自定义系统服务
由于版本的迭代,最近刚刚接触 CentOS 7,各种蛋疼 发现跟以前用的CentOS 6有着一些本质上的差别,连启动服务都不会启动了,一怒之下自己找资料,于是有了这篇文章... 1.建立服务文件 ...
- 每天一点点之vue框架开发 - 数据渲染-for循环中动态设置页面背景色
实现方式很简单,在属性前加:,表示绑定 :style="{'background':item.bgColor} 代码样例: <li v-for="item in laber_ ...
- POJ 2488：A Knight's Journey 深搜入门之走马观花
A Knight's Journey Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 35342 Accepted: 12 ...
- 【无网条件下】Linux系统、jdk、redis及集群、rabbitmq、nginx、weblogic和oracle安装及配置
本篇文章为原创,仅供参考使用,如果需要文章中提到的所有软件安装包和依赖包(即data),请以博客园邮箱联系获取链接. 准备资料 软件 主要软件包版本 路径 系统镜像 CentOS-6.10-x86_6 ...
- Python笔记_第五篇_Python数据分析基础教程_相关安装和版本查看
1. IDE说明: 所有的案例用Anacoda中的Jupiter工具进行交互式讲解. 2. 版本和安装: NumPy从如下网站安装:http://sourceforge.net/projects/nu ...