android項目中在webview中打開pdf

android項目中在webview中打開pdf。

關於android打開pdf文件方法有多種,下面的文章有詳細說明:

Android 實現 PDF 文件閱讀功能調研

Android 使用PDF.js瀏覽pdf的方法示例

android:加載PDF幾種方法彙總對比

 總結一下:

1、WebView 中調用 GoogleDocs
      這個方案要翻牆!!!

2、調起第三方支持 PDF 閱讀的應用
      建議使用這種方法,擴展性兼容性強,可以擴展爲支持其他的文件格式。但是如果用戶手機沒有安裝PDF的應用,就比較尷尬了。

3、集成第三方 PDF SDK,在 Native 頁面中閱讀
      第三方包很大,APK體積會增大20M左右,不介意APK體積的可以採用。

4、將 PDF 文件轉換成 HTML 或者圖片等格式文件
      這種方案是比較low,但是能解決部分問題

5、集成第三方JS:pdf.js
     這種方案有兩種方式集成:服務端和客戶端,因爲準備在android端實現所以介紹客戶端集成的方案。
客戶端集成也有兩種方式,

①將pdf.js和相關的文件全部下載下來並拷貝的工程中的assets目錄。pdf.js和相關文件體積也比較大(5M左右),同樣會增加APK體積,但是這種方式更快,全部都是本地資源,不需要每次都聯網加載pdf.js文件。

②就是使用CDN的方式。在asset目錄想編寫html文件和js文件,加載網絡中的pdf.js的相關資源。但是相對第一中方法比較慢,如果而且文件過大,會報錯。具體實現參考文章 Android中顯示PDF的問題解決(安卓端使用pdf.js CDN模式)

 

 

我使用的是集成第三方的pdf.js,並且把所有資源下載到本地。

核心方法

1、pdf.js資源到android項目的asset目錄 下載地址 http://mozilla.github.io/pdf.js/getting_started/#download

2、使用webview加載viewer.html界面

mWebView.loadUrl(file:///android_asset/pdf/web/viewer.html?file=PDFURl)

(其中PDFURL爲pdf文件路徑,可以是網絡路徑也可以是本地文件)

 超級簡單!!

 

但是實際操作中遇到很多的問題

1、webView 打失敗,報錯 unexpected server response (0) while retrieving PDF

webview的權限設置有問題,需要設置:

webSettings.setJavaScriptEnabled(true);//支持js
webSettings.setAllowFileAccess(true);;//否允許訪問文件,默認允許訪問
webSettings.setAllowFileAccessFromFileURLs(true);//一個文件被允許訪問其他文件中的內容
webSettings.setAllowUniversalAccessFromFileURLs(true);//可以是否訪問任何原始起點內容

2、打開失敗, file origin does not match viewer's

處理方法:需要在web/viewer.js(1793行)中註釋的代碼如下:

  // if (origin !== viewerOrigin && protocol !== 'blob:') {
      //   throw new Error('file origin does not match viewer\'s');
      // }

3、低版本android手機(5.0)打開失敗,

檢查之後發現是低版本android瀏覽器不支持es6語法。

最簡單的處理方法,下載es5版本的pdf.js。但是這個版本比es6版本大,有11M

在網上有文章提到 4.4及以下版本,有兼容問題,需要使用低版本的pdf.js。我們項目不支持4.4及以下版本,所有沒有測試。處理方法是判斷android系統版本, 4.4及以下版本使用低版本的pdf.js(文章使用的1.4版本的),高版本系統,使用當前最新的pdf.js。

 

4、屏蔽下載按鈕

實現使用中發現,工具欄用些功能在android手機上是不能使用的,比如下載、打印。

解決方案:隱藏工具欄中的按鈕,web/viewer.html找到 id="secondaryDownload",在button標籤添加 style="display:none"。

注意,在文件中還有id="download"的按鈕,隱藏該按鈕並沒有使界面中下載按鈕消失

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章