項目中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>