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