在 Xamarin.Android 當中讀取 PDF 資料…II
主題: |
在 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,虛線框當中的元件為Button其Id為ReadPDFUsingWebViewButton。
操控介面的程式實際撰寫
• 打開專案底下的 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當中,找到之前設計的ReadPdfUsingWebViewButton的Click事件程式碼,加入切換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所提供的網頁介面的設計,畢竟讀取PDF的JavaScript都給你了,只要請會調整網頁的HTML、CSS的人處理頁面,介面的客製化應該不是什麼難事。
4. 參考來源
• PDF.js:
https:/ / mozilla.github.io/pdf.js/getting_started/