最近有项目有一个需求,就是在线直接预览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