android使用webview预览png,pdf,doc,xls,txt,等文件
最近有项目有一个需求,就是在线直接预览pdf,doc,xls,txt等文件,ios的webview比较强大,可以直接解析地址,然后预览。但是android的webview就比较差强人意了。当然,打开各种类型的文件,我么可以使用intent来做,但是这个明显跟我们的需求不一致啊,人家ios那边一点击就直接预览了,到了android这边还得先调系统程序,然后在预览,这这…….。 产品既然定了需求,那我们就只有自己想办法。我现在给出几种方案:
对于png等图片格式,可以选择使用ImageView和webview两种方式展示,ImageView展示就不多说了,使用webview方式也很简单,我们可以将图片处理一下 加一个img标签,代码如下:
ifhttps://www.it610.com/article/(file_url.endsWith(".jpg"https://www.it610.com/article/)||file_url.endsWith(".png"https://www.it610.com/article/)){ mWebView.loadDataWithBaseURL(nullhttps://www.it610.com/article/, "">"https://www.it610.com/article/, "text/html"https://www.it610.com/article/, "charset=UTF-8"https://www.it610.com/article/, nullhttps://www.it610.com/article/); }
对于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的配置https://www.it610.com/article/ WebSettings webSettings = mWebView.getSettings(); webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); webSettings.setLoadsImagesAutomatically(truehttps://www.it610.com/article/); webSettings.setLoadWithOverviewMode(truehttps://www.it610.com/article/); webSettings.setJavaScriptEnabled(truehttps://www.it610.com/article/); webSettings.setUseWideViewPort(truehttps://www.it610.com/article/); webSettings.setSupportZoom(falsehttps://www.it610.com/article/); webSettings.setBuiltInZoomControls(falsehttps://www.it610.com/article/); webSettings.setDomStorageEnabled(truehttps://www.it610.com/article/); //添加一个java的回调,在pdf解析完数据之后,取消dialoghttps://www.it610.com/article/ mWebView.addJavascriptInterface(newhttps://www.it610.com/article/ JsObject(getActivity(),file_url), "client"https://www.it610.com/article/); String str = "file:///android_asset/pdf.html"https://www.it610.com/article/; mWebView.loadUrl(str); mWebView.setWebViewClient(newhttps://www.it610.com/article/ WebViewClient(){ @Overridehttps://www.it610.com/article/ publichttps://www.it610.com/article/ booleanhttps://www.it610.com/article/ shouldOverrideUrlLoadinghttps://www.it610.com/article/(WebView view, String url) { view.loadUrl(url); returnhttps://www.it610.com/article/ truehttps://www.it610.com/article/; } @Overridehttps://www.it610.com/article/ publichttps://www.it610.com/article/ voidhttps://www.it610.com/article/ onPageStartedhttps://www.it610.com/article/(WebView view, String url, Bitmap favicon) { superhttps://www.it610.com/article/.onPageStarted(view, url, favicon); pro.setVisibility(View.VISIBLE); } @Overridehttps://www.it610.com/article/ publichttps://www.it610.com/article/ voidhttps://www.it610.com/article/ onPageFinishedhttps://www.it610.com/article/(WebView view, String url) { superhttps://www.it610.com/article/.onPageFinished(view, url); //html页面加载完毕之后发送通知,调用js方法来解析pdf文档https://www.it610.com/article/ handler.sendEmptyMessage(1https://www.it610.com/article/); Toast.makeText(WebViewAty.thishttps://www.it610.com/article/, "加载完毕"https://www.it610.com/article/, Toast.LENGTH_SHORT).show(); } });//调用js方法https://www.it610.com/article/ privatehttps://www.it610.com/article/ Handler handler = newhttps://www.it610.com/article/ Handler(){ @Overridehttps://www.it610.com/article/ publichttps://www.it610.com/article/ voidhttps://www.it610.com/article/ handleMessagehttps://www.it610.com/article/(Message msg) { superhttps://www.it610.com/article/.handleMessage(msg); String javaScript = "javascript: getpdf2('"https://www.it610.com/article/+fileurl+"')"https://www.it610.com/article/; mWebView.loadUrl(javaScript); } };
以上就是预览的部分核心代码,按照以上三步,就可以完成预览pdf的功能了,但是由于跨域的问题,现在还不支持https请求。至于txt文档,逻辑和预览pdf文档一样,就不再赘述。
预览doc,xls等文件,有一种取巧的方式。利用微软的那个网页来解析。这样在webview加载连接的时候,只要把我们的连接拼到后面即可。
if (!file_url.startsWithhttps://www.it610.com/article/("https://view.officeapps.live.com/op/view.aspx?src="https://www.it610.com/article/) && (file_url.endsWithhttps://www.it610.com/article/(".doc"https://www.it610.com/article/) || file_url.endsWithhttps://www.it610.com/article/(".docx"https://www.it610.com/article/) || file_url.endsWithhttps://www.it610.com/article/(".xls"https://www.it610.com/article/) || file_url.endsWithhttps://www.it610.com/article/(".xlsx"https://www.it610.com/article/) || file_url.endsWithhttps://www.it610.com/article/(".ppt"https://www.it610.com/article/) || file_url.endsWithhttps://www.it610.com/article/(".pptx"https://www.it610.com/article/))) {//如果是微软可以预览的文件类型,拼接url view.loadUrlhttps://www.it610.com/article/("https://view.officeapps.live.com/op/view.aspx?src="https://www.it610.com/article/ + file_url);https://www.it610.com/article/
这种方式简单,但是确不实用。要是那一天微软的这个服务停了,app的这个功能也就挂了。但是还没想到啥好的方式,暂且这样吧!加载pdf的时候速度有点慢,等等看,惊喜总会有的。
相关文件下载
github地址:https://github.com/zhoukai1526/ReadPdf
更多相关文章
- Socket 通信原理(Android客户端和服务器以TCP&&UDP方式互通)
- Android读取工程内嵌资源文件的两种方法
- Android客户端如何从Web服务端加载图片
- Android 共享内存实现跨进程大文件传输(设计思路和Demo实现绕过B
- 关于android图片的传输,android图片传输方式,xml传输图片,android
- Android 不要标题和全屏的设置方式
- Android ListView 图片异步加载和图片内存缓存