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";
            }
        }
    }

效果如下:

WebView显示CSV_第1张图片

完整地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>



你可能感兴趣的:(csv)