android使用webview预览png,pdf,doc,xls,txt，等文件

最近有项目有一个需求，就是在线直接预览pdf,doc,xls,txt等文件，ios的webview比较强大，可以直接解析地址，然后预览。但是android的webview就比较差强人意了。当然，打开各种类型的文件，我么可以使用intent来做，但是这个明显跟我们的需求不一致啊，人家ios那边一点击就直接预览了，到了android这边还得先调系统程序，然后在预览。

产品既然定了需求，那我们就只有自己想办法。

我现在给出几种方案：对于png等图片格式，可以选择使用ImageView和webview两种方式展示，ImageView展示就不多说了，使用webview方式也很简单，我们可以将图片处理一下加一个img标签，代码如下：

if(file_url.endsWith(".jpg")||file_url.endsWith(".png")){
    mWebView.loadDataWithBaseURL(null, "<img  src="+file_url+">", "text/html", "charset=UTF-8", null);
}

对于pdf文件，如果用原生android来处理比较麻烦，基本思路是将文件下载，再将pdf转换为图片，然后预览。（这种方式没试过）今天要说的是另一种方法，利用js，通过webview来展示pdf文件。第一步：下载PDF.js库。第二步：建立预览pdf文档的html文件，并将pdf.js和html文件放置到assets文件夹下。

第三步：加载assets文件夹下的html文件，并在页面加载完毕后，在android端加载js代码执行PDF.js解析的方法。html 文件和pdf.js库在博客最后会上传，在这里就补贴出来了。我只贴一下android端的代码。

//webview的配置
    WebSettings webSettings = mWebView.getSettings();
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        webSettings.setLoadsImagesAutomatically(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setJavaScriptEnabled(true);
        webSettings.setUseWideViewPort(true);
        webSettings.setSupportZoom(false);
        webSettings.setBuiltInZoomControls(false);
        webSettings.setDomStorageEnabled(true);
        //添加一个java的回调，在pdf解析完数据之后，取消dialog
        mWebView.addJavascriptInterface(new JsObject(getActivity(),file_url), "client");

  String str = "file:///android_asset/pdf.html";
        mWebView.loadUrl(str);

        mWebView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                 view.loadUrl(url);
                return true;
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                pro.setVisibility(View.VISIBLE);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                //html页面加载完毕之后发送通知，调用js方法来解析pdf文档
                handler.sendEmptyMessage(1);
                Toast.makeText(WebViewAty.this, "加载完毕", Toast.LENGTH_SHORT).show();
            }

        });

//调用js方法
   private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            String javaScript = "javascript: getpdf2('"+fileurl+"')";
            mWebView.loadUrl(javaScript);
        }
    };

以上就是预览的部分核心代码，按照以上三步，就可以完成预览pdf的功能了，但是由于跨域的问题，现在还不支持https请求。至于txt文档，逻辑和预览pdf文档一样，就不再赘述。预览doc,xls等文件，有一种取巧的方式。利用微软的那个网页来解析。这样在webview加载连接的时候，只要把我们的连接拼到后面即可。

if (!file_url.startsWith("https://view.officeapps.live.com/op/view.aspx?src=")
                    && (file_url.endsWith(".doc") || file_url.endsWith(".docx")
                            || file_url.endsWith(".xls") || file_url.endsWith(".xlsx")
                            || file_url.endsWith(".ppt") || file_url.endsWith(".pptx"))) {

//如果是微软可以预览的文件类型，拼接url              view.loadUrl("https://view.officeapps.live.com/op/view.aspx?src="
                        + file_url);

这种方式简单，但是确不实用。要是那一天微软的这个服务停了，app的这个功能也就挂了。但是还没想到啥好的方式，暂且这样吧！加载pdf的时候速度有点慢，等等看，惊喜总会有的。

相关文件下载 github地址：https://github.com/zhoukai1526/ReadPdf

android使用webview预览png,pdf,doc,xls,txt，等文件

猜你喜欢