【總結】- 文件(pdf,ppt,doc等)加載解決方案

簡介

最近項目需要在線瀏覽PDF文檔,即不是像微信,QQ那樣點擊了下載下來,然后跳轉到其它應用打開。
肯定最快想到的方案就是用瀏覽器打開,但是發現,在IOS上面是可以正常打開的,可能是IOS本身就支持,在Android手機上卻不行,百度一番,得到的結果是Android自帶的WebView不支持。那么接下來就是尋找解決之法了,PDF的加載解決方案之旅就開始了。

PDF加載開源庫

PDF-load

地址外鏈

這個解決方案是什么意思呢?有點抽象,看一下這個庫就知道了。pdf.js
文檔中提到使用方法:

Modern browsers:https://mozilla.github.io/pdf.js/web/viewer.html
Older browsers:https://mozilla.github.io/pdf.js/es5/web/viewer.html

比如用Older browsers這個外鏈地址:https://mozilla.github.io/pdf.js/es5/web/viewer.html?file=pdf地址,然后用瀏覽器加載。
如果不清楚,可以安裝這么些,如果你是個想知道答案的人,可以問一下做web的朋友。

經嘗試這種的確可以加載PDF文件,而且很省事。但是同時也存在很多問題。

  • PDF加載不出來
    經嘗試:
    使用https://mozilla.github.io/pdf.js/web/viewer.html作為外鏈地址,基本上手機加載不出來。
    使用https://mozilla.github.io/pdf.js/es5/web/viewer.html可以加載。

  • 外鏈地址不能訪問
    用了幾個Android8.0及一下的手機測試了一波,都可以加載,正以為解決了問題時,測試說,我這邊怎么加載不出來,我說,我這邊完全沒有問題啊。

    經調試,發現Android10手機,上面的外鏈地址都不能訪問。Android9沒有試。試著努力解決,無果,放棄。

  • 性能問題
    首先這個地址可以訪問,但是訪問速度呢,不敢說;加上用WebView加載PDF文件本來就存在性能問題,所以即便能加載,其實也不是很好的方案。

使用PDF.js

這個需要使用到上面說的開源庫,你說外鏈訪問不行,那把庫集成到自己服務器或者集成到Android工程中,也可以下載到手機里,加載本地文件或者網絡文件,不就可以了,這個方法的確可以解決,但是當時沒時間弄,我也就隨便找了一個解決方案,后面會說。這個方案可以用于手機加載網頁使用。

  • 遇到的問題
    用手機或者瀏覽器加載時報錯:


    截屏2020-10-31 下午11.29.55.png
截屏2020-10-31 下午11.42.37.png

在viewer.js為了安全,對域名進行了判斷:


截屏2020-10-31 下午11.30.53.png

所以可以把這個函數(validateFileURL(file))的調用注釋掉。

接下來就可以加載pdf
比如:file:///path/viewer.html?file=path/guanxin_paitent_test.pdf

使用AndroidPDF

這個庫支持加載網絡PDF文件,集成后apk大概增加1M多,但是效果嘛,不太好。

使用AndroidPdfViewer

這個庫也是基于 PdfiumAndroid開始的,算是效果最好的庫了。但是apk提交增加也很明顯,配置ndk支持某種平臺后,apk大概增加3.5M多。但是AndroidPdfViewer不能直接加載網絡PDF文件,也不提供進度提示 。所以自己封裝了一個用于加載網絡PDF文檔,支持使用默認,自定義進度條的庫。PDF-load。具體實現查看開源庫中的LibPdf模塊。
使用:

<com.pds.pdf.core.ExtPDFView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pdfView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
  private void displayFromUrl(String url) {
      pdfFileName = FileUtils.getFileNameByUrl(url);
      pdfView.fromUrl(url)
              .defaultPage(pageNumber)
              .onPageChange(this)
              .enableAnnotationRendering(true)
              .onLoad(this)
              .scrollHandle(new DefaultScrollHandle(this))
              .spacing(10)
              .onPageError(this);
      pdfView.enableCache(true)
              .useDefaultProgressView().go();

效果如下:


截屏2020-10-25 下午4.26.04.png
  • 直接加載Asset,本地文件,參考AndroidPdfViewer

  • 使用默認進度條

    LibPdf支持進度顯示,LibPdf提供了默認的進度View,即在頂部顯示類似加載網頁一樣的進度條,調用useDefaultProgressView方法即可。

    添加自定義進度View,支持3哥方向,分別是加在PDF視圖的頂部,底部和疊在PDF視圖的上面,等PDF加載完成隱藏。

  • 自定義進度條

    LibPdf支持自定義進度條,調用addCustomProgress方法加入自己的進度View。

使用 騰訊X5瀏覽器

使用騰訊X5引擎加載PDF,doc等文件。如果項目中使用了騰訊X5引擎,那么可以直接使用pdf-x5庫瀏覽PDF,apk體積基本沒有什么增加,如果項目中沒有 使用X5引擎,要用pdf-x5加載PDF,那么需要先集成X5引擎,開源庫中的web庫提供的簡單的X5集成。

該庫一共支持幾十中文件加載,只需要傳入不同文件地址就可以了,下面是我測試的效果:

使用tbs加載:

截屏2020-10-26 下午6.53.32.png
  • pptx加載效果
截屏2020-10-26 下午6.54.40.png

使用QbSdk加載:

QbSdk加載支持的文件格式更多,具體參考騰訊X5官網

截屏2020-10-26 下午6.56.21.png

調用之后,優先調起 QQ 瀏覽器打開文件。如果沒有安裝 QQ 瀏覽器,在 X5 內核下調起簡版 QB 打開文件。如果使用的系統內核,則調起文件閱讀器彈框。

使用方法請參考PDF-load

SVG

大概思路就是把PDF文件轉成SVG,但是SVG需要大量的計算量,而且我目前是通過其它網站進行的PDF轉SVG

PDF轉其它格式文件

比如轉圖片等,這個自己研究。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。