1导入与导出功能实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<input type="button" value="导入" onclick="file_in()"><br><br>
<input type="button" value="导出" onclick="file_out()">
<!--导入文件使用控件-->
<input type="file" id="excel_in" style="display:none;" />
<!-- 导出文件使用控件,标签不需要内容 -->
<a href="javascript" id="excel_out" download="这里是下载的文件名.xlsx" style="display:none;"></a> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
<script type="text/javascript" src="xlsxhelper.js"></script>
<script type="text/javascript">
//导入excel
function file_in() {
$('#excel_in').click();
} $('#excel_in').change(function (e) {
xlsx.importf(this, getexceldata);
}) function getexceldata(info) {
console.log(info);
} var jsono = [{ //测试数据
"保质期临期预警(天)": "adventLifecycle",
"商品标题": "title",
"建议零售价": "defaultPrice"
}, { //测试数据
"保质期临期预警(天)": "adventLifecycle2",
"商品标题": "title2",
"建议零售价": "defaultPrice2"
}];
//导出excel
function file_out() {
$('#excel_out').attr('download', 'download.xls');
xlsx.downloadExl(jsono, $('#excel_out')[0]);
}; </script>
</body>
</html>

html页

;(function () {
window.xlsx = window.xlsx || {
/*para*/
/*end para*/
/*function*/
//excel内容读取(只读取第一个sheet)
/* FileReader共有4种读取方法:
* 1.readAsArrayBuffer(file):将文件读取为ArrayBuffer。
* 2.readAsBinaryString(file):将文件读取为二进制字符串
* 3.readAsDataURL(file):将文件读取为Data URL
* 4.readAsText(file, [encoding]):将文件读取为文本,encoding缺省值为'UTF-8' */
importf: function (obj, callback) {//导入
if (!obj.files) {
callback('');
return;
}
var f = obj.files[0];
var reg = /^.*\.(?:xls|xlsx)$/i;//文件名可以带空格
if (!reg.test(f.name)) {//校验不通过
alert("请上传excel格式的文件!");
callback('');
return;
}
var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
if (rABS) {
wb = XLSX.read(btoa(xlsx.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 dom = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
callback(dom);
return;
};
if (rABS) {
reader.readAsArrayBuffer(f);
}
else {
reader.readAsBinaryString(f);
}
},
fixdata: function (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;
}, downloadExl: function (json, targetdom, type) {
var tmpDown; //导出的二进制对象
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 = [];//用来保存转换好的json
json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
v: v[k],
position: (j > 25 ? xlsx.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: ['mySheet'], //保存的表标题
Sheets: {
'mySheet': Object.assign({},
tmpdata, //内容
{
'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域
})
}
};
tmpDown = new Blob([xlsx.s2ab(XLSX.write(tmpWB,
{bookType: (type == undefined ? 'xlsx' : type), bookSST: false, type: 'binary'}//这里的数据是用来定义导出的格式类型
))], {
type: ""
}); //创建二进制对象写入转换好的字节流
var href = URL.createObjectURL(tmpDown); //创建对象超链接
//document.getElementById("hf").href = href; //绑定a标签
//document.getElementById("hf").click(); //模拟点击实现下载
targetdom.href = href;
targetdom.click();
setTimeout(function () { //延时释放
URL.revokeObjectURL(tmpDown); //用URL.revokeObjectURL()来释放这个object URL
}, 100);
}, s2ab: function (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]。
getCharCol: function (n) {
var temCol = '';
var s = '';
var m = 0;
while (n > 0) {
m = n % 26 + 1;
s = String.fromCharCode(m + 64) + s;
n = (n - m) / 26;
}
return s;
}, //生成新的GUID
getHtml: function () {
//alert($('.breadcrumbs').html());
}
/*end function*/ }
})();

xlsxhelper.js

js-xlsx操作excel表格的更多相关文章

  1. Python 利用Python操作excel表格之openyxl介绍Part2

    利用Python操作excel表格之openyxl介绍 by:授客 QQ:1033553122 欢迎加入全国软件测试交流qq群(群号:7156436) ## 绘图 c = LineChart()    ...

  2. Python 利用Python操作excel表格之openyxl介绍Part1

    利用Python操作excel表格之openyxl介绍 by:授客 QQ:1033553122 欢迎加入全国软件测试交流qq群(群号:7156436),免费获取以下性能监控工具(类似Nmon精简版) ...

  3. 【转】python操作excel表格(xlrd/xlwt)

    [转]python操作excel表格(xlrd/xlwt) 最近遇到一个情景,就是定期生成并发送服务器使用情况报表,按照不同维度统计,涉及python对excel的操作,上网搜罗了一番,大多大同小异, ...

  4. 用NPOI、C#操作Excel表格生成班级成绩单

    在C#中利用NPOI操作Excel表格非常方便,几乎上支持所有的Excel表格本身所有的功能,如字体设置.颜色设置.单元格合并.数值计算.页眉页脚等等. 这里准备使用NPOI生成一个班级成绩单Exce ...

  5. 转载:python操作excel表格(xlrd/xlwt)

    python操作excel表格(xlrd/xlwt)   最近遇到一个情景,就是定期生成并发送服务器使用情况报表,按照不同维度统计,涉及python对excel的操作,上网搜罗了一番,大多大同小异,而 ...

  6. 使用Java操作Excel表格

    目录 一.配置第三方库 二.使用Apache POI API 1. 打开Excel文件 2. 选择对应的sheet 3. Sheet接口的基本使用 3.1 获取开头行和结束行 3.2 获取Row对象 ...

  7. qt 操作excel表格

     自己编写的一个Qt C++类,用于操作excel表格,在Qt中操作excel需在.pro中增加CONFIG+=qaxcontainer配置. 1.打开Excel:objExcel = new QAx ...

  8. Python 利用Python操作excel表格之xlwt介绍

    利用Python操作excel表格之xlwt介绍   by:授客 QQ:1033553122 直接上代码   案例1 #!/usr/bin/env python # -*- coding:utf-8 ...

  9. python - 操作excel表格

    说明:由于公司oa暂缺,人事妹子在做考勤的时候,需要通过几个excel表格去交叉比对员工是否有旷工或迟到,工作量大而且容易出错. 这时候it屌丝的机会来啦,花了一天时间给妹子撸了一个自动化脚本. 1. ...

  10. 【面试题】js实现将excel表格copy到页面

    js实现将excel表格copy到页面 点击打开视频讲解更加详细 其实最核心的技术,还是copy的是我们粘贴板上的数据 就像平常怎么粘贴复制其他的数据一样,只是我们在excel粘贴的是一个表格数据 这 ...

随机推荐

  1. hadoop 编码实现文件传输、查看等基本文件控制

    hadoop集群搭建参考:https://www.cnblogs.com/asker009/p/9126354.html 1.创建一个maven工程,添加依赖 <?xml version=&qu ...

  2. [luogu3806]【模板】点分治1

    description 求树上长度为\(k\)的路径是否存在. data range \[n\le 10000,k\le 10000000\] solution 点分治复习... 使用普通的点分治枚举 ...

  3. [NOI2009]诗人小G 决策单调性优化DP

    第一次写这种二分来优化决策单调性的问题.... 调了好久,,,各种细节问题 显然有DP方程: $f[i]=min(f[j] + qpow(abs(sum[i] - sum[j] - L - 1))); ...

  4. C++ 类中成员函数分析

    概述之前对成员变量的分布进行了整理,今天就对成员函数进行整理. 1.非静态成员函数C++的设计准则之一就是:非静态成员函数至少和一般的非成员函数的执行效率相同. 为了实现上衣准则,编译器会对非静态成员 ...

  5. 关于EK Dicnic

    笔记--最大流  $EK$ $Dinic$ $EK$: 运用反向边可以给当前图一次反悔的机会,就是其实现在的增广路并不是最优的,然后就$bfs$找增广路即可 $Dicnic$: 我们发现其实每一次先$ ...

  6. Apache 403 错误解决方法-让别人可以访问你的服务器(转)

    有一次做好了一个效果放在自己电脑的服务器上,让同学查看(同处于校园网中),却不知apache一直显示403 错误,对方没有权限访问,我知道这应该是配置文件httpd.conf中的问题,网上搜了一下其他 ...

  7. oracle数据库数据导入导出步骤(入门)

    oracle数据库数据导入导出步骤(入门) 说明: 1.数据库数据导入导出方法有多种,可以通过exp/imp命令导入导出,也可以用第三方工具导出,如:PLSQL 2.如果熟悉命令,建议用exp/imp ...

  8. ASP.NET基础学习未整理随笔

    利用新建网站添加的项目可以改完代码直接刷新就行 提交到服务程序的表单一定要具有name.<input type="hidden"value="true"n ...

  9. 如何根据域名来得到对应的IP

    如何根据域名来得到对应的IP呢? windows下打开cmd窗口,然后ping.如下图: 这样就可以看到IP了. 如何查看自己电脑对应的IP? 当通过代理上网时,可能无法通过网络连接信息查看自己电脑的 ...

  10. MongoDB入门(6)- 我们自己封装的MongoDB-C#版本

    Wisdombud.Mongo 包含内容 MongoDB.Bson.dll MongoDB.Bson.xml MongoDB.Driver.dll MongoDB.Driver.xml Wisdomb ...