项目中IOS显示xls和xlsx很容易,使用下面代码就可以,但是安卓比较麻烦,为了统一处理,选择excel保存csv来解析显示表格。
//https://developer.apple.com/library/ios/qa/qa1630/_index.html func loadDocument(documentName:String, webView:UIWebView) { let path:String = NSBundle.mainBundle().pathForResource(documentName, ofType: nil)!; let url:NSURL = NSURL(fileURLWithPath: path) let request:NSURLRequest = NSURLRequest(URL: url) webView.loadRequest(request) }
使用d3.js来解析服务器的csv文件,不过d3解析出来的是key-value的数组,由于内容是变化的,所以我直接使用了返回值,然后自己解析
function response(request) {
return request.responseText;//dsv.parse(request.responseText);
}
有一个问题就是如果不处理的话转出来的csv文件是ansi编码的js直接获取是乱码,所以使用d3的时候需要设置,如下:
function callPase(){
var csv = d3.dsv(",", "text/csv;charset=gb2312");
csv("http://7xnhdv.com1.z0.glb.clouddn.com/test.csv",function(error,csvdata){
genTable(csvdata);
});
}
获取到数据后使用getTable方法解析来生成表格
function genTable(param){ var isarray=param instanceof Array; var html = ""; var data=null; if(isarray){//数组直接用 data=param; }else{//csv字符串则转为数组 data=new Array(); var lines=param.split('\r\n'); for(var i=0;i<lines.length;i++){ var cells=lines[i].split(','); data.push(cells); } } var Table = document.getElementById("tableId"); for(var i=0;i<data.length;i++){ var NewRow = Table.insertRow(); //添加行 var cells=data[i]; for(var j=0;j<cells.length;j++){ var NewCell= NewRow.insertCell(); NewCell.innerHTML = cells[j]; NewCell.style.height = "20px"; } } }
完整地html代码:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="bootstrap.css"/> <style> /* 单元格对齐 */ td{ text-align:center; } </style> <script src="jquery.min.js"></script> <script src="bootstrap.js"></script> </head> <body onload="callPase()"> <div class="panel panel-default"> <table id="tableId" class="table"> </table> </div> </body> <script type="text/javascript" src="d3.js"></script> <script type="text/javascript"> function callPase(){ var csv = d3.dsv(",", "text/csv;charset=gb2312"); csv("http://7xnhdv.com1.z0.glb.clouddn.com/test.csv",function(error,csvdata){ genTable(csvdata); }); } function genTable(param){ var isarray=param instanceof Array; var html = ""; var data=null; if(isarray){//数组直接用 data=param; }else{//csv字符串则转为数组 data=new Array(); var lines=param.split('\r\n'); for(var i=0;i<lines.length;i++){ var cells=lines[i].split(','); data.push(cells); } } var Table = document.getElementById("tableId"); for(var i=0;i<data.length;i++){ var NewRow = Table.insertRow(); //添加行 var cells=data[i]; for(var j=0;j<cells.length;j++){ var NewCell= NewRow.insertCell(); NewCell.innerHTML = cells[j]; NewCell.style.height = "20px"; } } } </script> </html>