一、前言
最近做的一个基于html5的移动APP,其中一功能的实现基于对excel表格数据的读入读出。流程是先导入文件，存到相关的数据库中（项目不是用localStorage,本次只是用来演示），再从数据库取出数据导出到文件中，因此想要利用html+js实现。通过搜索github确定了利用js-xlsx。
二、导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入文件</title>
<!--引入js-xlsx-->
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js" ></script>
</head>
<body>
<script>
function importFile(obj) {//导入
if(!obj.files) {
return;
}
// alert(obj.files[0].name);文件名
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var wb = XLSX.read(data, {
type: 'binary' //以二进制的方式读取
});
var sheet0=wb.Sheets[wb.SheetNames[0]];//sheet0代表excel表格中的第一页
var str=XLSX.utils.sheet_to_json(sheet0);//利用接口实现转换。
var templates=new Array();
var str1=obj.files[0].name;
templates=str1.split(".");//将导入文件名去掉后缀
alert(JSON.stringify(str));
window.localStorage.setItem(templates[0],JSON.stringify(str))//存入localStorage 中
}
reader.readAsBinaryString(f);
}
</script>
<div id="import">
<p>导入模版</p>
<p> 请选择要选择导入的模版文件</p>
<input type="file" onchange="importFile(this)">
</div>
</body>
</html>效果
三、导出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导出</title>
<!--引入js-xlsx-->
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js" ></script>
<!--引入jQuery-->
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
//将localStorage的数据库中的key遍历出来供选择
function loadFileName(){
for(var i=0;i<window.localStorage.length;i++){
$("#selectFile").append("<option value="+window.localStorage.key(i)+">"+window.localStorage.key(i)+"</option>")
}
}
</script>
</head>
<body onload="loadFileName()">
<div id="export">
<p>导出数据</p>
<select id="selectFile">
<option value="null">请选择文件</option>
</select>
<button onclick="exportData()">确定</button>
</div>
<script>
function exportData() {
var getFile = document.getElementById("selectFile");
getFile.options.selected =true ;
var fileName=getFile.value;
if (fileName=="null"){
alert('请先选择文件');
return 0;
}
var str=window.localStorage.getItem(fileName);
var sheet0=XLSX.utils.json_to_sheet(JSON.parse(str));
var wopts = { bookType:'xlsx', bookSST:false, type:'binary' };
var wb = { SheetNames: ['Sheet0'], Sheets: {}, Props: {} };
wb.Sheets['Sheet0'] = sheet0;//转化成workbooks形式。
var wbout = XLSX.write(wb,wopts);
//转换流形式
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;
}
/* the saveAs call downloads a file on the local machine */
//自定义保存文件方式,原项目采用的是cordova的文件写入方式，此演示只用模拟浏览器下载的形式
saveAs(new Blob([s2ab(wbout)],{type:""}),fileName+".xlsx");
}
function saveAs(obj,fileName) {
var tmpa = document.createElement("a");
tmpa.download = fileName || "下载";
tmpa.href = URL.createObjectURL(obj);
tmpa.click();
setTimeout(function () {
URL.revokeObjectURL(obj);
}, 100);
}
</script>
</body>
</html>效果
