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操作说明 中文版 下载 ...
随机推荐
- junit基础学习之-简介（1）
JUnit介绍 JUnit是一个开源的Java单元测试框架,由 Erich Gamma 和 Kent Beck 开发完成. 1 JUnit简介 JUnit主要用来帮助开发人员进行Java的单元测试, ...
- Linux每日一练20200220
- 微信小程序拒绝授权后提示信息以及重新授权
wx.authorize({ scope: 'scope.writePhotosAlbum', success() { // 授权成功 wx.saveImageToPhotosAlbum({ file ...
- POJ 1045：Bode Plot
Bode Plot Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 13392 Accepted: 8462 Descri ...
- PC端页面适应不同的分辨率的方法 （转载）
原文地址:https://blog.csdn.net/fengzhen8023/article/details/81281117 上周完成一个PC端的项目,对于我这样的小白来说,这个项目里面最大的问题 ...
- 使用Redux管理React数据流要点浅析
在图中,使用Redux管理React数据流的过程如图所示,Store作为唯一的state树,管理所有组件的state.组件所有的行为通过Actions来触发,然后Action更新Store中的stat ...
- matlab中自带的sobol的函数提供的sobol序列
clc; clear all; close all; M=;% 维度,几个参数 nPop=; VarMin=[0.6, 0.10, 0.002, 0.02, 0.17, 0.0, 0.17, 0.0, ...
- 在mysql中计算百分比
通过查找资料,得到了如下解决方法: 用到了concat()和left() 两个函数 1.CONCAT(str1,str2,...) 返回来自于参数连结的字符串.如果任何参数是NULL, 返回NULL. ...
- Android自定义View——贝塞尔曲线实现水波纹效果
我们使用到的是Path类的quadTo(x1, y1, x2, y2)方法,属于二阶贝塞尔曲线,使用一张图来展示二阶贝塞尔曲线,这里的(x1,y1)是控制点,(x2,y2)是终止点,起始点默认是Pat ...
- Vue 项目de一些准备工作
1.安装node,同时也会自动安装npm,npm是node的一种包安装工具. 2.准备一个git,可以用来管理代码. 3.打开vue官网,可以使用vue-cli脚手架工作. 这里介绍一个element ...