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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-08-05 07:44:18

WebView显示CSV的相关文章

利用webview显示gif动画

利用webview显示gif动画 CGRect frame = CGRectMake(50,50,0,0); frame.size = [UIImage imageNamed:@"1.gif"].size; // 读取gif图片数据 NSData *gif = [NSData dataWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@"1" ofType:@"gif"]]; /

Android-使用WebView显示网页

Android-使用WebView显示网页 WebView是安卓提供显示web界面的工具类,可以像PC端的浏览器那样进行显示: 大致就是上图那样.其实也可以不用WebView,简单的三行代码就可以在安卓App上显示网页界面. 示例 Uri uri = Uri.parse("http://www.baidu.com"); Intent it = new Intent(Intent.ACTION_VIEW, uri); startActivity(it); 运行效果: 使用WebView

用WebView显示网页

用WebView显示网页非常方便,缺点是速度比较慢,对webView属性也要设置一下,否则可能会出现宽度不匹配等问题.代码并不复杂,如下: private WebView wv_statistics_html; @TargetApi(Build.VERSION_CODES.HONEYCOMB) @Override protected void initViews(Bundle savedInstanceState) {     requestWindowFeature(Window.FEATUR

Android使用Webview显示页面以及点击跳转StartActivity问题

以下是个人拙见,大神可直接忽略. 直接奔入主题,android的一个webview控件相信大家都特别熟悉了,可以用来加载显示网页,像商城的商品图文详情就可以用网页很快实现,但是最近项目中遇到不一样的问题,商品首页用webview显示,点击某一个商品或者商品分类startactivity跳转自身的界面,首页混杂一部分网页加载肯定会遇到界面显示卡顿,显示慢的问题,不过既然需求是这样,也只能照做了. 显示一个网页就不说了,首先,先优化一下显示速度问题,也就是显示文字和图片的先后,在oncreate方法

Anroid5.0下webview显示本地图片

以前的时候,Android下webview显示本机图片可用ontent://+包名+路径的方式来实现,后来5.0后,安全协议提高了,不支持这种方式了,后来发现img标签可以是这样用,将本地图片转换为bitmap,再将bitmap转为Base64 public static String imgToBase64(Bitmap bitmap) { ByteArrayOutputStream out = null; try { out = new ByteArrayOutputStream(); bi

Android webview 显示进度条

代码: ProgressDialog dialog = null; /** * 嵌入浏览器 */ private void embedBrowser(String url) { Log.i(TAG, url); WebView browser = (WebView) this.findViewById(R.id.c131_webkit); if (browser != null) { wifi = new WifiService(this); if (wifi.isNetworkConnecte

Android使用WebView显示网页(图片缩放)

上周写了一篇关于webview的博文:Android使用WebView显示网页(图片大小的处理及内容的自适应) 后来通过自己想的第三种办法实现了图片的适配,方法是设置html的img标签属性,把图片的宽度设置为设备屏幕的宽度,涉及的知识点就是,获取设备宽度值.java代码 添加/修改 html标签属性. 1. 获取设备屏幕信息: /** * 获取设备的屏幕信息 * @param activity * @return */ public static DeviceInfo getDevicesPi

Android使用WebView显示网页

在Android开发过程中,会遇到需要显示网页的需求,或者需要用webview控件来达到某个效果.我这段时间在做CSDN博客的客户端,使用webview来显示博文内容,一是因为解析博文内容再适配比较麻烦,并且效果很不理想,后来想到直接用webview来显示,将博文原汁原味的呈现出来. webview使用起来比较容易,但是想要达到比较理想的效果还需要很多摸索.我做的CSDNBlog客户端,现在基本可以使用,已经在进行版本迭代了,但是博文的webview显示效果依然不太满意,主要是因为图片的缩放问题

如何监听WebView显示完毕事件

我们都知道,在WebView的应用中,可以使用WebViewClient监听WebView的内容[加载]事件,比如onPageFinished.onPageStarted等.但是即使onPageFinished触发时,WebView的内容也并未显示.当我们想要监听WebView的内容显示完毕事件的时候怎么办呢? 我先是找到了网上有答案说用PictureListener,然后重写onNewPicture方法(http://stackoverflow.com/questions/4065134/is