WebView顯示CSV

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



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章