Xamarin Android PDF WebView

在 Xamarin.Android 當中讀取 PDF 資料…II

James Tsai 2017/03/31 11:01:41
656

主題

Xamarin.Android 當中讀取 PDF 資料II

文章簡介

平常我們在文件上使 PDF 作一些文件儲存格式,但遇到 Mobile App要讀取 PDF 的時候,就會常常不知該如何完成,那就讓本篇文章來指引如何在 Xamarin.Android 中完成PDF文件的讀取~~~

作者

James Tsai

版本/產出日期

V1.0/2017.3.29



1. 前言


由於PDF是個公開的格式,網路上有神人已經寫好利用JavaScript讀取PDF的元件。所以我們就可以來看看如何在 Xamarin.Android 當中,透過WebView搭配JavaScript來協助讀取PDF資料。並且除了讀取裝置上既有的PDF檔案外,也額外撰寫從既有的網址上下載PDF後讀取。


2. 環境準備


繼續延用 ”在 Xamarin.Android 當中讀取 PDF 資料…I” 所建立的專案來撰寫本篇的後續程式。





3. 本文


前置準備


PDF文件準備:

確認之前專案加入的PDF文件仍有放在 Xamarin.Android Asserts 中,如下圖:




https://mozilla.github.io/pdf.js/getting_started/ 下載PDF.js



下載好後,解壓縮後加入到 Xamarin.Android專案的Assert底下。




測試程式的 Layout 外觀的準備:

XamarinDroidForReadPdfFile專案,找到Resources -> layout當中打開Main.axml,將設計畫面處理成如下圖所示:



實線框當中的元件為Button Id CreatePDFFileFromWebUrlButton,虛線框當中的元件為ButtonIdReadPDFUsingWebViewButton


操控介面的程式實際撰寫


打開專案底下的 MainActivity.cs 來增加對應的程式碼。




首先先設定畫面按鈕與按鈕點選的事件註冊,如下圖程式碼:




在此測試的 App 其中的CreatePDFFromWebUrlButton功能是想要做到從已知的一個網路位址下載PDF檔案儲存Android手機的實體檔案路徑下圖展示實踐此功能的程式碼:




回到 CreatePDFFromWebUrlButton 按鈕Click事件的程式碼,呼叫此方法。




接著要繼續完成第二個DeletePDFFileButton按鈕的Click功能之前,我們先在專案建立一個新的Activity並且搭配設計一個Layout




打開剛剛加入專案的ReadPdfUsingWebView.axml 這個Layout檔,並且設計一個WebView元件,命名為LocalWebView,如下圖:




再到 ReadPdfUsingWebViewActivity這個 Activity OnCreate方法當中設計了呼叫ReadPdfByWebView的方法,如下圖:




另外,再到這個ReadPdfUsingWebViewActivity的類別宣告上方,將掛上Activity的類別屬性中的NoHistory設定為true




再回到MainActivity當中,找到之前設計的ReadPdfUsingWebViewButtonClick事件程式碼,加入切換Activity的程式碼




最後記得到此專案的屬性中,找到 Android 資訊清單,再增加設定所需要的網路權限Internet


測試執行與結果


開始測試之前,請先從 Visual Studio "工具" 選單當中,找到 "Android -> Android 裝置監視器"



"Android 裝置監視器" 當中,看到 "File Explorer" 分頁。




接著回到在 Visual Studio 當中執行測試該專案後,回到 "Android 裝置監視器" "File Explorer" 當中的 "data –> data" 底下,找到該測試專案 XamarinDroidForReadPdfFile.XamarinDroidForReadPdfFile 使用檔案的情形。




若看到的files資料夾裡有之前的PDF檔案存在的話,可以在執行起來的 App1透過之前建立的刪除按鈕刪除該PDF檔案,接著再點選CreatePDFFileFromWebUrl按鈕:



就會在 "File Explorer" 當中看到出現了 "MyPDFDemoFile.pdf "




接著再按下ReadPDFUsingWevView按鈕準備透過WebView讀取PDF




接著就會看到畫面切換並開啟所指定的PDF檔案。




以上就是Xamarin.Android專案上透過WebView讀取PDF檔案的簡單作法,若有不滿意該PDF.js所提供的網頁介面的設計,畢竟讀取PDFJavaScript都給你了,只要會調整網頁的HTMLCSS的人處理頁面,介面的客製化應該不是什麼難事。


4. 參考來源


PDF.js:
https:/ / mozilla.github.io/pdf.js/getting_started/

James Tsai